eCourt-Doc-Edit/web/app/pages/templates/[id]/documents.vue

<script setup lang="ts">
/** FR-12 UI — รายการเอกสารที่สร้างจาก template หนึ่งตัว (เข้าได้แม้ template ถูก deactivate) */
import type { TemplateDetail, TemplateDocumentListItem } from '~/types/api'

const route = useRoute()
const { apiJson } = useApi()

const templateId = computed(() => String(route.params.id))

const template = ref<TemplateDetail | null>(null)
const documents = ref<TemplateDocumentListItem[]>([])
const loading = ref(true)
const loadError = ref<string | null>(null)

async function load() {
  loading.value = true
  loadError.value = null
  try {
    const [tpl, docs] = await Promise.all([
      apiJson<TemplateDetail>(`/api/templates/${templateId.value}`),
      apiJson<TemplateDocumentListItem[]>(`/api/templates/${templateId.value}/documents`),
    ])
    template.value = tpl!
    documents.value = docs ?? []
    useHead({ title: `เอกสารของ ${tpl?.name} — e-Court Documents Versioning` })
  } catch (err) {
    loadError.value = err instanceof Error ? err.message : 'โหลดรายการเอกสารไม่สำเร็จ'
  } finally {
    loading.value = false
  }
}

onMounted(load)
</script>

<template>
  <AuthGate>
    <section class="space-y-5">
      <div v-if="loading" class="flex items-center gap-3 py-10 text-sm text-slate-500 dark:text-slate-400">
        <span
          class="h-4 w-4 animate-spin rounded-full border-2 border-slate-300 border-t-slate-600 dark:border-slate-600 dark:border-t-slate-300"
        />
        กำลังโหลด…
      </div>

      <AlertBox v-else-if="loadError" type="error">
        {{ loadError }}
        <NuxtLink to="/templates" class="ml-1 font-medium underline">กลับรายการ template</NuxtLink>
      </AlertBox>

      <template v-else-if="template">
        <div class="flex flex-wrap items-start justify-between gap-3">
          <div>
            <p class="text-xs text-slate-500 dark:text-slate-400">เอกสารที่สร้างจาก template</p>
            <h1 class="text-2xl font-bold">{{ template.name }}</h1>
            <p v-if="template.description" class="mt-1 text-sm text-slate-600 dark:text-slate-300">
              {{ template.description }}
            </p>
          </div>
          <div class="flex gap-2">
            <NuxtLink
              :to="`/templates/${template.id}/edit`"
              class="rounded-md border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-100 dark:border-slate-600 dark:hover:bg-slate-800"
            >
              แก้ไข template
            </NuxtLink>
            <NuxtLink
              v-if="template.isActive"
              :to="`/documents/create/${template.id}`"
              class="rounded-md bg-sky-600 px-4 py-1.5 text-sm font-medium text-white hover:bg-sky-700"
            >
              ＋ สร้างเอกสารใหม่
            </NuxtLink>
          </div>
        </div>

        <AlertBox v-if="!template.isActive">
          template นี้ถูก deactivate แล้ว — สร้างเอกสารใหม่ไม่ได้ แต่เอกสารที่สร้างไว้แล้วยังใช้งานได้ตามปกติ
        </AlertBox>

        <div
          v-if="documents.length === 0"
          class="rounded-lg border border-dashed border-slate-300 p-8 text-center text-sm text-slate-500 dark:border-slate-600 dark:text-slate-400"
        >
          ยังไม่มีเอกสารจาก template นี้<template v-if="template.isActive">
            —
            <NuxtLink
              :to="`/documents/create/${template.id}`"
              class="font-medium text-sky-600 hover:underline dark:text-sky-400"
            >
              สร้างเอกสารแรก
            </NuxtLink></template
          >
        </div>

        <div v-else class="overflow-x-auto rounded-lg border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-800">
          <table class="w-full text-sm">
            <thead class="border-b border-slate-200 text-left text-xs uppercase text-slate-500 dark:border-slate-700 dark:text-slate-400">
              <tr>
                <th class="px-4 py-3">ไฟล์เอกสาร</th>
                <th class="px-4 py-3">สร้างเมื่อ</th>
                <th class="px-4 py-3 text-center">versions</th>
                <th class="px-4 py-3">กิจกรรมล่าสุด</th>
                <th class="px-4 py-3 text-right">การกระทำ</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
              <tr v-for="d in documents" :key="d.documentId">
                <td class="max-w-72 px-4 py-3">
                  <NuxtLink
                    :to="`/documents/${d.documentId}`"
                    class="font-medium text-sky-700 hover:underline dark:text-sky-400"
                  >
                    {{ d.fileName }}
                  </NuxtLink>
                </td>
                <td class="px-4 py-3 text-slate-500 dark:text-slate-400">{{ formatDateTime(d.createdAt) }}</td>
                <td class="px-4 py-3 text-center">{{ d.versionCount }}</td>
                <td class="px-4 py-3 text-slate-500 dark:text-slate-400">
                  <template v-if="d.latestVersionAt">
                    v{{ d.latestVersionNumber }} · {{ formatDateTime(d.latestVersionAt) }}
                  </template>
                  <template v-else>—</template>
                </td>
                <td class="px-4 py-3 text-right">
                  <NuxtLink
                    :to="`/documents/${d.documentId}`"
                    class="rounded-md border border-slate-300 px-2.5 py-1 text-xs hover:bg-slate-100 dark:border-slate-600 dark:hover:bg-slate-700"
                  >
                    ดูรายละเอียด
                  </NuxtLink>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </template>
    </section>
  </AuthGate>
</template>