77dceb49c3
- Systeme de themes adaptatifs : Peps (light chaud), Zen (light calme), Chagrine (dark violet), Grave (dark ambre) avec CSS custom properties - Dashboard d'accueil orienté onboarding avec cartes-portes et teaser boite a outils - SectionLayout reutilisable : liste + sidebar toolbox + status pills cliquables (En prepa / En vote / En vigueur / Clos) - ToolboxVignette : vignettes Contexte / Tutos / Choisir / Demarrer - Seed : Acte engagement certification + forgeron, Runtime Upgrade (decision on-chain), 3 modalites de vote (majoritaire, quadratique, permanent) - Backend adapte SQLite (Uuid portable, 204 fix, pool conditionnel) - Correction noms composants (pathPrefix: false), pinia/nuxt ^0.11 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
83 lines
2.3 KiB
Vue
83 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* Card component for displaying a mandate in a list.
|
|
*
|
|
* Shows title, type badge, status badge, mandatee, date range.
|
|
* Navigates to the mandate detail page on click.
|
|
*/
|
|
import type { Mandate } from '~/stores/mandates'
|
|
|
|
const props = defineProps<{
|
|
mandate: Mandate
|
|
}>()
|
|
|
|
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: 'short',
|
|
year: 'numeric',
|
|
})
|
|
}
|
|
|
|
function navigate() {
|
|
navigateTo(`/mandates/${props.mandate.id}`)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UCard
|
|
class="cursor-pointer hover:ring-2 hover:ring-primary/50 hover:shadow-md transition-all"
|
|
@click="navigate"
|
|
>
|
|
<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>
|
|
<StatusBadge :status="mandate.status" type="mandate" />
|
|
</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>
|
|
<span v-if="mandate.mandatee_id" class="text-xs text-gray-500 flex items-center gap-1">
|
|
<UIcon name="i-lucide-user" class="text-xs" />
|
|
{{ mandate.mandatee_id.slice(0, 8) }}...
|
|
</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>
|
|
</template>
|