203 lines
9.4 KiB
JavaScript
203 lines
9.4 KiB
JavaScript
import LtrTextField from "@/core/components/LtrTextField";
|
|
import StyledForm from "@/core/components/StyledForm";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import {
|
|
Box,
|
|
Button,
|
|
Checkbox,
|
|
Chip,
|
|
DialogActions,
|
|
DialogContent,
|
|
Divider,
|
|
FormControlLabel,
|
|
FormHelperText,
|
|
Grid,
|
|
Skeleton,
|
|
Stack,
|
|
} from "@mui/material";
|
|
import { Controller, useForm } from "react-hook-form";
|
|
import { array, object, string } from "yup";
|
|
import useRequest from "@/lib/hooks/useRequest";
|
|
import { ROLE_SERVICE } from "@/core/utils/routes";
|
|
import usePermissionsList from "@/lib/hooks/usePermissionsList";
|
|
|
|
const defaultValues = {
|
|
name: "",
|
|
name_fa: "",
|
|
permissions: [],
|
|
};
|
|
|
|
const validationSchema = object().shape({
|
|
name: string().required("نام فارسی نقش را وارد کنید"),
|
|
name_fa: string().required("نام انگلیسی نقش را وارد کنید"),
|
|
permissions: array().min(1, "حداقل یک دسترسی را انتخاب نمایید"),
|
|
});
|
|
|
|
const CreateRoleForm = ({ setOpen, mutate }) => {
|
|
const requestServer = useRequest({ notificationSuccess: true });
|
|
const { permissions, loadingPermissions } = usePermissionsList();
|
|
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
formState: { isSubmitting, errors },
|
|
} = useForm({ defaultValues, resolver: yupResolver(validationSchema) });
|
|
|
|
const onSubmit = async (data) => {
|
|
try {
|
|
await requestServer(ROLE_SERVICE, "post", {
|
|
data: {
|
|
permissions: data.permissions,
|
|
name: data.name,
|
|
name_fa: data.name_fa,
|
|
},
|
|
});
|
|
setOpen(false);
|
|
mutate();
|
|
} catch (error) {}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<DialogContent dividers>
|
|
<Divider sx={{ mb: 3 }}>
|
|
<Chip color="primary" variant="outlined" label="نقش جدید" />
|
|
</Divider>
|
|
<StyledForm
|
|
id="createRoleForm"
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
style={{ width: "100%", height: "100%" }}
|
|
>
|
|
<Stack spacing={2}>
|
|
<Grid container spacing={2}>
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
|
<Controller
|
|
control={control}
|
|
render={({ field, fieldState: { error } }) => {
|
|
return (
|
|
<LtrTextField
|
|
{...field}
|
|
label="نام انگلیسی نقش"
|
|
variant="outlined"
|
|
fullWidth
|
|
error={!!error}
|
|
helperText={!!error && error.message}
|
|
/>
|
|
);
|
|
}}
|
|
name={"name"}
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
|
<Controller
|
|
control={control}
|
|
render={({ field, fieldState: { error } }) => {
|
|
return (
|
|
<LtrTextField
|
|
{...field}
|
|
label="نام فارسی نقش"
|
|
variant="outlined"
|
|
fullWidth
|
|
error={!!error}
|
|
helperText={!!error && error.message}
|
|
/>
|
|
);
|
|
}}
|
|
name={"name_fa"}
|
|
/>
|
|
</Grid>
|
|
<Box sx={{ width: "100%" }}>
|
|
<Divider>
|
|
<Chip label="سطوح دسترسی" size="medium" />
|
|
</Divider>
|
|
</Box>
|
|
<Grid container spacing={1} sx={{ width: "100%" }}>
|
|
{!loadingPermissions ? (
|
|
<Controller
|
|
control={control}
|
|
name="permissions"
|
|
render={({ field, fieldState: { error } }) => (
|
|
<>
|
|
{permissions.map((permission) => (
|
|
<Grid key={permission.id} size={{ xs: 12, md: 4 }}>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
value={permission.id}
|
|
checked={field.value.includes(permission.id)}
|
|
onChange={(e) => {
|
|
const value = parseInt(e.target.value, 10);
|
|
if (e.target.checked) {
|
|
field.onChange([...field.value, value]);
|
|
} else {
|
|
field.onChange(
|
|
field.value.filter((id) => id !== value)
|
|
);
|
|
}
|
|
}}
|
|
/>
|
|
}
|
|
label={permission.name_fa}
|
|
/>
|
|
</Grid>
|
|
))}
|
|
<FormHelperText sx={{ color: "error.main" }}>
|
|
{!!error && error.message}
|
|
</FormHelperText>
|
|
</>
|
|
)}
|
|
/>
|
|
) : (
|
|
<Grid container spacing={2} width="100%">
|
|
<Grid size={{ xs: 12, md: 4 }}>
|
|
<Skeleton animation="wave" />
|
|
</Grid>
|
|
<Grid size={{ xs: 12, md: 4 }}>
|
|
<Skeleton animation="wave" />
|
|
</Grid>
|
|
<Grid size={{ xs: 12, md: 4 }}>
|
|
<Skeleton animation="wave" />
|
|
</Grid>
|
|
<Grid size={{ xs: 12, md: 4 }}>
|
|
<Skeleton animation="wave" />
|
|
</Grid>
|
|
<Grid size={{ xs: 12, md: 4 }}>
|
|
<Skeleton animation="wave" />
|
|
</Grid>
|
|
<Grid size={{ xs: 12, md: 4 }}>
|
|
<Skeleton animation="wave" />
|
|
</Grid>
|
|
</Grid>
|
|
)}
|
|
</Grid>
|
|
</Grid>
|
|
</Stack>
|
|
</StyledForm>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button
|
|
disabled={isSubmitting}
|
|
variant="outlined"
|
|
color="secondary"
|
|
size="large"
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
بستن
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
form="createRoleForm"
|
|
size="large"
|
|
autoFocus
|
|
variant="contained"
|
|
>
|
|
{isSubmitting ? "در حال ثبت نقش جدید..." : "ثبت نقش جدید"}
|
|
</Button>
|
|
</DialogActions>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CreateRoleForm;
|