644 lines
24 KiB
TypeScript
644 lines
24 KiB
TypeScript
import { useEffect, useState, useRef, useMemo } from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { z } from 'zod';
|
|
import { Loader2, ChevronDown, ChevronRight } from 'lucide-react';
|
|
import { Modal, FormField, PrimaryButton, SecondaryButton, MultiselectPaginatedSelect } from '@/components/shared';
|
|
import type { Role, UpdateRoleRequest } from '@/types/role';
|
|
import { useAppSelector } from '@/hooks/redux-hooks';
|
|
import { moduleService } from '@/services/module-service';
|
|
|
|
// Utility function to generate code from name
|
|
const generateCodeFromName = (name: string): string => {
|
|
return name
|
|
.toLowerCase()
|
|
.trim()
|
|
.replace(/[^a-z0-9\s]/g, '') // Remove special characters except spaces
|
|
.replace(/\s+/g, '_') // Replace spaces with underscores
|
|
.replace(/_+/g, '_') // Replace multiple underscores with single underscore
|
|
.replace(/^_|_$/g, ''); // Remove leading/trailing underscores
|
|
};
|
|
|
|
// All available resources
|
|
const ALL_RESOURCES = [
|
|
'users',
|
|
// 'tenants',
|
|
'roles',
|
|
'permissions',
|
|
// 'user_roles',
|
|
// 'user_tenants',
|
|
// 'sessions',
|
|
// 'api_keys',
|
|
// 'api_key_permissions',
|
|
'projects',
|
|
'document',
|
|
'audit',
|
|
'security',
|
|
'workflow',
|
|
'training',
|
|
'capa',
|
|
'supplier',
|
|
'reports',
|
|
'notifications',
|
|
'files',
|
|
'settings',
|
|
// 'modules',
|
|
'audit_logs',
|
|
// 'event_logs',
|
|
// 'health_history',
|
|
'qms_connections',
|
|
'qms_sync_jobs',
|
|
'qms_sync_conflicts',
|
|
'qms_entity_mappings',
|
|
'ai',
|
|
'qms',
|
|
];
|
|
|
|
// All available actions
|
|
const ALL_ACTIONS = ['create', 'read', 'update', 'delete'];
|
|
|
|
// Validation schema
|
|
const editRoleSchema = z.object({
|
|
name: z.string().min(1, 'Role name is required'),
|
|
code: z
|
|
.string()
|
|
.min(1, 'Code is required')
|
|
.regex(
|
|
/^[a-z]+(_[a-z]+)*$/,
|
|
"Code must be lowercase and use '_' for separation (e.g. abc_def)"
|
|
),
|
|
description: z.string().min(1, 'Description is required'),
|
|
modules: z.array(z.string().uuid()).optional().nullable(),
|
|
permissions: z.array(z.object({
|
|
resource: z.string(),
|
|
action: z.string(),
|
|
})).optional().nullable(),
|
|
});
|
|
|
|
type EditRoleFormData = z.infer<typeof editRoleSchema>;
|
|
|
|
interface EditRoleModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
roleId: string | null;
|
|
onLoadRole: (id: string) => Promise<Role>;
|
|
onSubmit: (id: string, data: UpdateRoleRequest) => Promise<void>;
|
|
isLoading?: boolean;
|
|
defaultTenantId?: string; // If provided, automatically include tenant_id in request body
|
|
}
|
|
|
|
export const EditRoleModal = ({
|
|
isOpen,
|
|
onClose,
|
|
roleId,
|
|
onLoadRole,
|
|
onSubmit,
|
|
isLoading = false,
|
|
defaultTenantId,
|
|
}: EditRoleModalProps): ReactElement | null => {
|
|
const [isLoadingRole, setIsLoadingRole] = useState<boolean>(false);
|
|
const [loadError, setLoadError] = useState<string | null>(null);
|
|
const loadedRoleIdRef = useRef<string | null>(null);
|
|
const permissions = useAppSelector((state) => state.auth.permissions);
|
|
const roles = useAppSelector((state) => state.auth.roles);
|
|
const tenantIdFromAuth = useAppSelector((state) => state.auth.tenantId);
|
|
const isSuperAdmin = roles.includes('super_admin');
|
|
const [selectedAvailableModules, setSelectedAvailableModules] = useState<string[]>([]);
|
|
const [selectedPermissions, setSelectedPermissions] = useState<Array<{ resource: string; action: string }>>([]);
|
|
const [initialAvailableModuleOptions, setInitialAvailableModuleOptions] = useState<Array<{ value: string; label: string }>>([]);
|
|
const [expandedResources, setExpandedResources] = useState<Set<string>>(new Set());
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
setValue,
|
|
watch,
|
|
reset,
|
|
setError,
|
|
clearErrors,
|
|
formState: { errors },
|
|
} = useForm<EditRoleFormData>({
|
|
resolver: zodResolver(editRoleSchema),
|
|
defaultValues: {
|
|
modules: [],
|
|
permissions: [],
|
|
},
|
|
});
|
|
|
|
const nameValue = watch('name');
|
|
|
|
// Auto-generate code from name
|
|
useEffect(() => {
|
|
if (nameValue) {
|
|
const generatedCode = generateCodeFromName(nameValue);
|
|
setValue('code', generatedCode, { shouldValidate: true });
|
|
}
|
|
}, [nameValue, setValue]);
|
|
|
|
// Load available modules from /modules/available endpoint
|
|
// For super_admin, send tenant_id if defaultTenantId is provided
|
|
// For tenant users, send tenant_id from auth state
|
|
const loadAvailableModules = async (page: number, limit: number) => {
|
|
const tenantId = isSuperAdmin ? defaultTenantId : tenantIdFromAuth;
|
|
const response = await moduleService.getAvailable(page, limit, tenantId);
|
|
return {
|
|
options: response.data.map((module) => ({
|
|
value: module.id,
|
|
label: module.name,
|
|
})),
|
|
pagination: response.pagination,
|
|
};
|
|
};
|
|
|
|
// Build available resources and actions based on user permissions
|
|
const availableResourcesAndActions = useMemo(() => {
|
|
const resourceMap = new Map<string, Set<string>>();
|
|
|
|
permissions.forEach((perm) => {
|
|
const { resource, action } = perm;
|
|
|
|
if (resource === '*') {
|
|
// If resource is *, show all resources
|
|
ALL_RESOURCES.forEach((res) => {
|
|
if (!resourceMap.has(res)) {
|
|
resourceMap.set(res, new Set());
|
|
}
|
|
const actions = resourceMap.get(res)!;
|
|
if (action === '*') {
|
|
// If action is also *, add all actions
|
|
ALL_ACTIONS.forEach((act) => actions.add(act));
|
|
} else {
|
|
actions.add(action);
|
|
}
|
|
});
|
|
} else {
|
|
// Specific resource
|
|
if (!resourceMap.has(resource)) {
|
|
resourceMap.set(resource, new Set());
|
|
}
|
|
const actions = resourceMap.get(resource)!;
|
|
if (action === '*') {
|
|
// If action is *, add all actions for this resource
|
|
ALL_ACTIONS.forEach((act) => actions.add(act));
|
|
} else {
|
|
actions.add(action);
|
|
}
|
|
}
|
|
});
|
|
|
|
return resourceMap;
|
|
}, [permissions]);
|
|
|
|
// Check if a resource has any selected actions
|
|
const hasSelectedActions = (resource: string, actions: Set<string>): boolean => {
|
|
return Array.from(actions).some((action) => {
|
|
return selectedPermissions.some((p) => {
|
|
// Check for exact match
|
|
if (p.resource === resource && p.action === action) return true;
|
|
// Check for wildcard resource with exact action
|
|
if (p.resource === '*' && p.action === action) return true;
|
|
// Check for exact resource with wildcard action
|
|
if (p.resource === resource && p.action === '*') return true;
|
|
// Check for wildcard resource with wildcard action
|
|
if (p.resource === '*' && p.action === '*') return true;
|
|
return false;
|
|
});
|
|
});
|
|
};
|
|
|
|
// Toggle resource expansion
|
|
const toggleResource = (resource: string) => {
|
|
setExpandedResources((prev) => {
|
|
const newSet = new Set(prev);
|
|
if (newSet.has(resource)) {
|
|
newSet.delete(resource);
|
|
} else {
|
|
newSet.add(resource);
|
|
}
|
|
return newSet;
|
|
});
|
|
};
|
|
|
|
// Handle permission checkbox change
|
|
const handlePermissionChange = (resource: string, action: string, checked: boolean) => {
|
|
setSelectedPermissions((prev) => {
|
|
const newPerms = [...prev];
|
|
if (checked) {
|
|
// Add permission if not already exists
|
|
if (!newPerms.some((p) => p.resource === resource && p.action === action)) {
|
|
newPerms.push({ resource, action });
|
|
}
|
|
} else {
|
|
// Remove permission
|
|
return newPerms.filter((p) => !(p.resource === resource && p.action === action));
|
|
}
|
|
return newPerms;
|
|
});
|
|
};
|
|
|
|
// Update form value when permissions change
|
|
useEffect(() => {
|
|
setValue('permissions', selectedPermissions.length > 0 ? selectedPermissions : []);
|
|
}, [selectedPermissions, setValue]);
|
|
|
|
// Update form value when available modules change
|
|
useEffect(() => {
|
|
setValue('modules', selectedAvailableModules.length > 0 ? selectedAvailableModules : []);
|
|
}, [selectedAvailableModules, setValue]);
|
|
|
|
// Expand resources that have selected permissions when role is loaded
|
|
useEffect(() => {
|
|
if (selectedPermissions.length > 0 && availableResourcesAndActions.size > 0) {
|
|
const resourcesWithPermissions = new Set<string>();
|
|
selectedPermissions.forEach((perm) => {
|
|
if (perm.resource === '*') {
|
|
// If wildcard resource, expand all available resources
|
|
availableResourcesAndActions.forEach((_, resource) => {
|
|
resourcesWithPermissions.add(resource);
|
|
});
|
|
} else if (availableResourcesAndActions.has(perm.resource)) {
|
|
// Only expand if resource exists in available resources
|
|
resourcesWithPermissions.add(perm.resource);
|
|
}
|
|
});
|
|
// Only update if we have resources to expand and they're not already expanded
|
|
if (resourcesWithPermissions.size > 0) {
|
|
setExpandedResources((prev) => {
|
|
const newSet = new Set(prev);
|
|
resourcesWithPermissions.forEach((resource) => {
|
|
if (!newSet.has(resource)) {
|
|
newSet.add(resource);
|
|
}
|
|
});
|
|
return newSet;
|
|
});
|
|
}
|
|
}
|
|
}, [selectedPermissions, availableResourcesAndActions]);
|
|
|
|
|
|
// Load role data when modal opens - only load once per roleId
|
|
useEffect(() => {
|
|
if (isOpen && roleId) {
|
|
// Only load if this is a new roleId or modal was closed and reopened
|
|
if (loadedRoleIdRef.current !== roleId) {
|
|
const loadRole = async (): Promise<void> => {
|
|
try {
|
|
setIsLoadingRole(true);
|
|
setLoadError(null);
|
|
clearErrors();
|
|
const role = await onLoadRole(roleId);
|
|
loadedRoleIdRef.current = roleId;
|
|
|
|
// Extract modules and permissions from role
|
|
const roleModules = role.modules || [];
|
|
const rolePermissions = role.permissions || [];
|
|
|
|
// Set available modules if exists
|
|
if (roleModules.length > 0) {
|
|
setSelectedAvailableModules(roleModules);
|
|
setValue('modules', roleModules);
|
|
|
|
// Load module names from available modules API
|
|
// Use tenant_id from auth for tenant users, or defaultTenantId for super_admin
|
|
const loadModuleNames = async () => {
|
|
try {
|
|
const tenantId = isSuperAdmin ? defaultTenantId : tenantIdFromAuth;
|
|
// Load first page of available modules to get module names
|
|
const availableModulesResponse = await moduleService.getAvailable(1, 100, tenantId);
|
|
|
|
// Map role modules to options from available modules
|
|
const moduleOptions = roleModules
|
|
.map((moduleId: string) => {
|
|
const module = availableModulesResponse.data.find((m) => m.id === moduleId);
|
|
if (module) {
|
|
return {
|
|
value: moduleId,
|
|
label: module.name,
|
|
};
|
|
}
|
|
return null;
|
|
})
|
|
.filter((opt) => opt !== null) as Array<{ value: string; label: string }>;
|
|
|
|
setInitialAvailableModuleOptions(moduleOptions);
|
|
} catch (err) {
|
|
console.warn('Failed to load available module names:', err);
|
|
// Fallback: try to load individual modules if available modules endpoint fails
|
|
try {
|
|
const moduleOptionsPromises = roleModules.map(async (moduleId: string) => {
|
|
try {
|
|
const moduleResponse = await moduleService.getById(moduleId);
|
|
return {
|
|
value: moduleId,
|
|
label: moduleResponse.data.name,
|
|
};
|
|
} catch {
|
|
return null;
|
|
}
|
|
});
|
|
const moduleOptions = (await Promise.all(moduleOptionsPromises)).filter(
|
|
(opt) => opt !== null
|
|
) as Array<{ value: string; label: string }>;
|
|
setInitialAvailableModuleOptions(moduleOptions);
|
|
} catch (fallbackErr) {
|
|
console.warn('Fallback loading also failed:', fallbackErr);
|
|
}
|
|
}
|
|
};
|
|
loadModuleNames();
|
|
} else {
|
|
setSelectedAvailableModules([]);
|
|
setInitialAvailableModuleOptions([]);
|
|
}
|
|
|
|
// Set permissions (always set, even if empty array)
|
|
setSelectedPermissions(rolePermissions);
|
|
setValue('permissions', rolePermissions);
|
|
|
|
// Expand resources that have selected permissions
|
|
// This will be handled by useEffect after availableResourcesAndActions is computed
|
|
|
|
reset({
|
|
name: role.name,
|
|
code: role.code,
|
|
description: role.description || '',
|
|
modules: roleModules,
|
|
permissions: rolePermissions,
|
|
});
|
|
} catch (err: any) {
|
|
setLoadError(err?.response?.data?.error?.message || 'Failed to load role details');
|
|
} finally {
|
|
setIsLoadingRole(false);
|
|
}
|
|
};
|
|
loadRole();
|
|
}
|
|
} else if (!isOpen) {
|
|
// Only reset when modal is closed
|
|
loadedRoleIdRef.current = null;
|
|
setSelectedAvailableModules([]);
|
|
setSelectedPermissions([]);
|
|
setInitialAvailableModuleOptions([]);
|
|
reset({
|
|
name: '',
|
|
code: '',
|
|
description: '',
|
|
modules: [],
|
|
permissions: [],
|
|
});
|
|
setLoadError(null);
|
|
clearErrors();
|
|
}
|
|
}, [isOpen, roleId, onLoadRole, reset, clearErrors, setValue, isSuperAdmin, defaultTenantId, tenantIdFromAuth]);
|
|
|
|
const handleFormSubmit = async (data: EditRoleFormData): Promise<void> => {
|
|
if (!roleId) return;
|
|
|
|
clearErrors();
|
|
try {
|
|
const submitData = {
|
|
...data,
|
|
// For super_admin, always include tenant_id if defaultTenantId is provided
|
|
tenant_id: isSuperAdmin ? (defaultTenantId || undefined) : (defaultTenantId || undefined),
|
|
// Include modules from available modules endpoint
|
|
modules: selectedAvailableModules.length > 0 ? selectedAvailableModules : undefined,
|
|
permissions: selectedPermissions.length > 0 ? selectedPermissions : undefined,
|
|
};
|
|
await onSubmit(roleId, submitData as UpdateRoleRequest);
|
|
// Only reset form on success - this will be handled by parent closing modal
|
|
} catch (error: any) {
|
|
// Don't reset form on error - keep the form data and show errors
|
|
// Handle validation errors from API
|
|
if (error?.response?.data?.details && Array.isArray(error.response.data.details)) {
|
|
const validationErrors = error.response.data.details;
|
|
validationErrors.forEach((detail: { path: string; message: string }) => {
|
|
if (
|
|
detail.path === 'name' ||
|
|
detail.path === 'code' ||
|
|
detail.path === 'description' ||
|
|
detail.path === 'modules' ||
|
|
detail.path === 'permissions'
|
|
) {
|
|
setError(detail.path as keyof EditRoleFormData, {
|
|
type: 'server',
|
|
message: detail.message,
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
// Handle general errors
|
|
const errorObj = error?.response?.data?.error;
|
|
const errorMessage =
|
|
(typeof errorObj === 'object' && errorObj !== null && 'message' in errorObj ? errorObj.message : null) ||
|
|
(typeof errorObj === 'string' ? errorObj : null) ||
|
|
error?.response?.data?.message ||
|
|
error?.message ||
|
|
'Failed to update role. Please try again.';
|
|
setError('root', {
|
|
type: 'server',
|
|
message: typeof errorMessage === 'string' ? errorMessage : 'Failed to update role. Please try again.',
|
|
});
|
|
}
|
|
// Re-throw error to prevent form from thinking it succeeded
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title="Edit Role"
|
|
description="Update role by setting permissions and role type."
|
|
maxWidth="lg"
|
|
footer={
|
|
<>
|
|
<SecondaryButton
|
|
type="button"
|
|
onClick={onClose}
|
|
disabled={isLoading || isLoadingRole}
|
|
className="px-4 py-2.5 text-sm"
|
|
>
|
|
Cancel
|
|
</SecondaryButton>
|
|
<PrimaryButton
|
|
type="button"
|
|
onClick={handleSubmit(handleFormSubmit)}
|
|
disabled={isLoading || isLoadingRole}
|
|
size="default"
|
|
className="px-4 py-2.5 text-sm"
|
|
>
|
|
{isLoading ? 'Updating...' : 'Update Role'}
|
|
</PrimaryButton>
|
|
</>
|
|
}
|
|
>
|
|
{isLoadingRole && (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="w-6 h-6 text-[#112868] animate-spin" />
|
|
</div>
|
|
)}
|
|
|
|
{/* General Error Display - Always visible */}
|
|
{errors.root && (
|
|
<div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4 mx-5 mt-5">
|
|
<p className="text-sm text-[#ef4444]">{errors.root.message}</p>
|
|
</div>
|
|
)}
|
|
|
|
{loadError && (
|
|
<div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4 mx-5">
|
|
<p className="text-sm text-[#ef4444]">{loadError}</p>
|
|
</div>
|
|
)}
|
|
|
|
{!isLoadingRole && (
|
|
<form onSubmit={handleSubmit(handleFormSubmit)} className="p-5 flex flex-col gap-0">
|
|
{/* Role Name and Role Code Row */}
|
|
<div className="grid grid-cols-2 gap-5 pb-4">
|
|
<FormField
|
|
label="Role Name"
|
|
required
|
|
placeholder="Enter Text Here"
|
|
error={errors.name?.message}
|
|
{...register('name')}
|
|
/>
|
|
|
|
<FormField
|
|
label="Role Code"
|
|
required
|
|
placeholder="Auto-generated from name"
|
|
error={errors.code?.message}
|
|
{...register('code')}
|
|
disabled
|
|
className="bg-[#f3f4f6] cursor-not-allowed"
|
|
/>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<FormField
|
|
label="Description"
|
|
required
|
|
placeholder="Enter Text Here"
|
|
error={errors.description?.message}
|
|
{...register('description')}
|
|
/>
|
|
|
|
{/* Available Modules Selection */}
|
|
<MultiselectPaginatedSelect
|
|
label="Available Modules"
|
|
placeholder="Select available modules"
|
|
value={selectedAvailableModules}
|
|
onValueChange={(values) => {
|
|
setSelectedAvailableModules(values);
|
|
setValue('modules', values.length > 0 ? values : []);
|
|
}}
|
|
onLoadOptions={loadAvailableModules}
|
|
initialOptions={initialAvailableModuleOptions}
|
|
error={errors.modules?.message}
|
|
/>
|
|
|
|
{/* Permissions Section */}
|
|
<div className="pb-4">
|
|
<label className="flex items-center gap-1.5 text-[13px] font-medium text-[#0e1b2a] mb-3">
|
|
<span>Permissions</span>
|
|
</label>
|
|
{errors.permissions && (
|
|
<p className="text-sm text-[#ef4444] mb-2">{errors.permissions.message}</p>
|
|
)}
|
|
<div className="border border-[rgba(0,0,0,0.08)] rounded-md p-4">
|
|
{Array.from(availableResourcesAndActions.entries()).length === 0 ? (
|
|
<p className="text-sm text-[#6b7280]">No permissions available</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{Array.from(availableResourcesAndActions.entries()).map(([resource, actions]) => {
|
|
const isExpanded = expandedResources.has(resource);
|
|
const hasSelected = hasSelectedActions(resource, actions);
|
|
return (
|
|
<div
|
|
key={resource}
|
|
className={`border border-[rgba(0,0,0,0.08)] rounded-md overflow-hidden transition-colors ${
|
|
hasSelected ? 'bg-[rgba(17,40,104,0.05)]' : 'bg-white'
|
|
}`}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleResource(resource)}
|
|
className="w-full flex items-center justify-between p-3 hover:bg-[rgba(0,0,0,0.02)] transition-colors"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{isExpanded ? (
|
|
<ChevronDown className="w-4 h-4 text-[#0e1b2a]" />
|
|
) : (
|
|
<ChevronRight className="w-4 h-4 text-[#0e1b2a]" />
|
|
)}
|
|
<span
|
|
className={`font-medium text-sm capitalize ${
|
|
hasSelected ? 'text-[#112868]' : 'text-[#0e1b2a]'
|
|
}`}
|
|
>
|
|
{resource.replace(/_/g, ' ')}
|
|
</span>
|
|
{hasSelected && (
|
|
<span className="text-xs text-[#112868] bg-[rgba(17,40,104,0.1)] px-2 py-0.5 rounded">
|
|
Selected
|
|
</span>
|
|
)}
|
|
</div>
|
|
</button>
|
|
{isExpanded && (
|
|
<div className="px-3 pb-3 pt-2 border-t border-[rgba(0,0,0,0.05)]">
|
|
<div className="flex flex-wrap gap-4">
|
|
{Array.from(actions).map((action) => {
|
|
const isChecked = selectedPermissions.some((p) => {
|
|
// Check for exact match
|
|
if (p.resource === resource && p.action === action) {
|
|
return true;
|
|
}
|
|
// Check for wildcard resource with exact action
|
|
if (p.resource === '*' && p.action === action) {
|
|
return true;
|
|
}
|
|
// Check for exact resource with wildcard action
|
|
if (p.resource === resource && p.action === '*') {
|
|
return true;
|
|
}
|
|
// Check for wildcard resource with wildcard action
|
|
if (p.resource === '*' && p.action === '*') {
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
return (
|
|
<label
|
|
key={`${resource}-${action}`}
|
|
className="flex items-center gap-2 cursor-pointer"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={isChecked}
|
|
onChange={(e) => handlePermissionChange(resource, action, e.target.checked)}
|
|
className="w-4 h-4 text-[#112868] border-[rgba(0,0,0,0.2)] rounded focus:ring-[#112868]/20"
|
|
/>
|
|
<span className="text-sm text-[#0e1b2a] capitalize">{action}</span>
|
|
</label>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</Modal>
|
|
);
|
|
};
|