111 lines
4.1 KiB
Vue
111 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
import { useForm } from '@inertiajs/vue3';
|
|
import Button from '@/components/ui/Button.vue';
|
|
import Input from '@/components/ui/Input.vue';
|
|
import Textarea from '@/components/ui/Textarea.vue';
|
|
import { useTranslations } from '@/composables/useVanguard';
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
|
|
interface Role {
|
|
id: number;
|
|
name: string;
|
|
display_name: string | null;
|
|
description: string | null;
|
|
}
|
|
|
|
const props = defineProps<{ edit: boolean; role?: Role | null }>();
|
|
|
|
const { __ } = useTranslations();
|
|
|
|
const form = useForm({
|
|
name: props.role?.name ?? '',
|
|
display_name: props.role?.display_name ?? '',
|
|
description: props.role?.description ?? '',
|
|
});
|
|
|
|
function submit() {
|
|
if (props.edit && props.role) {
|
|
form.put(route('roles.update', props.role.id));
|
|
|
|
return;
|
|
}
|
|
|
|
form.post(route('roles.store'));
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout
|
|
:title="__('Roles')"
|
|
:heading="edit && role ? role.name : __('Create New Role')"
|
|
:breadcrumbs="[
|
|
{ label: __('Roles'), href: route('roles.index') },
|
|
{ label: edit ? __('Edit') : __('Create') },
|
|
]"
|
|
>
|
|
<form @submit.prevent="submit">
|
|
<div class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
|
|
<div class="grid grid-cols-1 gap-6 md:grid-cols-4">
|
|
<div class="md:col-span-1">
|
|
<h5 class="font-medium text-slate-800">{{ __('Role Details') }}</h5>
|
|
<p class="text-slate-500">{{ __('A general role information.') }}</p>
|
|
</div>
|
|
|
|
<div class="space-y-4 md:col-span-3">
|
|
<div>
|
|
<label for="name" class="mb-1 block text-slate-700">{{ __('Name') }}</label>
|
|
<Input
|
|
id="name"
|
|
v-model="form.name"
|
|
class="w-full"
|
|
:placeholder="__('Role Name')"
|
|
:invalid="Boolean(form.errors.name)"
|
|
/>
|
|
<small v-if="form.errors.name" class="text-red-600">{{ form.errors.name }}</small>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="display_name" class="mb-1 block text-slate-700">
|
|
{{ __('Display Name') }}
|
|
</label>
|
|
<Input
|
|
id="display_name"
|
|
v-model="form.display_name"
|
|
class="w-full"
|
|
:placeholder="__('Display Name')"
|
|
:invalid="Boolean(form.errors.display_name)"
|
|
/>
|
|
<small v-if="form.errors.display_name" class="text-red-600">
|
|
{{ form.errors.display_name }}
|
|
</small>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="description" class="mb-1 block text-slate-700">
|
|
{{ __('Description') }}
|
|
</label>
|
|
<Textarea
|
|
id="description"
|
|
v-model="form.description"
|
|
class="w-full"
|
|
:rows="3"
|
|
:invalid="Boolean(form.errors.description)"
|
|
/>
|
|
<small v-if="form.errors.description" class="text-red-600">
|
|
{{ form.errors.description }}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
:label="edit ? __('Update Role') : __('Create Role')"
|
|
class="mt-4"
|
|
:loading="form.processing"
|
|
/>
|
|
</form>
|
|
</AppLayout>
|
|
</template>
|