first commit

2026-10-09 08:21:06 +02:00
parent db7456df87
commit d259c62304
3761 changed files with 896046 additions and 0 deletions
@@ -0,0 +1,160 @@
+<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>