Inventory/app/pages/product-catalog.vue

<template>
  <main class="container mx-auto px-6 py-10 space-y-8">
    <header class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
      <div>
        <h1 class="text-3xl font-semibold text-base-content">Catalogue des produits</h1>
        <p class="text-sm text-base-content/70">
          Retrouvez l'ensemble des produits du catalogue, leurs informations fournisseurs et leurs catégories.
        </p>
      </div>
      <div class="flex flex-wrap gap-2">
        <NuxtLink to="/product/create" class="btn btn-primary btn-sm md:btn-md">
          Ajouter un produit
        </NuxtLink>
        <NuxtLink to="/product-category" class="btn btn-outline btn-sm md:btn-md">
          Gérer les catégories
        </NuxtLink>
      </div>
    </header>

    <section class="card border border-base-200 bg-base-100 shadow-sm">
      <div class="card-body space-y-4">
        <div
          v-if="errorMessage"
          class="alert alert-error"
        >
          <div class="flex flex-col gap-1">
            <span class="font-semibold">Impossible de charger les produits</span>
            <span class="text-sm">{{ errorMessage }}</span>
          </div>
          <button type="button" class="btn btn-ghost btn-sm ml-auto" @click="reload">
            Réessayer
          </button>
        </div>

        <DataTable
          v-else
          :columns="columns"
          :rows="productRows"
          :loading="loadingProducts"
          :sort="table.sort.value"
          :pagination="paginationState"
          :column-filters="table.columnFilters.value"
          :show-per-page="true"
          empty-message="Aucun produit n'a encore été enregistré."
          no-results-message="Aucun produit ne correspond à votre recherche."
          @sort="table.handleSort"
          @update:current-page="table.handlePageChange"
          @update:per-page="table.handlePerPageChange"
          @update:column-filters="table.handleColumnFiltersChange"
        >
          <template #toolbar>
            <label class="w-full sm:w-72">
              <span class="text-xs font-semibold uppercase tracking-wide text-base-content/70">Recherche</span>
              <input
                v-model="table.searchTerm.value"
                type="text"
                class="input input-bordered input-sm w-full mt-1"
                placeholder="Nom ou référence…"
                @input="table.debouncedSearch"
              />
            </label>
          </template>

          <template #cell-preview="{ row }">
            <DocumentThumbnail
              :document="resolvePrimaryDocument(row.product)"
              :alt="resolvePreviewAlt(row.product)"
            />
          </template>

          <template #cell-name="{ row }">
            <span class="font-medium">{{ row.product.name }}</span>
          </template>

          <template #cell-reference="{ row }">
            {{ row.product.reference || '—' }}
          </template>

          <template #cell-typeProduct="{ row }">
            <NuxtLink
              v-if="row.product.typeProduct?.id"
              :to="`/product-category/${row.product.typeProduct.id}/edit`"
              class="link link-hover link-primary"
            >
              {{ row.product.typeProduct.name }}
            </NuxtLink>
            <span v-else>{{ row.product.typeProduct?.name || '—' }}</span>
          </template>

          <template #cell-suppliers="{ row }">
            <div
              v-if="row.suppliers.visible.length"
              class="flex max-w-[14rem] flex-wrap items-center gap-1 text-sm"
              :title="row.suppliers.tooltip"
            >
              <span
                v-for="supplier in row.suppliers.visible"
                :key="supplier"
                class="badge badge-ghost badge-sm whitespace-nowrap"
              >
                {{ supplier }}
              </span>
              <span
                v-if="row.suppliers.overflow"
                class="badge badge-outline badge-sm"
              >
                +{{ row.suppliers.overflow }}
              </span>
            </div>
            <span v-else class="text-sm text-base-content/50">—</span>
          </template>

          <template #cell-price="{ row }">
            {{ formatPrice(row.product.supplierPrice) }}
          </template>

          <template #cell-actions="{ row }">
            <div class="flex justify-end gap-2">
              <NuxtLink
                :to="`/product/${row.product.id}/edit`"
                class="btn btn-ghost btn-xs"
              >
                Modifier
              </NuxtLink>
              <button
                v-if="canEdit"
                type="button"
                class="btn btn-ghost btn-xs text-error"
                @click="confirmDelete(row.product)"
              >
                Supprimer
              </button>
            </div>
          </template>
        </DataTable>
      </div>
    </section>
  </main>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useHead } from '#imports'
import DataTable from '~/components/common/DataTable.vue'
import { useProducts } from '~/composables/useProducts'
import { useProductTypes } from '~/composables/useProductTypes'
import { useToast } from '~/composables/useToast'
import { useDataTable } from '~/composables/useDataTable'
import DocumentThumbnail from '~/components/DocumentThumbnail.vue'
import { isImageDocument, isPdfDocument } from '~/utils/documentPreview'

const { canEdit } = usePermissions()

useHead(() => ({ title: 'Catalogue des produits' }))

const {
  products,
  total,
  loading,
  error,
  loadProducts,
  deleteProduct,
} = useProducts()
const { productTypes, loadProductTypes } = useProductTypes()
const toast = useToast()

const table = useDataTable(
  { fetchData: fetchProducts },
  { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true },
)

