import { adminToast } from '@admin/components/ui/admin-toast';
import { CreatePageLayout } from '@admin/components/ui/create-page-layout';
import { DataTable, type DataTableColumn } from '@admin/components/ui/data-table';
import { useCrudPermissions } from '@admin/hooks/use-crud-permissions';
import { DeleteConfirmationModal } from '@admin/components/ui/delete-confirmation-modal';
import { formClassName } from '@admin/components/ui/field-styles';
import type { PermissionSection } from '@admin/components/ui/forms/permission-matrix';
import { useFormResponse } from '@admin/hooks/use-form-response';
import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout';
import EditPermissionGroup from '@admin/pages/permission-groups/edit-permission-group';
import { PermissionGroupFormFields } from '@admin/pages/permission-groups/permission-group-form-fields';
import { Head, useForm } from '@inertiajs/react';
import { FormEvent, useState } from 'react';
type PermissionGroupSummary = {
id: number | null;
name: string;
slug: string;
description: string | null;
permissions_count: number;
is_system: boolean;
};
type CreatePermissionGroupProps = {
groups: PermissionGroupSummary[];
permissionSections: PermissionSection[];
};
const sidebarColumns: DataTableColumn[] = [
{ header: 'Name', key: 'name', truncate: true, className: 'w-[40%]' },
{ header: 'Permissions', key: 'permissions_count', className: 'w-24' },
{
header: 'Type',
key: 'is_system',
className: 'w-20',
render: (row) => (row.is_system ? 'Module' : 'Custom'),
},
];
function CreatePermissionGroup({ groups, permissionSections }: CreatePermissionGroupProps) {
const { canEdit, canDelete } = useCrudPermissions('role');
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [initialData, setInitialData] = useState<(PermissionGroupSummary & { permissions?: string[] }) | null>(null);
const [deleteModal, setDeleteModal] = useState<{ show: boolean; group: PermissionGroupSummary | null }>({
show: false,
group: null,
});
const { data, setData, post, processing, errors, reset } = useForm({
name: '',
description: '',
permissions: [] as string[],
});
const action = useFormResponse({ onComplete: reset, loadingMessage: 'Creating permission group...' });
const handleEdit = async (row: PermissionGroupSummary) => {
if (row.id === null) {
return;
}
try {
const response = await fetch(`/admin/edit_permission_group/${row.id}`);
if (!response.ok) {
throw new Error('Failed to fetch permission group');
}
const groupData = (await response.json()) as PermissionGroupSummary & { permissions: string[] };
setInitialData(groupData);
setIsEditModalOpen(true);
} catch {
adminToast.error('Could not load permission group details');
}
};
const handleSubmit = (event: FormEvent) => {
event.preventDefault();
post('/admin/api/create_permission_group', {
onStart: action.onStart,
onSuccess: action.onSuccess,
onError: action.onError,
preserveScroll: true,
});
};
return (
<>
Add custom permission group
}
sidebar={
setDeleteModal({ show: true, group: row }) : undefined}
canEditRow={(row) => !row.is_system}
canDeleteRow={(row) => !row.is_system}
showEdit={canEdit}
showDelete={canDelete}
noDataText="No groups yet"
/>
}
/>
setDeleteModal({ show: false, group: null })}
itemName={deleteModal.group?.name ?? 'this permission group'}
itemType="permission group"
deleteEndpoint={`/admin/api/delete_permission_group/${deleteModal.group?.id ?? ''}`}
loadingMessage="Deleting permission group..."
/>
setIsEditModalOpen(false)}
initialData={initialData}
permissionSections={permissionSections}
/>
);
}
export default Object.assign(CreatePermissionGroup, {
layout: dashboardPersistentLayout('Create permission group', 'Bundle permissions for role assignment'),
});