132 lines
4.9 KiB
Vue
132 lines
4.9 KiB
Vue
<script setup>
|
|
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";
|
|
|
|
const props = defineProps({
|
|
permissions: Array,
|
|
});
|
|
|
|
const q = ref("");
|
|
const filtered = computed(() => {
|
|
const term = q.value.toLowerCase().trim();
|
|
if (!term) return props.permissions;
|
|
return props.permissions.filter(
|
|
(p) =>
|
|
p.name.toLowerCase().includes(term) ||
|
|
p.slug.toLowerCase().includes(term) ||
|
|
(p.description || "").toLowerCase().includes(term)
|
|
);
|
|
});
|
|
</script>
|
|
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</AdminLayout>
|
|
</template>
|