feat: amélioration de l'export inventaire bovin (!51)
Some checks failed
Auto Tag Develop / tag (push) Has been cancelled
Some checks failed
Auto Tag Develop / tag (push) Has been cancelled
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #51 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #51.
This commit is contained in:
96
frontend/components/inventory/inventory-export-modal.vue
Normal file
96
frontend/components/inventory/inventory-export-modal.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<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>
|
||||
96
frontend/components/ui/UiModal.vue
Normal file
96
frontend/components/ui/UiModal.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
enter-active-class="transition duration-150 ease-out"
|
||||
enter-from-class="opacity-0"
|
||||
enter-to-class="opacity-100"
|
||||
leave-active-class="transition duration-100 ease-in"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div
|
||||
v-if="modelValue"
|
||||
class="fixed inset-0 z-40 flex items-center justify-center bg-black/50 px-4"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
@mousedown.self="closeOnBackdrop"
|
||||
>
|
||||
<div
|
||||
class="w-full rounded-md bg-white shadow-2xl"
|
||||
:class="maxWidth"
|
||||
@mousedown.stop
|
||||
>
|
||||
<div class="flex items-center justify-between border-b border-slate-200 px-6 py-4">
|
||||
<h2 class="text-xl font-bold uppercase text-primary-500">{{ title }}</h2>
|
||||
<button
|
||||
type="button"
|
||||
class="text-slate-500 hover:text-primary-500 flex items-center"
|
||||
aria-label="Fermer"
|
||||
@click="close"
|
||||
>
|
||||
<Icon name="mdi:close" size="24" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-5">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="$slots.footer"
|
||||
class="border-t border-slate-200 px-6 py-4"
|
||||
>
|
||||
<slot name="footer" :close="close" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onBeforeUnmount, watch } from 'vue'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue: boolean
|
||||
title?: string
|
||||
closeOnBackdropClick?: boolean
|
||||
maxWidth?: string
|
||||
}>(), {
|
||||
title: '',
|
||||
closeOnBackdropClick: true,
|
||||
maxWidth: 'max-w-lg'
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
}>()
|
||||
|
||||
const close = () => emit('update:modelValue', false)
|
||||
|
||||
const closeOnBackdrop = () => {
|
||||
if (props.closeOnBackdropClick) close()
|
||||
}
|
||||
|
||||
const onKeydown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && props.modelValue) close()
|
||||
}
|
||||
|
||||
watch(() => props.modelValue, (open) => {
|
||||
if (typeof document === 'undefined') return
|
||||
document.body.style.overflow = open ? 'hidden' : ''
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof document !== 'undefined') {
|
||||
document.addEventListener('keydown', onKeydown)
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (typeof document !== 'undefined') {
|
||||
document.removeEventListener('keydown', onKeydown)
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user