feat : Ajout de pinia, création de la table weight et reception mise en place du système de step pour les receptions (WIP)

2026-01-12 18:07:58 +01:00
parent 03638d988b
commit cfe7baa4ae
31 changed files with 1226 additions and 36 deletions
--- a/frontend/components/reception/reception-form.vue
+++ b/frontend/components/reception/reception-form.vue
@@ -0,0 +1,36 @@
+<template>
+    <h1>Formulaire</h1>
+    <button
+        @click="validate"
+        class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+    >Valider
+    </button>
+</template>
+
+<script setup lang="ts">
+import { useReceptionStore } from '~/stores/reception'
+
+const receptionStore = useReceptionStore()
+const isLoading = ref<boolean>(false)
+const errorMessage = ref<string | null>(null)
+
+async function validate() {
+    if (!receptionStore.current) {
+        errorMessage.value = 'Réception introuvable.'
+        return
+    }
+
+    isLoading.value = true
+    try {
+        const nextStep = receptionStore.current.currentStep + 1
+        await receptionStore.updateReception(receptionStore.current.id, {
+            currentStep: nextStep
+        })
+    } catch (error) {
+        errorMessage.value = error.error ?? 'Erreur inconnue.'
+    } finally {
+        isLoading.value = false
+    }
+}
+
+</script>
--- a/frontend/components/reception/reception-weight.vue
+++ b/frontend/components/reception/reception-weight.vue
@@ -0,0 +1,41 @@
+<template>
+    <div v-if="weightData">
+        <p>{{ weightData.weight }} kg</p>
+        <p>DSD : {{ weightData.dsd }}</p>
+    </div>
+    <button
+        class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+        @click="getReceptionWeight"
+    >Peser</button>
+</template>
+
+<script setup lang="ts">
+import { getWeight } from '~/services/reception'
+import type { WeightData } from '~/services/dto/weight-data'
+import { useReceptionStore } from '~/stores/reception'
+
+const isLoading = ref(false)
+const weightData = ref<WeightData | null>(null)
+const errorMessage = ref<string | null>(null)
+const receptionStore = useReceptionStore()
+
+async function getReceptionWeight() {
+    isLoading.value = true
+    try {
+        weightData.value = await getWeight()
+
+        if (receptionStore.current) {
+            const nextStep = receptionStore.current.currentStep + 1
+            await receptionStore.updateReception(receptionStore.current.id, {
+                dsd: weightData.value?.dsd ?? null,
+                weight: weightData.value?.weight ?? null,
+                currentStep: nextStep
+            })
+        }
+    } catch (error) {
+        errorMessage.value = error.error
+    } finally {
+        isLoading.value = false
+    }
+}
+</script>
--- a/frontend/composables/useApi.ts
+++ b/frontend/composables/useApi.ts
@@ -21,7 +21,18 @@ export const useApi = (): ApiClient => {
    url: string,
    options: FetchOptions<'json'> = {}
  ) => {
-    return client<T>(url, { ...options, method })
+    const needsJsonBody = method === 'POST' || method === 'PUT'
+    const needsMergePatch = method === 'PATCH'
+
+    const headers = new Headers(options.headers as HeadersInit | undefined)
+
+    if (needsMergePatch && !headers.has('Content-Type')) {
+      headers.set('Content-Type', 'application/merge-patch+json')
+    } else if (needsJsonBody && !headers.has('Content-Type')) {
+      headers.set('Content-Type', 'application/json')
+    }
+
+    return client<T>(url, { ...options, method, headers })
  }

  return {
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -2,7 +2,7 @@ export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  ssr: false,
-  modules: ['@nuxtjs/tailwindcss'],
+  modules: ['@nuxtjs/tailwindcss', '@pinia/nuxt'],
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE
@@ -11,4 +11,4 @@ export default defineNuxtConfig({
  typescript: {
    strict: true
  }
-})
+})
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,7 +7,9 @@
      "name": "frontend",
      "hasInstallScript": true,
      "dependencies": {
+        "@pinia/nuxt": "^0.11.3",
        "nuxt": "^4.2.2",
+        "pinia": "^3.0.4",
        "vue": "^3.5.26",
        "vue-router": "^4.6.4"
      },
@@ -56,7 +58,6 @@
      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.27.1",
        "@babel/generator": "^7.28.5",
@@ -2678,6 +2679,20 @@
        "url": "https://opencollective.com/parcel"
      }
    },
+    "node_modules/@pinia/nuxt": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.11.3.tgz",
+      "integrity": "sha512-7WVNHpWx4qAEzOlnyrRC88kYrwnlR/PrThWT0XI1dSNyUAXu/KBv9oR37uCgYkZroqP5jn8DfzbkNF3BtKvE9w==",
+      "dependencies": {
+        "@nuxt/kit": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "pinia": "^3.0.4"
+      }
+    },
    "node_modules/@pkgjs/parseargs": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -3512,7 +3527,6 @@
      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.26.tgz",
      "integrity": "sha512-egp69qDTSEZcf4bGOSsprUr4xI73wfrY5oRs6GSgXFTiHrWj4Y3X5Ydtip9QMqiCMCPVwLglB9GBxXtTadJ3mA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/parser": "^7.28.5",
        "@vue/compiler-core": "3.5.26",
