107 lines
3.5 KiB
Vue
107 lines
3.5 KiB
Vue
<template>
|
|
<div class="px-[86px]">
|
|
<div class="flex items-center justify-start gap-10 relative">
|
|
<Icon
|
|
@click="router.push('/')"
|
|
name="gg:arrow-left-o"
|
|
size="44"
|
|
class="cursor-pointer text-primary-500 absolute -left-[60px]"
|
|
/>
|
|
<h1 class="font-bold text-3xl uppercase text-primary-500">Entrée / Sortie</h1>
|
|
</div>
|
|
|
|
<div class="mt-8 mb-16 grid grid-cols-2 gap-8">
|
|
<section>
|
|
<h2 class="text-xl font-bold uppercase text-primary-500 mb-4">Entrées en attente</h2>
|
|
<UiDataTable
|
|
v-model:page="entryPage"
|
|
v-model:per-page="entryPerPage"
|
|
:columns="entryColumns"
|
|
:items="entries"
|
|
:total-items="totalEntries"
|
|
:loading="entriesLoading"
|
|
row-clickable
|
|
@row-click="goToEntry"
|
|
>
|
|
<template #cell-receptionDate="{ item }">
|
|
{{ formatDate(item.receptionDate) }}
|
|
</template>
|
|
<template #cell-declaredCount="{ item }">
|
|
{{ declaredCount(item) }}
|
|
</template>
|
|
<template #cell-registeredBovineCount="{ item }">
|
|
{{ item.registeredBovineCount ?? 0 }}
|
|
</template>
|
|
</UiDataTable>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 class="text-xl font-bold uppercase text-primary-500 mb-4">Sorties en attente</h2>
|
|
<div class="rounded border border-dashed border-slate-300 p-8 text-center text-slate-500">
|
|
À venir
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { ReceptionData } from '~/services/dto/reception-data'
|
|
import { useDataTableServerState } from '~/composables/useDataTableServerState'
|
|
|
|
const router = useRouter()
|
|
|
|
const {
|
|
items: entries,
|
|
totalItems: totalEntries,
|
|
page: entryPage,
|
|
perPage: entryPerPage,
|
|
loading: entriesLoading,
|
|
reload
|
|
} = useDataTableServerState<ReceptionData>(
|
|
'receptions',
|
|
{
|
|
'isValid': 'true',
|
|
'entryCompleted': 'false',
|
|
'receptionType.code': 'BOVINS'
|
|
},
|
|
{ initialPerPage: 10 }
|
|
)
|
|
|
|
const entryColumns = [
|
|
{ key: 'receptionDate', label: 'Date réception', width: '160px' },
|
|
{ key: 'supplier.name', label: 'Fournisseur', width: '1.5fr' },
|
|
{ key: 'declaredCount', label: 'Bovins déclarés', width: '140px' },
|
|
{ key: 'registeredBovineCount', label: 'Bovins saisis', width: '140px' }
|
|
]
|
|
|
|
const declaredCount = (reception: ReceptionData): number => {
|
|
const fromTypes = (reception.bovinesTypes ?? []).reduce((sum: number, bt: any) => {
|
|
return sum + (typeof bt.quantity === 'number' ? bt.quantity : 0)
|
|
}, 0)
|
|
const fromOther = parseInt(reception.bovineDetail ?? '0', 10) || 0
|
|
return fromTypes + fromOther
|
|
}
|
|
|
|
const formatDate = (date: string | null) => {
|
|
if (!date) return '—'
|
|
const d = new Date(date.replace(' ', 'T'))
|
|
if (isNaN(d.getTime())) return date
|
|
return d.toLocaleDateString('fr-FR', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})
|
|
}
|
|
|
|
const goToEntry = (reception: ReceptionData) => {
|
|
router.push(`/entry-exit/entry/${reception.id}`)
|
|
}
|
|
|
|
onMounted(() => {
|
|
reload()
|
|
})
|
|
</script>
|