Admin panel updated with shadcn-vue components
This commit is contained in:
Simon Pocrnjič
@@ -1,80 +1,134 @@
|
||||
<script setup>
|
||||
import AdminLayout from '@/Layouts/AdminLayout.vue'
|
||||
import { useForm, Link } from '@inertiajs/vue3'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { faKey, faArrowLeft, faPlus } from '@fortawesome/free-solid-svg-icons'
|
||||
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
||||
import { useForm, Link } from "@inertiajs/vue3";
|
||||
import { KeyRoundIcon, ArrowLeftIcon, SaveIcon } 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 { Checkbox } from "@/Components/ui/checkbox";
|
||||
|
||||
const props = defineProps({
|
||||
roles: Array,
|
||||
})
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
name: '',
|
||||
slug: '',
|
||||
description: '',
|
||||
name: "",
|
||||
slug: "",
|
||||
description: "",
|
||||
roles: [],
|
||||
})
|
||||
});
|
||||
|
||||
function submit() {
|
||||
form.post(route('admin.permissions.store'), {
|
||||
form.post(route("admin.permissions.store"), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => form.reset('name','slug','description','roles')
|
||||
})
|
||||
onSuccess: () => form.reset("name", "slug", "description", "roles"),
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AdminLayout title="Novo dovoljenje">
|
||||
<div class="max-w-2xl mx-auto bg-white border rounded-xl shadow-sm p-6 space-y-8">
|
||||
<header class="flex items-start justify-between gap-6">
|
||||
<div class="space-y-1">
|
||||
<h1 class="text-xl font-semibold tracking-tight flex items-center gap-2">
|
||||
<span class="inline-flex items-center justify-center h-9 w-9 rounded-md bg-indigo-50 text-indigo-600"><FontAwesomeIcon :icon="faKey" /></span>
|
||||
Novo dovoljenje
|
||||
</h1>
|
||||
<p class="text-sm text-gray-500">Ustvari sistemsko dovoljenje za uporabo pri vlogah.</p>
|
||||
</div>
|
||||
<Link :href="route('admin.permissions.index')" class="inline-flex items-center gap-1 text-xs font-medium text-gray-500 hover:text-gray-700">
|
||||
<FontAwesomeIcon :icon="faArrowLeft" class="w-4 h-4" /> Nazaj
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<form @submit.prevent="submit" class="space-y-6">
|
||||
<div class="grid sm:grid-cols-2 gap-6">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium uppercase tracking-wide text-gray-600">Ime</label>
|
||||
<input v-model="form.name" type="text" class="w-full border rounded-md px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500" />
|
||||
<p v-if="form.errors.name" class="text-xs text-red-600 mt-1">{{ form.errors.name }}</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium uppercase tracking-wide text-gray-600">Slug</label>
|
||||
<input v-model="form.slug" type="text" class="w-full border rounded-md px-3 py-2 text-sm font-mono focus:ring-indigo-500 focus:border-indigo-500" />
|
||||
<p v-if="form.errors.slug" class="text-xs text-red-600 mt-1">{{ form.errors.slug }}</p>
|
||||
</div>
|
||||
<div class="sm:col-span-2 space-y-1">
|
||||
<label class="block text-xs font-medium uppercase tracking-wide text-gray-600">Opis</label>
|
||||
<textarea v-model="form.description" rows="3" class="w-full border rounded-md px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500" />
|
||||
<p v-if="form.errors.description" class="text-xs text-red-600 mt-1">{{ form.errors.description }}</p>
|
||||
</div>
|
||||
<div class="sm:col-span-2 space-y-1">
|
||||
<label class="block text-xs font-medium uppercase tracking-wide text-gray-600">Veži na vloge</label>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
|
||||
<label v-for="r in props.roles" :key="r.id" class="inline-flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" :value="r.id" v-model="form.roles" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"/>
|
||||
<span><span class="font-medium">{{ r.name }}</span> <span class="text-xs text-gray-500">({{ r.slug }})</span></span>
|
||||
</label>
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<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"
|
||||
>
|
||||
<KeyRoundIcon class="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>Novo dovoljenje</CardTitle>
|
||||
<CardDescription
|
||||
>Ustvari sistemsko dovoljenje za uporabo pri vlogah.</CardDescription
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="form.errors.roles" class="text-xs text-red-600 mt-1">{{ form.errors.roles }}</p>
|
||||
<Button variant="ghost" size="sm" as-child>
|
||||
<Link :href="route('admin.permissions.index')">
|
||||
<ArrowLeftIcon class="h-4 w-4 mr-2" />
|
||||
Nazaj
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form @submit.prevent="submit" class="space-y-6">
|
||||
<div class="grid sm:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<Label for="name">Ime</Label>
|
||||
<Input id="name" v-model="form.name" type="text" />
|
||||
<p v-if="form.errors.name" class="text-sm text-destructive">
|
||||
{{ form.errors.name }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="slug">Slug</Label>
|
||||
<Input id="slug" v-model="form.slug" type="text" class="font-mono" />
|
||||
<p v-if="form.errors.slug" class="text-sm text-destructive">
|
||||
{{ form.errors.slug }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="sm:col-span-2 space-y-2">
|
||||
<Label for="description">Opis</Label>
|
||||
<Textarea id="description" v-model="form.description" rows="3" />
|
||||
<p v-if="form.errors.description" class="text-sm text-destructive">
|
||||
{{ form.errors.description }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="sm:col-span-2 space-y-2">
|
||||
<Label>Veži na vloge</Label>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
|
||||
<label
|
||||
v-for="r in props.roles"
|
||||
:key="r.id"
|
||||
class="flex items-center gap-2 text-sm cursor-pointer"
|
||||
>
|
||||
<Checkbox
|
||||
:value="r.id"
|
||||
:checked="form.roles.includes(r.id)"
|
||||
@update:checked="
|
||||
(checked) => {
|
||||
if (checked) form.roles.push(r.id);
|
||||
else form.roles = form.roles.filter((id) => id !== r.id);
|
||||
}
|
||||
"
|
||||
/>
|
||||
<span
|
||||
><span class="font-medium">{{ r.name }}</span>
|
||||
<span class="text-xs text-muted-foreground"
|
||||
>({{ r.slug }})</span
|
||||
></span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
<p v-if="form.errors.roles" class="text-sm text-destructive">
|
||||
{{ form.errors.roles }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3 pt-2">
|
||||
<button :disabled="form.processing" type="submit" 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 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50">
|
||||
<FontAwesomeIcon :icon="faPlus" class="w-4 h-4" /> Shrani
|
||||
</button>
|
||||
<Link :href="route('admin.permissions.index')" class="text-sm text-gray-500 hover:text-gray-700">Prekliči</Link>
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex items-center gap-3 pt-2">
|
||||
<Button :disabled="form.processing" type="submit">
|
||||
<SaveIcon class="h-4 w-4 mr-2" />
|
||||
Shrani
|
||||
</Button>
|
||||
<Button variant="ghost" as-child>
|
||||
<Link :href="route('admin.permissions.index')">Prekliči</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
<script setup>
|
||||
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
||||
import { useForm, Link } from "@inertiajs/vue3";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import { faKey, faArrowLeft, faSave } from "@fortawesome/free-solid-svg-icons";
|
||||
import { KeyRoundIcon, ArrowLeftIcon, SaveIcon } 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 { Checkbox } from "@/Components/ui/checkbox";
|
||||
|
||||
const props = defineProps({
|
||||
permission: Object,
|
||||
@@ -26,112 +31,92 @@ function submit() {
|
||||
|
||||
<template>
|
||||
<AdminLayout :title="`Uredi dovoljenje — ${props.permission.name}`">
|
||||
<div class="max-w-2xl mx-auto bg-white border rounded-xl shadow-sm p-6 space-y-8">
|
||||
<header class="flex items-start justify-between gap-6">
|
||||
<div class="space-y-1">
|
||||
<h1 class="text-xl font-semibold tracking-tight flex items-center gap-2">
|
||||
<span
|
||||
class="inline-flex items-center justify-center h-9 w-9 rounded-md bg-indigo-50 text-indigo-600"
|
||||
><FontAwesomeIcon :icon="faKey"
|
||||
/></span>
|
||||
Uredi dovoljenje
|
||||
</h1>
|
||||
<p class="text-sm text-gray-500">
|
||||
Posodobi sistemsko dovoljenje in pripete vloge.
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
:href="route('admin.permissions.index')"
|
||||
class="inline-flex items-center gap-1 text-xs font-medium text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faArrowLeft" class="w-4 h-4" /> Nazaj
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<form @submit.prevent="submit" class="space-y-6">
|
||||
<div class="grid sm:grid-cols-2 gap-6">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium uppercase tracking-wide text-gray-600"
|
||||
>Ime</label
|
||||
>
|
||||
<input
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
class="w-full border rounded-md px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500"
|
||||
/>
|
||||
<p v-if="form.errors.name" class="text-xs text-red-600 mt-1">
|
||||
{{ form.errors.name }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium uppercase tracking-wide text-gray-600"
|
||||
>Slug</label
|
||||
>
|
||||
<input
|
||||
v-model="form.slug"
|
||||
type="text"
|
||||
class="w-full border rounded-md px-3 py-2 text-sm font-mono focus:ring-indigo-500 focus:border-indigo-500"
|
||||
/>
|
||||
<p v-if="form.errors.slug" class="text-xs text-red-600 mt-1">
|
||||
{{ form.errors.slug }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="sm:col-span-2 space-y-1">
|
||||
<label class="block text-xs font-medium uppercase tracking-wide text-gray-600"
|
||||
>Opis</label
|
||||
>
|
||||
<textarea
|
||||
v-model="form.description"
|
||||
rows="3"
|
||||
class="w-full border rounded-md px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500"
|
||||
/>
|
||||
<p v-if="form.errors.description" class="text-xs text-red-600 mt-1">
|
||||
{{ form.errors.description }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="sm:col-span-2 space-y-1">
|
||||
<label class="block text-xs font-medium uppercase tracking-wide text-gray-600"
|
||||
>Veži na vloge</label
|
||||
>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
|
||||
<label
|
||||
v-for="r in props.roles"
|
||||
:key="r.id"
|
||||
class="inline-flex items-center gap-2 text-sm"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="r.id"
|
||||
v-model="form.roles"
|
||||
class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
||||
/>
|
||||
<span
|
||||
><span class="font-medium">{{ r.name }}</span>
|
||||
<span class="text-xs text-gray-500">({{ r.slug }})</span></span
|
||||
>
|
||||
</label>
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<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">
|
||||
<KeyRoundIcon class="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>Uredi dovoljenje</CardTitle>
|
||||
<CardDescription>Posodobi sistemsko dovoljenje in pripete vloge.</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="form.errors.roles" class="text-xs text-red-600 mt-1">
|
||||
{{ form.errors.roles }}
|
||||
</p>
|
||||
<Button variant="ghost" size="sm" as-child>
|
||||
<Link :href="route('admin.permissions.index')">
|
||||
<ArrowLeftIcon class="h-4 w-4 mr-2" />
|
||||
Nazaj
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
|
||||
<div class="flex items-center gap-3 pt-2">
|
||||
<button
|
||||
:disabled="form.processing"
|
||||
type="submit"
|
||||
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 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faSave" class="w-4 h-4" /> Shrani
|
||||
</button>
|
||||
<Link
|
||||
:href="route('admin.permissions.index')"
|
||||
class="text-sm text-gray-500 hover:text-gray-700"
|
||||
>Prekliči</Link
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
<form @submit.prevent="submit" class="space-y-6">
|
||||
<div class="grid sm:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<Label for="name">Ime</Label>
|
||||
<Input id="name" v-model="form.name" type="text" />
|
||||
<p v-if="form.errors.name" class="text-sm text-destructive">
|
||||
{{ form.errors.name }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="slug">Slug</Label>
|
||||
<Input id="slug" v-model="form.slug" type="text" class="font-mono" />
|
||||
<p v-if="form.errors.slug" class="text-sm text-destructive">
|
||||
{{ form.errors.slug }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="sm:col-span-2 space-y-2">
|
||||
<Label for="description">Opis</Label>
|
||||
<Textarea id="description" v-model="form.description" rows="3" />
|
||||
<p v-if="form.errors.description" class="text-sm text-destructive">
|
||||
{{ form.errors.description }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="sm:col-span-2 space-y-2">
|
||||
<Label>Veži na vloge</Label>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
|
||||
<label
|
||||
v-for="r in props.roles"
|
||||
:key="r.id"
|
||||
class="flex items-center gap-2 text-sm cursor-pointer"
|
||||
>
|
||||
<Checkbox
|
||||
:value="r.id"
|
||||
:checked="form.roles.includes(r.id)"
|
||||
@update:checked="(checked) => {
|
||||
if (checked) form.roles.push(r.id)
|
||||
else form.roles = form.roles.filter(id => id !== r.id)
|
||||
}"
|
||||
/>
|
||||
<span
|
||||
><span class="font-medium">{{ r.name }}</span>
|
||||
<span class="text-xs text-muted-foreground">({{ r.slug }})</span></span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
<p v-if="form.errors.roles" class="text-sm text-destructive">
|
||||
{{ form.errors.roles }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3 pt-2">
|
||||
<Button :disabled="form.processing" type="submit">
|
||||
<SaveIcon class="h-4 w-4 mr-2" />
|
||||
Shrani
|
||||
</Button>
|
||||
<Button variant="ghost" as-child>
|
||||
<Link :href="route('admin.permissions.index')">Prekliči</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
|
||||
@@ -2,13 +2,12 @@
|
||||
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
||||
import { Link, usePage } from "@inertiajs/vue3";
|
||||
import { ref, computed } from "vue";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import {
|
||||
faMagnifyingGlass,
|
||||
faPlus,
|
||||
faKey,
|
||||
faPen,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { SearchIcon, PlusIcon, KeyRoundIcon, PencilIcon } 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 { Badge } from "@/Components/ui/badge";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table";
|
||||
|
||||
const props = defineProps({
|
||||
permissions: Array,
|
||||
@@ -29,103 +28,92 @@ const filtered = computed(() => {
|
||||
|
||||
<template>
|
||||
<AdminLayout title="Dovoljenja">
|
||||
<div class="max-w-5xl mx-auto space-y-8">
|
||||
<div class="bg-white border rounded-xl shadow-sm p-6 space-y-6">
|
||||
<header class="flex flex-col sm:flex-row sm:items-center gap-4 justify-between">
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold tracking-tight">Dovoljenja</h1>
|
||||
<p class="text-sm text-gray-500">Pregled vseh sistemskih dovoljenj.</p>
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-4 justify-between">
|
||||
<div>
|
||||
<CardTitle>Dovoljenja</CardTitle>
|
||||
<CardDescription>Pregled vseh sistemskih dovoljenj.</CardDescription>
|
||||
</div>
|
||||
<Button as-child>
|
||||
<Link :href="route('admin.permissions.create')">
|
||||
<PlusIcon class="h-4 w-4 mr-2" />
|
||||
Novo
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div class="relative w-full sm:max-w-xs">
|
||||
<SearchIcon class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
v-model="q"
|
||||
type="text"
|
||||
placeholder="Išči..."
|
||||
class="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-sm text-muted-foreground">
|
||||
{{ filtered.length }} / {{ props.permissions.length }} rezultatov
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
:href="route('admin.permissions.create')"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 rounded-md text-xs font-medium bg-indigo-600 text-white hover:bg-indigo-500"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faPlus" class="w-4 h-4" /> Novo
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div class="relative w-full sm:max-w-xs">
|
||||
<span class="absolute left-2 top-2 text-gray-400">
|
||||
<FontAwesomeIcon :icon="faMagnifyingGlass" class="w-4 h-4" />
|
||||
</span>
|
||||
<input
|
||||
v-model="q"
|
||||
type="text"
|
||||
placeholder="Išči..."
|
||||
class="pl-8 pr-3 py-1.5 text-sm rounded-md border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 w-full"
|
||||
/>
|
||||
<div class="rounded-lg border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead class="text-left">Ime</TableHead>
|
||||
<TableHead class="text-left">Slug</TableHead>
|
||||
<TableHead class="text-left">Opis</TableHead>
|
||||
<TableHead class="text-left">Ustvarjeno</TableHead>
|
||||
<TableHead class="text-left">Akcije</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow v-for="p in filtered" :key="p.id">
|
||||
<TableCell class="font-medium">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="inline-flex items-center justify-center h-8 w-8 rounded-lg bg-primary/10 text-primary">
|
||||
<KeyRoundIcon class="h-4 w-4" />
|
||||
</div>
|
||||
<Link
|
||||
:href="route('admin.permissions.edit', p.id)"
|
||||
class="hover:underline"
|
||||
>
|
||||
{{ p.name }}
|
||||
</Link>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell class="font-mono text-xs">
|
||||
<Badge variant="secondary">{{ p.slug }}</Badge>
|
||||
</TableCell>
|
||||
<TableCell class="text-sm max-w-md">
|
||||
{{ p.description || "—" }}
|
||||
</TableCell>
|
||||
<TableCell class="text-sm text-muted-foreground">
|
||||
{{ new Date(p.created_at).toLocaleDateString() }}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Button variant="outline" size="sm" as-child>
|
||||
<Link :href="route('admin.permissions.edit', p.id)">
|
||||
<PencilIcon class="h-3.5 w-3.5 mr-2" />
|
||||
Uredi
|
||||
</Link>
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow v-if="!filtered.length">
|
||||
<TableCell colspan="5" class="text-center text-sm text-muted-foreground py-8">
|
||||
Ni rezultatov
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
{{ filtered.length }} / {{ props.permissions.length }} rezultatov
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto rounded-lg border border-slate-200">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead class="bg-slate-50 text-slate-600">
|
||||
<tr>
|
||||
<th class="p-2 text-left text-[11px] uppercase tracking-wide font-medium">
|
||||
Ime
|
||||
</th>
|
||||
<th class="p-2 text-left text-[11px] uppercase tracking-wide font-medium">
|
||||
Slug
|
||||
</th>
|
||||
<th class="p-2 text-left text-[11px] uppercase tracking-wide font-medium">
|
||||
Opis
|
||||
</th>
|
||||
<th class="p-2 text-left text-[11px] uppercase tracking-wide font-medium">
|
||||
Ustvarjeno
|
||||
</th>
|
||||
<th class="p-2 text-left text-[11px] uppercase tracking-wide font-medium">
|
||||
Akcije
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="p in filtered"
|
||||
:key="p.id"
|
||||
class="border-t border-slate-100 hover:bg-slate-50/60"
|
||||
>
|
||||
<td class="p-2 whitespace-nowrap font-medium flex items-center gap-2">
|
||||
<span
|
||||
class="inline-flex items-center justify-center h-7 w-7 rounded-md bg-indigo-50 text-indigo-600"
|
||||
><FontAwesomeIcon :icon="faKey"
|
||||
/></span>
|
||||
<Link
|
||||
:href="route('admin.permissions.edit', p.id)"
|
||||
class="hover:underline"
|
||||
>{{ p.name }}</Link
|
||||
>
|
||||
</td>
|
||||
<td class="p-2 whitespace-nowrap font-mono text-xs text-gray-600">
|
||||
{{ p.slug }}
|
||||
</td>
|
||||
<td class="p-2 text-xs text-gray-600 max-w-md">
|
||||
{{ p.description || "—" }}
|
||||
</td>
|
||||
<td class="p-2 whitespace-nowrap text-xs text-gray-500">
|
||||
{{ new Date(p.created_at).toLocaleDateString() }}
|
||||
</td>
|
||||
<td class="p-2 whitespace-nowrap text-xs">
|
||||
<Link
|
||||
:href="route('admin.permissions.edit', p.id)"
|
||||
class="inline-flex items-center gap-1 px-2 py-1 rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faPen" class="w-3.5 h-3.5" /> Uredi
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!filtered.length">
|
||||
<td colspan="5" class="p-6 text-center text-sm text-gray-500">
|
||||
Ni rezultatov
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user