Sprint 4 : decisions et mandats -- workflow complet + vote integration
Backend: 7 nouveaux endpoints (advance, assign, revoke, create-vote-session), services enrichis avec creation de sessions de vote, assignation de mandataire et revocation. 35 nouveaux tests (104 total). Frontend: store mandates, page cadrage decisions, detail mandats, composants DecisionWorkflow, DecisionCadrage, DecisionCard, MandateTimeline, MandateCard. Documentation mise a jour. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
@@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { DecisionStep, DecisionStepCreate } from '~/stores/decisions'
|
||||
|
||||
const route = useRoute()
|
||||
const decisions = useDecisionsStore()
|
||||
|
||||
@@ -18,26 +20,36 @@ watch(decisionId, async (newId) => {
|
||||
}
|
||||
})
|
||||
|
||||
// --- Status helpers ---
|
||||
|
||||
const statusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
case 'in_progress': return 'success'
|
||||
case 'draft': return 'warning'
|
||||
case 'completed': return 'info'
|
||||
case 'qualification': return 'info'
|
||||
case 'review': return 'info'
|
||||
case 'voting': return 'primary'
|
||||
case 'executed': return 'success'
|
||||
case 'closed': return 'neutral'
|
||||
case 'pending': return 'warning'
|
||||
case 'active': return 'success'
|
||||
case 'in_progress': return 'success'
|
||||
case 'completed': return 'info'
|
||||
default: return 'neutral'
|
||||
}
|
||||
}
|
||||
|
||||
const statusLabel = (status: string) => {
|
||||
switch (status) {
|
||||
case 'draft': return 'Brouillon'
|
||||
case 'qualification': return 'Qualification'
|
||||
case 'review': return 'Revue'
|
||||
case 'voting': return 'En vote'
|
||||
case 'executed': return 'Execute'
|
||||
case 'closed': return 'Clos'
|
||||
case 'pending': return 'En attente'
|
||||
case 'active': return 'Actif'
|
||||
case 'in_progress': return 'En cours'
|
||||
case 'draft': return 'Brouillon'
|
||||
case 'completed': return 'Termine'
|
||||
case 'closed': return 'Ferme'
|
||||
case 'pending': return 'En attente'
|
||||
default: return status
|
||||
}
|
||||
}
|
||||
@@ -47,33 +59,12 @@ const typeLabel = (decisionType: string) => {
|
||||
case 'runtime_upgrade': return 'Runtime upgrade'
|
||||
case 'document_change': return 'Modification de document'
|
||||
case 'mandate_vote': return 'Vote de mandat'
|
||||
case 'custom': return 'Personnalise'
|
||||
case 'parameter_change': return 'Changement de parametre'
|
||||
case 'other': return 'Autre'
|
||||
default: return decisionType
|
||||
}
|
||||
}
|
||||
|
||||
const stepTypeLabel = (stepType: string) => {
|
||||
switch (stepType) {
|
||||
case 'qualification': return 'Qualification'
|
||||
case 'review': return 'Revue'
|
||||
case 'vote': return 'Vote'
|
||||
case 'execution': return 'Execution'
|
||||
case 'reporting': return 'Compte rendu'
|
||||
default: return stepType
|
||||
}
|
||||
}
|
||||
|
||||
const stepTypeIcon = (stepType: string) => {
|
||||
switch (stepType) {
|
||||
case 'qualification': return 'i-lucide-check-square'
|
||||
case 'review': return 'i-lucide-eye'
|
||||
case 'vote': return 'i-lucide-vote'
|
||||
case 'execution': return 'i-lucide-play'
|
||||
case 'reporting': return 'i-lucide-file-text'
|
||||
default: return 'i-lucide-circle'
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
return new Date(dateStr).toLocaleDateString('fr-FR', {
|
||||
day: 'numeric',
|
||||
@@ -82,10 +73,121 @@ function formatDate(dateStr: string): string {
|
||||
})
|
||||
}
|
||||
|
||||
const sortedSteps = computed(() => {
|
||||
if (!decisions.current) return []
|
||||
return [...decisions.current.steps].sort((a, b) => a.step_order - b.step_order)
|
||||
// --- Terminal state check ---
|
||||
|
||||
const terminalStatuses = ['executed', 'closed']
|
||||
const isTerminal = computed(() => {
|
||||
if (!decisions.current) return true
|
||||
return terminalStatuses.includes(decisions.current.status)
|
||||
})
|
||||
|
||||
const isDraft = computed(() => decisions.current?.status === 'draft')
|
||||
|
||||
// --- Advance action ---
|
||||
|
||||
const advancing = ref(false)
|
||||
|
||||
async function handleAdvance() {
|
||||
advancing.value = true
|
||||
try {
|
||||
await decisions.advance(decisionId.value)
|
||||
} catch {
|
||||
// Error handled by store
|
||||
} finally {
|
||||
advancing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Create vote session ---
|
||||
|
||||
async function handleCreateVoteSession(step: DecisionStep) {
|
||||
try {
|
||||
await decisions.createVoteSession(decisionId.value, step.id)
|
||||
} catch {
|
||||
// Error handled by store
|
||||
}
|
||||
}
|
||||
|
||||
// --- Edit modal ---
|
||||
|
||||
const showEditModal = ref(false)
|
||||
const editData = ref({
|
||||
title: '',
|
||||
description: '' as string | null,
|
||||
context: '' as string | null,
|
||||
})
|
||||
const saving = ref(false)
|
||||
|
||||
function openEdit() {
|
||||
if (!decisions.current) return
|
||||
editData.value = {
|
||||
title: decisions.current.title,
|
||||
description: decisions.current.description,
|
||||
context: decisions.current.context,
|
||||
}
|
||||
showEditModal.value = true
|
||||
}
|
||||
|
||||
async function saveEdit() {
|
||||
saving.value = true
|
||||
try {
|
||||
await decisions.update(decisionId.value, editData.value)
|
||||
showEditModal.value = false
|
||||
} catch {
|
||||
// Error handled by store
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Delete ---
|
||||
|
||||
const showDeleteConfirm = ref(false)
|
||||
const deleting = ref(false)
|
||||
|
||||
async function handleDelete() {
|
||||
deleting.value = true
|
||||
try {
|
||||
await decisions.delete(decisionId.value)
|
||||
navigateTo('/decisions')
|
||||
} catch {
|
||||
// Error handled by store
|
||||
} finally {
|
||||
deleting.value = false
|
||||
showDeleteConfirm.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Add step ---
|
||||
|
||||
const showAddStep = ref(false)
|
||||
const newStep = ref<DecisionStepCreate>({
|
||||
step_type: 'qualification',
|
||||
title: '',
|
||||
description: '',
|
||||
})
|
||||
const addingStep = ref(false)
|
||||
|
||||
const stepTypeOptions = [
|
||||
{ label: 'Qualification', value: 'qualification' },
|
||||
{ label: 'Revue', value: 'review' },
|
||||
{ label: 'Vote', value: 'vote' },
|
||||
{ label: 'Execution', value: 'execution' },
|
||||
{ label: 'Compte rendu', value: 'reporting' },
|
||||
]
|
||||
|
||||
async function handleAddStep() {
|
||||
addingStep.value = true
|
||||
try {
|
||||
await decisions.addStep(decisionId.value, newStep.value)
|
||||
showAddStep.value = false
|
||||
newStep.value = { step_type: 'qualification', title: '', description: '' }
|
||||
} catch {
|
||||
// Error handled by store
|
||||
} finally {
|
||||
addingStep.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -125,18 +227,51 @@ const sortedSteps = computed(() => {
|
||||
|
||||
<!-- Decision detail -->
|
||||
<template v-else-if="decisions.current">
|
||||
<!-- Header -->
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{{ decisions.current.title }}
|
||||
</h1>
|
||||
<div class="flex items-center gap-3 mt-2">
|
||||
<UBadge variant="subtle" color="primary">
|
||||
{{ typeLabel(decisions.current.decision_type) }}
|
||||
</UBadge>
|
||||
<UBadge :color="statusColor(decisions.current.status)" variant="subtle">
|
||||
{{ statusLabel(decisions.current.status) }}
|
||||
</UBadge>
|
||||
<!-- Header with actions -->
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{{ decisions.current.title }}
|
||||
</h1>
|
||||
<div class="flex items-center gap-3 mt-2">
|
||||
<UBadge variant="subtle" color="primary">
|
||||
{{ typeLabel(decisions.current.decision_type) }}
|
||||
</UBadge>
|
||||
<UBadge :color="statusColor(decisions.current.status)" variant="subtle">
|
||||
{{ statusLabel(decisions.current.status) }}
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="flex items-center gap-2">
|
||||
<UButton
|
||||
v-if="!isTerminal"
|
||||
icon="i-lucide-fast-forward"
|
||||
label="Avancer la decision"
|
||||
color="primary"
|
||||
variant="soft"
|
||||
size="sm"
|
||||
:loading="advancing"
|
||||
@click="handleAdvance"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-pen-line"
|
||||
label="Modifier"
|
||||
variant="soft"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
@click="openEdit"
|
||||
/>
|
||||
<UButton
|
||||
v-if="isDraft"
|
||||
icon="i-lucide-trash-2"
|
||||
label="Supprimer"
|
||||
variant="soft"
|
||||
color="error"
|
||||
size="sm"
|
||||
@click="showDeleteConfirm = true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -184,88 +319,146 @@ const sortedSteps = computed(() => {
|
||||
|
||||
<!-- Steps timeline -->
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
Etapes du processus
|
||||
</h2>
|
||||
|
||||
<div v-if="sortedSteps.length === 0" class="text-center py-8">
|
||||
<UIcon name="i-lucide-list-checks" class="text-4xl text-gray-400 mb-3" />
|
||||
<p class="text-gray-500">Aucune etape definie pour cette decision</p>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Etapes du processus
|
||||
</h2>
|
||||
<UButton
|
||||
v-if="!isTerminal"
|
||||
icon="i-lucide-plus"
|
||||
label="Ajouter une etape"
|
||||
variant="soft"
|
||||
color="primary"
|
||||
size="sm"
|
||||
@click="showAddStep = true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else class="relative">
|
||||
<!-- Timeline line -->
|
||||
<div class="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700" />
|
||||
|
||||
<!-- Steps -->
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-for="(step, index) in sortedSteps"
|
||||
:key="step.id"
|
||||
class="relative pl-12"
|
||||
>
|
||||
<!-- Timeline dot -->
|
||||
<div
|
||||
class="absolute left-2 w-5 h-5 rounded-full border-2 flex items-center justify-center"
|
||||
:class="{
|
||||
'bg-green-500 border-green-500': step.status === 'completed',
|
||||
'bg-primary border-primary': step.status === 'active' || step.status === 'in_progress',
|
||||
'bg-yellow-400 border-yellow-400': step.status === 'pending',
|
||||
'bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-600': step.status === 'draft',
|
||||
}"
|
||||
>
|
||||
<UIcon
|
||||
v-if="step.status === 'completed'"
|
||||
name="i-lucide-check"
|
||||
class="text-white text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<UCard>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon :name="stepTypeIcon(step.step_type)" class="text-gray-500" />
|
||||
<span class="text-sm font-mono text-gray-400">Etape {{ step.step_order }}</span>
|
||||
<UBadge variant="subtle" color="neutral" size="xs">
|
||||
{{ stepTypeLabel(step.step_type) }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<UBadge :color="statusColor(step.status)" variant="subtle" size="xs">
|
||||
{{ statusLabel(step.status) }}
|
||||
</UBadge>
|
||||
</div>
|
||||
|
||||
<h3 v-if="step.title" class="font-medium text-gray-900 dark:text-white">
|
||||
{{ step.title }}
|
||||
</h3>
|
||||
|
||||
<p v-if="step.description" class="text-sm text-gray-600 dark:text-gray-400">
|
||||
{{ step.description }}
|
||||
</p>
|
||||
|
||||
<div v-if="step.outcome" class="flex items-center gap-2 mt-2">
|
||||
<UIcon name="i-lucide-flag" class="text-gray-400" />
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Resultat : {{ step.outcome }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="step.vote_session_id" class="mt-2">
|
||||
<UButton
|
||||
size="xs"
|
||||
variant="soft"
|
||||
color="primary"
|
||||
icon="i-lucide-vote"
|
||||
label="Voir la session de vote"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DecisionsDecisionWorkflow
|
||||
:steps="decisions.current.steps"
|
||||
:current-status="decisions.current.status"
|
||||
@create-vote-session="handleCreateVoteSession"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Edit modal -->
|
||||
<UModal v-model:open="showEditModal">
|
||||
<template #content>
|
||||
<div class="p-6 space-y-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Modifier la decision
|
||||
</h3>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Titre</label>
|
||||
<UInput v-model="editData.title" />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
|
||||
<UTextarea v-model="editData.description" :rows="4" />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Contexte</label>
|
||||
<UTextarea v-model="editData.context" :rows="3" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<UButton
|
||||
label="Annuler"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
@click="showEditModal = false"
|
||||
/>
|
||||
<UButton
|
||||
label="Enregistrer"
|
||||
icon="i-lucide-save"
|
||||
color="primary"
|
||||
:loading="saving"
|
||||
:disabled="!editData.title?.trim()"
|
||||
@click="saveEdit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
|
||||
<!-- Delete confirmation modal -->
|
||||
<UModal v-model:open="showDeleteConfirm">
|
||||
<template #content>
|
||||
<div class="p-6 space-y-4">
|
||||
<h3 class="text-lg font-semibold text-red-600">
|
||||
Confirmer la suppression
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Etes-vous sur de vouloir supprimer cette decision ? Cette action est irreversible.
|
||||
</p>
|
||||
<div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<UButton
|
||||
label="Annuler"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
@click="showDeleteConfirm = false"
|
||||
/>
|
||||
<UButton
|
||||
label="Supprimer"
|
||||
icon="i-lucide-trash-2"
|
||||
color="error"
|
||||
:loading="deleting"
|
||||
@click="handleDelete"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
|
||||
<!-- Add step modal -->
|
||||
<UModal v-model:open="showAddStep">
|
||||
<template #content>
|
||||
<div class="p-6 space-y-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Ajouter une etape
|
||||
</h3>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Type d'etape <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<USelect
|
||||
v-model="newStep.step_type"
|
||||
:items="stepTypeOptions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Titre</label>
|
||||
<UInput v-model="newStep.title" placeholder="Titre de l'etape..." />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
|
||||
<UTextarea v-model="newStep.description" :rows="3" placeholder="Description de l'etape..." />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<UButton
|
||||
label="Annuler"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
@click="showAddStep = false"
|
||||
/>
|
||||
<UButton
|
||||
label="Ajouter"
|
||||
icon="i-lucide-plus"
|
||||
color="primary"
|
||||
:loading="addingStep"
|
||||
@click="handleAddStep"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -9,16 +9,18 @@ const typeOptions = [
|
||||
{ label: 'Runtime upgrade', value: 'runtime_upgrade' },
|
||||
{ label: 'Modification de document', value: 'document_change' },
|
||||
{ label: 'Vote de mandat', value: 'mandate_vote' },
|
||||
{ label: 'Personnalise', value: 'custom' },
|
||||
{ label: 'Changement de parametre', value: 'parameter_change' },
|
||||
{ label: 'Autre', value: 'other' },
|
||||
]
|
||||
|
||||
const statusOptions = [
|
||||
{ label: 'Tous les statuts', value: undefined },
|
||||
{ label: 'Brouillon', value: 'draft' },
|
||||
{ label: 'En cours', value: 'in_progress' },
|
||||
{ label: 'Actif', value: 'active' },
|
||||
{ label: 'Termine', value: 'completed' },
|
||||
{ label: 'Ferme', value: 'closed' },
|
||||
{ label: 'Qualification', value: 'qualification' },
|
||||
{ label: 'Revue', value: 'review' },
|
||||
{ label: 'En vote', value: 'voting' },
|
||||
{ label: 'Execute', value: 'executed' },
|
||||
{ label: 'Clos', value: 'closed' },
|
||||
]
|
||||
|
||||
async function loadDecisions() {
|
||||
@@ -38,10 +40,11 @@ watch([filterType, filterStatus], () => {
|
||||
|
||||
const statusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
case 'in_progress': return 'success'
|
||||
case 'draft': return 'warning'
|
||||
case 'completed': return 'info'
|
||||
case 'qualification': return 'info'
|
||||
case 'review': return 'info'
|
||||
case 'voting': return 'primary'
|
||||
case 'executed': return 'success'
|
||||
case 'closed': return 'neutral'
|
||||
default: return 'neutral'
|
||||
}
|
||||
@@ -49,11 +52,12 @@ const statusColor = (status: string) => {
|
||||
|
||||
const statusLabel = (status: string) => {
|
||||
switch (status) {
|
||||
case 'active': return 'Actif'
|
||||
case 'in_progress': return 'En cours'
|
||||
case 'draft': return 'Brouillon'
|
||||
case 'completed': return 'Termine'
|
||||
case 'closed': return 'Ferme'
|
||||
case 'qualification': return 'Qualification'
|
||||
case 'review': return 'Revue'
|
||||
case 'voting': return 'En vote'
|
||||
case 'executed': return 'Execute'
|
||||
case 'closed': return 'Clos'
|
||||
default: return status
|
||||
}
|
||||
}
|
||||
@@ -63,7 +67,8 @@ const typeLabel = (decisionType: string) => {
|
||||
case 'runtime_upgrade': return 'Runtime upgrade'
|
||||
case 'document_change': return 'Modif. document'
|
||||
case 'mandate_vote': return 'Vote de mandat'
|
||||
case 'custom': return 'Personnalise'
|
||||
case 'parameter_change': return 'Param. change'
|
||||
case 'other': return 'Autre'
|
||||
default: return decisionType
|
||||
}
|
||||
}
|
||||
@@ -80,13 +85,21 @@ function formatDate(dateStr: string): string {
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<!-- Header -->
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Decisions
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
Processus de decision collectifs de la communaute
|
||||
</p>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Decisions
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
Processus de decision collectifs de la communaute
|
||||
</p>
|
||||
</div>
|
||||
<UButton
|
||||
to="/decisions/new"
|
||||
icon="i-lucide-plus"
|
||||
label="Nouvelle decision"
|
||||
color="primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
|
||||
72
frontend/app/pages/decisions/new.vue
Normal file
72
frontend/app/pages/decisions/new.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<script setup lang="ts">
|
||||
import type { DecisionCreate } from '~/stores/decisions'
|
||||
|
||||
const decisions = useDecisionsStore()
|
||||
|
||||
const formData = ref<DecisionCreate>({
|
||||
title: '',
|
||||
description: '',
|
||||
context: '',
|
||||
decision_type: 'other',
|
||||
voting_protocol_id: null,
|
||||
})
|
||||
|
||||
const submitting = ref(false)
|
||||
|
||||
async function onSubmit() {
|
||||
submitting.value = true
|
||||
try {
|
||||
const decision = await decisions.create(formData.value)
|
||||
if (decision) {
|
||||
navigateTo(`/decisions/${decision.id}`)
|
||||
}
|
||||
} catch {
|
||||
// Error is handled by the store
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<!-- Back link -->
|
||||
<div>
|
||||
<UButton
|
||||
to="/decisions"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
icon="i-lucide-arrow-left"
|
||||
label="Retour aux decisions"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Nouvelle decision
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
Cadrage d'un nouveau processus de decision collectif
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Error -->
|
||||
<UCard v-if="decisions.error">
|
||||
<div class="flex items-center gap-3 text-red-500">
|
||||
<UIcon name="i-lucide-alert-circle" class="text-xl" />
|
||||
<p>{{ decisions.error }}</p>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Form -->
|
||||
<UCard>
|
||||
<DecisionsDecisionCadrage
|
||||
v-model="formData"
|
||||
:submitting="submitting"
|
||||
@submit="onSubmit"
|
||||
/>
|
||||
</UCard>
|
||||
</div>
|
||||
</template>
|
||||
471
frontend/app/pages/mandates/[id].vue
Normal file
471
frontend/app/pages/mandates/[id].vue
Normal file
@@ -0,0 +1,471 @@
|
||||
<script setup lang="ts">
|
||||
const route = useRoute()
|
||||
const mandates = useMandatesStore()
|
||||
|
||||
const mandateId = computed(() => route.params.id as string)
|
||||
|
||||
onMounted(async () => {
|
||||
await mandates.fetchById(mandateId.value)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
mandates.clearCurrent()
|
||||
})
|
||||
|
||||
watch(mandateId, async (newId) => {
|
||||
if (newId) {
|
||||
await mandates.fetchById(newId)
|
||||
}
|
||||
})
|
||||
|
||||
// --- Status helpers ---
|
||||
|
||||
const typeLabel = (mandateType: string) => {
|
||||
switch (mandateType) {
|
||||
case 'techcomm': return 'Comite technique'
|
||||
case 'smith': return 'Forgeron'
|
||||
case 'custom': return 'Personnalise'
|
||||
default: return mandateType
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string | null): string {
|
||||
if (!dateStr) return '-'
|
||||
return new Date(dateStr).toLocaleDateString('fr-FR', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
// --- Terminal state check ---
|
||||
|
||||
const terminalStatuses = ['completed', 'revoked']
|
||||
const isTerminal = computed(() => {
|
||||
if (!mandates.current) return true
|
||||
return terminalStatuses.includes(mandates.current.status)
|
||||
})
|
||||
|
||||
const canRevoke = computed(() => {
|
||||
if (!mandates.current) return false
|
||||
return mandates.current.status === 'active'
|
||||
})
|
||||
|
||||
// --- Advance action ---
|
||||
|
||||
const advancing = ref(false)
|
||||
|
||||
async function handleAdvance() {
|
||||
advancing.value = true
|
||||
try {
|
||||
await mandates.advance(mandateId.value)
|
||||
} catch {
|
||||
// Error handled by store
|
||||
} finally {
|
||||
advancing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Assign mandatee ---
|
||||
|
||||
const showAssignModal = ref(false)
|
||||
const mandateeAddress = ref('')
|
||||
const assigning = ref(false)
|
||||
|
||||
async function handleAssign() {
|
||||
if (!mandateeAddress.value.trim()) return
|
||||
assigning.value = true
|
||||
try {
|
||||
await mandates.assignMandatee(mandateId.value, mandateeAddress.value.trim())
|
||||
showAssignModal.value = false
|
||||
mandateeAddress.value = ''
|
||||
} catch {
|
||||
// Error handled by store
|
||||
} finally {
|
||||
assigning.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Revoke ---
|
||||
|
||||
const showRevokeConfirm = ref(false)
|
||||
const revoking = ref(false)
|
||||
|
||||
async function handleRevoke() {
|
||||
revoking.value = true
|
||||
try {
|
||||
await mandates.revoke(mandateId.value)
|
||||
showRevokeConfirm.value = false
|
||||
} catch {
|
||||
// Error handled by store
|
||||
} finally {
|
||||
revoking.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Edit modal ---
|
||||
|
||||
const showEditModal = ref(false)
|
||||
const editData = ref({
|
||||
title: '',
|
||||
description: '' as string | null,
|
||||
})
|
||||
const saving = ref(false)
|
||||
|
||||
function openEdit() {
|
||||
if (!mandates.current) return
|
||||
editData.value = {
|
||||
title: mandates.current.title,
|
||||
description: mandates.current.description,
|
||||
}
|
||||
showEditModal.value = true
|
||||
}
|
||||
|
||||
async function saveEdit() {
|
||||
saving.value = true
|
||||
try {
|
||||
await mandates.update(mandateId.value, editData.value)
|
||||
showEditModal.value = false
|
||||
} catch {
|
||||
// Error handled by store
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Delete ---
|
||||
|
||||
const showDeleteConfirm = ref(false)
|
||||
const deleting = ref(false)
|
||||
const isDraft = computed(() => mandates.current?.status === 'draft')
|
||||
|
||||
async function handleDelete() {
|
||||
deleting.value = true
|
||||
try {
|
||||
await mandates.delete(mandateId.value)
|
||||
navigateTo('/mandates')
|
||||
} catch {
|
||||
// Error handled by store
|
||||
} finally {
|
||||
deleting.value = false
|
||||
showDeleteConfirm.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<!-- Back link -->
|
||||
<div>
|
||||
<UButton
|
||||
to="/mandates"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
icon="i-lucide-arrow-left"
|
||||
label="Retour aux mandats"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
<template v-if="mandates.loading">
|
||||
<div class="space-y-4">
|
||||
<USkeleton class="h-8 w-96" />
|
||||
<USkeleton class="h-4 w-64" />
|
||||
<div class="space-y-3 mt-8">
|
||||
<USkeleton v-for="i in 4" :key="i" class="h-20 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Error state -->
|
||||
<template v-else-if="mandates.error">
|
||||
<UCard>
|
||||
<div class="flex items-center gap-3 text-red-500">
|
||||
<UIcon name="i-lucide-alert-circle" class="text-xl" />
|
||||
<p>{{ mandates.error }}</p>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<!-- Mandate detail -->
|
||||
<template v-else-if="mandates.current">
|
||||
<!-- Header with actions -->
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{{ mandates.current.title }}
|
||||
</h1>
|
||||
<div class="flex items-center gap-3 mt-2">
|
||||
<UBadge variant="subtle" color="primary">
|
||||
{{ typeLabel(mandates.current.mandate_type) }}
|
||||
</UBadge>
|
||||
<CommonStatusBadge :status="mandates.current.status" type="mandate" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="flex items-center gap-2">
|
||||
<UButton
|
||||
v-if="!isTerminal"
|
||||
icon="i-lucide-fast-forward"
|
||||
label="Avancer"
|
||||
color="primary"
|
||||
variant="soft"
|
||||
size="sm"
|
||||
:loading="advancing"
|
||||
@click="handleAdvance"
|
||||
/>
|
||||
<UButton
|
||||
v-if="!isTerminal && !mandates.current.mandatee_id"
|
||||
icon="i-lucide-user-plus"
|
||||
label="Assigner un mandataire"
|
||||
variant="soft"
|
||||
color="primary"
|
||||
size="sm"
|
||||
@click="showAssignModal = true"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-pen-line"
|
||||
label="Modifier"
|
||||
variant="soft"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
@click="openEdit"
|
||||
/>
|
||||
<UButton
|
||||
v-if="canRevoke"
|
||||
icon="i-lucide-shield-off"
|
||||
label="Revoquer"
|
||||
variant="soft"
|
||||
color="error"
|
||||
size="sm"
|
||||
@click="showRevokeConfirm = true"
|
||||
/>
|
||||
<UButton
|
||||
v-if="isDraft"
|
||||
icon="i-lucide-trash-2"
|
||||
label="Supprimer"
|
||||
variant="soft"
|
||||
color="error"
|
||||
size="sm"
|
||||
@click="showDeleteConfirm = true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<UCard v-if="mandates.current.description">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-1">Description</h3>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
|
||||
{{ mandates.current.description }}
|
||||
</p>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Metadata -->
|
||||
<UCard>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<p class="text-gray-500">Mandataire</p>
|
||||
<p class="font-medium text-gray-900 dark:text-white">
|
||||
<template v-if="mandates.current.mandatee_id">
|
||||
<span class="font-mono text-xs">{{ mandates.current.mandatee_id.slice(0, 12) }}...</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="text-gray-400 italic">Non assigne</span>
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500">Debut</p>
|
||||
<p class="font-medium text-gray-900 dark:text-white">
|
||||
{{ formatDate(mandates.current.starts_at) }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500">Fin</p>
|
||||
<p class="font-medium text-gray-900 dark:text-white">
|
||||
{{ formatDate(mandates.current.ends_at) }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500">Nombre d'etapes</p>
|
||||
<p class="font-medium text-gray-900 dark:text-white">
|
||||
{{ mandates.current.steps.length }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Dates metadata -->
|
||||
<UCard>
|
||||
<div class="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p class="text-gray-500">Cree le</p>
|
||||
<p class="font-medium text-gray-900 dark:text-white">
|
||||
{{ formatDate(mandates.current.created_at) }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500">Mis a jour le</p>
|
||||
<p class="font-medium text-gray-900 dark:text-white">
|
||||
{{ formatDate(mandates.current.updated_at) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Steps timeline -->
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
Etapes du mandat
|
||||
</h2>
|
||||
|
||||
<MandatesMandateTimeline
|
||||
:steps="mandates.current.steps"
|
||||
:current-status="mandates.current.status"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Assign mandatee modal -->
|
||||
<UModal v-model:open="showAssignModal">
|
||||
<template #content>
|
||||
<div class="p-6 space-y-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Assigner un mandataire
|
||||
</h3>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Adresse du mandataire <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<UInput
|
||||
v-model="mandateeAddress"
|
||||
placeholder="Adresse Duniter (ex: 5Grw...)
|
||||
"
|
||||
/>
|
||||
<p class="text-xs text-gray-500">
|
||||
Adresse SS58 du membre de la toile de confiance
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<UButton
|
||||
label="Annuler"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
@click="showAssignModal = false"
|
||||
/>
|
||||
<UButton
|
||||
label="Assigner"
|
||||
icon="i-lucide-user-plus"
|
||||
color="primary"
|
||||
:loading="assigning"
|
||||
:disabled="!mandateeAddress.trim()"
|
||||
@click="handleAssign"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
|
||||
<!-- Revoke confirmation modal -->
|
||||
<UModal v-model:open="showRevokeConfirm">
|
||||
<template #content>
|
||||
<div class="p-6 space-y-4">
|
||||
<h3 class="text-lg font-semibold text-red-600">
|
||||
Confirmer la revocation
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Etes-vous sur de vouloir revoquer ce mandat ? Le mandataire perdra ses droits et responsabilites.
|
||||
</p>
|
||||
<div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<UButton
|
||||
label="Annuler"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
@click="showRevokeConfirm = false"
|
||||
/>
|
||||
<UButton
|
||||
label="Revoquer"
|
||||
icon="i-lucide-shield-off"
|
||||
color="error"
|
||||
:loading="revoking"
|
||||
@click="handleRevoke"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
|
||||
<!-- Edit modal -->
|
||||
<UModal v-model:open="showEditModal">
|
||||
<template #content>
|
||||
<div class="p-6 space-y-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Modifier le mandat
|
||||
</h3>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Titre</label>
|
||||
<UInput v-model="editData.title" />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
|
||||
<UTextarea v-model="editData.description" :rows="4" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<UButton
|
||||
label="Annuler"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
@click="showEditModal = false"
|
||||
/>
|
||||
<UButton
|
||||
label="Enregistrer"
|
||||
icon="i-lucide-save"
|
||||
color="primary"
|
||||
:loading="saving"
|
||||
:disabled="!editData.title?.trim()"
|
||||
@click="saveEdit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
|
||||
<!-- Delete confirmation modal -->
|
||||
<UModal v-model:open="showDeleteConfirm">
|
||||
<template #content>
|
||||
<div class="p-6 space-y-4">
|
||||
<h3 class="text-lg font-semibold text-red-600">
|
||||
Confirmer la suppression
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Etes-vous sur de vouloir supprimer ce mandat ? Cette action est irreversible.
|
||||
</p>
|
||||
<div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<UButton
|
||||
label="Annuler"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
@click="showDeleteConfirm = false"
|
||||
/>
|
||||
<UButton
|
||||
label="Supprimer"
|
||||
icon="i-lucide-trash-2"
|
||||
color="error"
|
||||
:loading="deleting"
|
||||
@click="handleDelete"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,37 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
const { $api } = useApi()
|
||||
import type { MandateCreate } from '~/stores/mandates'
|
||||
|
||||
interface MandateStep {
|
||||
id: string
|
||||
mandate_id: string
|
||||
step_order: number
|
||||
step_type: string
|
||||
title: string | null
|
||||
description: string | null
|
||||
status: string
|
||||
vote_session_id: string | null
|
||||
outcome: string | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
interface Mandate {
|
||||
id: string
|
||||
title: string
|
||||
description: string | null
|
||||
mandate_type: string
|
||||
status: string
|
||||
mandatee_id: string | null
|
||||
decision_id: string | null
|
||||
starts_at: string | null
|
||||
ends_at: string | null
|
||||
created_at: string
|
||||
updated_at: string
|
||||
steps: MandateStep[]
|
||||
}
|
||||
|
||||
const mandates = ref<Mandate[]>([])
|
||||
const loading = ref(true)
|
||||
const error = ref<string | null>(null)
|
||||
const mandates = useMandatesStore()
|
||||
|
||||
const filterType = ref<string | undefined>(undefined)
|
||||
const filterStatus = ref<string | undefined>(undefined)
|
||||
@@ -46,26 +16,19 @@ const typeOptions = [
|
||||
const statusOptions = [
|
||||
{ label: 'Tous les statuts', value: undefined },
|
||||
{ label: 'Brouillon', value: 'draft' },
|
||||
{ label: 'Candidature', value: 'candidacy' },
|
||||
{ label: 'En vote', value: 'voting' },
|
||||
{ label: 'Actif', value: 'active' },
|
||||
{ label: 'Expire', value: 'expired' },
|
||||
{ label: 'Rapport', value: 'reporting' },
|
||||
{ label: 'Termine', value: 'completed' },
|
||||
{ label: 'Revoque', value: 'revoked' },
|
||||
]
|
||||
|
||||
async function loadMandates() {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const query: Record<string, string> = {}
|
||||
if (filterType.value) query.mandate_type = filterType.value
|
||||
if (filterStatus.value) query.status = filterStatus.value
|
||||
|
||||
mandates.value = await $api<Mandate[]>('/mandates/', { query })
|
||||
} catch (err: any) {
|
||||
error.value = err?.data?.detail || err?.message || 'Erreur lors du chargement des mandats'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
await mandates.fetchAll({
|
||||
mandate_type: filterType.value,
|
||||
status: filterStatus.value,
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@@ -76,55 +39,57 @@ watch([filterType, filterStatus], () => {
|
||||
loadMandates()
|
||||
})
|
||||
|
||||
const statusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'active': return 'success'
|
||||
case 'draft': return 'warning'
|
||||
case 'expired': return 'neutral'
|
||||
case 'revoked': return 'error'
|
||||
default: return 'neutral'
|
||||
}
|
||||
}
|
||||
// --- Create mandate modal ---
|
||||
|
||||
const statusLabel = (status: string) => {
|
||||
switch (status) {
|
||||
case 'active': return 'Actif'
|
||||
case 'draft': return 'Brouillon'
|
||||
case 'expired': return 'Expire'
|
||||
case 'revoked': return 'Revoque'
|
||||
default: return status
|
||||
}
|
||||
}
|
||||
const showCreateModal = ref(false)
|
||||
const mandateTypeOptions = [
|
||||
{ label: 'Comite technique', value: 'techcomm' },
|
||||
{ label: 'Forgeron', value: 'smith' },
|
||||
{ label: 'Personnalise', value: 'custom' },
|
||||
]
|
||||
|
||||
const typeLabel = (mandateType: string) => {
|
||||
switch (mandateType) {
|
||||
case 'techcomm': return 'Comite technique'
|
||||
case 'smith': return 'Forgeron'
|
||||
case 'custom': return 'Personnalise'
|
||||
default: return mandateType
|
||||
}
|
||||
}
|
||||
const newMandate = ref<MandateCreate>({
|
||||
title: '',
|
||||
description: '',
|
||||
mandate_type: 'techcomm',
|
||||
})
|
||||
const creating = ref(false)
|
||||
|
||||
function formatDate(dateStr: string | null): string {
|
||||
if (!dateStr) return '-'
|
||||
return new Date(dateStr).toLocaleDateString('fr-FR', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
})
|
||||
async function handleCreate() {
|
||||
creating.value = true
|
||||
try {
|
||||
const mandate = await mandates.create(newMandate.value)
|
||||
showCreateModal.value = false
|
||||
newMandate.value = { title: '', description: '', mandate_type: 'techcomm' }
|
||||
if (mandate) {
|
||||
navigateTo(`/mandates/${mandate.id}`)
|
||||
}
|
||||
} catch {
|
||||
// Error handled by store
|
||||
} finally {
|
||||
creating.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<!-- Header -->
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Mandats
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
Mandats de gouvernance : comite technique, forgerons et roles specifiques
|
||||
</p>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Mandats
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
Mandats de gouvernance : comite technique, forgerons et roles specifiques
|
||||
</p>
|
||||
</div>
|
||||
<UButton
|
||||
icon="i-lucide-plus"
|
||||
label="Nouveau mandat"
|
||||
color="primary"
|
||||
@click="showCreateModal = true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
@@ -144,24 +109,24 @@ function formatDate(dateStr: string | null): string {
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
<template v-if="loading">
|
||||
<template v-if="mandates.loading">
|
||||
<div class="space-y-3">
|
||||
<USkeleton v-for="i in 4" :key="i" class="h-12 w-full" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Error state -->
|
||||
<template v-else-if="error">
|
||||
<template v-else-if="mandates.error">
|
||||
<UCard>
|
||||
<div class="flex items-center gap-3 text-red-500">
|
||||
<UIcon name="i-lucide-alert-circle" class="text-xl" />
|
||||
<p>{{ error }}</p>
|
||||
<p>{{ mandates.error }}</p>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<!-- Empty state -->
|
||||
<template v-else-if="mandates.length === 0">
|
||||
<template v-else-if="mandates.list.length === 0">
|
||||
<UCard>
|
||||
<div class="text-center py-8">
|
||||
<UIcon name="i-lucide-user-check" class="text-4xl text-gray-400 mb-3" />
|
||||
@@ -173,50 +138,72 @@ function formatDate(dateStr: string | null): string {
|
||||
<!-- Mandates list -->
|
||||
<template v-else>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<UCard
|
||||
v-for="mandate in mandates"
|
||||
<MandatesMandateCard
|
||||
v-for="mandate in mandates.list"
|
||||
:key="mandate.id"
|
||||
class="hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-lucide-user-check" class="text-gray-400" />
|
||||
<h3 class="font-semibold text-gray-900 dark:text-white">
|
||||
{{ mandate.title }}
|
||||
</h3>
|
||||
</div>
|
||||
<UBadge :color="statusColor(mandate.status)" variant="subtle" size="xs">
|
||||
{{ statusLabel(mandate.status) }}
|
||||
</UBadge>
|
||||
</div>
|
||||
|
||||
<p v-if="mandate.description" class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
|
||||
{{ mandate.description }}
|
||||
</p>
|
||||
|
||||
<div class="flex items-center gap-3 flex-wrap">
|
||||
<UBadge variant="subtle" color="primary" size="xs">
|
||||
{{ typeLabel(mandate.mandate_type) }}
|
||||
</UBadge>
|
||||
<span class="text-xs text-gray-500">
|
||||
{{ mandate.steps.length }} etape(s)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2 text-xs text-gray-500">
|
||||
<div>
|
||||
<span class="block font-medium">Debut</span>
|
||||
{{ formatDate(mandate.starts_at) }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="block font-medium">Fin</span>
|
||||
{{ formatDate(mandate.ends_at) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
:mandate="mandate"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Create mandate modal -->
|
||||
<UModal v-model:open="showCreateModal">
|
||||
<template #content>
|
||||
<form class="p-6 space-y-4" @submit.prevent="handleCreate">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Nouveau mandat
|
||||
</h3>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Titre <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<UInput
|
||||
v-model="newMandate.title"
|
||||
placeholder="Titre du mandat..."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Description
|
||||
</label>
|
||||
<UTextarea
|
||||
v-model="newMandate.description"
|
||||
placeholder="Description du mandat..."
|
||||
:rows="3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Type de mandat <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<USelect
|
||||
v-model="newMandate.mandate_type"
|
||||
:items="mandateTypeOptions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<UButton
|
||||
label="Annuler"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
@click="showCreateModal = false"
|
||||
/>
|
||||
<UButton
|
||||
type="submit"
|
||||
label="Creer"
|
||||
icon="i-lucide-plus"
|
||||
color="primary"
|
||||
:loading="creating"
|
||||
:disabled="!newMandate.title?.trim()"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user