const loadingProducts = computed(() => loading.value)
const errorMessage = computed(() => (typeof error.value === 'string' && error.value.length ? error.value : null))

const columns = [
  { key: 'preview', label: 'Aperçu', width: 'w-16' },
  { key: 'name', label: 'Nom', sortable: true },
  { key: 'reference', label: 'Référence' },
  { key: 'typeProduct', label: 'Type de produit', filterable: true, filterPlaceholder: 'Filtrer…' },
  { key: 'suppliers', label: 'Fournisseurs' },
  { key: 'price', label: 'Prix indicatif', sortable: true, sortKey: 'supplierPrice', align: 'right' as const },
  { key: 'actions', label: 'Actions', align: 'right' as const, width: 'w-32' },
]

const productsOnPage = computed(() => productRows.value.length)
const paginationState = table.pagination(total, productsOnPage)

// Enrich products with full type data
const normalizedProducts = computed(() => {
  return (Array.isArray(products.value) ? products.value : []).map((product) => {
    const typeProduct = productTypes.value.find(t => t.id === product.typeProductId)
    return { ...product, typeProduct: typeProduct || product.typeProduct || null }
  })
})

const productRows = computed(() =>
  normalizedProducts.value.map(product => ({
    id: product.id,
    product,
    suppliers: buildSuppliersDisplay(product),
  })),
)

async function fetchProducts() {
  await loadProducts({
    search: table.searchTerm.value,
    page: table.currentPage.value,
    itemsPerPage: table.itemsPerPage.value,
    orderBy: table.sortField.value,
    orderDir: table.sortDirection.value as 'asc' | 'desc',
    typeName: table.columnFilters.value.typeProduct || undefined,
    force: true,
  })
}

const priceFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'narrowSymbol',
})

const formatPrice = (value: any) => {
  if (value === null || value === undefined || value === '') return '—'
  const number = Number(value)
  return Number.isNaN(number) ? '—' : priceFormatter.format(number)
}

const MAX_VISIBLE_SUPPLIERS = 3

const resolveProductSuppliers = (product: Record<string, any>) => {
  const names: string[] = []
  const seen = new Set<string>()

  const pushName = (maybeName: unknown) => {
    if (typeof maybeName !== 'string') return
    const normalized = maybeName.trim().replace(/\s+/g, ' ')
    if (!normalized.length) return
    const key = normalized.toLowerCase()
    if (seen.has(key)) return
    seen.add(key)
    names.push(normalized)
  }

  const collectConstructeurs = (value: unknown): void => {
    if (!value) return
    if (Array.isArray(value)) { value.forEach(collectConstructeurs); return }
    if (typeof value === 'string') { pushName(value); return }
    if (typeof value === 'object') {
      const record = value as Record<string, any>
      pushName(record?.name ?? record?.label ?? record?.companyName ?? record?.company ?? null)
      if (record?.constructeur) collectConstructeurs(record.constructeur)
      if (Array.isArray(record?.constructeurs)) collectConstructeurs(record.constructeurs)
    }
  }

  const collectFromLabel = (value: unknown): void => {
    if (typeof value !== 'string') return
    value.split(/[,;\\/•·|]+/).map(part => part.trim()).filter(Boolean).forEach(pushName)
  }

  collectConstructeurs(product?.constructeurs)
  collectConstructeurs(product?.constructeur)
  collectFromLabel(product?.constructeursLabel)
  collectFromLabel(product?.supplierLabel)
  collectFromLabel(product?.suppliers)

  return names
}

const buildSuppliersDisplay = (product: Record<string, any>) => {
  const suppliers = resolveProductSuppliers(product)
  const visible = suppliers.slice(0, MAX_VISIBLE_SUPPLIERS)
  const overflow = Math.max(suppliers.length - visible.length, 0)
  return { suppliers, visible, overflow, tooltip: suppliers.length ? suppliers.join(', ') : '' }
}

const resolvePrimaryDocument = (product: Record<string, any>) => {
  const documents = Array.isArray(product?.documents) ? product.documents : []
  if (!documents.length) return null
  const normalized = documents.filter((doc: any) => doc && typeof doc === 'object')
  const withPath = normalized.filter((doc: any) => doc?.fileUrl || doc?.path)
  if (!withPath.length) return normalized[0] ?? null
  const images = withPath.filter((doc: any) => isImageDocument(doc))
  if (images.length) return images[0]
  const pdf = withPath.find((doc: any) => isPdfDocument(doc))
  if (pdf) return pdf
  return withPath[0]
}

const resolvePreviewAlt = (product: Record<string, any>) => {
  const parts = [product?.name, product?.reference].filter(Boolean)
  return parts.length ? `Aperçu du document de ${parts.join(' – ')}` : 'Aperçu du document'
}

const reload = () => fetchProducts()

const { confirm } = useConfirm()

const confirmDelete = async (product: Record<string, any>) => {
  const confirmed = await confirm({
    message: `Voulez-vous vraiment supprimer le produit "${product.name}" ?\n\nCette action est irréversible.`,
  })
  if (!confirmed) return
  const result = await deleteProduct(product.id)
  if (result.success) {
    toast.showSuccess(`Produit "${product.name}" supprimé`)
  }
}

onMounted(async () => {
  await Promise.all([fetchProducts(), loadProductTypes()])
})
</script>