350 lines
12 KiB
TypeScript
350 lines
12 KiB
TypeScript
import { useEffect, useMemo, useRef } from "react";
|
|
import { View, Text, ScrollView, Dimensions } from "react-native";
|
|
import { Dialog, TextInput, IconButton } from "react-native-paper";
|
|
import { Controller, useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
|
|
import { Button } from "@/components/ui/Button";
|
|
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
|
|
import { User } from "@/store/models/User.model";
|
|
import { RoleEnum } from "@/constants/roleEnum";
|
|
import { RiskEnum } from "@/constants/riskEnum";
|
|
import { OperationMode } from "@/constants/operationModeEnum";
|
|
import { DialogContainer } from "@/components/ui/DialogContainer";
|
|
import { useAuthContext } from "@/auth/AuthContext";
|
|
import { useGetUsersQuery } from "@/store/api/usersApi";
|
|
import { CustomPicker, PickerItem } from "@/components/ui/CustomPicker";
|
|
import {
|
|
adminSchema,
|
|
AdminFormValues,
|
|
} from "@/components/features/admins/schemas/admin.schema";
|
|
|
|
interface AdminModalProps {
|
|
visible: boolean;
|
|
mode?: OperationMode;
|
|
admin?: User | null;
|
|
isLoading: boolean;
|
|
onClose: () => void;
|
|
onSubmit: (payload: Partial<User>) => void;
|
|
}
|
|
|
|
export const AdminModal = ({
|
|
visible,
|
|
mode = OperationMode.ADD,
|
|
admin = null,
|
|
isLoading,
|
|
onClose,
|
|
onSubmit,
|
|
}: AdminModalProps) => {
|
|
const isEdit = mode === OperationMode.EDIT;
|
|
const { user: currentUser } = useAuthContext();
|
|
const { data: adminsData } = useGetUsersQuery(
|
|
{
|
|
roleType: "admin",
|
|
limit: 1000,
|
|
},
|
|
{ skip: !visible }
|
|
);
|
|
const managerOptions = useMemo(
|
|
() => (adminsData?.items || []).filter((u) => u.role === RoleEnum.MANAGER),
|
|
[adminsData]
|
|
);
|
|
|
|
const adminRef = useRef<User | null>(admin);
|
|
adminRef.current = admin;
|
|
const currentUserRef = useRef(currentUser);
|
|
currentUserRef.current = currentUser;
|
|
|
|
const defaultValues: AdminFormValues = {
|
|
id: admin?.id,
|
|
email: admin?.email ?? "",
|
|
firstName: admin?.firstName ?? "",
|
|
lastName: admin?.lastName ?? "",
|
|
title: admin?.title ?? "",
|
|
role: admin?.role ?? RoleEnum.ADMIN,
|
|
riskStatus: admin?.riskStatus ?? RiskEnum.LOW_RISK,
|
|
managerId:
|
|
admin?.managerId ??
|
|
(currentUser?.role === RoleEnum.MANAGER ? currentUser.id : undefined),
|
|
};
|
|
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
reset,
|
|
watch,
|
|
formState: { errors, isDirty, isValid },
|
|
} = useForm<AdminFormValues>({
|
|
resolver: zodResolver(adminSchema),
|
|
defaultValues,
|
|
mode: "onChange",
|
|
shouldUnregister: false,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!visible) return;
|
|
const nextDefaults: AdminFormValues = {
|
|
id: adminRef.current?.id,
|
|
email: adminRef.current?.email ?? "",
|
|
firstName: adminRef.current?.firstName ?? "",
|
|
lastName: adminRef.current?.lastName ?? "",
|
|
title: adminRef.current?.title ?? "",
|
|
role: adminRef.current?.role ?? RoleEnum.ADMIN,
|
|
riskStatus: adminRef.current?.riskStatus ?? RiskEnum.LOW_RISK,
|
|
managerId:
|
|
adminRef.current?.managerId ??
|
|
(currentUserRef.current?.role === RoleEnum.MANAGER
|
|
? currentUserRef.current?.id
|
|
: undefined),
|
|
};
|
|
reset(nextDefaults, { keepDefaultValues: false });
|
|
}, [visible, reset, admin?.id, currentUser?.id, currentUser?.role]);
|
|
|
|
const windowHeight = Dimensions.get("window").height;
|
|
const dialogVerticalMargin = 24;
|
|
const dialogMaxHeight = windowHeight - dialogVerticalMargin - 60;
|
|
const approxChrome = 140;
|
|
const maxDialogContentHeight = Math.max(200, dialogMaxHeight - approxChrome);
|
|
|
|
const selectedRole = watch("role");
|
|
|
|
const submit = (vals: AdminFormValues) => {
|
|
const payload: Partial<User> = {
|
|
id: vals.id,
|
|
email: vals.email.trim().toLowerCase(),
|
|
firstName: vals.firstName.trim(),
|
|
lastName: vals.lastName.trim(),
|
|
title: vals.title.trim(),
|
|
role: vals.role || RoleEnum.ADMIN,
|
|
riskStatus: vals.riskStatus || RiskEnum.LOW_RISK,
|
|
// Only Managers can assign Admins to a Manager (Managers themselves cannot be reassigned)
|
|
...(currentUser?.role === RoleEnum.MANAGER && vals.role === RoleEnum.ADMIN
|
|
? { managerId: vals.managerId ?? undefined }
|
|
: {}),
|
|
};
|
|
|
|
onSubmit(payload);
|
|
};
|
|
|
|
const titleText = isEdit ? "Edit Admin" : "Add Admin";
|
|
const submitText = isEdit ? "Edit" : "Add";
|
|
|
|
return (
|
|
<DialogContainer
|
|
visible={visible}
|
|
onDismiss={onClose}
|
|
dialogStyle={{
|
|
alignSelf: "center",
|
|
marginVertical: dialogVerticalMargin,
|
|
maxHeight: dialogMaxHeight,
|
|
}}
|
|
>
|
|
<Dialog.Title>
|
|
<View className="w-full flex-row items-center justify-between">
|
|
<View className="flex-1">
|
|
<Text className="pr-3">{titleText}</Text>
|
|
</View>
|
|
|
|
<View style={{ alignSelf: "flex-start" }}>
|
|
<IconButton
|
|
icon="close"
|
|
size={20}
|
|
onPress={onClose}
|
|
disabled={isLoading}
|
|
accessibilityLabel="Close dialog"
|
|
style={{ margin: 0 }}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</Dialog.Title>
|
|
<Dialog.Content>
|
|
<ScrollView
|
|
style={{ maxHeight: maxDialogContentHeight }}
|
|
contentContainerStyle={{ paddingBottom: 16 }}
|
|
>
|
|
<View className="mb-4">
|
|
<Text className="text-sm mb-1 font-medium">Email</Text>
|
|
<Controller
|
|
control={control}
|
|
name="email"
|
|
render={({ field: { onChange, value } }) => (
|
|
<>
|
|
<TextInput
|
|
className={`border ${
|
|
errors.email ? "border-highRisk" : "border-gray-300"
|
|
} rounded p-2 text-base bg-white`}
|
|
value={value}
|
|
onChangeText={onChange}
|
|
placeholder="Enter email address"
|
|
keyboardType="email-address"
|
|
autoCapitalize="none"
|
|
placeholderTextColor="#d9d9d9"
|
|
/>
|
|
{errors.email ? (
|
|
<Text className="text-highRisk text-xs mt-1">
|
|
{errors.email.message as string}
|
|
</Text>
|
|
) : null}
|
|
</>
|
|
)}
|
|
/>
|
|
</View>
|
|
|
|
<View className="mb-4">
|
|
<Text className="text-sm mb-1 font-medium">First Name</Text>
|
|
<Controller
|
|
control={control}
|
|
name="firstName"
|
|
render={({ field: { onChange, value } }) => (
|
|
<>
|
|
<TextInput
|
|
className={`border ${
|
|
errors.firstName ? "border-highRisk" : "border-gray-300"
|
|
} rounded p-2 text-base bg-white`}
|
|
value={value}
|
|
onChangeText={onChange}
|
|
placeholder="Enter first name"
|
|
autoCapitalize="words"
|
|
placeholderTextColor="#d9d9d9"
|
|
/>
|
|
{errors.firstName ? (
|
|
<Text className="text-highRisk text-xs mt-1">
|
|
{errors.firstName.message as string}
|
|
</Text>
|
|
) : null}
|
|
</>
|
|
)}
|
|
/>
|
|
</View>
|
|
|
|
<View className="mb-4">
|
|
<Text className="text-sm mb-1 font-medium">Last Name</Text>
|
|
<Controller
|
|
control={control}
|
|
name="lastName"
|
|
render={({ field: { onChange, value } }) => (
|
|
<>
|
|
<TextInput
|
|
className={`border ${
|
|
errors.lastName ? "border-highRisk" : "border-gray-300"
|
|
} rounded p-2 text-base bg-white`}
|
|
value={value}
|
|
onChangeText={onChange}
|
|
placeholder="Enter last name"
|
|
autoCapitalize="words"
|
|
placeholderTextColor="#d9d9d9"
|
|
/>
|
|
{errors.lastName ? (
|
|
<Text className="text-highRisk text-xs mt-1">
|
|
{errors.lastName.message as string}
|
|
</Text>
|
|
) : null}
|
|
</>
|
|
)}
|
|
/>
|
|
</View>
|
|
|
|
{/* Password field removed for invitation-only flow */}
|
|
|
|
<View className="mb-4">
|
|
<Text className="text-sm mb-1 font-medium">Title</Text>
|
|
<Controller
|
|
control={control}
|
|
name="title"
|
|
render={({ field: { onChange, value } }) => (
|
|
<>
|
|
<TextInput
|
|
className={`border ${
|
|
errors.title ? "border-highRisk" : "border-gray-300"
|
|
} rounded p-2 text-base bg-white`}
|
|
value={value}
|
|
onChangeText={onChange}
|
|
placeholder="Enter job title"
|
|
autoCapitalize="words"
|
|
placeholderTextColor="#d9d9d9"
|
|
/>
|
|
{errors.title ? (
|
|
<Text className="text-highRisk text-xs mt-1">
|
|
{errors.title.message as string}
|
|
</Text>
|
|
) : null}
|
|
</>
|
|
)}
|
|
/>
|
|
</View>
|
|
|
|
<View className="mb-4">
|
|
<Text className="text-sm mb-1 font-medium">Role</Text>
|
|
<View className="border border-gray-300 rounded overflow-hidden">
|
|
<Controller
|
|
control={control}
|
|
name="role"
|
|
render={({ field: { onChange, value } }) => (
|
|
<CustomPicker
|
|
selectedValue={value}
|
|
onValueChange={(v) => onChange(v)}
|
|
>
|
|
<PickerItem label="Admin" value={RoleEnum.ADMIN} />
|
|
<PickerItem label="Manager" value={RoleEnum.MANAGER} />
|
|
</CustomPicker>
|
|
)}
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
{currentUser?.role === RoleEnum.MANAGER &&
|
|
selectedRole === RoleEnum.ADMIN ? (
|
|
<View className="mb-4">
|
|
<Text className="text-sm mb-1 font-medium">
|
|
Assign to Manager
|
|
</Text>
|
|
<View className="border border-gray-300 rounded overflow-hidden">
|
|
<Controller
|
|
control={control}
|
|
name="managerId"
|
|
render={({ field: { onChange, value } }) => (
|
|
<CustomPicker
|
|
selectedValue={value ?? undefined}
|
|
onValueChange={(v) => onChange(v)}
|
|
>
|
|
{managerOptions.map((m) => (
|
|
<PickerItem
|
|
key={m.id}
|
|
label={
|
|
`${m.firstName} ${m.lastName}`.trim() || m.email
|
|
}
|
|
value={m.id}
|
|
/>
|
|
))}
|
|
</CustomPicker>
|
|
)}
|
|
/>
|
|
</View>
|
|
</View>
|
|
) : null}
|
|
</ScrollView>
|
|
</Dialog.Content>
|
|
|
|
<Dialog.Actions>
|
|
<Button
|
|
onPress={handleSubmit(submit)}
|
|
disabled={isLoading || !isValid || (isEdit && !isDirty)}
|
|
className="!ml-2"
|
|
>
|
|
{submitText}
|
|
</Button>
|
|
</Dialog.Actions>
|
|
|
|
{isLoading && (
|
|
<View
|
|
className="absolute inset-0 bg-gray-500/30 flex items-center justify-center"
|
|
pointerEvents="auto"
|
|
style={{ zIndex: 1000, top: 0, right: 0, bottom: 0, left: 0 }}
|
|
>
|
|
<LoadingSpinner size={16} />
|
|
</View>
|
|
)}
|
|
</DialogContainer>
|
|
);
|
|
};
|