feat : ajout d'un composant pour le champ d'immatriculation, ajout de la lib maska pour le format des champs et correction de la gestion des mises en attentes des receptions

frontend/components/reception/reception-form.vue

@@ -2,15 +2,11 @@
     <form @submit.prevent="validate">
         <div class="grid grid-cols-1 items-start gap-8 mb-16">
             <h1 class="font-bold text-5xl uppercase">Réception</h1>
-            <div class="flex flex-col">
-                <label for="license-plate" class="font-bold uppercase text-xl mb-4">Immatriculation</label>
-                <input
-                    id="license-plate"
+            <div>
+                <UiLicensePlateInput
                     v-model="form.licensePlate"
-                    type="text"
-                    class="border-b border-black justify-self-start text-xl pb-[6px] uppercase"
+                    v-model:allowAny="allowAnyLicensePlate"
                 />
-                <p v-if="fieldErrors.licensePlate" class="text-red-600 text-sm">{{ fieldErrors.licensePlate }}</p>
             </div>
             <div class="flex flex-col">
                 <label for="reception-date" class="font-bold uppercase text-xl mb-4">Date de reception</label>
@@ -20,7 +16,6 @@
                     type="date"
                     class="border-b border-black justify-self-start text-xl pb-[6px] uppercase"
                 />
-                <p v-if="fieldErrors.receptionDate" class="text-red-600 text-sm">{{ fieldErrors.receptionDate }}</p>
             </div>
         </div>
         <div class="flex justify-center">
@@ -34,8 +29,6 @@
 </template>
 
 <script setup lang="ts">
-import { z } from 'zod'
-import { mapZodErrors } from '~/utils/zod-errors'
 import { useReceptionStore } from '~/stores/reception'
 
 type ReceptionFormData = {
@@ -49,20 +42,7 @@ const form = reactive<ReceptionFormData>({
     licensePlate: '',
     receptionDate: new Date().toISOString().slice(0, 10)
 })
-const fieldErrors = reactive<Partial<Record<keyof ReceptionFormData, string>>>({
-    licensePlate: undefined,
-    receptionDate: undefined
-})
-const formSchema = z.object({
-    licensePlate: z
-        .string()
-        .min(1, 'Immatriculation requise.')
-        .max(20, 'Immatriculation trop longue (20 caracteres max).'),
-    receptionDate: z
-        .string()
-        .min(1, 'Date de reception requise.')
-        .regex(/^\d{4}-\d{2}-\d{2}$/, 'Date de reception invalide.')
-})
+const allowAnyLicensePlate = ref(false)
 
 watch(
     () => receptionStore.current,
@@ -74,26 +54,14 @@ watch(
 )
 
 async function validate() {
-    fieldErrors.licensePlate = undefined
-    fieldErrors.receptionDate = undefined
     const normalizedLicensePlate = form.licensePlate.trim()
     const normalizedReceptionDate = form.receptionDate.trim()
-    const result = formSchema.safeParse({
-        licensePlate: normalizedLicensePlate,
-        receptionDate: normalizedReceptionDate
-    })
-    if (!result.success) {
-        const errors = mapZodErrors<ReceptionFormData>(result.error)
-        fieldErrors.licensePlate = errors.licensePlate ?? 'Formulaire invalide.'
-        fieldErrors.receptionDate = errors.receptionDate ?? 'Formulaire invalide.'
-        return
-    }
 
     if (!receptionStore.current) {
         const created = await receptionStore.createReception({
             currentStep: 1,
-            licensePlate: normalizedLicensePlate || null,
-            receptionDate: normalizedReceptionDate || null
+            licensePlate: normalizedLicensePlate,
+            receptionDate: normalizedReceptionDate
         })
         if (created) {
             await router.push(`/reception/${created.id}`)
@@ -104,8 +72,8 @@ async function validate() {
     const nextStep = receptionStore.current.currentStep + 1
     await receptionStore.updateReception(receptionStore.current.id, {
         currentStep: nextStep,
-        licensePlate: normalizedLicensePlate || null,
-        receptionDate: normalizedReceptionDate || null
+        licensePlate: normalizedLicensePlate,
+        receptionDate: normalizedReceptionDate
     })
 }
 

frontend/components/ui/license-plate-input.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="flex flex-col">
+    <label :for="inputId" class="font-bold uppercase text-xl mb-4">{{ label }}</label>
+    <input
+      :id="inputId"
+      :value="modelValue"
+      v-maska="maskOptions"
+      type="text"
+      :maxlength="maxLength"
+      :placeholder="placeholderText"
+      class="border-b border-black justify-self-start text-xl pb-[6px] uppercase"
+      @input="handleInput"
+    />
+    <label :for="checkboxId" class="mt-3 flex items-center gap-3 text-sm">
+      <input
+        :id="checkboxId"
+        :checked="allowAny"
+        type="checkbox"
+        class="h-4 w-4 accent-primary-500"
+        @change="toggleAllowAny"
+      />
+      Autoriser un format libre
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { vMaska } from 'maska/vue'
+type Props = {
+  modelValue: string
+  allowAny?: boolean
+  label?: string
+  id?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  allowAny: false,
+  label: 'Immatriculation',
+  id: 'license-plate'
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+  (event: 'update:allowAny', value: boolean): void
+}>()
+
+const inputId = computed(() => props.id)
+const checkboxId = computed(() => `${props.id}-format`)
+
+const maskOptions = computed(() =>
+  props.allowAny
+    ? undefined
+    : {
+        mask: '@@-###-@@',
+        eager: true,
+        tokens: {
+          '@': {
+            pattern: /[A-Za-z]/,
+            transform: (char: string) => char.toUpperCase()
+          }
+        }
+      }
+)
+const placeholderText = computed(() => (props.allowAny ? '' : 'AA-123-AA'))
+const maxLength = computed(() => (props.allowAny ? 20 : 9))
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement | null
+  if (!target) {
+    return
+  }
+
+  if (props.allowAny) {
+    emit('update:modelValue', target.value)
+    return
+  }
+
+  emit('update:modelValue', target.value)
+}
+
+const toggleAllowAny = (event: Event) => {
+  const target = event.target as HTMLInputElement | null
+  if (!target) {
+    return
+  }
+
+  const nextValue = target.checked
+  emit('update:allowAny', nextValue)
+  if (!nextValue) {
+    emit('update:modelValue', props.modelValue)
+  }
+}
+</script>