Admin panel updated with shadcn-vue components
This commit is contained in:
Simon Pocrnjič
File diff suppressed because it is too large
Load Diff
@@ -1,8 +1,11 @@
|
||||
<script setup>
|
||||
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
||||
import { Head, Link } from "@inertiajs/vue3";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import { faPlus, faPenToSquare, faTrash } from "@fortawesome/free-solid-svg-icons";
|
||||
import { PlusIcon, PencilIcon, Trash2Icon, MailIcon } from 'lucide-vue-next';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
|
||||
import { Button } from '@/Components/ui/button';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/Components/ui/table';
|
||||
import { Badge } from '@/Components/ui/badge';
|
||||
|
||||
const props = defineProps({
|
||||
templates: { type: Array, default: () => [] },
|
||||
@@ -19,50 +22,84 @@ function destroyTemplate(tpl) {
|
||||
<template>
|
||||
<AdminLayout title="Email predloge">
|
||||
<Head title="Email predloge" />
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-xl font-semibold text-gray-800">Email predloge</h1>
|
||||
<Link
|
||||
:href="route('admin.email-templates.create')"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-500 shadow"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faPlus" class="w-4 h-4" /> Nova predloga
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border bg-white overflow-hidden shadow-sm">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider">
|
||||
<tr>
|
||||
<th class="px-3 py-2 text-left">Ime</th>
|
||||
<th class="px-3 py-2 text-left">Ključ</th>
|
||||
<th class="px-3 py-2 text-left">Entities</th>
|
||||
<th class="px-3 py-2 text-left">Aktivno</th>
|
||||
<th class="px-3 py-2 text-left">Akcije</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="t in templates" :key="t.id" class="border-t last:border-b hover:bg-gray-50">
|
||||
<td class="px-3 py-2 font-medium text-gray-800">{{ t.name }}</td>
|
||||
<td class="px-3 py-2 text-gray-600">{{ t.key }}</td>
|
||||
<td class="px-3 py-2 text-gray-600">{{ (t.entity_types || []).join(', ') }}</td>
|
||||
<td class="px-3 py-2">{{ t.active ? 'da' : 'ne' }}</td>
|
||||
<td class="px-3 py-2 flex items-center gap-2">
|
||||
<Link
|
||||
:href="route('admin.email-templates.edit', t.id)"
|
||||
class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-indigo-600 border-indigo-300 bg-indigo-50 hover:bg-indigo-100"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faPenToSquare" class="w-3.5 h-3.5" /> Uredi
|
||||
</Link>
|
||||
<button
|
||||
@click="destroyTemplate(t)"
|
||||
class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-rose-700 border-rose-300 bg-rose-50 hover:bg-rose-100"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faTrash" class="w-3.5 h-3.5" /> Izbriši
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="flex items-start justify-between">
|
||||
<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">
|
||||
<MailIcon class="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>Email predloge</CardTitle>
|
||||
<CardDescription>
|
||||
Upravljanje predlog za e-poštna sporočila
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<Button as-child>
|
||||
<Link :href="route('admin.email-templates.create')">
|
||||
<PlusIcon class="h-4 w-4 mr-2" />
|
||||
Nova predloga
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent class="p-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Ime</TableHead>
|
||||
<TableHead>Ključ</TableHead>
|
||||
<TableHead>Entitete</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead class="text-right">Akcije</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow v-for="t in templates" :key="t.id">
|
||||
<TableCell class="font-medium">{{ t.name }}</TableCell>
|
||||
<TableCell>
|
||||
<code class="text-xs bg-muted px-1.5 py-0.5 rounded">{{ t.key }}</code>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<Badge v-for="entity in (t.entity_types || [])"
|
||||
:key="entity"
|
||||
variant="outline"
|
||||
class="text-xs"
|
||||
>
|
||||
{{ entity }}
|
||||
</Badge>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge :variant="t.active ? 'default' : 'secondary'">
|
||||
{{ t.active ? 'Aktivno' : 'Neaktivno' }}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell class="text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<Button size="sm" variant="outline" as-child>
|
||||
<Link :href="route('admin.email-templates.edit', t.id)">
|
||||
<PencilIcon class="h-4 w-4 mr-1" />
|
||||
Uredi
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
@click="destroyTemplate(t)"
|
||||
>
|
||||
<Trash2Icon class="h-4 w-4 mr-1" />
|
||||
Izbriši
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user