359 lines
15 KiB
Vue
359 lines
15 KiB
Vue
<template>
|
|
<div class="px-[86px]">
|
|
<div class="flex items-center justify-between relative mb-10">
|
|
<div class="flex flex-row absolute -left-[60px]">
|
|
<Icon
|
|
@click="goBack"
|
|
name="gg:arrow-left-o"
|
|
size="44"
|
|
class="cursor-pointer text-primary-500"
|
|
/>
|
|
</div>
|
|
<h1 class="font-bold text-3xl uppercase text-primary-500">Vie du bovin</h1>
|
|
</div>
|
|
|
|
<UiTabs
|
|
v-model="activeTab"
|
|
:tabs="tabs"
|
|
/>
|
|
|
|
<div v-if="auth.isBureau" v-show="activeTab === 'mouvement'">
|
|
<form :class="{ submitted: movementSubmitted }" @submit.prevent="submitMovement">
|
|
<div class="flex flex-cols-3 justify-between mb-10">
|
|
<UiSelect
|
|
id="movement-building"
|
|
v-model="newMovementBuildingId"
|
|
label="Bâtiment"
|
|
:options="buildingOptions"
|
|
wrapper-class="w-[280px]"
|
|
required
|
|
/>
|
|
<UiSelect
|
|
id="movement-case"
|
|
v-model="newMovementCaseId"
|
|
label="Case"
|
|
:options="caseOptions"
|
|
:disabled="!newMovementBuildingId"
|
|
wrapper-class="w-[280px]"
|
|
required
|
|
/>
|
|
<UiDateInput
|
|
id="movement-date"
|
|
v-model="newMovementDate"
|
|
label="Date mouvement"
|
|
wrapper-class="w-[280px]"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-center mb-11">
|
|
<UiButton
|
|
type="submit"
|
|
class="inline-flex items-center justify-center gap-2 text-xl text-white uppercase bg-primary-500 h-[50px] rounded hover:opacity-80"
|
|
:disabled="isSubmittingMovement"
|
|
:loading="isSubmittingMovement"
|
|
@click="movementSubmitted = true"
|
|
>
|
|
<Icon name="mdi:plus" size="28" />
|
|
Ajouter
|
|
</UiButton>
|
|
</div>
|
|
</form>
|
|
|
|
<UiDataTable
|
|
:columns="movementColumns"
|
|
:items="filteredMovementRows"
|
|
:per-page="10"
|
|
>
|
|
<template #header-building>
|
|
<UiTextInput
|
|
v-model="movementFilters.building"
|
|
placeholder="Bâtiment"
|
|
size="compact"
|
|
/>
|
|
</template>
|
|
<template #header-case>
|
|
<UiTextInput
|
|
v-model="movementFilters.case"
|
|
placeholder="Case"
|
|
size="compact"
|
|
/>
|
|
</template>
|
|
<template #header-enteredAt>
|
|
<UiTextInput :model-value="''" placeholder="Du" size="compact" disabled />
|
|
</template>
|
|
<template #header-leftAt>
|
|
<UiTextInput :model-value="''" placeholder="Au" size="compact" disabled />
|
|
</template>
|
|
<template #header-duration>
|
|
<UiTextInput :model-value="''" placeholder="Durée" size="compact" disabled />
|
|
</template>
|
|
<template #cell-leftAt="{ item }">
|
|
<span v-if="item.leftAt">{{ item.leftAt }}</span>
|
|
<span v-else class="italic text-slate-500">En cours</span>
|
|
</template>
|
|
</UiDataTable>
|
|
</div>
|
|
|
|
<div v-show="activeTab === 'passeport'">
|
|
<div class="mt-6">
|
|
<div class="grid grid-cols-[3rem_repeat(6,minmax(0,1fr))] grid-rows-2 border-2 border-black">
|
|
<div class="row-span-2 flex items-center justify-center border-r-2 border-black">
|
|
<span class="uppercase font-bold -rotate-90 whitespace-nowrap transform-gpu">Veau</span>
|
|
</div>
|
|
<div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">Numéro national</div>
|
|
<div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">N° de travail</div>
|
|
<div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">Sexe</div>
|
|
<div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">Code race</div>
|
|
<div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">Type de race</div>
|
|
<div class="border-b border-black px-2 py-1 text-center font-semibold text-sm">Date de naissance</div>
|
|
<div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.nationalNumber) }}</div>
|
|
<div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.workNumber) }}</div>
|
|
<div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.sex) }}</div>
|
|
<div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.bovineType?.code) }}</div>
|
|
<div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.bovineType?.label) }}</div>
|
|
<div class="px-2 py-1 text-center">{{ formatDate(bovine?.birthDate) }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-9">
|
|
<div class="grid grid-cols-[3rem_repeat(6,minmax(0,1fr))] grid-rows-2 border-2 border-black">
|
|
<div class="row-span-2 flex items-center justify-center border-r-2 border-black">
|
|
<span class="uppercase font-bold -rotate-90 whitespace-nowrap transform-gpu">Père</span>
|
|
</div>
|
|
<div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">Numéro national</div>
|
|
<div class="col-span-2 border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">N° de travail</div>
|
|
<div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">Code race</div>
|
|
<div class="col-span-2 border-b border-black px-2 py-1 text-center font-semibold text-sm">Type de race</div>
|
|
<div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.fatherNationalNumber) }}</div>
|
|
<div class="col-span-2 border-r border-black px-2 py-1 text-center">{{ display(workNumberFromNational(bovine?.fatherNationalNumber)) }}</div>
|
|
<div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.fatherBovineType?.code) }}</div>
|
|
<div class="col-span-2 px-2 py-1 text-center">{{ display(bovine?.fatherBovineType?.label) }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-9">
|
|
<div class="grid grid-cols-[3rem_repeat(6,minmax(0,1fr))] grid-rows-2 border-2 border-black">
|
|
<div class="row-span-2 flex items-center justify-center border-r-2 border-black">
|
|
<span class="uppercase font-bold -rotate-90 whitespace-nowrap transform-gpu">Mère</span>
|
|
</div>
|
|
<div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">Numéro national</div>
|
|
<div class="col-span-2 border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">N° de travail</div>
|
|
<div class="border-b border-r border-black px-2 py-1 text-center font-semibold text-sm">Code race</div>
|
|
<div class="col-span-2 border-b border-black px-2 py-1 text-center font-semibold text-sm">Type de race</div>
|
|
<div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.motherNationalNumber) }}</div>
|
|
<div class="col-span-2 border-r border-black px-2 py-1 text-center">{{ display(workNumberFromNational(bovine?.motherNationalNumber)) }}</div>
|
|
<div class="border-r border-black px-2 py-1 text-center">{{ display(bovine?.motherBovineType?.code) }}</div>
|
|
<div class="col-span-2 px-2 py-1 text-center">{{ display(bovine?.motherBovineType?.label) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-show="activeTab === 'sante'">
|
|
<div class="border-2 border-dashed border-primary-500 rounded-md py-16 text-center text-primary-500 font-bold uppercase text-2xl">
|
|
À venir
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { getBuildingList } from '~/services/building'
|
|
import type { BuildingData } from '~/services/dto/building-data'
|
|
import { useAuthStore } from '~/stores/auth'
|
|
|
|
useHead({ title: 'Vie du bovin' })
|
|
|
|
const auth = useAuthStore()
|
|
|
|
type BovineTab = 'mouvement' | 'passeport' | 'sante'
|
|
const tabs = computed(() => [
|
|
...(auth.isBureau ? [{ key: 'mouvement' as const, label: 'Mouvement' }] : []),
|
|
{ key: 'passeport' as const, label: 'Passeport bovin' },
|
|
{ key: 'sante' as const, label: 'Santé' }
|
|
])
|
|
const activeTab = ref<BovineTab>(auth.isBureau ? 'mouvement' : 'passeport')
|
|
|
|
interface BovineTypeRef {
|
|
id: number
|
|
label: string | null
|
|
code: string | null
|
|
}
|
|
|
|
interface BuildingRef {
|
|
label: string | null
|
|
}
|
|
|
|
interface BuildingCaseRef {
|
|
caseNumber: number | null
|
|
building: BuildingRef | null
|
|
}
|
|
|
|
interface BovineMovementData {
|
|
id: number
|
|
enteredAt: string
|
|
leftAt: string | null
|
|
buildingCase: BuildingCaseRef | null
|
|
}
|
|
|
|
interface BovinePassportData {
|
|
id: number
|
|
nationalNumber: string
|
|
workNumber: string | null
|
|
sex: string | null
|
|
birthDate: string | null
|
|
exitedAt: string | null
|
|
exitDate: string | null
|
|
bovineType: BovineTypeRef | null
|
|
motherNationalNumber: string | null
|
|
motherBovineType: BovineTypeRef | null
|
|
fatherNationalNumber: string | null
|
|
fatherBovineType: BovineTypeRef | null
|
|
movements: BovineMovementData[]
|
|
}
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const api = useApi()
|
|
|
|
const goBack = () => {
|
|
if (window.history.state?.back) {
|
|
router.back()
|
|
} else {
|
|
router.push('/inventory')
|
|
}
|
|
}
|
|
|
|
const todayIso = () => new Date().toISOString().slice(0, 10)
|
|
|
|
const bovine = ref<BovinePassportData | null>(null)
|
|
const buildings = ref<BuildingData[]>([])
|
|
const newMovementBuildingId = ref<string | number | null>(null)
|
|
const newMovementCaseId = ref<string | number | null>(null)
|
|
const newMovementDate = ref<string>(todayIso())
|
|
const isSubmittingMovement = ref(false)
|
|
const movementSubmitted = ref(false)
|
|
const movementFilters = ref({ building: '', case: '' })
|
|
|
|
const bovineId = computed(() => {
|
|
const raw = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
|
|
const n = Number(raw)
|
|
return Number.isFinite(n) ? n : null
|
|
})
|
|
|
|
const display = (value: string | null | undefined) => (value && value !== '' ? value : '—')
|
|
|
|
const workNumberFromNational = (nationalNumber: string | null | undefined) => {
|
|
if (!nationalNumber) return null
|
|
return nationalNumber.slice(-4)
|
|
}
|
|
|
|
const formatDate = (date: string | null | undefined) => {
|
|
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 buildingOptions = computed(() =>
|
|
buildings.value.map(b => ({ value: b.id, label: b.label }))
|
|
)
|
|
|
|
const caseOptions = computed(() => {
|
|
const building = buildings.value.find(b => b.id === Number(newMovementBuildingId.value))
|
|
if (!building?.buildingCases) return []
|
|
return [...building.buildingCases]
|
|
.sort((a, b) => (a.caseNumber ?? 0) - (b.caseNumber ?? 0))
|
|
.map(c => ({
|
|
value: c.id,
|
|
label: `Case ${c.caseNumber ?? c.code ?? c.id}`
|
|
}))
|
|
})
|
|
|
|
watch(newMovementBuildingId, () => {
|
|
newMovementCaseId.value = null
|
|
})
|
|
|
|
const movementColumns = [
|
|
{ key: 'building', label: 'Bâtiment' },
|
|
{ key: 'case', label: 'Case' },
|
|
{ key: 'enteredAt', label: 'Du' },
|
|
{ key: 'leftAt', label: 'Au' },
|
|
{ key: 'duration', label: 'Durée' }
|
|
]
|
|
|
|
const movementEndDate = (movement: BovineMovementData): string | null => {
|
|
return movement.leftAt ?? bovine.value?.exitedAt ?? bovine.value?.exitDate ?? null
|
|
}
|
|
|
|
const formatDuration = (movement: BovineMovementData): string => {
|
|
const start = new Date(movement.enteredAt)
|
|
if (isNaN(start.getTime())) return '—'
|
|
const endRaw = movementEndDate(movement)
|
|
const end = endRaw ? new Date(endRaw) : new Date()
|
|
if (isNaN(end.getTime())) return '—'
|
|
const days = Math.max(0, Math.floor((end.getTime() - start.getTime()) / 86_400_000))
|
|
return `${days} j`
|
|
}
|
|
|
|
const movementRows = computed(() => {
|
|
const list = bovine.value?.movements ?? []
|
|
return list.map(m => ({
|
|
id: m.id,
|
|
building: m.buildingCase?.building?.label ?? '—',
|
|
case: m.buildingCase?.caseNumber != null ? `Case ${m.buildingCase.caseNumber}` : '—',
|
|
enteredAt: formatDate(m.enteredAt),
|
|
leftAt: m.leftAt ? formatDate(m.leftAt) : null,
|
|
duration: formatDuration(m)
|
|
}))
|
|
})
|
|
|
|
const filteredMovementRows = computed(() => {
|
|
const buildingFilter = movementFilters.value.building.trim().toLowerCase()
|
|
const caseFilter = movementFilters.value.case.trim().toLowerCase()
|
|
return movementRows.value.filter(row => {
|
|
if (buildingFilter && !row.building.toLowerCase().includes(buildingFilter)) return false
|
|
if (caseFilter && !row.case.toLowerCase().includes(caseFilter)) return false
|
|
return true
|
|
})
|
|
})
|
|
|
|
const submitMovement = async () => {
|
|
if (!newMovementCaseId.value || !newMovementDate.value || bovineId.value === null) return
|
|
|
|
const buildingLabel = buildingOptions.value.find(o => o.value === Number(newMovementBuildingId.value))?.label ?? '—'
|
|
const caseLabel = caseOptions.value.find(o => o.value === Number(newMovementCaseId.value))?.label ?? '—'
|
|
const dateLabel = formatDate(newMovementDate.value)
|
|
const confirmed = window.confirm(
|
|
`Confirmer la création du mouvement ?\n\nBâtiment : ${buildingLabel}\nCase : ${caseLabel}\nDate : ${dateLabel}`
|
|
)
|
|
if (!confirmed) return
|
|
|
|
isSubmittingMovement.value = true
|
|
try {
|
|
await api.post('bovine_movements', {
|
|
bovine: `/api/bovines/${bovineId.value}`,
|
|
buildingCase: `/api/building_cases/${newMovementCaseId.value}`,
|
|
enteredAt: newMovementDate.value
|
|
}, { toastSuccessMessage: 'Mouvement enregistré' })
|
|
bovine.value = await api.get<BovinePassportData>(`bovines/${bovineId.value}`)
|
|
newMovementBuildingId.value = null
|
|
newMovementCaseId.value = null
|
|
newMovementDate.value = todayIso()
|
|
movementSubmitted.value = false
|
|
} finally {
|
|
isSubmittingMovement.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
if (bovineId.value === null) return
|
|
const [bovineData, buildingList] = await Promise.all([
|
|
api.get<BovinePassportData>(`bovines/${bovineId.value}`),
|
|
getBuildingList()
|
|
])
|
|
bovine.value = bovineData
|
|
buildings.value = buildingList
|
|
})
|
|
</script>
|