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">
          <IconLucideFileSearch class="mx-auto mb-4 h-14 w-14 text-gray-400" aria-hidden="true" />
          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">
                      <component
                        :is="documentIcon(document).component"
                        class="h-6 w-6"
                        aria-hidden="true"
                      />
                    </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>{{ formatFrenchDate(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 { formatFrenchDate } from '~/utils/date'
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
import IconLucideFileSearch from '~icons/lucide/file-search'


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 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>