101 lines
4.0 KiB
Vue
101 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@inertiajs/vue3';
|
|
import Button from '@/components/ui/Button.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;
|
|
name: string;
|
|
display_name: string | null;
|
|
users_count: number;
|
|
removable: boolean;
|
|
editUrl: string;
|
|
deleteUrl: string;
|
|
}
|
|
|
|
defineProps<{ roles: Role[] }>();
|
|
|
|
const { __ } = useTranslations();
|
|
const { confirmDelete } = useConfirmDelete();
|
|
|
|
function remove(role: Role) {
|
|
confirmDelete({
|
|
url: role.deleteUrl,
|
|
message: __('Are you sure that you want to delete this role?'),
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout :title="__('Roles')" :heading="__('Roles')" :breadcrumbs="[{ label: __('Roles') }]">
|
|
<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('roles.create')">
|
|
<Button :label="__('Add Role')" icon="fas fa-plus" rounded />
|
|
</Link>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full min-w-2xl text-left">
|
|
<thead>
|
|
<tr class="border-b border-slate-100">
|
|
<th class="px-4 py-3 font-medium">{{ __('Name') }}</th>
|
|
<th class="px-4 py-3 font-medium">{{ __('Display Name') }}</th>
|
|
<th class="px-4 py-3 font-medium">
|
|
{{ __('# of users with this role') }}
|
|
</th>
|
|
<th class="w-40 px-4 py-3 text-center font-medium">{{ __('Action') }}</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr v-if="!roles.length">
|
|
<td colspan="4" class="px-4 py-3">
|
|
<em class="text-slate-500">{{ __('No records found.') }}</em>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr
|
|
v-for="role in roles"
|
|
:key="role.id"
|
|
class="odd:bg-body border-b border-slate-50"
|
|
>
|
|
<td class="px-4 py-3">{{ role.name }}</td>
|
|
<td class="px-4 py-3">{{ role.display_name }}</td>
|
|
<td class="px-4 py-3">{{ role.users_count }}</td>
|
|
|
|
<td class="px-4 py-3 text-center">
|
|
<Tooltip :text="__('Edit Role')">
|
|
<Link :href="role.editUrl">
|
|
<Button
|
|
icon="fas fa-edit"
|
|
text
|
|
rounded
|
|
severity="secondary"
|
|
:aria-label="__('Edit Role')"
|
|
/>
|
|
</Link>
|
|
</Tooltip>
|
|
|
|
<Tooltip v-if="role.removable" :text="__('Delete Role')">
|
|
<Button
|
|
icon="fas fa-trash"
|
|
text
|
|
rounded
|
|
severity="secondary"
|
|
:aria-label="__('Delete Role')"
|
|
@click="remove(role)"
|
|
/>
|
|
</Tooltip>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|