138 lines
5.0 KiB
Vue
138 lines
5.0 KiB
Vue
<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";
|
|
|
|
const props = defineProps({
|
|
permission: Object,
|
|
roles: Array,
|
|
selectedRoleIds: Array,
|
|
});
|
|
|
|
const form = useForm({
|
|
name: props.permission.name,
|
|
slug: props.permission.slug,
|
|
description: props.permission.description || "",
|
|
roles: [...props.selectedRoleIds],
|
|
});
|
|
|
|
function submit() {
|
|
form.put(route("admin.permissions.update", props.permission.id), {
|
|
preserveScroll: true,
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<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>
|
|
<p v-if="form.errors.roles" class="text-xs text-red-600 mt-1">
|
|
{{ 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="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>
|
|
</div>
|
|
</AdminLayout>
|
|
</template>
|