468 lines
19 KiB
Vue
468 lines
19 KiB
Vue
<template>
|
|
<AdminLayout title="Uredi predlogo">
|
|
<div class="mb-6 flex flex-col lg:flex-row lg:items-start gap-6">
|
|
<div class="flex-1 min-w-[320px] space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div class="flex items-start gap-3">
|
|
<div class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary">
|
|
<FileTextIcon class="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<CardTitle>{{ template.name }}</CardTitle>
|
|
<CardDescription class="flex flex-wrap gap-3 mt-1">
|
|
<span class="inline-flex items-center gap-1">
|
|
<span>Slug:</span>
|
|
<Badge variant="secondary" class="text-xs">{{ template.slug }}</Badge>
|
|
</span>
|
|
<span class="inline-flex items-center gap-1">
|
|
<span>Verzija:</span>
|
|
<Badge variant="secondary" class="text-xs">v{{ template.version }}</Badge>
|
|
</span>
|
|
<Badge :variant="template.active ? 'default' : 'outline'" class="text-xs">
|
|
{{ template.active ? "Aktivna" : "Neaktivna" }}
|
|
</Badge>
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<form @submit.prevent="toggleActive">
|
|
<Button
|
|
type="submit"
|
|
:variant="template.active ? 'destructive' : 'default'"
|
|
size="sm"
|
|
:disabled="toggleForm.processing"
|
|
>
|
|
<PowerOffIcon v-if="template.active" class="h-4 w-4 mr-2" />
|
|
<Power v-else class="h-4 w-4 mr-2" />
|
|
{{ template.active ? "Deaktiviraj" : "Aktiviraj" }}
|
|
</Button>
|
|
</form>
|
|
<Button size="sm" variant="outline" as-child>
|
|
<Link :href="route('admin.document-templates.show', template.id)">
|
|
<EyeIcon class="h-4 w-4 mr-2" />
|
|
Ogled
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
</Card>
|
|
|
|
<form @submit.prevent="submit" class="space-y-6">
|
|
<!-- Osnovno -->
|
|
<Card>
|
|
<CardHeader>
|
|
<div class="flex items-center gap-2">
|
|
<Settings2Icon class="h-4 w-4" />
|
|
<CardTitle class="text-base">Osnovne nastavitve</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent class="space-y-4">
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|
<div class="space-y-2">
|
|
<Label for="output_filename_pattern">Izlazna datoteka (pattern)</Label>
|
|
<Input
|
|
id="output_filename_pattern"
|
|
v-model="form.output_filename_pattern"
|
|
placeholder="POVRACILO_{contract.reference}"
|
|
class="font-mono text-sm"
|
|
/>
|
|
<p class="text-xs text-muted-foreground">
|
|
Tokens npr. {contract.reference}
|
|
</p>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="date_format">Privzeti format datuma</Label>
|
|
<Input
|
|
id="date_format"
|
|
v-model="form.date_format"
|
|
placeholder="d.m.Y"
|
|
class="font-mono text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<Checkbox
|
|
id="fail_on_unresolved"
|
|
:default-value="form.fail_on_unresolved"
|
|
@update:model-value="(val) => (form.fail_on_unresolved = val)"
|
|
/>
|
|
<Label for="fail_on_unresolved" class="cursor-pointer font-normal">
|
|
Prekini če token ni rešen (fail on unresolved)
|
|
</Label>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<!-- Formatiranje -->
|
|
<Card>
|
|
<CardHeader>
|
|
<div class="flex items-center gap-2">
|
|
<FileTextIcon class="h-4 w-4" />
|
|
<CardTitle class="text-base">Formatiranje</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div class="grid md:grid-cols-3 gap-4">
|
|
<div class="space-y-2">
|
|
<Label for="number_decimals">Decimalna mesta</Label>
|
|
<Input
|
|
id="number_decimals"
|
|
v-model.number="form.number_decimals"
|
|
type="number"
|
|
min="0"
|
|
max="6"
|
|
/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="decimal_separator">Decimalni separator</Label>
|
|
<Input
|
|
id="decimal_separator"
|
|
v-model="form.decimal_separator"
|
|
maxlength="2"
|
|
/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="thousands_separator">Tisočice separator</Label>
|
|
<Input
|
|
id="thousands_separator"
|
|
v-model="form.thousands_separator"
|
|
maxlength="2"
|
|
/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="currency_symbol">Znak valute</Label>
|
|
<Input
|
|
id="currency_symbol"
|
|
v-model="form.currency_symbol"
|
|
maxlength="8"
|
|
/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="currency_position">Pozicija valute</Label>
|
|
<Select v-model="form.currency_position">
|
|
<SelectTrigger id="currency_position">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem :value="null">(privzeto)</SelectItem>
|
|
<SelectItem value="before">Pred</SelectItem>
|
|
<SelectItem value="after">Za</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div class="flex items-center gap-2 pt-8">
|
|
<Checkbox
|
|
id="currency_space"
|
|
:default-value="form.currency_space"
|
|
@update:model-value="(val) => (form.currency_space = val)"
|
|
/>
|
|
<Label for="currency_space" class="cursor-pointer font-normal">
|
|
Presledek pred/za valuto
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<!-- Aktivnost -->
|
|
<Card>
|
|
<CardHeader>
|
|
<div class="flex items-center gap-2">
|
|
<ActivityIcon class="h-4 w-4" />
|
|
<CardTitle class="text-base">Aktivnost</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent class="space-y-4">
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|
<div class="space-y-2">
|
|
<Label for="action_id">Akcija</Label>
|
|
<Select v-model="form.action_id" @update:model-value="handleActionChange">
|
|
<SelectTrigger id="action_id">
|
|
<SelectValue placeholder="(brez)" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem :value="null">(brez)</SelectItem>
|
|
<SelectItem v-for="a in actions" :key="a.id" :value="a.id">
|
|
{{ a.name }}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="decision_id">Odločitev</Label>
|
|
<Select v-model="form.decision_id" :disabled="!currentActionDecisions.length">
|
|
<SelectTrigger id="decision_id">
|
|
<SelectValue placeholder="(brez)" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem :value="null">(brez)</SelectItem>
|
|
<SelectItem v-for="d in currentActionDecisions" :key="d.id" :value="d.id">
|
|
{{ d.name }}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div class="space-y-2 md:col-span-2">
|
|
<Label for="activity_note_template">Predloga opombe aktivnosti</Label>
|
|
<Textarea
|
|
id="activity_note_template"
|
|
v-model="form.activity_note_template"
|
|
rows="3"
|
|
placeholder="Besedilo aktivnosti..."
|
|
/>
|
|
<p class="text-xs text-muted-foreground">
|
|
Tokeni npr. {contract.reference}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<!-- Custom tokens defaults -->
|
|
<Card>
|
|
<CardHeader>
|
|
<div class="flex items-center gap-2">
|
|
<CodeIcon class="h-4 w-4" />
|
|
<CardTitle class="text-base">Custom tokens (privzete vrednosti)</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent class="space-y-4">
|
|
<Button type="button" variant="outline" size="sm" @click="addCustomDefault">
|
|
Dodaj vrstico
|
|
</Button>
|
|
<div class="grid grid-cols-1 gap-3">
|
|
<div
|
|
v-for="(row, idx) in customRows"
|
|
:key="idx"
|
|
class="grid grid-cols-12 items-start gap-2"
|
|
>
|
|
<div class="col-span-4 space-y-1">
|
|
<Input
|
|
v-model="row.key"
|
|
placeholder="custom ključ (npr. order_id)"
|
|
class="font-mono text-sm"
|
|
/>
|
|
</div>
|
|
<div class="col-span-5 space-y-1">
|
|
<Textarea
|
|
v-if="row.type === 'text'"
|
|
v-model="row.value"
|
|
rows="3"
|
|
placeholder="privzeta vrednost"
|
|
/>
|
|
<Input
|
|
v-else
|
|
v-model="row.value"
|
|
placeholder="privzeta vrednost"
|
|
/>
|
|
</div>
|
|
<div class="col-span-2 space-y-1">
|
|
<Select v-model="row.type">
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="string">string</SelectItem>
|
|
<SelectItem value="number">number</SelectItem>
|
|
<SelectItem value="date">date</SelectItem>
|
|
<SelectItem value="text">text</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div class="col-span-1 flex items-center pt-2">
|
|
<Button type="button" variant="ghost" size="icon" @click="removeCustomDefault(idx)">
|
|
<XIcon class="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-muted-foreground">
|
|
Uporabite v predlogi kot <code class="px-1 py-0.5 bg-muted rounded text-xs" v-pre>{{custom.your_key}}</code>. Manjkajoče vrednosti se privzeto izpraznijo.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div class="flex items-center gap-3 pt-2">
|
|
<Button type="submit" :disabled="form.processing">
|
|
<SaveIcon class="h-4 w-4 mr-2" />
|
|
{{ form.processing ? "Shranjevanje…" : "Shrani spremembe" }}
|
|
</Button>
|
|
<Button variant="outline" as-child>
|
|
<Link :href="route('admin.document-templates.show', template.id)">
|
|
<XIcon class="h-4 w-4 mr-2" />
|
|
Prekliči
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Side meta panel -->
|
|
<aside class="w-full lg:w-72 space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle class="text-sm">Meta podatki</CardTitle>
|
|
</CardHeader>
|
|
<CardContent class="space-y-4">
|
|
<div class="space-y-2 text-sm">
|
|
<div class="flex justify-between">
|
|
<span class="text-muted-foreground">Velikost:</span>
|
|
<Badge variant="secondary">{{ (template.file_size / 1024).toFixed(1) }} KB</Badge>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-muted-foreground">Hash:</span>
|
|
<code class="text-xs">{{ template.file_hash?.substring(0, 12) }}…</code>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-muted-foreground">Engine:</span>
|
|
<Badge variant="outline">{{ template.engine }}</Badge>
|
|
</div>
|
|
</div>
|
|
<Separator />
|
|
<Button variant="outline" size="sm" class="w-full" as-child>
|
|
<a :href="'/storage/' + template.file_path" target="_blank">
|
|
Prenesi izvorni DOCX
|
|
</a>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
<Card v-if="template.tokens?.length">
|
|
<CardHeader>
|
|
<CardTitle class="text-sm">Tokens</CardTitle>
|
|
<CardDescription>{{ template.tokens.length }} tokenov</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div class="flex flex-wrap gap-1.5 max-h-48 overflow-auto">
|
|
<Badge
|
|
v-for="t in template.tokens"
|
|
:key="t"
|
|
variant="secondary"
|
|
class="font-mono text-xs"
|
|
>
|
|
{{ t }}
|
|
</Badge>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</aside>
|
|
</div>
|
|
</AdminLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, reactive } from "vue";
|
|
import { useForm, Link, router } from "@inertiajs/vue3";
|
|
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
|
import { Settings2Icon, FileTextIcon, ActivityIcon, CodeIcon, SaveIcon, XIcon, EyeIcon, Power, PowerOffIcon } from "lucide-vue-next";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card";
|
|
import { Button } from "@/Components/ui/button";
|
|
import { Input } from "@/Components/ui/input";
|
|
import { Label } from "@/Components/ui/label";
|
|
import { Textarea } from "@/Components/ui/textarea";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select";
|
|
import { Checkbox } from "@/Components/ui/checkbox";
|
|
import { Badge } from "@/Components/ui/badge";
|
|
import { Separator } from "@/Components/ui/separator";
|
|
|
|
// 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,
|
|
actions: Array,
|
|
});
|
|
|
|
const form = useForm({
|
|
output_filename_pattern: props.template.output_filename_pattern || "",
|
|
date_format: props.template.date_format || "",
|
|
fail_on_unresolved: props.template.fail_on_unresolved ?? false,
|
|
number_decimals: props.template.formatting_options?.number_decimals ?? 2,
|
|
decimal_separator: props.template.formatting_options?.decimal_separator ?? ",",
|
|
thousands_separator: props.template.formatting_options?.thousands_separator ?? ".",
|
|
currency_symbol: props.template.formatting_options?.currency_symbol ?? "€",
|
|
currency_position: props.template.formatting_options?.currency_position ?? "after",
|
|
currency_space: props.template.formatting_options?.currency_space ?? true,
|
|
action_id: props.template.action_id ?? null,
|
|
decision_id: props.template.decision_id ?? null,
|
|
activity_note_template: props.template.activity_note_template || "",
|
|
// meta will include custom_defaults on submit
|
|
meta: props.template.meta || {},
|
|
});
|
|
|
|
const toggleForm = useForm({});
|
|
|
|
const currentActionDecisions = computed(() => {
|
|
if (!form.action_id) {
|
|
return [];
|
|
}
|
|
const a = props.actions.find((a) => a.id === form.action_id);
|
|
return a ? a.decisions : [];
|
|
});
|
|
|
|
function handleActionChange() {
|
|
if (!currentActionDecisions.value.some((d) => d.id === form.decision_id)) {
|
|
form.decision_id = null;
|
|
}
|
|
}
|
|
|
|
function submit() {
|
|
// Build meta.custom_defaults object from rows
|
|
const entries = customRows
|
|
.filter((r) => (r.key || "").trim() !== "")
|
|
.reduce((acc, r) => {
|
|
acc[r.key.trim()] = r.value ?? "";
|
|
return acc;
|
|
}, {});
|
|
const types = customRows
|
|
.filter((r) => (r.key || "").trim() !== "")
|
|
.reduce((acc, r) => {
|
|
acc[r.key.trim()] = r.type || 'string';
|
|
return acc;
|
|
}, {});
|
|
form.meta = Object.assign({}, form.meta || {}, { custom_defaults: entries, custom_default_types: types });
|
|
form.put(route("admin.document-templates.settings.update", props.template.id));
|
|
}
|
|
|
|
function toggleActive() {
|
|
toggleForm.post(route("admin.document-templates.toggle", props.template.id), {
|
|
preserveScroll: true,
|
|
});
|
|
}
|
|
|
|
// Custom defaults rows state
|
|
const baseDefaults = (props.template.meta && props.template.meta.custom_defaults) || {};
|
|
const baseTypes = (props.template.meta && props.template.meta.custom_default_types) || {};
|
|
// Gather detected custom tokens from template.tokens
|
|
const detectedCustoms = Array.isArray(props.template.tokens)
|
|
? props.template.tokens.filter((t) => typeof t === 'string' && t.startsWith('custom.')).map((t) => t.replace(/^custom\./, ''))
|
|
: [];
|
|
// Build a union of keys from defaults, types, and detected tokens
|
|
const allKeysSet = new Set([
|
|
...Object.keys(baseDefaults || {}),
|
|
...Object.keys(baseTypes || {}),
|
|
...detectedCustoms,
|
|
]);
|
|
const allKeys = Array.from(allKeysSet);
|
|
const customRows = reactive(
|
|
allKeys.length
|
|
? allKeys.map((k) => ({ key: k, value: baseDefaults[k] ?? '', type: baseTypes[k] || 'string' }))
|
|
: [{ key: '', value: '', type: 'string' }]
|
|
);
|
|
|
|
function addCustomDefault() {
|
|
customRows.push({ key: "", value: "", type: 'string' });
|
|
}
|
|
|
|
function removeCustomDefault(idx) {
|
|
customRows.splice(idx, 1);
|
|
if (!customRows.length) customRows.push({ key: "", value: "", type: 'string' });
|
|
}
|
|
</script>
|