feat : Ajout de la sélection des bovins étape 3 d'une réception (WIP)

frontend/components/reception/reception-bovine-received.vue

@@ -1,32 +1,51 @@
 <template>
-    <div class="flex flex-row gap-16 items-center w-full">
     <div
-        v-for="type in bovineType"
-        :key="type.id"
-        class="mt-8 flex flex-row mb-2 gap-6">
-        <UiNumberInput
-            :label="type.label"
-            :code="type.code"
-        />
-    </div>
-    <div
-        class="mt-8 flex flex-row mb-2 gap-6">
-        <UiNumberInput
-            label="Autres"
-        />
-    </div>
+        v-if="receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.BOVINS"
+        class="flex flex-col items-center gap-16">
+        <h1 class="text-4xl uppercase font-bold">Sélection des marchandises réceptionnnées</h1>
+        <div
+            class="flex flex-row gap-16 items-center w-full">
+            <div
+                v-for="type in bovineType"
+                :key="type.id"
+                class="mt-8 flex flex-row mb-2 gap-6">
+                <UiNumberInput
+                    :label="type.label"
+                    :code="type.code"
+                    v-model="selectedBovineTypeIds[type.id]"
+                    :value="String(type.id)"
+                />
+            </div>
+            <div
+                class="mt-8 flex flex-row mb-2 gap-6">
+                <UiNumberInput
+                    label="Autres"
+                />
+            </div>
+        </div>
+        <button
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            @click="goNext"
+        >Peser
+        </button>
     </div>
 </template>
 <script setup lang="ts">
-
-import {getTruckList} from "~/services/truck";
 import type {BovineTypeData} from "~/services/dto/bovine-type-data";
 import {getBovineTypeList} from "~/services/bovine-type";
-
+import {RECEPTION_TYPE_CODES} from "~/utils/constants";
+import {useReceptionStore} from '~/stores/reception'
+import {
+    createReceptionBovine,
+    deleteReceptionBovine,
+    getReceptionBovineList
+} from "~/services/reception-bovine";
+import {ref} from "vue";
 
 const isLoadingBovineType = ref(false)
 const bovineType = ref<BovineTypeData[]>([])
-
+const receptionStore = useReceptionStore()
+const selectedBovineTypeIds = ref<string[]>
 const loadBovineType = async () => {
     isLoadingBovineType.value = true
     try {
@@ -35,7 +54,29 @@ const loadBovineType = async () => {
         isLoadingBovineType.value = false
     }
 }
+
+
 onMounted(async () => {
+
     await loadBovineType()
+    selectedBovineTypeIds.value=bovineType.value.map((type) => String(type.id))
 })
+
+async function goNext() {
+    if (!receptionStore.current) {
+        return
+    }
+    const nextStep = receptionStore.current.currentStep + 1
+    const receptionIri = `/api/receptions/${receptionStore.current.id}`
+    console.log(selectedBovineTypeIds.value)
+    await receptionStore.updateReception(receptionStore.current.id, {
+        merchandiseType: null,
+        merchandiseDetail: null,
+        buildings: null,
+        bovinesTypes : selectedBovineTypeIds.value.map((id) => `/api/bovines_types/${id}`),
+        currentStep: nextStep
+    })
+}
 </script>
+
+

frontend/components/reception/reception-product-received.vue

@@ -5,7 +5,6 @@
             v-if="receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES"
             class="flex flex-col gap-16 items-center w-full">
             <h1 class="text-4xl uppercase font-bold">Sélection des marchandises réceptionnnées</h1>
-            <!-- ICI UNE ERREUR DE RESPECT MAQUETTE -->
             <UiSelect
                 id="merchandise-type"
                 v-model="selectedMerchandiseTypeId"
@@ -13,7 +12,6 @@
                 :options="merchandiseTypes.map((type) => ({ value: String(type.id), label: type.label }))"
                 wrapper-class="w-[550px]"
             />
-
             <div
                 v-if="selectedMerchandiseTypeId && isAutres"
                 class="flex flex-col w-full max-w-[550px]"
@@ -67,12 +65,6 @@
                 </div>
             </div>
         </div>
-
-        <div v-if="receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.BOVINS"
-             >
-            <h1 class="text-4xl uppercase font-bold">Sélection des races réceptionnnées</h1>
-            <ReceptionBovineReceived />
-        </div>
         <button
             class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
             @click="goNext"

frontend/components/ui/UiNumberInput.vue

@@ -1,34 +1,26 @@
 <template>
-    <div :class="['flex flex-row items-center gap-2', wrapperClass]">
+    <div :class="['flex items-center gap-4', wrapperClass]">
         <label
-            v-if="label && label !== 'Autres'"
+            v-if="label"
             :for="id"
-            class="font-bold text-xl"
+            class="font-bold uppercase text-xl"
             :class="labelClass"
         >
-            {{ label }} <span v-if="code">({{ code }})</span>
+            {{ label }}
         </label>
-
-        <!-- Champ texte si Autres -->
-        <input
-            v-else-if="label === 'Autres'"
-            type="text"
-            :placeholder="'Autres'"
-            class="border-b border-black text-xl bg-transparent- w-48"
-        />
         <input
             :id="id"
             type="number"
-            :value="modelValue ?? 0"
-            :placeholder="placeholder"
+            :value="modelValue ?? ''"
             :min="min"
             :max="max"
             :step="step"
             :disabled="disabled"
             v-bind="attrs"
-            class="border-2  border-black text-xl pb-[6px] w-12 bg-transparent ma"
+            class="border-b border-black text-xl pb-[6px] bg-transparent text-right"
             :class="[
-                disabled ? 'cursor-not-allowed text-neutral-400' : 'cursor-text text-black',
+                isEmpty ? 'text-neutral-400' : 'text-black',
+                disabled ? 'cursor-not-allowed' : 'cursor-text',
                 inputClass
             ]"
             @input="onInput"
@@ -37,43 +29,48 @@
 </template>
 
 <script setup lang="ts">
-import {useAttrs} from 'vue'
+import { computed, useAttrs } from 'vue'
 
-defineOptions({inheritAttrs: false})
+defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
     defineProps<{
         id?: string
         label?: string
-        code?: string
-        modelValue: number | null | undefined
-        placeholder?: string
-        min?: number
-        max?: number
-        step?: number
+        modelValue: number | string | null | undefined
+        min?: number | string
+        max?: number | string
+        step?: number | string
         disabled?: boolean
         wrapperClass?: string
         labelClass?: string
         inputClass?: string
     }>(),
     {
-        placeholder: '',
-        min: 0,
-        step: 1,
+        min: undefined,
+        max: undefined,
+        step: undefined,
         disabled: false,
         wrapperClass: '',
         labelClass: '',
         inputClass: ''
     }
 )
+
 const emit = defineEmits<{
-    (event: 'update:modelValue', value: number): void
+    (event: 'update:modelValue', value: number | null): void
 }>()
 
 const attrs = useAttrs()
+const isEmpty = computed(() => props.modelValue === null || props.modelValue === undefined || props.modelValue === '')
 
 const onInput = (event: Event) => {
     const target = event.target as HTMLInputElement
-    emit('update:modelValue', Number(target.value))
+    if (target.value === '') {
+        emit('update:modelValue', null)
+        return
+    }
+    const numeric = Number(target.value)
+    emit('update:modelValue', Number.isNaN(numeric) ? null : numeric)
 }
 </script>