fix : correction des retours de la V0

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex flex-col items-center gap-16">
+    <form :class="['flex flex-col items-center gap-16', { submitted }]" @submit.prevent="goNext">
         <div
             v-if="receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES"
             class="flex flex-col gap-16 items-center w-full">
@@ -10,6 +10,7 @@
                 label="Type de marchandises"
                 :options="merchandiseTypes.map((type) => ({ value: String(type.id), label: type.label }))"
                 wrapper-class="w-[550px]"
+                required
             />
             <div
                 v-if="selectedMerchandiseTypeId && isAutres"
@@ -21,24 +22,30 @@
                     label="Préciser"
                     placeholder="Précisions complémentaires"
                     :maxlength="255"
+                    required
                 />
             </div>
 
             <div
                 v-if="selectedMerchandiseTypeId && !isGranule"
-                class="flex gap-4 w-[550px] justify-between"
+                class="flex flex-col gap-4 w-[550px]"
             >
-                <div
-                    v-for="building in buildings"
-                    :key="building.id"
-                >
-                    <UiCheckbox
-                        v-model="selectedBuildingIds"
-                        :value="String(building.id)"
-                        :label="building.label"
-                        label-class="text-xl"
-                    />
+                <div class="flex gap-4 justify-between">
+                    <div
+                        v-for="building in buildings"
+                        :key="building.id"
+                    >
+                        <UiCheckbox
+                            v-model="selectedBuildingIds"
+                            :value="String(building.id)"
+                            :label="building.label"
+                            label-class="text-xl"
+                        />
+                    </div>
                 </div>
+                <p class="text-red-500 text-sm" :class="showBuildingError ? '' : 'invisible'">
+                    Veuillez sélectionner au moins un bâtiment.
+                </p>
             </div>
 
             <div
@@ -62,17 +69,20 @@
                         </div>
                     </div>
                 </div>
+                <p class="text-red-500 text-sm" :class="showBuildingError ? '' : 'invisible'">
+                    Veuillez sélectionner au moins un bâtiment.
+                </p>
             </div>
         </div>
         <div class="flex justify-center">
             <UiButton
                 type="submit"
                 class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
-                @click="goNext"
+                @click="submitted = true"
             >Valider
             </UiButton>
         </div>
-    </div>
+    </form>
 </template>
 
 <script setup lang="ts">
@@ -100,6 +110,9 @@ const selectedMerchandiseTypeId = ref('')
 const selectedBuildingIds = ref<string[]>([])
 const selectedPelletBuildingIds = ref<Record<string, string[]>>({})
 const merchandiseDetail = ref('')
+const submitted = ref(false)
+const showBuildingError = ref(false)
+const showPelletBuildingError = ref(false)
 
 // Extrait l'ID d'une relation depuis un IRI ou un objet complet.
 const getRelationId = (value: unknown): string | null => {
@@ -182,6 +195,23 @@ async function goNext() {
         return
     }
 
+    showBuildingError.value = false
+    showPelletBuildingError.value = false
+
+    if (!isGranule.value && !isAutres.value && selectedBuildingIds.value.length === 0) {
+        showBuildingError.value = true
+        return
+    }
+
+    if (isGranule.value) {
+        const hasAnyPelletBuilding = Object.values(selectedPelletBuildingIds.value)
+            .some((ids) => ids.length > 0)
+        if (!hasAnyPelletBuilding) {
+            showPelletBuildingError.value = true
+            return
+        }
+    }
+
     const nextStep = receptionStore.current.currentStep + 1
     const receptionIri = `/api/receptions/${receptionStore.current.id}`