326 lines
13 KiB
Vue
326 lines
13 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
/** FR-9 UI — แก้ไข template: metadata + field definitions (label/type/required/ลำดับ) + แทนที่ไฟล์ */
|
||
|
|
import type { FieldType, ReplaceTemplateFileResponse, TemplateDetail } from '~/types/api'
|
||
|
|
|
||
|
|
const route = useRoute()
|
||
|
|
const { apiJson, apiUpload } = useApi()
|
||
|
|
useHead({ title: 'แก้ไข template — e-Court Documents Versioning' })
|
||
|
|
|
||
|
|
const templateId = computed(() => String(route.params.id))
|
||
|
|
const FIELD_TYPES: FieldType[] = ['text', 'number', 'date']
|
||
|
|
|
||
|
|
const detail = ref<TemplateDetail | null>(null)
|
||
|
|
const loading = ref(true)
|
||
|
|
const loadError = ref<string | null>(null)
|
||
|
|
|
||
|
|
// ฟอร์ม metadata
|
||
|
|
const name = ref('')
|
||
|
|
const description = ref('')
|
||
|
|
const isActive = ref(true)
|
||
|
|
|
||
|
|
// ฟอร์ม field defs (แก้ใน local copy แล้วส่งทั้งชุดตอนบันทึก)
|
||
|
|
const fields = ref<(TemplateDetail['fields'][number] & { label: string })[]>([])
|
||
|
|
|
||
|
|
const saving = ref(false)
|
||
|
|
const saveError = ref<string | null>(null)
|
||
|
|
const savedAt = ref<string | null>(null)
|
||
|
|
|
||
|
|
const replaceFile = ref<File | null>(null)
|
||
|
|
const replaceInput = ref<HTMLInputElement | null>(null)
|
||
|
|
const replacing = ref(false)
|
||
|
|
const replaceError = ref<string | null>(null)
|
||
|
|
const replaceResult = ref<ReplaceTemplateFileResponse | null>(null)
|
||
|
|
|
||
|
|
function applyDetail(d: TemplateDetail) {
|
||
|
|
detail.value = d
|
||
|
|
name.value = d.name
|
||
|
|
description.value = d.description ?? ''
|
||
|
|
isActive.value = d.isActive
|
||
|
|
fields.value = d.fields.map((f) => ({ ...f }))
|
||
|
|
}
|
||
|
|
|
||
|
|
async function load() {
|
||
|
|
loading.value = true
|
||
|
|
loadError.value = null
|
||
|
|
try {
|
||
|
|
applyDetail((await apiJson<TemplateDetail>(`/api/templates/${templateId.value}`))!)
|
||
|
|
} catch (err) {
|
||
|
|
loadError.value = err instanceof Error ? err.message : 'โหลดข้อมูล template ไม่สำเร็จ'
|
||
|
|
} finally {
|
||
|
|
loading.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function save() {
|
||
|
|
saveError.value = null
|
||
|
|
savedAt.value = null
|
||
|
|
if (!name.value.trim()) {
|
||
|
|
saveError.value = 'ชื่อ template ห้ามว่าง'
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (fields.value.some((f) => !f.label.trim())) {
|
||
|
|
saveError.value = 'ทุก field ต้องมี label'
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
saving.value = true
|
||
|
|
try {
|
||
|
|
const updated = await apiJson<TemplateDetail>(`/api/templates/${templateId.value}`, {
|
||
|
|
method: 'PUT',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify({
|
||
|
|
name: name.value.trim(),
|
||
|
|
description: description.value.trim() || null,
|
||
|
|
isActive: isActive.value,
|
||
|
|
fields: fields.value.map((f) => ({
|
||
|
|
key: f.key,
|
||
|
|
label: f.label.trim(),
|
||
|
|
type: f.type,
|
||
|
|
isRequired: f.isRequired,
|
||
|
|
sortOrder: f.sortOrder,
|
||
|
|
})),
|
||
|
|
}),
|
||
|
|
})
|
||
|
|
applyDetail(updated!)
|
||
|
|
savedAt.value = new Date().toLocaleTimeString('th-TH')
|
||
|
|
} catch (err) {
|
||
|
|
saveError.value = err instanceof Error ? err.message : 'บันทึกไม่สำเร็จ'
|
||
|
|
} finally {
|
||
|
|
saving.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function onReplaceFileChange(e: Event) {
|
||
|
|
const input = e.target as HTMLInputElement
|
||
|
|
replaceFile.value = input.files?.[0] ?? null
|
||
|
|
}
|
||
|
|
|
||
|
|
async function submitReplaceFile() {
|
||
|
|
replaceError.value = null
|
||
|
|
replaceResult.value = null
|
||
|
|
if (!replaceFile.value) {
|
||
|
|
replaceError.value = 'เลือกไฟล์ .docx ใหม่ก่อน'
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (!replaceFile.value.name.toLowerCase().endsWith('.docx')) {
|
||
|
|
replaceError.value = 'รองรับเฉพาะไฟล์ .docx เท่านั้น'
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
const form = new FormData()
|
||
|
|
form.append('file', replaceFile.value)
|
||
|
|
|
||
|
|
replacing.value = true
|
||
|
|
try {
|
||
|
|
const result = await apiUpload<ReplaceTemplateFileResponse>(
|
||
|
|
`/api/templates/${templateId.value}/file`,
|
||
|
|
form,
|
||
|
|
'PUT',
|
||
|
|
)
|
||
|
|
replaceResult.value = result
|
||
|
|
await load()
|
||
|
|
replaceFile.value = null
|
||
|
|
if (replaceInput.value) replaceInput.value.value = ''
|
||
|
|
} catch (err) {
|
||
|
|
replaceError.value = err instanceof Error ? err.message : 'แทนที่ไฟล์ไม่สำเร็จ'
|
||
|
|
} finally {
|
||
|
|
replacing.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(load)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<AuthGate>
|
||
|
|
<section class="mx-auto max-w-4xl space-y-8">
|
||
|
|
<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 }}</AlertBox>
|
||
|
|
|
||
|
|
<template v-else-if="detail">
|
||
|
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
||
|
|
<div>
|
||
|
|
<h1 class="text-2xl font-bold">{{ detail.name }}</h1>
|
||
|
|
<p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
|
||
|
|
สร้าง {{ formatDateTime(detail.createdAt) }} · อัปเดต {{ formatDateTime(detail.updatedAt) }}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<NuxtLink
|
||
|
|
to="/templates"
|
||
|
|
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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 1) metadata -->
|
||
|
|
<form class="space-y-4" @submit.prevent="save">
|
||
|
|
<h2 class="text-lg font-semibold">ข้อมูล template</h2>
|
||
|
|
|
||
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
||
|
|
<div>
|
||
|
|
<label for="edit-name" class="mb-1 block text-sm font-medium">ชื่อ</label>
|
||
|
|
<input
|
||
|
|
id="edit-name"
|
||
|
|
v-model="name"
|
||
|
|
type="text"
|
||
|
|
required
|
||
|
|
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-800"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-end gap-2 pb-1">
|
||
|
|
<input
|
||
|
|
id="edit-active"
|
||
|
|
v-model="isActive"
|
||
|
|
type="checkbox"
|
||
|
|
class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 dark:bg-slate-800"
|
||
|
|
/>
|
||
|
|
<label for="edit-active" class="text-sm">
|
||
|
|
active
|
||
|
|
<span class="text-xs text-slate-500 dark:text-slate-400">(เอาออก = สร้างเอกสารใหม่ไม่ได้ แต่เอกสารเดิมยังใช้ได้)</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label for="edit-desc" class="mb-1 block text-sm font-medium">คำอธิบาย</label>
|
||
|
|
<textarea
|
||
|
|
id="edit-desc"
|
||
|
|
v-model="description"
|
||
|
|
rows="2"
|
||
|
|
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-800"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<!-- 2) field definitions -->
|
||
|
|
<div class="space-y-4">
|
||
|
|
<div>
|
||
|
|
<h2 class="text-lg font-semibold">Field definitions</h2>
|
||
|
|
<p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
|
||
|
|
<span class="font-mono">key</span> มาจาก content control tag ในไฟล์ — เพิ่ม/ลบ key ต้องแทนที่ไฟล์ด้านล่าง
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div 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">key</th>
|
||
|
|
<th class="px-4 py-3">label</th>
|
||
|
|
<th class="px-4 py-3">type</th>
|
||
|
|
<th class="px-4 py-3 text-center">required</th>
|
||
|
|
<th class="px-4 py-3">ลำดับ</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody class="divide-y divide-slate-100 dark:divide-slate-700">
|
||
|
|
<tr v-for="(f, i) in fields" :key="f.key">
|
||
|
|
<td class="px-4 py-2 font-mono text-xs">{{ f.key }}</td>
|
||
|
|
<td class="px-4 py-2">
|
||
|
|
<input
|
||
|
|
v-model="f.label"
|
||
|
|
type="text"
|
||
|
|
:aria-label="`label ของ ${f.key}`"
|
||
|
|
class="w-full min-w-40 rounded-md border border-slate-300 bg-white px-2 py-1 text-sm dark:border-slate-600 dark:bg-slate-800"
|
||
|
|
/>
|
||
|
|
</td>
|
||
|
|
<td class="px-4 py-2">
|
||
|
|
<select
|
||
|
|
v-model="f.type"
|
||
|
|
:aria-label="`type ของ ${f.key}`"
|
||
|
|
class="rounded-md border border-slate-300 bg-white px-2 py-1 text-sm dark:border-slate-600 dark:bg-slate-800"
|
||
|
|
>
|
||
|
|
<option v-for="t in FIELD_TYPES" :key="t" :value="t">{{ t }}</option>
|
||
|
|
</select>
|
||
|
|
</td>
|
||
|
|
<td class="px-4 py-2 text-center">
|
||
|
|
<input
|
||
|
|
v-model="f.isRequired"
|
||
|
|
type="checkbox"
|
||
|
|
:aria-label="`required ของ ${f.key}`"
|
||
|
|
class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 dark:bg-slate-800"
|
||
|
|
/>
|
||
|
|
</td>
|
||
|
|
<td class="px-4 py-2">
|
||
|
|
<input
|
||
|
|
v-model.number="f.sortOrder"
|
||
|
|
type="number"
|
||
|
|
:aria-label="`ลำดับของ ${f.key}`"
|
||
|
|
class="w-20 rounded-md border border-slate-300 bg-white px-2 py-1 text-sm dark:border-slate-600 dark:bg-slate-800"
|
||
|
|
/>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr v-if="fields.length === 0">
|
||
|
|
<td colspan="5" class="px-4 py-6 text-center text-sm text-slate-500 dark:text-slate-400">
|
||
|
|
ไฟล์นี้ไม่มี content control เลย — แทนที่ไฟล์ด้วยไฟล์ที่มี content controls
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex flex-wrap items-center gap-3">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
:disabled="saving"
|
||
|
|
class="rounded-md bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-700 disabled:opacity-50"
|
||
|
|
@click="save"
|
||
|
|
>
|
||
|
|
{{ saving ? 'กำลังบันทึก…' : 'บันทึกทั้งหมด' }}
|
||
|
|
</button>
|
||
|
|
<span v-if="savedAt && !saveError" class="text-xs text-emerald-600 dark:text-emerald-400">
|
||
|
|
บันทึกแล้วเมื่อ {{ savedAt }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<AlertBox v-if="saveError" type="error">{{ saveError }}</AlertBox>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 3) replace file -->
|
||
|
|
<div class="space-y-3 border-t border-slate-200 pt-6 dark:border-slate-700">
|
||
|
|
<div>
|
||
|
|
<h2 class="text-lg font-semibold">แทนที่ไฟล์ template</h2>
|
||
|
|
<p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
|
||
|
|
ระบบจะ detect tags ใหม่จากไฟล์ — field definition ของ tag ที่หายไปจะถูกลบ, tag ใหม่จะเพิ่มแบบ default
|
||
|
|
(เอกสารที่สร้างไปแล้วไม่กระทบ)
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex flex-wrap items-center gap-3">
|
||
|
|
<input
|
||
|
|
ref="replaceInput"
|
||
|
|
type="file"
|
||
|
|
accept=".docx"
|
||
|
|
class="rounded-md border border-slate-300 bg-white px-3 py-2 text-sm file:mr-3 file:rounded file:border-0 file:bg-slate-100 file:px-3 file:py-1 file:text-sm dark:border-slate-600 dark:bg-slate-800 dark:file:bg-slate-700"
|
||
|
|
@change="onReplaceFileChange"
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
:disabled="replacing || !replaceFile"
|
||
|
|
class="rounded-md border border-slate-300 px-4 py-2 text-sm hover:bg-slate-100 disabled:opacity-50 dark:border-slate-600 dark:hover:bg-slate-800"
|
||
|
|
@click="submitReplaceFile"
|
||
|
|
>
|
||
|
|
{{ replacing ? 'กำลังอัปโหลด…' : 'อัปโหลดไฟล์ใหม่' }}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<AlertBox v-if="replaceError" type="error">{{ replaceError }}</AlertBox>
|
||
|
|
<AlertBox v-if="replaceResult" type="success">
|
||
|
|
แทนที่ไฟล์สำเร็จ —
|
||
|
|
เพิ่ม {{ replaceResult.addedTags.length }} tags
|
||
|
|
<span v-if="replaceResult.addedTags.length" class="font-mono">({{ replaceResult.addedTags.join(', ') }})</span>,
|
||
|
|
ลบ {{ replaceResult.removedTags.length }} tags
|
||
|
|
<span v-if="replaceResult.removedTags.length" class="font-mono">({{ replaceResult.removedTags.join(', ') }})</span>
|
||
|
|
— ตรวจและบันทึก field definitions ด้านบนอีกครั้ง
|
||
|
|
</AlertBox>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</section>
|
||
|
|
</AuthGate>
|
||
|
|
</template>
|