Admin panel updated with shadcn-vue components
This commit is contained in:
Simon Pocrnjič
@@ -2,6 +2,32 @@
|
||||
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
||||
import { useForm } from "@inertiajs/vue3";
|
||||
import { ref, watch } from "vue";
|
||||
import {
|
||||
Settings2Icon,
|
||||
SaveIcon,
|
||||
CheckCircle2Icon,
|
||||
AlertCircleIcon,
|
||||
} 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 { Switch } from "@/Components/ui/switch";
|
||||
import { Alert, AlertDescription } from "@/Components/ui/alert";
|
||||
|
||||
const props = defineProps({ settings: Object, defaults: Object });
|
||||
const form = useForm({
|
||||
@@ -70,92 +96,147 @@ function submit() {
|
||||
|
||||
<template>
|
||||
<AdminLayout title="Nastavitve dokumentov">
|
||||
<div class="max-w-3xl mx-auto space-y-6">
|
||||
<h1 class="text-2xl font-semibold">Nastavitve dokumentov</h1>
|
||||
<form @submit.prevent="submit" class="space-y-6 bg-white p-6 border rounded">
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<label class="flex flex-col gap-1">
|
||||
<span class="text-sm font-medium">Vzorec imena</span>
|
||||
<input v-model="form.file_name_pattern" class="border rounded px-3 py-2" />
|
||||
<span class="text-xs text-gray-500"
|
||||
>Podprti placeholderji: {slug} {version} {generation.date}
|
||||
{generation.timestamp}</span
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<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"
|
||||
>
|
||||
<span v-if="form.errors.file_name_pattern" class="text-xs text-rose-600">{{
|
||||
form.errors.file_name_pattern
|
||||
}}</span>
|
||||
</label>
|
||||
<label class="flex flex-col gap-1">
|
||||
<span class="text-sm font-medium">Privzeti datum format</span>
|
||||
<input v-model="form.date_format" class="border rounded px-3 py-2" />
|
||||
<span class="text-xs text-gray-500">npr. Y-m-d ali d.m.Y</span>
|
||||
<span v-if="form.errors.date_format" class="text-xs text-rose-600">{{
|
||||
form.errors.date_format
|
||||
}}</span>
|
||||
</label>
|
||||
<label class="flex flex-col gap-1">
|
||||
<span class="text-sm font-medium">Politika nerešenih</span>
|
||||
<select v-model="form.unresolved_policy" class="border rounded px-3 py-2">
|
||||
<option value="fail">Fail</option>
|
||||
<option value="blank">Blank</option>
|
||||
<option value="keep">Keep</option>
|
||||
</select>
|
||||
<span v-if="form.errors.unresolved_policy" class="text-xs text-rose-600">{{
|
||||
form.errors.unresolved_policy
|
||||
}}</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 mt-6">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="form.preview_enabled"
|
||||
true-value="1"
|
||||
false-value="0"
|
||||
/>
|
||||
<span class="text-sm font-medium">Omogoči predoglede</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<label class="flex flex-col gap-1">
|
||||
<span class="text-sm font-medium">Whitelist (JSON)</span>
|
||||
<textarea
|
||||
v-model="form.whitelist"
|
||||
rows="8"
|
||||
class="font-mono text-xs border rounded p-2"
|
||||
></textarea>
|
||||
<span v-if="whitelistError" class="text-xs text-rose-600">{{
|
||||
whitelistError
|
||||
}}</span>
|
||||
<span v-else-if="form.errors.whitelist" class="text-xs text-rose-600">{{
|
||||
form.errors.whitelist
|
||||
}}</span>
|
||||
</label>
|
||||
<label class="flex flex-col gap-1">
|
||||
<span class="text-sm font-medium">Date formats override (JSON)</span>
|
||||
<textarea
|
||||
v-model="form.date_formats"
|
||||
rows="8"
|
||||
class="font-mono text-xs border rounded p-2"
|
||||
></textarea>
|
||||
<span class="text-xs text-gray-500"
|
||||
>Primer: {"contract.start_date":"d.m.Y"}</span
|
||||
>
|
||||
<span v-if="dateFormatsError" class="text-xs text-rose-600">{{
|
||||
dateFormatsError
|
||||
}}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
:disabled="form.processing"
|
||||
class="px-4 py-2 bg-indigo-600 text-white rounded disabled:opacity-50"
|
||||
>
|
||||
{{ form.processing ? "Shranjevanje..." : "Shrani" }}
|
||||
</button>
|
||||
<span v-if="form.wasSuccessful" class="text-sm text-emerald-600"
|
||||
>Shranjeno</span
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
<Settings2Icon class="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>Nastavitve dokumentov</CardTitle>
|
||||
<CardDescription>
|
||||
Konfiguracija generiranja dokumentov, vzorcev imen in formatiranja
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form @submit.prevent="submit" class="space-y-6">
|
||||
<!-- Basic Settings -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-semibold">Osnovne nastavitve</h3>
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="file_name_pattern">Vzorec imena datoteke</Label>
|
||||
<Input
|
||||
id="file_name_pattern"
|
||||
v-model="form.file_name_pattern"
|
||||
class="font-mono text-sm"
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Podprti placeholderji: {slug} {version} {generation.date}
|
||||
{generation.timestamp}
|
||||
</p>
|
||||
<p
|
||||
v-if="form.errors.file_name_pattern"
|
||||
class="text-sm text-destructive"
|
||||
>
|
||||
{{ form.errors.file_name_pattern }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="date_format">Privzeti datum format</Label>
|
||||
<Input
|
||||
id="date_format"
|
||||
v-model="form.date_format"
|
||||
placeholder="Y-m-d"
|
||||
class="font-mono text-sm"
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground">npr. Y-m-d ali d.m.Y</p>
|
||||
<p v-if="form.errors.date_format" class="text-sm text-destructive">
|
||||
{{ form.errors.date_format }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="unresolved_policy">Politika nerešenih spremenljivk</Label>
|
||||
<Select v-model="form.unresolved_policy">
|
||||
<SelectTrigger id="unresolved_policy">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="fail">Fail (napaka)</SelectItem>
|
||||
<SelectItem value="blank">Blank (prazno)</SelectItem>
|
||||
<SelectItem value="keep">Keep (obdrži)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p
|
||||
v-if="form.errors.unresolved_policy"
|
||||
class="text-sm text-destructive"
|
||||
>
|
||||
{{ form.errors.unresolved_policy }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 pt-8">
|
||||
<Switch id="preview_enabled" v-model="form.preview_enabled" />
|
||||
<Label for="preview_enabled" class="cursor-pointer">
|
||||
Omogoči predoglede dokumentov
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JSON Configuration -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-semibold">Napišrana konfiguracija (JSON)</h3>
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="whitelist">Whitelist (dovoljeni tokeni)</Label>
|
||||
<Textarea
|
||||
id="whitelist"
|
||||
v-model="form.whitelist"
|
||||
rows="10"
|
||||
class="font-mono text-xs"
|
||||
placeholder='{"entity": ["column1", "column2"]}'
|
||||
/>
|
||||
<Alert v-if="whitelistError" variant="destructive" class="py-2">
|
||||
<AlertCircleIcon class="h-4 w-4" />
|
||||
<AlertDescription>{{ whitelistError }}</AlertDescription>
|
||||
</Alert>
|
||||
<p v-else-if="form.errors.whitelist" class="text-sm text-destructive">
|
||||
{{ form.errors.whitelist }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="date_formats">Date formats override (JSON)</Label>
|
||||
<Textarea
|
||||
id="date_formats"
|
||||
v-model="form.date_formats"
|
||||
rows="10"
|
||||
class="font-mono text-xs"
|
||||
placeholder='{"contract.start_date": "d.m.Y"}'
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Primer: {"contract.start_date":"d.m.Y"}
|
||||
</p>
|
||||
<Alert v-if="dateFormatsError" variant="destructive" class="py-2">
|
||||
<AlertCircleIcon class="h-4 w-4" />
|
||||
<AlertDescription>{{ dateFormatsError }}</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center gap-3 pt-4">
|
||||
<Button :disabled="form.processing" type="submit">
|
||||
<SaveIcon class="h-4 w-4 mr-2" />
|
||||
{{ form.processing ? "Shranjevanje..." : "Shrani nastavitve" }}
|
||||
</Button>
|
||||
<Alert v-if="form.wasSuccessful" class="py-2 px-3 w-auto">
|
||||
<CheckCircle2Icon class="h-4 w-4 text-green-600" />
|
||||
<AlertDescription class="text-green-600">Shranjeno</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user