Ferme/frontend/pages/entry-exit/bovine-info/[id].vue

<template>
    <div class="px-[86px]">
        <div class="flex items-center justify-start gap-6 relative mb-8">
            <Icon
                @click="router.push('/entry-exit')"
                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">
                Saisie information bovin {{ reception?.identificationNumber ?? '' }}
            </h1>
        </div>

        <div v-if="loading" class="text-center text-slate-500">Chargement…</div>

        <div v-else>
            <div class="mb-4 max-w-[200px]">
                <UiTextInput
                    v-model="searchQuery"
                    placeholder="N° national"
                    size="compact"
                    inputmode="numeric"
                    pattern="[0-9]*"
                    inputClass="text-xl"
                />
            </div>

            <div class="space-y-3">
                <UiAccordion
                    v-for="bovine in filteredBovines"
                    :key="bovine.id"
                    :model-value="openId === bovine.id"
                    @update:model-value="onToggle(bovine.id, $event)"
                >
                    <template #header>
                        <span class="flex items-center gap-3 normal-case">
                            <span class="font-bold text-base">{{ bovine.nationalNumber }}</span>
                            <span
                                v-if="isSaisi(bovine)"
                                class="inline-block rounded px-2 py-0.5 text-xs font-semibold bg-green-100 text-green-700"
                            >
                                Saisie
                            </span>
                            <span
                                v-else
                                class="inline-block rounded px-2 py-0.5 text-xs font-semibold bg-yellow-100 text-yellow-700"
                            >
                                Attente saisie
                            </span>
                        </span>
                    </template>
                    <BovineInfoForm
                        :bovine="bovine"
                        :buildings="buildings"
                        @saved="onSaved"
                    />
                </UiAccordion>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { BovineData } from '~/services/dto/bovine-data'
import type { BuildingData } from '~/services/dto/building-data'
import type { ReceptionData } from '~/services/dto/reception-data'
import { getBuildingList } from '~/services/building'
import BovineInfoForm from '~/components/entry-exit/bovine-info-form.vue'

const route = useRoute()
const router = useRouter()
const api = useApi()

const receptionId = computed(() => Number(route.params.id))

const reception = ref<ReceptionData | null>(null)
const bovines = ref<BovineData[]>([])
const buildings = ref<BuildingData[]>([])
const loading = ref(true)
const openId = ref<number | null>(null)
const searchQueryRaw = ref('')
const searchQuery = computed<string>({
    get: () => searchQueryRaw.value,
    set: (value) => {
        searchQueryRaw.value = value.replace(/\D/g, '')
    }
})

useHead({
    title: () => `Saisie information bovin ${reception.value?.identificationNumber ?? ''}`.trim()
})

const isSaisi = (bovine: BovineData) =>
    bovine.receivedWeight != null
    && bovine.pricePerKg != null
    && bovine.buildingCase != null

const sortedBovines = computed(() => {
    const pending = bovines.value.filter(b => !isSaisi(b))
    const done = bovines.value.filter(b => isSaisi(b))
    return [...pending, ...done]
})

const filteredBovines = computed(() => {
    const query = searchQuery.value.trim().toLowerCase()
    if (!query) return sortedBovines.value
    return sortedBovines.value.filter(b =>
        b.nationalNumber.toLowerCase().includes(query)
    )
})

const onToggle = (bovineId: number, value: boolean) => {
    openId.value = value ? bovineId : null
}

const onSaved = (updated: BovineData) => {
    const idx = bovines.value.findIndex(b => b.id === updated.id)
    if (idx === -1) return
    bovines.value[idx] = updated

    const next = sortedBovines.value.find(b => !isSaisi(b) && b.id !== updated.id)
    openId.value = next?.id ?? null
}

const loadBovines = async () => {
    type Hydra = { 'hydra:member'?: BovineData[] }
    const response = await api.get<BovineData[] | Hydra>(
        'bovines',
        { reception: receptionId.value, itemsPerPage: 200 }
    )
    if (Array.isArray(response)) {
        bovines.value = response
    } else if (response && typeof response === 'object' && Array.isArray(response['hydra:member'])) {
        bovines.value = response['hydra:member']
    } else {
        bovines.value = []
    }
}

onMounted(async () => {
    try {
        const [r, , b] = await Promise.all([
            api.get<ReceptionData>(`receptions/${receptionId.value}`),
            loadBovines(),
            getBuildingList()
        ])
        reception.value = r
        buildings.value = b

        const firstPending = sortedBovines.value.find(bv => !isSaisi(bv))
        openId.value = firstPending?.id ?? null
    } finally {
        loading.value = false
    }
})
</script>