feat: add product catalogue and product-aware UI

- introduce product catalogue pages, management view entries and shared product composables\n- wire product selection into component/piece flows and machine skeleton requirements\n- display linked product metadata and documents across machine, component and piece views\n- generalize model type tooling to handle PRODUCT category
2025-11-05 15:35:02 +01:00
parent 3af6c50892
commit d860f24e69
42 changed files with 6052 additions and 142 deletions
--- a/app/components/ProductSelect.vue
+++ b/app/components/ProductSelect.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="space-y-1">
+    <SearchSelect
+      :model-value="modelValue"
+      :options="productOptions"
+      :loading="loading"
+      :placeholder="placeholder"
+      :empty-text="emptyText"
+      size="sm"
+      option-value="id"
+      option-label="name"
+      :disabled="disabled"
+      @update:modelValue="updateValue"
+    >
+      <template #option-description="{ option }">
+        <span class="text-xs text-base-content/60">
+          {{ formatDescription(option) }}
+        </span>
+      </template>
+    </SearchSelect>
+    <p v-if="helperText" class="text-xs text-base-content/60">
+      {{ helperText }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue'
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import { useProducts } from '~/composables/useProducts'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    placeholder?: string
+    emptyText?: string
+    helperText?: string
+    disabled?: boolean
+    typeProductId?: string | null
+  }>(),
+  {
+    modelValue: '',
+    placeholder: 'Sélectionner un produit…',
+    emptyText: 'Aucun produit disponible',
+    helperText: '',
+    disabled: false,
+    typeProductId: null,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | null): void
+}>()
+
+const { products, loading, loadProducts } = useProducts()
+
+const productOptions = computed(() => {
+  const baseOptions = Array.isArray(products.value) ? products.value : []
+  if (!props.typeProductId) {
+    return baseOptions
+  }
+
+  const allowedTypeId = String(props.typeProductId)
+  return baseOptions.filter((product) => {
+    const typeId =
+      product?.typeProductId ||
+      product?.typeProduct?.id ||
+      null
+    return typeId ? String(typeId) === allowedTypeId : false
+  })
+})
+
+onMounted(() => {
+  if (productOptions.value.length === 0) {
+    loadProducts().catch((error) => {
+      console.error('Erreur lors du chargement des produits:', error)
+    })
+  }
+})
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (typeof value === 'string') {
+      const exists = productOptions.value.some((product) => product.id === value)
+      if (!exists && productOptions.value.length === 0 && !loading.value) {
+        loadProducts().catch((error) => {
+          console.error('Erreur lors du chargement des produits:', error)
+        })
+      }
+    }
+  },
+)
+
+const updateValue = (value: string | number | null | undefined) => {
+  if (value === undefined || value === null || value === '') {
+    emit('update:modelValue', null)
+    return
+  }
+  emit('update:modelValue', String(value))
+}
+
+const formatDescription = (option: any) => {
+  const parts: string[] = []
+  if (option?.reference) {
+    parts.push(option.reference)
+  }
+  if (option?.supplierPrice !== undefined && option.supplierPrice !== null) {
+    const price = Number(option.supplierPrice)
+    if (!Number.isNaN(price)) {
+      parts.push(`${price.toFixed(2)} €`)
+    }
+  }
+  return parts.length ? parts.join(' • ') : 'Sans référence'
+}
+</script>