Inventory/app/pages/documents.vue

<template>
  <main class="container mx-auto px-6 py-8 space-y-8">


    <DocumentPreviewModal
      :document="previewDocument"
      :visible="previewVisible"
      @close="closePreview"
    />

    <section class="card bg-base-100 shadow-lg">
      <div class="card-body space-y-6">
        <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
          <div class="w-full md:w-2/3">
            <label class="label">
              <span class="label-text">Recherche</span>
            </label>
            <input
              v-model="searchTerm"
              type="search"
              placeholder="Nom du document, type, site, machine..."
              class="input input-bordered w-full"
            />
          </div>

          <div class="w-full md:w-1/3">
            <label class="label">
              <span class="label-text">Filtrer par rattachement</span>
            </label>
            <select v-model="attachmentFilter" class="select select-bordered w-full">
              <option value="all">Tous</option>
              <option value="site">Sites</option>
              <option value="machine">Machines</option>
              <option value="composant">Composants</option>
              <option value="piece">Pièces</option>
            </select>
          </div>
        </div>

        <div class="divider my-0"></div>

        <div v-if="loading" class="flex flex-col items-center justify-center py-16 text-sm text-gray-500">
          <span class="loading loading-spinner loading-lg mb-3"></span>
          Chargement des documents...
        </div>

        <div v-else-if="filteredDocuments.length === 0" class="text-center py-16 text-sm text-gray-500">
          <svg class="mx-auto mb-4 h-14 w-14 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 000 2.828L11.586 19a2 2 0 002.828 0L21 12.414V7H15.172z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 17L3 20m0 0l3 3m-3-3h12" />
          </svg>
          Aucun document ne correspond à votre recherche pour l'instant.
        </div>

        <div v-else class="overflow-x-auto">
          <table class="table">
            <thead>
              <tr class="text-xs uppercase">
                <th>Nom</th>
                <th>Type</th>
                <th>Taille</th>
                <th>Rattaché à</th>
                <th>Date</th>
                <th class="text-right">Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="document in filteredDocuments" :key="document.id" class="text-sm">
                <td>
                  <div class="flex items-center gap-3">
                    <span class="text-xl" :class="documentIcon(document).colorClass">
                      {{ documentIcon(document).icon }}
                    </span>
                    <div>
                      <div class="font-semibold">{{ document.name }}</div>
                      <div class="text-xs text-gray-500">{{ document.filename }}</div>
                    </div>
                  </div>
                </td>
                <td>{{ document.mimeType || 'Inconnu' }}</td>
                <td>{{ formatSize(document.size) }}</td>
                <td>
                  <div class="flex flex-col text-xs">
                    <span v-if="document.site">Site · {{ document.site.name }}</span>
                    <span v-else-if="document.machine">Machine · {{ document.machine.name }}</span>
                    <span v-else-if="document.composant">Composant · {{ document.composant.name }}</span>
                    <span v-else-if="document.piece">Pièce · {{ document.piece.name }}</span>
                    <span v-else class="text-gray-400">Non défini</span>
                  </div>
                </td>
                <td>{{ formatDate(document.createdAt) }}</td>
                <td class="text-right">
                  <div class="flex justify-end gap-2">
                    <button
                      class="btn btn-ghost btn-xs"
                      type="button"
                      :disabled="!canPreviewDocument(document)"
                      :title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
                      @click="openPreview(document)"
                    >
                      Consulter
                    </button>
                    <button class="btn btn-ghost btn-xs" type="button" @click="downloadDocument(document)">
                      Télécharger
                    </button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>
  </main>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useDocuments } from '~/composables/useDocuments'
import { getFileIcon } from '~/utils/fileIcons'
import { canPreviewDocument } from '~/utils/documentPreview'
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'


const { documents, loading, loadDocuments } = useDocuments()

const searchTerm = ref('')
const attachmentFilter = ref('all')
const previewDocument = ref(null)
const previewVisible = ref(false)

onMounted(() => {
  loadDocuments()
})

const filteredDocuments = computed(() => {
  const term = searchTerm.value.trim().toLowerCase()
  const filter = attachmentFilter.value

  return documents.value.filter((document) => {
    const matchesFilter =
      filter === 'all' ||
      (filter === 'site' && document.siteId) ||
      (filter === 'machine' && document.machineId) ||
      (filter === 'composant' && document.composantId) ||
      (filter === 'piece' && document.pieceId)

    if (!matchesFilter) return false

    if (!term) return true

    const searchable = [
      document.name,
      document.filename,
      document.mimeType,
      document.site?.name,
      document.machine?.name,
      document.composant?.name,
      document.piece?.name,
    ]
      .filter(Boolean)
      .map(value => value.toLowerCase())

    return searchable.some(value => value.includes(term))
  })
})

const formatSize = (size) => {
  if (size === undefined || size === null) return '—'
  if (size === 0) return '0 B'
  const units = ['B', 'KB', 'MB', 'GB']
  const index = Math.min(units.length - 1, Math.floor(Math.log(size) / Math.log(1024)))
  const formatted = size / Math.pow(1024, index)
  return `${formatted.toFixed(1)} ${units[index]}`
}

const documentIcon = (doc) => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })

const formatDate = (date) => {
  if (!date) return '—'
  return new Intl.DateTimeFormat('fr-FR', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  }).format(new Date(date))
}

const downloadDocument = (doc) => {
  if (!doc?.path) return

  if (doc.path.startsWith('data:')) {
    const link = document.createElement('a')
    link.href = doc.path
    link.download = doc.filename || doc.name || 'document'
    link.click()
    return
  }

  window.open(doc.path, '_blank')
}

const openPreview = (doc) => {
  if (!canPreviewDocument(doc)) return
  previewDocument.value = doc
  previewVisible.value = true
}

const closePreview = () => {
  previewVisible.value = false
  previewDocument.value = null
}
</script>