Added the support for generating docs from template doc
This commit is contained in:
Simon Pocrnjič
@@ -1,271 +1,245 @@
|
||||
<script setup>
|
||||
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
||||
import { Link, useForm, router } from "@inertiajs/vue3";
|
||||
import { computed, reactive, watch } from "vue";
|
||||
import { Link, useForm } from "@inertiajs/vue3";
|
||||
import { computed, ref } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
templates: Array,
|
||||
templates: { type: Array, default: () => [] },
|
||||
});
|
||||
|
||||
// Group by slug => versions desc
|
||||
const grouped = computed(() => {
|
||||
const map = {};
|
||||
props.templates.forEach((t) => {
|
||||
if (!map[t.slug]) map[t.slug] = [];
|
||||
map[t.slug].push(t);
|
||||
});
|
||||
Object.values(map).forEach((arr) => arr.sort((a, b) => b.version - a.version));
|
||||
return map;
|
||||
// Upload form state
|
||||
const uploadForm = useForm({ name: "", slug: "", file: null });
|
||||
const selectedSlug = ref("");
|
||||
const uniqueSlugs = computed(() => {
|
||||
const s = new Set(props.templates.map((t) => t.slug));
|
||||
return Array.from(s).sort();
|
||||
});
|
||||
|
||||
// Inertia form for uploading new template version
|
||||
const form = useForm({
|
||||
name: "Povzetek pogodbe",
|
||||
slug: "contract-summary",
|
||||
file: null,
|
||||
});
|
||||
|
||||
function handleFile(e) {
|
||||
form.file = e.target.files[0];
|
||||
uploadForm.file = e.target.files[0];
|
||||
}
|
||||
|
||||
function submit() {
|
||||
if (!form.file) {
|
||||
function submitUpload() {
|
||||
if (!uploadForm.file) {
|
||||
return;
|
||||
}
|
||||
form.post(route("admin.document-templates.store"), {
|
||||
if (!uploadForm.slug && selectedSlug.value) {
|
||||
uploadForm.slug = selectedSlug.value;
|
||||
}
|
||||
uploadForm.post(route("admin.document-templates.store"), {
|
||||
forceFormData: true,
|
||||
onSuccess: () => {
|
||||
form.reset("file");
|
||||
// clear input value manually (optional)
|
||||
const fileInput = document.getElementById("template-file-input");
|
||||
if (fileInput) fileInput.value = "";
|
||||
uploadForm.reset("file");
|
||||
const input = document.getElementById("docx-upload-input");
|
||||
if (input) input.value = "";
|
||||
},
|
||||
});
|
||||
}
|
||||
function toggle(templateId) {
|
||||
const f = useForm({});
|
||||
f.post(route("admin.document-templates.toggle", templateId), { preserveScroll: true });
|
||||
}
|
||||
|
||||
// Per-template settings forms (useForm instances) for optimistic updates
|
||||
const settingsForms = reactive({});
|
||||
const settingsSaved = reactive({});
|
||||
props.templates.forEach(t => {
|
||||
if (!settingsForms[t.id]) {
|
||||
settingsForms[t.id] = useForm({
|
||||
output_filename_pattern: t.output_filename_pattern || '',
|
||||
date_format: t.date_format || '',
|
||||
fail_on_unresolved: t.fail_on_unresolved ? 1 : 0,
|
||||
number_decimals: t.formatting_options?.number_decimals ?? 2,
|
||||
decimal_separator: t.formatting_options?.decimal_separator ?? ',',
|
||||
thousands_separator: t.formatting_options?.thousands_separator ?? '.',
|
||||
currency_symbol: t.formatting_options?.currency_symbol ?? '€',
|
||||
currency_position: t.formatting_options?.currency_position ?? 'after',
|
||||
currency_space: t.formatting_options?.currency_space ? 1 : 0,
|
||||
default_date_format: t.formatting_options?.default_date_format || '',
|
||||
});
|
||||
// Group templates by slug and sort versions DESC
|
||||
const groups = computed(() => {
|
||||
const map = {};
|
||||
for (const t of props.templates) {
|
||||
if (!map[t.slug]) {
|
||||
map[t.slug] = { slug: t.slug, name: t.name, versions: [] };
|
||||
}
|
||||
map[t.slug].versions.push(t);
|
||||
}
|
||||
});
|
||||
|
||||
// Watch for newly added templates (e.g. after uploading a new version) and lazily initialize missing settings forms
|
||||
watch(
|
||||
() => props.templates,
|
||||
(list) => {
|
||||
list.forEach((t) => {
|
||||
if (!settingsForms[t.id]) {
|
||||
settingsForms[t.id] = useForm({
|
||||
output_filename_pattern: t.output_filename_pattern || '',
|
||||
date_format: t.date_format || '',
|
||||
fail_on_unresolved: t.fail_on_unresolved ? 1 : 0,
|
||||
number_decimals: t.formatting_options?.number_decimals ?? 2,
|
||||
decimal_separator: t.formatting_options?.decimal_separator ?? ',',
|
||||
thousands_separator: t.formatting_options?.thousands_separator ?? '.',
|
||||
currency_symbol: t.formatting_options?.currency_symbol ?? '€',
|
||||
currency_position: t.formatting_options?.currency_position ?? 'after',
|
||||
currency_space: t.formatting_options?.currency_space ? 1 : 0,
|
||||
default_date_format: t.formatting_options?.default_date_format || '',
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
function submitSettings(id) {
|
||||
const f = settingsForms[id];
|
||||
f.put(route('admin.document-templates.settings.update', id), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
settingsSaved[id] = true;
|
||||
setTimeout(() => { settingsSaved[id] = false; }, 2000);
|
||||
},
|
||||
Object.values(map).forEach((g) => {
|
||||
g.versions.sort((a, b) => b.version - a.version);
|
||||
// ensure display name from latest version
|
||||
if (g.versions[0]) {
|
||||
g.name = g.versions[0].name;
|
||||
}
|
||||
});
|
||||
}
|
||||
return Object.values(map).sort((a, b) => a.slug.localeCompare(b.slug));
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AdminLayout title="Dokumentne predloge">
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold mb-1">Dokumentne predloge</h1>
|
||||
<p class="text-sm text-gray-500">
|
||||
Upravljanje verzij DOCX predlog za generiranje dokumentov.
|
||||
</p>
|
||||
</div>
|
||||
<form
|
||||
@submit.prevent="submit"
|
||||
class="flex items-center gap-3 text-sm bg-white p-2 rounded border"
|
||||
>
|
||||
<input type="text" v-model="form.name" class="hidden" />
|
||||
<input type="text" v-model="form.slug" class="hidden" />
|
||||
<input
|
||||
id="template-file-input"
|
||||
type="file"
|
||||
required
|
||||
accept=".docx"
|
||||
class="text-xs"
|
||||
@change="handleFile"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="form.processing || !form.file"
|
||||
class="px-3 py-1.5 rounded bg-emerald-600 text-white disabled:opacity-50"
|
||||
>
|
||||
Nova verzija
|
||||
</button>
|
||||
<div v-if="form.progress" class="w-28 h-1 bg-gray-200 rounded overflow-hidden">
|
||||
<div
|
||||
class="h-full bg-emerald-500 transition-all"
|
||||
:style="{ width: form.progress.percentage + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
<div v-if="form.errors.file" class="text-xs text-rose-600">
|
||||
{{ form.errors.file }}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div
|
||||
v-for="(versions, slug) in grouped"
|
||||
:key="slug"
|
||||
class="bg-white border rounded"
|
||||
>
|
||||
<div class="px-4 py-3 border-b flex items-center justify-between">
|
||||
<div class="font-medium">
|
||||
{{ versions[0].name }} <span class="text-xs text-gray-500">({{ slug }})</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<form
|
||||
v-if="versions[0]"
|
||||
method="post"
|
||||
:action="route('admin.document-templates.toggle', versions[0].id)"
|
||||
<div class="mb-8 space-y-6">
|
||||
<!-- Header & Upload -->
|
||||
<div class="flex flex-col xl:flex-row xl:items-start gap-6">
|
||||
<div class="flex-1 min-w-[280px]">
|
||||
<h1 class="text-2xl font-semibold tracking-tight flex items-center gap-2">
|
||||
<span>Dokumentne predloge</span>
|
||||
<span
|
||||
class="text-xs font-medium bg-gray-200 text-gray-600 px-2 py-0.5 rounded"
|
||||
>{{ groups.length }} skupin</span
|
||||
>
|
||||
<input type="hidden" name="_method" value="POST" />
|
||||
<button
|
||||
class="px-2 py-1 rounded text-xs"
|
||||
:class="
|
||||
versions[0].active
|
||||
? 'bg-amber-500 text-white'
|
||||
: 'bg-gray-200 text-gray-700'
|
||||
"
|
||||
>
|
||||
{{ versions[0].active ? "Deaktiviraj" : "Aktiviraj" }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</h1>
|
||||
<p class="text-sm text-gray-500 mt-1 max-w-prose">
|
||||
Upravljaj verzije DOCX predlog. Naloži novo verzijo obstoječega sluga ali
|
||||
ustvari popolnoma novo predlogo.
|
||||
</p>
|
||||
</div>
|
||||
<div class="divide-y">
|
||||
<form
|
||||
@submit.prevent="submitUpload"
|
||||
class="flex-1 bg-white/70 backdrop-blur border rounded-lg shadow-sm p-4 flex flex-col gap-3"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
|
||||
<span class="i-lucide-upload-cloud w-4 h-4" /> Nova / nova verzija
|
||||
</h2>
|
||||
<div
|
||||
v-if="uploadForm.progress"
|
||||
class="w-40 h-1 bg-gray-200 rounded overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-indigo-500 transition-all"
|
||||
:style="{ width: uploadForm.progress.percentage + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-5 gap-3 text-xs">
|
||||
<div class="md:col-span-1">
|
||||
<label class="block font-medium mb-1">Obstoječi slug</label>
|
||||
<select
|
||||
v-model="selectedSlug"
|
||||
class="select select-bordered select-sm w-full"
|
||||
>
|
||||
<option value="">(nov)</option>
|
||||
<option v-for="s in uniqueSlugs" :key="s" :value="s">{{ s }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="md:col-span-1">
|
||||
<label class="block font-medium mb-1">Nov slug</label>
|
||||
<input
|
||||
v-model="uploadForm.slug"
|
||||
:disabled="selectedSlug"
|
||||
type="text"
|
||||
class="input input-bordered input-sm w-full"
|
||||
placeholder="opomin"
|
||||
/>
|
||||
</div>
|
||||
<div class="md:col-span-1">
|
||||
<label class="block font-medium mb-1">Naziv</label>
|
||||
<input
|
||||
v-model="uploadForm.name"
|
||||
type="text"
|
||||
class="input input-bordered input-sm w-full"
|
||||
placeholder="Ime predloge"
|
||||
/>
|
||||
</div>
|
||||
<div class="md:col-span-2 flex items-end">
|
||||
<label class="w-full">
|
||||
<input
|
||||
id="docx-upload-input"
|
||||
@change="handleFile"
|
||||
type="file"
|
||||
accept=".docx"
|
||||
class="file-input file-input-bordered file-input-sm w-full"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-3 pt-1">
|
||||
<span class="text-[11px] text-gray-500" v-if="!uploadForm.file"
|
||||
>Izberi DOCX datoteko…</span
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-sm btn-primary"
|
||||
:disabled="
|
||||
uploadForm.processing ||
|
||||
!uploadForm.file ||
|
||||
(!uploadForm.slug && !selectedSlug)
|
||||
"
|
||||
>
|
||||
<span v-if="uploadForm.processing">Nalaganje…</span>
|
||||
<span v-else>Shrani verzijo</span>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="uploadForm.errors.file" class="text-rose-600 text-xs">
|
||||
{{ uploadForm.errors.file }}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Groups -->
|
||||
<div v-if="groups.length" class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
|
||||
<div
|
||||
v-for="g in groups"
|
||||
:key="g.slug"
|
||||
class="group relative flex flex-col bg-white border rounded-lg shadow-sm overflow-hidden"
|
||||
>
|
||||
<div
|
||||
v-for="v in versions"
|
||||
:key="v.id"
|
||||
class="px-4 py-3 text-sm flex items-center justify-between"
|
||||
class="px-4 py-3 border-b bg-gradient-to-r from-gray-50 to-white flex items-start justify-between gap-3"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<span
|
||||
>Verzija v{{ v.version }}
|
||||
<div class="min-w-0">
|
||||
<h3 class="font-medium text-sm leading-5 truncate">{{ g.name }}</h3>
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-2 mt-1 text-[11px] text-gray-500"
|
||||
>
|
||||
<span class="px-1.5 py-0.5 bg-gray-100 rounded">{{ g.slug }}</span>
|
||||
<span>Zadnja: v{{ g.versions[0].version }}</span>
|
||||
<span
|
||||
v-if="v.id === versions[0].id"
|
||||
class="text-emerald-600 text-xs font-semibold"
|
||||
>zadnja</span
|
||||
></span
|
||||
>
|
||||
<span class="text-xs text-gray-500"
|
||||
>Hash: {{ v.file_hash?.substring(0, 10) }}… | Velikost:
|
||||
{{ (v.file_size / 1024).toFixed(1) }} KB</span
|
||||
>
|
||||
<a
|
||||
class="text-xs text-indigo-600 hover:underline"
|
||||
:href="'/storage/' + v.file_path"
|
||||
target="_blank"
|
||||
>Prenesi</a
|
||||
>
|
||||
<div v-if="v.id === versions[0].id" class="mt-3 pt-3 border-t space-y-2">
|
||||
<form @submit.prevent="submitSettings(v.id)" class="grid gap-2 md:grid-cols-4 text-xs items-end">
|
||||
<label class="flex flex-col gap-1 md:col-span-2">
|
||||
<span class="font-medium">Vzorec imena</span>
|
||||
<input name="output_filename_pattern" v-model="settingsForms[v.id].output_filename_pattern" placeholder="{slug}_{generation.date}.docx" class="border rounded px-2 py-1" />
|
||||
<span v-if="settingsForms[v.id].errors.output_filename_pattern" class="text-rose-600">{{ settingsForms[v.id].errors.output_filename_pattern }}</span>
|
||||
</label>
|
||||
<label class="flex flex-col gap-1">
|
||||
<span class="font-medium">Format datuma</span>
|
||||
<input name="date_format" v-model="settingsForms[v.id].date_format" placeholder="Y-m-d" class="border rounded px-2 py-1" />
|
||||
<span v-if="settingsForms[v.id].errors.date_format" class="text-rose-600">{{ settingsForms[v.id].errors.date_format }}</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 mt-5">
|
||||
<input type="checkbox" name="fail_on_unresolved" true-value="1" false-value="0" v-model="settingsForms[v.id].fail_on_unresolved" />
|
||||
<span>Fail na nerešene</span>
|
||||
</label>
|
||||
<div class="md:col-span-4 mt-2 p-3 bg-gray-50 rounded border border-gray-200 grid gap-2 md:grid-cols-6">
|
||||
<div class="col-span-6 text-[10px] uppercase tracking-wide text-gray-500 font-semibold">Formatiranje števil / valute</div>
|
||||
<label class="flex flex-col gap-1">
|
||||
<span>Decimale</span>
|
||||
<input type="number" min="0" max="6" name="number_decimals" v-model="settingsForms[v.id].number_decimals" class="border rounded px-2 py-1" />
|
||||
</label>
|
||||
<label class="flex flex-col gap-1">
|
||||
<span>Decimalno</span>
|
||||
<input name="decimal_separator" v-model="settingsForms[v.id].decimal_separator" class="border rounded px-2 py-1" />
|
||||
</label>
|
||||
<label class="flex flex-col gap-1">
|
||||
<span>Tisočice</span>
|
||||
<input name="thousands_separator" v-model="settingsForms[v.id].thousands_separator" class="border rounded px-2 py-1" />
|
||||
</label>
|
||||
<label class="flex flex-col gap-1">
|
||||
<span>Simbol</span>
|
||||
<input name="currency_symbol" v-model="settingsForms[v.id].currency_symbol" class="border rounded px-2 py-1" />
|
||||
</label>
|
||||
<label class="flex flex-col gap-1">
|
||||
<span>Pozicija</span>
|
||||
<select name="currency_position" v-model="settingsForms[v.id].currency_position" class="border rounded px-2 py-1">
|
||||
<option value="before">Pred</option>
|
||||
<option value="after">Za</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 mt-5">
|
||||
<input type="checkbox" name="currency_space" true-value="1" false-value="0" v-model="settingsForms[v.id].currency_space" />
|
||||
<span>Presledek</span>
|
||||
</label>
|
||||
<div class="col-span-6 border-t my-1"></div>
|
||||
<div class="col-span-6 text-[10px] uppercase tracking-wide text-gray-500 font-semibold mt-1">Datumi</div>
|
||||
<label class="flex flex-col gap-1 md:col-span-2">
|
||||
<span>Privzeti datum</span>
|
||||
<input name="default_date_format" v-model="settingsForms[v.id].default_date_format" placeholder="d.m.Y" class="border rounded px-2 py-1" />
|
||||
</label>
|
||||
<div class="md:col-span-4 text-xs text-gray-500 flex items-center">Uporabi npr. d.m.Y ali Y-m-d. Posamezni tokeni lahko dobijo specifičen format (nadgradnja kasneje).</div>
|
||||
</div>
|
||||
<div class="md:col-span-4 flex gap-2 items-center">
|
||||
<button :disabled="settingsForms[v.id].processing" class="px-3 py-1.5 bg-indigo-600 text-white rounded disabled:opacity-50">{{ settingsForms[v.id].processing ? 'Shranjevanje...' : 'Shrani' }}</button>
|
||||
<span v-if="settingsSaved[v.id]" class="text-emerald-600">Shranjeno</span>
|
||||
<span class="text-gray-400">Placeholders: {slug} {version} {generation.date} {generation.timestamp}</span>
|
||||
</div>
|
||||
</form>
|
||||
class="flex items-center gap-1"
|
||||
:class="
|
||||
g.versions.filter((v) => v.active).length
|
||||
? 'text-emerald-600'
|
||||
: 'text-gray-400'
|
||||
"
|
||||
>
|
||||
<span
|
||||
class="w-1.5 h-1.5 rounded-full"
|
||||
:class="
|
||||
g.versions.filter((v) => v.active).length
|
||||
? 'bg-emerald-500'
|
||||
: 'bg-gray-300'
|
||||
"
|
||||
/>
|
||||
{{ g.versions.filter((v) => v.active).length }} aktivnih
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="text-xs"
|
||||
:class="v.active ? 'text-emerald-600' : 'text-gray-400'"
|
||||
>{{ v.active ? "Aktivno" : "Neaktivno" }}</span
|
||||
<Link
|
||||
:href="route('admin.document-templates.show', g.versions[0].id)"
|
||||
class="text-xs text-indigo-600 hover:underline whitespace-nowrap mt-1"
|
||||
>Detalji</Link
|
||||
>
|
||||
</div>
|
||||
<div class="p-3 flex-1 flex flex-col gap-2">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div v-for="v in g.versions" :key="v.id" class="flex items-center gap-1">
|
||||
<Link
|
||||
:href="route('admin.document-templates.edit', v.id)"
|
||||
class="px-2 py-0.5 rounded-md border text-[11px] font-medium transition-colors"
|
||||
:class="
|
||||
v.active
|
||||
? 'border-emerald-500/60 bg-emerald-50 text-emerald-700 hover:bg-emerald-100'
|
||||
: 'border-gray-300 bg-white text-gray-600 hover:bg-gray-50'
|
||||
"
|
||||
>v{{ v.version }}</Link
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
@click="toggle(v.id)"
|
||||
class="rounded-md border px-1.5 py-0.5 text-[10px] font-medium transition-colors"
|
||||
:class="
|
||||
v.active
|
||||
? 'bg-amber-500 border-amber-500 text-white hover:bg-amber-600'
|
||||
: 'bg-gray-100 border-gray-300 text-gray-600 hover:bg-gray-200'
|
||||
"
|
||||
>
|
||||
{{ v.active ? "✕" : "✓" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-auto pt-2 border-t flex justify-end">
|
||||
<Link
|
||||
:href="route('admin.document-templates.edit', g.versions[0].id)"
|
||||
class="text-[11px] text-indigo-600 hover:underline"
|
||||
>Uredi zadnjo verzijo →</Link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p v-else class="text-sm text-gray-500">Ni predlog.</p>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user