161 lines
6.4 KiB
Vue
161 lines
6.4 KiB
Vue
<script setup lang="ts">
|
|
import { Link, useForm } from '@inertiajs/vue3';
|
|
import Button from '@/components/ui/Button.vue';
|
|
import Checkbox from '@/components/ui/Checkbox.vue';
|
|
import Tooltip from '@/components/ui/Tooltip.vue';
|
|
import { useConfirmDelete } from '@/composables/useConfirmDelete';
|
|
import { useTranslations } from '@/composables/useVanguard';
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
|
|
interface Role {
|
|
id: number;
|
|
display_name: string | null;
|
|
}
|
|
|
|
interface Permission {
|
|
id: number;
|
|
name: string;
|
|
display_name: string | null;
|
|
removable: boolean;
|
|
editUrl: string;
|
|
deleteUrl: string;
|
|
}
|
|
|
|
const props = defineProps<{
|
|
roles: Role[];
|
|
permissions: Permission[];
|
|
/** Permission ids currently granted, keyed by role id. */
|
|
granted: Record<number, number[]>;
|
|
}>();
|
|
|
|
const { __ } = useTranslations();
|
|
const { confirmDelete } = useConfirmDelete();
|
|
|
|
/**
|
|
* Mirrors the old roles[{roleId}][] checkbox matrix: each role maps to the
|
|
* list of permission ids it holds, and RolePermissionsController replaces the
|
|
* whole set for every role on save.
|
|
*/
|
|
const form = useForm<{ roles: Record<number, number[]> }>({
|
|
roles: Object.fromEntries(
|
|
props.roles.map((role) => [role.id, [...(props.granted[role.id] ?? [])]]),
|
|
),
|
|
});
|
|
|
|
function remove(permission: Permission) {
|
|
confirmDelete({
|
|
url: permission.deleteUrl,
|
|
message: __('Are you sure that you want to delete this permission?'),
|
|
});
|
|
}
|
|
|
|
function submit() {
|
|
form.post(route('permissions.save'), { preserveScroll: true });
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout
|
|
:title="__('Permissions')"
|
|
:heading="__('Permissions')"
|
|
:breadcrumbs="[{ label: __('Permissions') }]"
|
|
>
|
|
<form @submit.prevent="submit">
|
|
<div class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
|
|
<div class="mb-4 flex justify-end border-b border-slate-100 pb-4">
|
|
<Link :href="route('permissions.create')">
|
|
<Button :label="__('Add Permission')" icon="fas fa-plus" rounded />
|
|
</Link>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full min-w-3xl text-left">
|
|
<thead>
|
|
<tr class="border-b border-slate-100">
|
|
<th class="px-4 py-3 font-medium">{{ __('Name') }}</th>
|
|
<th
|
|
v-for="role in roles"
|
|
:key="role.id"
|
|
class="px-4 py-3 text-center font-medium"
|
|
>
|
|
{{ role.display_name }}
|
|
</th>
|
|
<th class="px-4 py-3 text-center font-medium">{{ __('Action') }}</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr
|
|
v-for="permission in permissions"
|
|
:key="permission.id"
|
|
class="odd:bg-body border-b border-slate-50"
|
|
>
|
|
<td class="px-4 py-3">
|
|
{{ permission.display_name || permission.name }}
|
|
</td>
|
|
|
|
<td
|
|
v-for="role in roles"
|
|
:key="role.id"
|
|
class="px-4 py-3 text-center"
|
|
>
|
|
<!--
|
|
Checkbox renders a flex box, which the
|
|
cell's text-center cannot reach, so it
|
|
has to centre itself.
|
|
-->
|
|
<Checkbox
|
|
v-model="form.roles[role.id]"
|
|
:value="permission.id"
|
|
:id="`cb-${role.id}-${permission.id}`"
|
|
class="mx-auto"
|
|
/>
|
|
</td>
|
|
|
|
<td class="px-4 py-3 text-center">
|
|
<Tooltip :text="__('Edit Permission')">
|
|
<Link :href="permission.editUrl">
|
|
<Button
|
|
icon="fas fa-edit"
|
|
text
|
|
rounded
|
|
severity="secondary"
|
|
:aria-label="__('Edit Permission')"
|
|
/>
|
|
</Link>
|
|
</Tooltip>
|
|
|
|
<Tooltip v-if="permission.removable" :text="__('Delete Permission')">
|
|
<Button
|
|
icon="fas fa-trash"
|
|
text
|
|
rounded
|
|
severity="secondary"
|
|
:aria-label="__('Delete Permission')"
|
|
@click="remove(permission)"
|
|
/>
|
|
</Tooltip>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr v-if="!permissions.length">
|
|
<td :colspan="roles.length + 2" class="px-4 py-3">
|
|
<em class="text-slate-500">{{ __('No records found.') }}</em>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
v-if="permissions.length"
|
|
type="submit"
|
|
:label="__('Save Permissions')"
|
|
class="mt-4"
|
|
:loading="form.processing"
|
|
/>
|
|
</form>
|
|
</AppLayout>
|
|
</template>
|