@@ -3710,7 +3724,6 @@
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "license": "MIT",
-      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -4092,7 +4105,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.9.0",
        "caniuse-lite": "^1.0.30001759",
@@ -4206,7 +4218,6 @@
      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=8"
      }
@@ -4396,7 +4407,6 @@
      "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
      "integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "consola": "^3.2.3"
      }
@@ -7966,7 +7976,6 @@
      "resolved": "https://registry.npmjs.org/nuxt/-/nuxt-4.2.2.tgz",
      "integrity": "sha512-n6oYFikgLEb70J4+K19jAzfx4exZcRSRX7yZn09P5qlf2Z59VNOBqNmaZO5ObzvyGUZ308SZfL629/Q2v2FVjw==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@dxup/nuxt": "^0.2.2",
        "@nuxt/cli": "^3.31.1",
@@ -8245,7 +8254,6 @@
      "resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.102.0.tgz",
      "integrity": "sha512-xMiyHgr2FZsphQ12ZCsXRvSYzmKXCm1ejmyG4GDZIiKOmhyt5iKtWq0klOfFsEQ6jcgbwrUdwcCVYzr1F+h5og==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@oxc-project/types": "^0.102.0"
      },
@@ -8469,6 +8477,61 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/pinia": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+      "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.9"
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-kit": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
+      "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.9",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-shared": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
+      "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/pinia/node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="
+    },
    "node_modules/pirates": {
      "version": "4.0.7",
      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
@@ -8523,7 +8586,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -9073,7 +9135,6 @@
      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
      "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "cssesc": "^3.0.0",
        "util-deprecate": "^1.0.2"
@@ -9530,7 +9591,6 @@
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.55.1.tgz",
      "integrity": "sha512-wDv/Ht1BNHB4upNbK74s9usvl7hObDnvVzknxqY/E/O3X6rW1U1rV1aENEfJ54eFZDTNo7zv1f5N4edCluH7+A==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@types/estree": "1.0.8"
      },
@@ -10341,7 +10401,6 @@
      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@alloc/quick-lru": "^5.2.0",
        "arg": "^5.0.2",
@@ -11166,7 +11225,6 @@
      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
      "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "esbuild": "^0.27.0",
        "fdir": "^6.5.0",
@@ -11523,7 +11581,6 @@
      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.26.tgz",
      "integrity": "sha512-SJ/NTccVyAoNUJmkM9KUqPcYlY+u8OVL1X5EW9RIs3ch5H2uERxyyIUI4MRxVCSOiEcupX9xNGde1tL9ZKpimA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/compiler-dom": "3.5.26",
        "@vue/compiler-sfc": "3.5.26",
@@ -11560,7 +11617,6 @@
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
      "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/devtools-api": "^6.6.4"
      },
@@ -11762,7 +11818,6 @@
      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
      "license": "ISC",
-      "peer": true,
      "bin": {
        "yaml": "bin.mjs"
      },
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,9 @@
    "build:dist": "nuxt generate && rm -rf dist && cp -R .output/public dist"
  },
  "dependencies": {
+    "@pinia/nuxt": "^0.11.3",
    "nuxt": "^4.2.2",
+    "pinia": "^3.0.4",
    "vue": "^3.5.26",
    "vue-router": "^4.6.4"
  },
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,9 +1,21 @@
 <template>
-    <div class="min-h-screen flex items-center justify-center">
-        <h1 class="text-3xl font-bold">Nuxt OK ✅</h1>
+    <div class="">
+        <h1 class="text-3xl font-bold">Liste des receptions</h1>
+        <ul>
+            <li v-for="reception in receptionList" :key="reception.id">
+                <NuxtLink :to="`/reception/${reception.id}`">Réception numéro {{ reception.id}}</NuxtLink>
+            </li>
+        </ul>
    </div>
 </template>

 <script setup lang="ts">
+import type {ReceptionData} from "~/services/dto/reception-data";
+import {getReceptionList} from "~/services/reception";

+const receptionList = ref<ReceptionData[]>()
+
+onMounted(async () => {
+    receptionList.value = await getReceptionList()
+})
 </script>
