251 lines
9.6 KiB
Vue
251 lines
9.6 KiB
Vue
<template>
|
|
<AdminLayout title="Predloga">
|
|
<div class="flex flex-col lg:flex-row gap-6 items-start">
|
|
<div class="flex-1 min-w-[320px] space-y-6">
|
|
<div class="bg-white border rounded-lg shadow-sm p-5 flex flex-col gap-4">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<h1 class="text-2xl font-semibold tracking-tight">{{ template.name }}</h1>
|
|
<p class="text-xs text-gray-500 mt-1 flex flex-wrap gap-3">
|
|
<span class="inline-flex items-center gap-1"
|
|
><span class="text-gray-400">Slug:</span
|
|
><span class="font-medium">{{ template.slug }}</span></span
|
|
>
|
|
<span class="inline-flex items-center gap-1"
|
|
><span class="text-gray-400">Verzija:</span
|
|
><span class="font-medium">v{{ template.version }}</span></span
|
|
>
|
|
<span
|
|
class="inline-flex items-center gap-1"
|
|
:class="template.active ? 'text-emerald-600' : 'text-gray-400'"
|
|
>
|
|
<span
|
|
class="w-1.5 h-1.5 rounded-full"
|
|
:class="template.active ? 'bg-emerald-500' : 'bg-gray-300'"
|
|
/>
|
|
{{ template.active ? "Aktivna" : "Neaktivna" }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<form @submit.prevent="toggleActive" class="flex items-center gap-2">
|
|
<button
|
|
type="submit"
|
|
:class="[btnBase, template.active ? btnWarn : btnOutline]"
|
|
:disabled="toggleForm.processing"
|
|
>
|
|
<span v-if="toggleForm.processing">...</span>
|
|
<span v-else>{{ template.active ? "Deaktiviraj" : "Aktiviraj" }}</span>
|
|
</button>
|
|
<Link
|
|
:href="route('admin.document-templates.edit', template.id)"
|
|
:class="[btnBase, btnPrimary]"
|
|
>Uredi</Link
|
|
>
|
|
<Link
|
|
:href="route('admin.document-templates.index')"
|
|
:class="[btnBase, btnOutline]"
|
|
>Nazaj</Link
|
|
>
|
|
</form>
|
|
</div>
|
|
<div class="grid md:grid-cols-3 gap-6 text-xs">
|
|
<div class="space-y-2">
|
|
<h3 class="uppercase font-semibold tracking-wide text-gray-600">
|
|
Datoteka
|
|
</h3>
|
|
<ul class="space-y-1 text-gray-600">
|
|
<li>
|
|
<span class="text-gray-400">Velikost:</span>
|
|
<span class="font-medium"
|
|
>{{ (template.file_size / 1024).toFixed(1) }} KB</span
|
|
>
|
|
</li>
|
|
<li>
|
|
<span class="text-gray-400">Hash:</span>
|
|
<span class="font-mono"
|
|
>{{ template.file_hash?.substring(0, 12) }}…</span
|
|
>
|
|
</li>
|
|
<li>
|
|
<span class="text-gray-400">Engine:</span>
|
|
<span class="font-medium">{{ template.engine }}</span>
|
|
</li>
|
|
</ul>
|
|
<a
|
|
:href="'/storage/' + template.file_path"
|
|
target="_blank"
|
|
class="text-[11px] inline-flex items-center gap-1 text-indigo-600 hover:underline"
|
|
>Prenesi DOCX →</a
|
|
>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<h3 class="uppercase font-semibold tracking-wide text-gray-600">
|
|
Formatiranje
|
|
</h3>
|
|
<ul class="space-y-1 text-gray-600">
|
|
<li>
|
|
<span class="text-gray-400">Datum:</span>
|
|
{{ template.settings?.date_format || "d.m.Y" }}
|
|
</li>
|
|
<li>
|
|
<span class="text-gray-400">Decimalna mesta:</span>
|
|
{{ template.settings?.number_decimals ?? "-" }}
|
|
</li>
|
|
<li>
|
|
<span class="text-gray-400">Separators:</span>
|
|
{{ template.settings?.decimal_separator || "." }} /
|
|
{{ template.settings?.thousands_separator || " " }}
|
|
</li>
|
|
<li>
|
|
<span class="text-gray-400">Valuta:</span>
|
|
{{ template.settings?.currency_symbol || "€" }} ({{
|
|
template.settings?.currency_position || "before"
|
|
}})
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<h3 class="uppercase font-semibold tracking-wide text-gray-600">
|
|
Aktivnost
|
|
</h3>
|
|
<ul class="space-y-1 text-gray-600">
|
|
<li>
|
|
<span class="text-gray-400">Akcija:</span>
|
|
{{ template.action?.name || "-" }}
|
|
</li>
|
|
<li>
|
|
<span class="text-gray-400">Odločitev:</span>
|
|
{{ template.decision?.name || "-" }}
|
|
</li>
|
|
<li>
|
|
<span class="text-gray-400">Fail unresolved:</span>
|
|
{{ template.settings?.fail_on_unresolved ? "DA" : "NE" }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="template.settings?.activity_note_template"
|
|
class="bg-white border rounded-lg shadow-sm p-5 space-y-2 text-xs"
|
|
>
|
|
<h2 class="uppercase font-semibold tracking-wide text-gray-600">
|
|
Predloga opombe aktivnosti
|
|
</h2>
|
|
<pre
|
|
class="bg-gray-50 p-3 rounded border text-[11px] leading-relaxed whitespace-pre-wrap"
|
|
>{{ template.settings.activity_note_template }}</pre
|
|
>
|
|
</div>
|
|
|
|
<div
|
|
v-if="template.tokens?.length"
|
|
class="bg-white border rounded-lg shadow-sm p-5"
|
|
>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="uppercase font-semibold tracking-wide text-gray-600 text-xs">
|
|
Tokens ({{ template.tokens.length }})
|
|
</h2>
|
|
<button
|
|
type="button"
|
|
@click="expandedTokens = !expandedTokens"
|
|
class="text-[11px] text-indigo-600 hover:underline"
|
|
>
|
|
{{ expandedTokens ? "Skrij" : "Prikaži vse" }}
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="flex flex-wrap gap-1.5 max-h-56 overflow-auto pr-1"
|
|
:class="!expandedTokens && 'max-h-32'"
|
|
>
|
|
<span
|
|
v-for="t in template.tokens"
|
|
:key="t"
|
|
class="px-1.5 py-0.5 bg-gray-100 rounded text-[11px] font-mono"
|
|
>{{ t }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="w-full lg:w-72 space-y-6">
|
|
<div class="bg-white border rounded-lg shadow-sm p-4 space-y-3 text-xs">
|
|
<h3 class="uppercase font-semibold tracking-wide text-gray-600">
|
|
Hitra dejanja
|
|
</h3>
|
|
<div class="flex flex-col gap-2">
|
|
<Link
|
|
:href="route('admin.document-templates.edit', template.id)"
|
|
:class="[btnBase, btnPrimary]"
|
|
>Uredi nastavitve</Link
|
|
>
|
|
<form @submit.prevent="toggleActive">
|
|
<button
|
|
type="submit"
|
|
:class="[btnBase, template.active ? btnWarn : btnOutline]"
|
|
:disabled="toggleForm.processing"
|
|
>
|
|
{{ template.active ? "Deaktiviraj" : "Aktiviraj" }}
|
|
</button>
|
|
</form>
|
|
<form @submit.prevent="rescan">
|
|
<button type="submit" :class="[btnBase, btnOutline]" :disabled="rescanForm.processing">
|
|
<span v-if="rescanForm.processing">Pregledujem…</span>
|
|
<span v-else>Ponovno preglej tokene</span>
|
|
</button>
|
|
</form>
|
|
<Link
|
|
:href="route('admin.document-templates.index')"
|
|
:class="[btnBase, btnOutline]"
|
|
>Vse predloge</Link
|
|
>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="bg-white border rounded-lg shadow-sm p-4 space-y-2 text-[11px] text-gray-600"
|
|
>
|
|
<h3 class="uppercase font-semibold tracking-wide text-gray-600 text-xs">
|
|
Opombe
|
|
</h3>
|
|
<p>
|
|
Uporabi to stran za hiter pregled meta podatkov predloge ter njenih tokenov.
|
|
</p>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</AdminLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Link, useForm } from "@inertiajs/vue3";
|
|
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
|
|
|
// Button style utility classes
|
|
const btnBase =
|
|
"inline-flex items-center justify-center gap-1 rounded-md border text-xs font-medium px-3 py-1.5 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed";
|
|
const btnPrimary = "bg-indigo-600 border-indigo-600 text-white hover:bg-indigo-500";
|
|
const btnOutline = "bg-white text-gray-700 border-gray-300 hover:bg-gray-50";
|
|
const btnWarn = "bg-amber-500 border-amber-500 text-white hover:bg-amber-400";
|
|
|
|
const props = defineProps({
|
|
template: Object,
|
|
});
|
|
|
|
const toggleForm = useForm({});
|
|
const rescanForm = useForm({});
|
|
|
|
function toggleActive() {
|
|
toggleForm.post(route("admin.document-templates.toggle", props.template.id), {
|
|
preserveScroll: true,
|
|
});
|
|
}
|
|
|
|
function rescan() {
|
|
rescanForm.post(route("admin.document-templates.rescan", props.template.id), {
|
|
preserveScroll: true,
|
|
only: ["template"],
|
|
});
|
|
}
|
|
</script>
|