feat: inventaire bovins (!49)
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: #49 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #49.
This commit is contained in:
217
frontend/pages/inventory.vue
Normal file
217
frontend/pages/inventory.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div class="px-[86px]">
|
||||
<div class="flex items-center justify-between relative">
|
||||
<div class="flex flex-row absolute -left-[60px]">
|
||||
<Icon
|
||||
@click="router.push('/')"
|
||||
name="gg:arrow-left-o"
|
||||
size="44"
|
||||
class="cursor-pointer text-primary-500"
|
||||
/>
|
||||
</div>
|
||||
<h1 class="font-bold text-3xl uppercase text-primary-500">Inventaire bovins</h1>
|
||||
<button
|
||||
v-if="auth.isAdmin"
|
||||
type="button"
|
||||
:disabled="syncing"
|
||||
class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-6 rounded hover:opacity-80 gap-2 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
@click="syncInventory"
|
||||
>
|
||||
<Icon name="mdi:sync" size="28" :class="syncing ? 'animate-spin' : ''" />
|
||||
Rafraîchir
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 mb-16">
|
||||
<UiDataTable
|
||||
v-model:page="page"
|
||||
v-model:per-page="perPage"
|
||||
:columns="columns"
|
||||
:items="items"
|
||||
:total-items="totalItems"
|
||||
:loading="loading"
|
||||
:row-class="rowClass"
|
||||
>
|
||||
<template #header-nationalNumber>
|
||||
<UiTextInput
|
||||
v-model="filters.nationalNumber"
|
||||
placeholder="N° National"
|
||||
size="compact"
|
||||
/>
|
||||
</template>
|
||||
<template #header-workNumber>
|
||||
<UiTextInput
|
||||
v-model="filters.workNumber"
|
||||
placeholder="N° Travail"
|
||||
size="compact"
|
||||
/>
|
||||
</template>
|
||||
<template #header-sex>
|
||||
<UiSelect
|
||||
v-model="filters.sex"
|
||||
placeholder="Sexe"
|
||||
:options="sexOptions"
|
||||
size="compact"
|
||||
/>
|
||||
</template>
|
||||
<template #header-birthDate>
|
||||
<UiDateMaskedInput v-model="birthDateFilter" size="compact" placeholder="Né le" />
|
||||
</template>
|
||||
<template #header-breedCode>
|
||||
<UiTextInput
|
||||
v-model="filters.breedCode"
|
||||
placeholder="Race"
|
||||
size="compact"
|
||||
/>
|
||||
</template>
|
||||
<template #header-arrivalDate>
|
||||
<UiDateMaskedInput v-model="arrivalDateFilter" size="compact" placeholder="Entrée le" />
|
||||
</template>
|
||||
<template #header-buildingCase.building.label>
|
||||
<UiTextInput :model-value="''" placeholder="Bâtiment" size="compact" disabled />
|
||||
</template>
|
||||
<template #header-buildingCase.caseNumber>
|
||||
<UiTextInput :model-value="''" placeholder="Case" size="compact" disabled />
|
||||
</template>
|
||||
<template #header-age>
|
||||
<UiTextInput :model-value="''" placeholder="Age" size="compact" disabled />
|
||||
</template>
|
||||
<template #cell-birthDate="{ item }">
|
||||
{{ formatDate(item.birthDate) }}
|
||||
</template>
|
||||
<template #cell-age="{ item }">
|
||||
{{ formatAgeLabel(item.ageMonths) }}
|
||||
</template>
|
||||
<template #cell-arrivalDate="{ item }">
|
||||
{{ formatDate(item.arrivalDate) }}
|
||||
</template>
|
||||
<template #cell-buildingCase.building.label="{ item }">
|
||||
{{ item.buildingCase?.building?.label ?? '—' }}
|
||||
</template>
|
||||
<template #cell-buildingCase.caseNumber="{ item }">
|
||||
{{ item.buildingCase?.caseNumber ?? '—' }}
|
||||
</template>
|
||||
</UiDataTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { BovineData } from '~/services/dto/bovine-data'
|
||||
import { useAuthStore } from '~/stores/auth'
|
||||
import { useDataTableServerState } from '~/composables/useDataTableServerState'
|
||||
import { formatAgeLabel } from '~/utils/bovine-age'
|
||||
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
const api = useApi()
|
||||
const toast = useToast()
|
||||
|
||||
interface SyncResult {
|
||||
created: number
|
||||
updated: number
|
||||
exited: number
|
||||
total: number
|
||||
}
|
||||
|
||||
const syncing = ref(false)
|
||||
|
||||
const syncInventory = async () => {
|
||||
if (syncing.value) return
|
||||
const confirmed = window.confirm(
|
||||
"Lancer la synchronisation avec EDNOTIF ?\n\nLes bovins absents de la réponse seront marqués comme sortis."
|
||||
)
|
||||
if (!confirmed) return
|
||||
|
||||
syncing.value = true
|
||||
try {
|
||||
const result = await api.post<SyncResult>('bovines/sync-inventory')
|
||||
toast.success({
|
||||
title: 'Inventaire synchronisé',
|
||||
message: `Créés : ${result.created} · Mis à jour : ${result.updated} · Sortis : ${result.exited} · Total EDNOTIF : ${result.total}`
|
||||
})
|
||||
reload()
|
||||
} catch {
|
||||
// error toast already handled by useApi onResponseError
|
||||
} finally {
|
||||
syncing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const { items, totalItems, page, perPage, filters, loading, reload } =
|
||||
useDataTableServerState<BovineData>(
|
||||
'bovines',
|
||||
{
|
||||
'exists[exitedAt]': 'false',
|
||||
nationalNumber: '',
|
||||
workNumber: '',
|
||||
breedCode: '',
|
||||
sex: '',
|
||||
'arrivalDate[after]': '',
|
||||
'arrivalDate[strictly_before]': '',
|
||||
'birthDate[after]': '',
|
||||
'birthDate[strictly_before]': ''
|
||||
}
|
||||
)
|
||||
|
||||
const sexOptions = [
|
||||
{ value: 'M', label: 'Mâle' },
|
||||
{ value: 'F', label: 'Femelle' }
|
||||
]
|
||||
|
||||
const addOneDay = (dateString: string): string => {
|
||||
const [year, month, day] = dateString.split('-').map(Number)
|
||||
const next = new Date(Date.UTC(year, month - 1, day + 1))
|
||||
return next.toISOString().slice(0, 10)
|
||||
}
|
||||
|
||||
const singleDateFilter = (afterKey: string, beforeKey: string) =>
|
||||
computed<string>({
|
||||
get: () => (filters.value[afterKey] as string) ?? '',
|
||||
set: (value: string) => {
|
||||
if (!value) {
|
||||
filters.value[afterKey] = ''
|
||||
filters.value[beforeKey] = ''
|
||||
return
|
||||
}
|
||||
filters.value[afterKey] = value
|
||||
filters.value[beforeKey] = addOneDay(value)
|
||||
}
|
||||
})
|
||||
|
||||
const arrivalDateFilter = singleDateFilter('arrivalDate[after]', 'arrivalDate[strictly_before]')
|
||||
const birthDateFilter = singleDateFilter('birthDate[after]', 'birthDate[strictly_before]')
|
||||
|
||||
const columns = [
|
||||
{ key: 'nationalNumber', label: 'N° National', width: '160px' },
|
||||
{ key: 'workNumber', label: 'N° Travail', width: '85px' },
|
||||
{ key: 'sex', label: 'Sexe', width: '70px' },
|
||||
{ key: 'birthDate', label: 'Né le', width: '120px' },
|
||||
{ key: 'age', label: 'Age', width: '110px' },
|
||||
{ key: 'breedCode', label: 'Race' },
|
||||
{ key: 'buildingCase.building.label', label: 'Bâtiment', width: '1.5fr' },
|
||||
{ key: 'buildingCase.caseNumber', label: 'Case', width: '80px' },
|
||||
{ key: 'arrivalDate', label: 'Entrée le', width: '120px' }
|
||||
]
|
||||
|
||||
const formatDate = (date: string | null) => {
|
||||
if (!date) return '—'
|
||||
const d = new Date(date)
|
||||
if (isNaN(d.getTime())) return date
|
||||
return d.toLocaleDateString('fr-FR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
const rowClass = (item: BovineData): string => {
|
||||
if (item.ageMonths === null || item.ageMonths === undefined) return ''
|
||||
if (item.ageMonths >= 24) return 'bg-red-100 hover:bg-red-200'
|
||||
if (item.ageMonths >= 22) return 'bg-orange-100 hover:bg-orange-200'
|
||||
return ''
|
||||
}
|
||||
|
||||
onMounted(reload)
|
||||
</script>
|
||||
Reference in New Issue
Block a user