--- a/frontend/pages/reception/[[id]].vue
+++ b/frontend/pages/reception/[[id]].vue
@@ -0,0 +1,42 @@
+<template>
+    <div v-if="errorMessage" class="text-red-600">{{ errorMessage }}</div>
+    <div v-if="isLoading" class="text-neutral-600">Chargement...</div>
+    <div v-else>
+        <ReceptionForm v-if="storeReception?.currentStep === 0"/>
+        <ReceptionWeight v-if="storeReception?.currentStep === 1"/>
+        <div v-if="storeReception?.currentStep === 2">Décharger</div>
+        <ReceptionWeight v-if="storeReception?.currentStep === 3"/>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { createReception, getReception } from '~/services/reception'
+import type { ReceptionData } from '~/services/dto/reception-data'
+import { useReceptionStore } from '~/stores/reception'
+import { storeToRefs } from 'pinia'
+
+const route = useRoute()
+const router = useRouter()
+
+const isLoading = ref<boolean>(false)
+const errorMessage = ref<string | null>(null)
+const receptionStore = useReceptionStore()
+const { current: storeReception } = storeToRefs(receptionStore)
+
+onMounted(async () => {
+    isLoading.value = true
+    const raw = route.params.id
+    const idStr = Array.isArray(raw) ? raw[0] : raw
+    const id = idStr ? Number(idStr) : null
+
+    try {
+        const result = id === null ? await createReception() : await getReception(id)
+        if (result) {
+            receptionStore.setCurrent(result as ReceptionData)
+        }
+    } catch (error) {
+        errorMessage.value = error.error ?? 'Erreur inconnue.'
+    }
+    isLoading.value = false
+})
+</script>
--- a/frontend/services/dto/reception-data.ts
+++ b/frontend/services/dto/reception-data.ts
@@ -0,0 +1,9 @@
+export interface ReceptionData {
+    id: number
+    dsd: number | null
+    licensePlate: string | null
+    weight: number | null
+    receptionDate: string
+    currentStep: number
+    isValid: boolean
+}
--- a/frontend/services/dto/weight-data.ts
+++ b/frontend/services/dto/weight-data.ts
@@ -0,0 +1,5 @@
+export interface WeightData {
+    weight: number | null
+    dsd: number | null
+    receptionDate: string
+}
--- a/frontend/services/reception.ts
+++ b/frontend/services/reception.ts
@@ -0,0 +1,50 @@
+import { useApi } from '~/composables/useApi'
+import type { ReceptionData } from '~/services/dto/reception-data'
+import type { WeightData } from '~/services/dto/weight-data'
+
+const api = useApi()
+
+export async function getReceptionList() {
+    try {
+        return await api.get<ReceptionData>(`receptions`)
+    } catch (error) {
+        console.error(error.message, error)
+        return error
+    }
+}
+
+export async function getReception(id: number) {
+    try {
+        return await api.get<ReceptionData>(`receptions/${id}`)
+    } catch (error) {
+        console.error(error.message, error)
+        return error
+    }
+}
+
+export async function createReception(payload: Partial<ReceptionData> = {}) {
+    try {
+        return await api.post<ReceptionData>('receptions', payload)
+    } catch (error) {
+        console.error(error.message, error)
+        return error
+    }
+}
+
+export async function updateReception(id: number, payload: Partial<ReceptionData>) {
+    try {
+        return await api.patch<ReceptionData>(`receptions/${id}`, payload)
+    } catch (error) {
+        console.error(error.message, error)
+        return error
+    }
+}
+
+export async function getWeight(): Promise<WeightData> {
+    try {
+        return await api.get<WeightData>('receptions/weigh')
+    } catch (error) {
+        console.error(error.message, error)
+        return error
+    }
+}
--- a/frontend/stores/reception.ts
+++ b/frontend/stores/reception.ts
@@ -0,0 +1,72 @@
+import { defineStore } from 'pinia'
+import type { ReceptionData } from '~/services/dto/reception-data'
+import { createReception, getReception, updateReception } from '~/services/reception'
+
+const isReceptionData = (value: unknown): value is ReceptionData => {
+  return Boolean(value && typeof value === 'object' && 'id' in value)
+}
+
+export const useReceptionStore = defineStore('reception', {
+  state: () => ({
+    current: null as ReceptionData | null,
+    isLoading: false,
+    errorMessage: null as string | null
+  }),
+  actions: {
+    setCurrent(reception: ReceptionData | null) {
+      this.current = reception
+    },
+    clearError() {
+      this.errorMessage = null
+    },
+    async loadReception(id: number) {
+      this.isLoading = true
+      this.errorMessage = null
+      try {
+        const result = await getReception(id)
+        if (!isReceptionData(result)) {
+          this.errorMessage = 'Réception introuvable.'
+          this.current = null
+          return null
+        }
+
+        this.current = result
+        return result
+      } finally {
+        this.isLoading = false
+      }
+    },
+    async createReception() {
+      this.isLoading = true
+      this.errorMessage = null
+      try {
+        const result = await createReception()
+        if (!isReceptionData(result)) {
+          this.errorMessage = 'Impossible de créer la réception.'
+          return null
+        }
+
+        this.current = result
+        return result
+      } finally {
+        this.isLoading = false
+      }
+    },
+    async updateReception(id: number, payload: Partial<ReceptionData>) {
+      this.isLoading = true
+      this.errorMessage = null
+      try {
+        const result = await updateReception(id, payload)
+        if (!isReceptionData(result)) {
+          this.errorMessage = 'Impossible de mettre à jour la réception.'
+          return null
+        }
+
+        this.current = result
+        return result
+      } finally {
+        this.isLoading = false
+      }
+    }
+  }
+})