fix(slots) : filter slot select options server-side instead of client-side

PieceSelect, ProductSelect and ComposantSelect were loading up to 200
items then filtering client-side by typeId. If the matching items were
not in the first 200, the dropdown appeared empty.

Now each select component uses API Platform filters (typePiece,
typeProduct, typeComposant) to fetch only relevant items server-side,
with local state to avoid overwriting the global catalog cache.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/components/ProductSelect.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import SearchSelect from '~/components/common/SearchSelect.vue'
 import { useProducts } from '~/composables/useProducts'
 
@@ -52,43 +52,39 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: string | null): void
 }>()
 
-const { products, loading, loadProducts } = useProducts()
+const { loading: globalLoading, loadProducts } = useProducts()
 
-const productOptions = computed(() => {
-  const baseOptions = Array.isArray(products.value) ? products.value : []
-  if (!props.typeProductId) {
-    return baseOptions
+const localProducts = ref<any[]>([])
+const localLoading = ref(false)
+const loading = computed(() => localLoading.value || globalLoading.value)
+
+const productOptions = computed(() => localProducts.value)
+
+const loadFilteredProducts = async () => {
+  if (!props.typeProductId) return
+  localLoading.value = true
+  try {
+    const result = await loadProducts({ typeProductId: props.typeProductId, itemsPerPage: 500, force: true })
+    if (result.success && result.data?.items) {
+      localProducts.value = result.data.items
+    }
   }
-
-  const allowedTypeId = String(props.typeProductId)
-  return baseOptions.filter((product) => {
-    const typeId =
-      product?.typeProductId ||
-      product?.typeProduct?.id ||
-      null
-    return typeId ? String(typeId) === allowedTypeId : false
-  })
-})
+  catch (error: unknown) {
+    console.error('Erreur lors du chargement des produits:', error)
+  }
+  finally {
+    localLoading.value = false
+  }
+}
 
 onMounted(() => {
-  if (productOptions.value.length === 0) {
-    loadProducts().catch((error) => {
-      console.error('Erreur lors du chargement des produits:', error)
-    })
-  }
+  loadFilteredProducts()
 })
 
 watch(
-  () => props.modelValue,
-  (value) => {
-    if (typeof value === 'string' && value) {
-      const exists = productOptions.value.some((product) => product.id === value)
-      if (!exists && !loading.value) {
-        loadProducts({ force: true }).catch((error) => {
-          console.error('Erreur lors du chargement des produits:', error)
-        })
-      }
-    }
+  () => props.typeProductId,
+  () => {
+    loadFilteredProducts()
   },
 )