feat : Ajout d'un écran pour afficher les informations d'un bovin

frontend/i18n/locales/fr.json

@@ -1,64 +1,67 @@
 {
-  "errors": {
-    "http": {
-      "get": "Impossible de récupérer les données.",
-      "post": "Impossible de créer la ressource.",
-      "put": "Impossible de mettre à jour la ressource.",
-      "patch": "Impossible de mettre à jour la ressource.",
-      "delete": "Impossible de supprimer la ressource."
+    "errors": {
+        "http": {
+            "get": "Impossible de récupérer les données.",
+            "post": "Impossible de créer la ressource.",
+            "put": "Impossible de mettre à jour la ressource.",
+            "patch": "Impossible de mettre à jour la ressource.",
+            "delete": "Impossible de supprimer la ressource."
+        },
+        "reception": {
+            "list": "Impossible de récupérer la liste des réceptions.",
+            "fetch": "Impossible de récupérer la réception.",
+            "create": "Impossible de créer la réception.",
+            "update": "Impossible de mettre à jour la réception.",
+            "weigh": "Impossible de récupérer la pesée."
+        },
+        "receptionType": {
+            "list": "Impossible de récupérer la liste des types de réception."
+        },
+        "merchandiseType": {
+            "list": "Impossible de récupérer la liste des types de marchandises."
+        },
+        "building": {
+            "list": "Impossible de récupérer la liste des bâtiments."
+        },
+        "pelletType": {
+            "list": "Impossible de récupérer la liste des types de granulés."
+        },
+        "receptionPelletBuilding": {
+            "list": "Impossible de récupérer la liste des dépôts de granulés.",
+            "create": "Impossible d'enregistrer le dépôt de granulés.",
+            "delete": "Impossible de supprimer le dépôt de granulés."
+        },
+        "supplier": {
+            "list": "Impossible de récupérer la liste des fournisseurs."
+        },
+        "truck": {
+            "list": "Impossible de récupérer la liste des camions."
+        },
+        "carrier": {
+            "list": "Impossible de récupérer la liste des transporteurs."
+        },
+        "driver": {
+            "list": "Impossible de récupérer la liste des chauffeurs."
+        },
+        "vehicle": {
+            "list": "Impossible de récupérer la liste des immatriculations."
+        },
+        "auth": {
+            "login": "Identifiants invalides.",
+            "users": "Impossible de récupérer les utilisateurs.",
+            "logout": "Impossible de se déconnecter."
+        },
+        "identificationBovin": {
+            "get": "Impossible de récupérer les informations du bovin"
+        }
     },
-    "reception": {
-      "list": "Impossible de récupérer la liste des réceptions.",
-      "fetch": "Impossible de récupérer la réception.",
-      "create": "Impossible de créer la réception.",
-      "update": "Impossible de mettre à jour la réception.",
-      "weigh": "Impossible de récupérer la pesée."
-    },
-    "receptionType": {
-      "list": "Impossible de récupérer la liste des types de réception."
-    },
-    "merchandiseType": {
-      "list": "Impossible de récupérer la liste des types de marchandises."
-    },
-    "building": {
-      "list": "Impossible de récupérer la liste des bâtiments."
-    },
-    "pelletType": {
-      "list": "Impossible de récupérer la liste des types de granulés."
-    },
-    "receptionPelletBuilding": {
-      "list": "Impossible de récupérer la liste des dépôts de granulés.",
-      "create": "Impossible d'enregistrer le dépôt de granulés.",
-      "delete": "Impossible de supprimer le dépôt de granulés."
-    },
-    "supplier": {
-      "list": "Impossible de récupérer la liste des fournisseurs."
-    },
-    "truck": {
-      "list": "Impossible de récupérer la liste des camions."
-    },
-    "carrier": {
-      "list": "Impossible de récupérer la liste des transporteurs."
-    },
-    "driver": {
-      "list": "Impossible de récupérer la liste des chauffeurs."
-    },
-    "vehicle": {
-      "list": "Impossible de récupérer la liste des immatriculations."
-    },
-    "auth": {
-      "login": "Identifiants invalides.",
-      "users": "Impossible de récupérer les utilisateurs.",
-      "logout": "Impossible de se déconnecter."
+    "success": {
+        "reception": {
+            "update": "Réception mise à jour avec succès."
+        },
+        "auth": {
+            "login": "Connexion réussie.",
+            "logout": "Déconnexion réussie."
+        }
     }
-  },
-  "success": {
-    "reception": {
-      "update": "Réception mise à jour avec succès."
-    },
-    "auth": {
-      "login": "Connexion réussie.",
-      "logout": "Déconnexion réussie."
-    }
-  }
 }

frontend/layouts/default.vue

@@ -28,6 +28,15 @@
                             Reception
                         </a>
                     </NuxtLink>
+                    <NuxtLink to="/identification-bovin" custom v-slot="{ href, navigate, isActive }">
+                        <a
+                            :href="href"
+                            @click="navigate"
+                            :class="isIdentificationActive ? 'opacity-100' : 'opacity-50'"
+                        >
+                            Identification
+                        </a>
+                    </NuxtLink>
                 </nav>
                 <button
                     type="button"
@@ -50,6 +59,7 @@ import { useAuthStore } from '~/stores/auth'
 const route = useRoute()
 const auth = useAuthStore()
 const isReceptionActive = computed(() => route.path.startsWith('/reception'))
+const isIdentificationActive = computed(() => route.path.startsWith('/identification-bovin'))
 
 const handleLogout = async () => {
   try {

frontend/pages/identification-bovin.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <div class="flex justify-between">
+            <h1 class="font-bold text-4xl uppercase">Passeport du bovin</h1>
+            <p v-if="bovinData">{{ bovinData.presencePeriod }}</p>
+        </div>
+        <div class="overflow-x-auto mt-12" v-if="bovinData">
+            <table class="w-full border-collapse border border-black text-sm">
+                <tr>
+                    <th
+                        rowspan="2"
+                        class="w-10 border border-black p-0 align-middle"
+                    >
+                        <div class="flex h-full w-full items-center justify-center">
+                          <span class="-rotate-90 whitespace-nowrap font-semibold tracking-widest">
+                            VEAU
+                          </span>
+                        </div>
+                    </th>
+                    <th class="border border-black px-4 py-3 text-center font-semibold">N° de travail</th>
+                    <th class="border border-black px-4 py-3 text-center font-semibold">Sexe</th>
+                    <th class="border border-black px-4 py-3 text-center font-semibold">Code Race</th>
+                    <th class="border border-black px-4 py-3 text-center font-semibold">Code pays</th>
+                    <th class="border border-black px-4 py-3 text-center font-semibold">Type de racial</th>
+                    <th class="border border-black px-4 py-3 text-center font-semibold">Date de naissance</th>
+                </tr>
+
+                <tr>
+                    <th class="border border-black px-4 py-3 text-center font-semibold">{{ bovinData.workNumber }}</th>
+                    <th class="border border-black px-4 py-3 text-center font-semibold">{{ bovinData.sex }}</th>
+                    <th class="border border-black px-4 py-3 text-center font-semibold">{{ bovinData.breedType }}</th>
+                    <th class="border border-black px-4 py-3 text-center font-semibold">FR {{ bovinData.numeroNational }}</th>
+                    <th class="border border-black px-4 py-3 text-center font-semibold">???</th>
+                    <th class="border border-black px-4 py-3 text-center font-semibold">{{ bovinData.birthDate }}</th>
+                </tr>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {getBovinData} from "~/services/identification-bovin";
+
+const bovinData = ref<IdentificationBovinData|null>()
+
+onMounted(async () => {
+    bovinData.value = await getBovinData('7979580026');
+})
+</script>

frontend/services/dto/identification-bovin-data.ts

@@ -0,0 +1,22 @@
+interface IdentificationBovinData {
+    numeroNational: string,
+    sex: string | null,
+    breedType: string | null,
+    workNumber: string | null,
+    birthDate: string | null,
+    birthDateCompletenessFlag: string | null,
+    isFilie: boolean | null,
+    motherNationalNumber: string | null,
+    motherBreedType: string | null,
+    fatherNationalNumber: string | null,
+    fatherBreedType: string | null,
+    birthExploitationNumber: string | null,
+    presencePeriod: PresencePeriod[]
+}
+
+interface PresencePeriod {
+    entryDate: string | null,
+    entryCause: string | null,
+    exitDate: string | null,
+    exitCause: string | null
+}

frontend/services/identification-bovin.ts

@@ -0,0 +1,25 @@
+import { useApi } from '~/composables/useApi'
+
+export type BovinDataResponse =
+    | IdentificationBovinData
+    | { 'hydra:member'?: IdentificationBovinData }
+
+export async function getBovinData(
+    nationalNumber: string
+): Promise<IdentificationBovinData | null> {
+    const api = useApi()
+    const response = await api.get<BovinDataResponse>(
+        `bovins/${nationalNumber}/identification`,
+        {},
+        { toastErrorKey: 'errors.building.list' }
+    )
+
+    if (response && typeof response === 'object') {
+        // direct item
+        if (!('hydra:member' in response)) return response as IdentificationBovinData
+        // hydra format
+        if (response['hydra:member']) return response['hydra:member']
+    }
+
+    return null
+}