tristan
8eebb63626
- UiModal : composant générique réutilisable (teleport, escape, backdrop, max-width configurable) - InventoryExportModal : 3 checkboxes pour les tranches d'âge, footer centré sans annuler - BovineRepository::findActiveForInventoryExport(?array $ageRanges) en DQL - Endpoint inventory-export accepte ageRanges (comma-separated) en query param - Aucune coche = export complet (comportement actuel intact) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
97 lines
3.1 KiB
Vue
97 lines
3.1 KiB
Vue
<template>
|
|
<UiModal v-model="open" title="Exporter l'inventaire bovin" max-width="max-w-2xl">
|
|
<p class="mb-5 text-sm text-slate-600">
|
|
Aucun filtre coché : export complet (tous les bovins actifs).
|
|
</p>
|
|
|
|
<div class="mb-5">
|
|
<h3 class="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-600">
|
|
Tranches d'âge
|
|
</h3>
|
|
<div class="flex flex-col gap-2">
|
|
<label
|
|
v-for="bucket in ageBuckets"
|
|
:key="bucket.value"
|
|
class="flex items-center gap-3 cursor-pointer text-primary-700"
|
|
>
|
|
<input
|
|
v-model="filters.ageRanges"
|
|
type="checkbox"
|
|
:value="bucket.value"
|
|
class="h-4 w-4 cursor-pointer accent-primary-500"
|
|
/>
|
|
<span :class="['inline-block rounded px-2 py-0.5 text-xs font-semibold text-white', bucket.colorClass]">
|
|
{{ bucket.badge }}
|
|
</span>
|
|
<span>{{ bucket.label }}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="flex justify-center">
|
|
<button
|
|
type="button"
|
|
:disabled="loading"
|
|
class="inline-flex h-[50px] items-center justify-center gap-2 rounded bg-primary-500 px-6 text-base text-white uppercase hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60"
|
|
@click="onSubmit"
|
|
>
|
|
<Icon
|
|
v-if="loading"
|
|
name="mdi:loading"
|
|
size="20"
|
|
class="animate-spin"
|
|
/>
|
|
<Icon v-else name="mdi:file-excel-outline" size="20" />
|
|
Exporter
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</UiModal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, reactive, watch } from 'vue'
|
|
|
|
export interface InventoryExportFilters {
|
|
ageRanges: string[]
|
|
}
|
|
|
|
const props = withDefaults(defineProps<{
|
|
modelValue: boolean
|
|
loading?: boolean
|
|
}>(), {
|
|
loading: false
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: boolean): void
|
|
(e: 'submit', filters: InventoryExportFilters): void
|
|
}>()
|
|
|
|
const open = computed({
|
|
get: () => props.modelValue,
|
|
set: (value: boolean) => emit('update:modelValue', value)
|
|
})
|
|
|
|
const ageBuckets = [
|
|
{ value: 'over24', label: '≥ 24 mois', badge: '24+', colorClass: 'bg-red-500' },
|
|
{ value: 'between22And24', label: '22 à 24 mois', badge: '22-24', colorClass: 'bg-orange-500' },
|
|
{ value: 'between20And22', label: '20 à 22 mois', badge: '20-22', colorClass: 'bg-yellow-500' }
|
|
]
|
|
|
|
const filters = reactive<InventoryExportFilters>({
|
|
ageRanges: []
|
|
})
|
|
|
|
watch(open, (isOpen) => {
|
|
if (isOpen) {
|
|
filters.ageRanges = []
|
|
}
|
|
})
|
|
|
|
const onSubmit = () => {
|
|
emit('submit', { ageRanges: [...filters.ageRanges] })
|
|
}
|
|
</script>
|