135 lines
4.6 KiB
Vue
135 lines
4.6 KiB
Vue
<script setup>
|
|
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: "",
|
|
roles: [],
|
|
});
|
|
|
|
function submit() {
|
|
form.post(route("admin.permissions.store"), {
|
|
preserveScroll: true,
|
|
onSuccess: () => form.reset("name", "slug", "description", "roles"),
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AdminLayout title="Novo dovoljenje">
|
|
<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>
|
|
<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>
|
|
</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">
|
|
<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>
|