portfolio-generator-app/pages/index.vue

<script setup lang="ts">
import type { PortfolioSummary } from '~~/types'

const { data, refresh } = await useFetch<{ portfolios: PortfolioSummary[] }>('/api/portfolios')
const toast = useToast()

const portfolios = computed(() => data.value?.portfolios ?? [])
const creating = ref(false)
const newName = ref('')
const showCreate = ref(false)

const dateFmt = new Intl.DateTimeFormat('fr-FR', { dateStyle: 'medium', timeStyle: 'short' })

async function create() {
  creating.value = true
  try {
    const p = await $fetch<{ id: string }>('/api/portfolios', {
      method: 'POST',
      body: { name: newName.value },
    })
    navigateTo(`/portfolios/${p.id}`)
  } finally {
    creating.value = false
  }
}

async function duplicate(id: string) {
  await $fetch(`/api/portfolios/${id}/duplicate`, { method: 'POST' })
  await refresh()
  toast.add({ title: 'Portfolio dupliqué', color: 'success' })
}

async function remove(id: string, name: string) {
  if (!confirm(`Supprimer le portfolio « ${name} » ? Cette action est définitive.`)) return
  await $fetch(`/api/portfolios/${id}`, { method: 'DELETE' })
  await refresh()
  toast.add({ title: 'Portfolio supprimé', color: 'neutral' })
}

const downloading = ref<string | null>(null)

/**
 * Télécharge le PDF : direct s'il est à jour, sinon (jamais généré ou modifié
 * depuis) on le génère puis on le télécharge.
 */
async function downloadPdf(p: PortfolioSummary) {
  if (p.pdfCurrent && p.exportFileName) {
    window.open(`/api/exports/${encodeURIComponent(p.exportFileName)}`, '_blank')
    return
  }
  downloading.value = p.id
  try {
    const result = await $fetch<{ fileName: string, downloadUrl: string }>(`/api/portfolios/${p.id}/generate`, {
      method: 'POST',
      body: {},
      timeout: 300_000,
    })
    toast.add({ title: 'PDF généré', description: result.fileName, color: 'success' })
    window.open(result.downloadUrl, '_blank')
    await refresh() // rafraîchit pdfCurrent / exportFileName sur la carte
  } catch {
    toast.add({ title: 'Échec de la génération', color: 'error' })
  } finally {
    downloading.value = null
  }
}

async function copyPublicLink(id: string) {
  const url = `${window.location.origin}/view/${id}`
  try {
    await navigator.clipboard.writeText(url)
    toast.add({ title: 'Lien public copié', color: 'success' })
  } catch {
    toast.add({ title: 'Copie impossible', description: url, color: 'error' })
  }
}
</script>

<template>
  <UContainer class="py-8">
    <div class="mb-6 flex items-end justify-between gap-4">
      <div>
        <h1 class="text-2xl font-bold text-[var(--fl-ink)] dark:text-white">Portfolios</h1>
      </div>
      <UButton icon="i-lucide-plus" label="Nouveau portfolio" @click="showCreate = true" />
    </div>

    <div v-if="!portfolios.length" class="rounded-lg border border-dashed border-neutral-300 p-16 text-center text-neutral-500 dark:border-neutral-700">
      Aucun portfolio pour l'instant — créez-en un pour composer votre premier PDF.
    </div>

    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
      <UCard v-for="p in portfolios" :key="p.id">
        <div class="flex items-start justify-between gap-2">
          <div>
            <NuxtLink :to="`/portfolios/${p.id}`" class="font-semibold text-[var(--fl-ink)] hover:underline dark:text-white">
              {{ p.name }}
            </NuxtLink>
            <p class="mt-1 text-xs text-neutral-500">
              {{ p.pageCount }} page{{ p.pageCount > 1 ? 's' : '' }} · modifié le {{ dateFmt.format(new Date(p.updatedAt)) }}
            </p>
          </div>
          <div class="flex shrink-0 items-center gap-1.5">
            <UBadge v-if="p.publicShare" color="info" variant="subtle" size="sm">Public</UBadge>
            <UBadge v-if="p.hasPdf" color="success" variant="subtle" size="sm">PDF</UBadge>
          </div>
        </div>
        <div class="mt-4 flex items-center gap-2">
          <UButton :to="`/portfolios/${p.id}`" size="sm" variant="soft" icon="i-lucide-pencil" label="Ouvrir" />
          <UButton size="sm" variant="ghost" color="neutral" icon="i-lucide-copy" label="Dupliquer" @click="duplicate(p.id)" />
          <UButton
            size="sm"
            variant="ghost"
            color="neutral"
            :icon="p.pdfCurrent ? 'i-lucide-download' : 'i-lucide-file-down'"
            :label="p.pdfCurrent ? 'Télécharger' : (p.hasPdf ? 'Régénérer' : 'Générer')"
            :loading="downloading === p.id"
            @click="downloadPdf(p)"
          />
          <UButton
            v-if="p.publicShare"
            size="sm"
            variant="ghost"
            color="neutral"
            icon="i-lucide-link"
            aria-label="Copier le lien public"
            @click="copyPublicLink(p.id)"
          />
          <UButton size="sm" variant="ghost" color="error" icon="i-lucide-trash-2" class="ml-auto" @click="remove(p.id, p.name)" />
        </div>
      </UCard>
    </div>

    <UModal v-model:open="showCreate" title="Nouveau portfolio">
      <template #body>
        <form class="space-y-4" @submit.prevent="create">
          <UInput v-model="newName" placeholder="Nom du portfolio (ex. Candidature Bagneux)" class="w-full" autofocus />
          <div class="flex justify-end gap-2">
            <UButton variant="ghost" color="neutral" label="Annuler" @click="showCreate = false" />
            <UButton type="submit" :loading="creating" label="Créer" />
          </div>
        </form>
      </template>
    </UModal>
  </UContainer>
</template>