feat : harmonisation des pages infrastructure avec le pattern UiDataTable
- Page case : mêmes colonnes, filtres et alertes âge que la page inventaire - Page building : header aligné sur le pattern case.vue (wrapper px-86, arrow en absolute) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,19 +1,18 @@
|
||||
<template>
|
||||
<div class="min-h-screen">
|
||||
<!-- En-tête de page avec retour et titre -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div class="flex items-center gap-10">
|
||||
<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"
|
||||
/>
|
||||
<h1 class="text-3xl font-bold uppercase text-primary-500">bâtiments</h1>
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold uppercase text-primary-500">bâtiments</h1>
|
||||
</div>
|
||||
|
||||
<div class="px-[86px] space-y-6">
|
||||
<div class="mt-6 space-y-6">
|
||||
<!-- Liste des bâtiments + rendu du plan de chaque bâtiment -->
|
||||
<div
|
||||
v-for="entry in buildingLayouts"
|
||||
|
||||
@@ -40,6 +40,7 @@
|
||||
:items="items"
|
||||
:total-items="totalItems"
|
||||
:loading="loading"
|
||||
:row-class="rowClass"
|
||||
:row-clickable="auth.isAdmin"
|
||||
empty-message="Aucun bovin dans cette case."
|
||||
@row-click="goToBovine"
|
||||
@@ -47,25 +48,61 @@
|
||||
<template #header-nationalNumber>
|
||||
<UiTextInput
|
||||
v-model="filters.nationalNumber"
|
||||
placeholder="Numéro national"
|
||||
placeholder="N° National"
|
||||
size="compact"
|
||||
/>
|
||||
</template>
|
||||
<template #header-receivedWeight>
|
||||
<template #header-workNumber>
|
||||
<UiTextInput
|
||||
v-model="filters.receivedWeight"
|
||||
placeholder="Poids (kg)"
|
||||
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-age>
|
||||
<UiTextInput :model-value="''" placeholder="Age" size="compact" disabled />
|
||||
</template>
|
||||
<template #header-breedCode>
|
||||
<UiTextInput
|
||||
v-model="filters.breedCode"
|
||||
placeholder="Race"
|
||||
size="compact"
|
||||
/>
|
||||
</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-arrivalDate>
|
||||
<UiDateMaskedInput v-model="arrivalDateFilter" placeholder="Date d'arrivée" size="compact" />
|
||||
<UiDateMaskedInput v-model="arrivalDateFilter" size="compact" placeholder="Entrée le" />
|
||||
</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-receivedWeight="{ item }">
|
||||
{{ item.receivedWeight ?? '—' }}
|
||||
<template #cell-buildingCase.building.label="{ item }">
|
||||
{{ item.buildingCase?.building?.label ?? '—' }}
|
||||
</template>
|
||||
<template #cell-buildingCase.caseNumber="{ item }">
|
||||
{{ item.buildingCase?.caseNumber ?? '—' }}
|
||||
</template>
|
||||
</UiDataTable>
|
||||
</div>
|
||||
@@ -77,6 +114,7 @@ import type { BuildingCaseData } from '~/services/dto/building-case-data'
|
||||
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 route = useRoute()
|
||||
const router = useRouter()
|
||||
@@ -93,38 +131,58 @@ const { items, totalItems, page, perPage, filters, loading, reload } =
|
||||
useDataTableServerState<BovineData>(
|
||||
'bovines',
|
||||
{
|
||||
'exists[exitedAt]': 'false',
|
||||
buildingCase: '',
|
||||
nationalNumber: '',
|
||||
receivedWeight: '',
|
||||
workNumber: '',
|
||||
breedCode: '',
|
||||
sex: '',
|
||||
'arrivalDate[after]': '',
|
||||
'arrivalDate[strictly_before]': ''
|
||||
'arrivalDate[strictly_before]': '',
|
||||
'birthDate[after]': '',
|
||||
'birthDate[strictly_before]': ''
|
||||
},
|
||||
{ initialPerPage: 10 }
|
||||
)
|
||||
|
||||
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 arrivalDateFilter = computed<string>({
|
||||
get: () => (filters.value['arrivalDate[after]'] as string) ?? '',
|
||||
set: (value: string) => {
|
||||
if (!value) {
|
||||
filters.value['arrivalDate[after]'] = ''
|
||||
filters.value['arrivalDate[strictly_before]'] = ''
|
||||
return
|
||||
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)
|
||||
}
|
||||
filters.value['arrivalDate[after]'] = value
|
||||
filters.value['arrivalDate[strictly_before]'] = addOneDay(value)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const arrivalDateFilter = singleDateFilter('arrivalDate[after]', 'arrivalDate[strictly_before]')
|
||||
const birthDateFilter = singleDateFilter('birthDate[after]', 'birthDate[strictly_before]')
|
||||
|
||||
const columns = [
|
||||
{ key: 'nationalNumber', label: 'Numéro national' },
|
||||
{ key: 'receivedWeight', label: "Poids à l'arrivée (kg)" },
|
||||
{ key: 'arrivalDate', label: "Date d'arrivée" }
|
||||
{ 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 title = computed(() => {
|
||||
@@ -150,6 +208,13 @@ const formatDate = (date: string | null) => {
|
||||
})
|
||||
}
|
||||
|
||||
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 ''
|
||||
}
|
||||
|
||||
const loadCase = async () => {
|
||||
if (!hasCaseId.value) {
|
||||
buildingCase.value = null
|
||||
|
||||
Reference in New Issue
Block a user