CRM/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

complete store part of role and start delete and edit

Browse Source
This commit is contained in:
mhmjalali
2025-07-29 14:39:39 +03:30
parent 74dddb1705
commit 3569d10ecc
2 changed files with 93 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/components/dashboard/Roles/Toolbar/Create/Form/index.jsx
View File

@@ -1,52 +1,55 @@
import LtrTextField from "@/core/components/LtrTextField";
import StyledForm from "@/core/components/StyledForm";
import { yupResolver } from "@hookform/resolvers/yup";
import { Button, Checkbox, Chip, DialogActions, DialogContent, Divider, Grid, Stack } from "@mui/material";
import {
Box,
Button,
Checkbox,
Chip,
DialogActions,
DialogContent,
Divider,
FormControlLabel, FormHelperText,
Grid, Skeleton,
Stack,
} from "@mui/material";
import { Controller, useForm } from "react-hook-form";
import { object, string } from "yup";
import { array, object, string } from "yup";
import useRequest from "@/lib/hooks/useRequest";
import { CREATE_ROLE } from "@/core/utils/routes";
import { useState } from "react";
import { usePermissionsList } from "@/lib/hooks/usePermissionsList";
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 [permissionChecked, setPermissionChecked] = useState({});
const requestServer = useRequest({ notificationSuccess: true });
const { data } = usePermissionsList();
console.log("data", data);
const handleCheckboxChange = (index) => {
setPermissionChecked((prev) => ({
...prev,
[index]: !prev[index],
}));
};
const { permissions, loadingPermissions } = usePermissionsList();
const {
control,
handleSubmit,
formState: { isSubmitting, errors },
watch,
} = useForm({ defaultValues, resolver: yupResolver(validationSchema) });
const onSubmit = async (data) => {
const formData = new FormData();
Object.keys(data).forEach((key) => {
formData.append(key, data[key]);
});
try {
await requestServer(CREATE_ROLE, "post", {
data: formData,
data: {
permissions: data.permissions,
name: data.name,
name_fa: data.name_fa,
},
});
setOpen(false);
mutate();
@@ -60,7 +63,7 @@ const CreateRoleForm = ({ setOpen, mutate }) => {
<Chip color="primary" variant="outlined" label="نقش جدید" />
</Divider>
<StyledForm
id="createRleForm"
id="createRoleForm"
onSubmit={handleSubmit(onSubmit)}
style={{ width: "100%", height: "100%" }}
>
@@ -102,21 +105,53 @@ const CreateRoleForm = ({ setOpen, mutate }) => {
name={"name_fa"}
/>
</Grid>
<Grid item xs={12} md={12}>
<Box sx={{width: "100%"}}>
<Divider>
<Chip label="سطوح دسترسی" size="small" />
<Chip label="سطوح دسترسی" size="medium" />
</Divider>
<Grid container spacing={1}>
{permissions.map((permission, index) => (
<Grid item key={index}>
<Checkbox
checked={!!permissionChecked[index]}
onChange={() => handleCheckboxChange(index)}
/>
{permission.label}
</Grid>
))}
</Grid>
</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>

40
src/lib/hooks/usePermissionsList.js
View File

@@ -1,21 +1,29 @@
import { useEffect, useState } from "react";
import { GET_PERMISSIONS_LIST } from "@/core/utils/routes";
import useSWR from "swr";
import useRequest from "./useRequest";
import useRequest from "@/lib/hooks/useRequest";
export const usePermissionsList = () => {
const request = useRequest();
const usePermissionsList = () => {
const requestServer = useRequest();
const [permissions, setPermissions] = useState([]);
const [loadingPermissions, setLoadingPermissions] = useState(true);
const [errorPermissions, setErrorPermissions] = useState(null);
const fetcher = async (url) => {
try {
const response = await request(url);
return response.data.data;
} catch (error) {
throw new Error();
}
};
useEffect(() => {
const fetchPermissions = async () => {
try {
const response = await requestServer(`${GET_PERMISSIONS_LIST}`);
setPermissions(response.data.data);
setLoadingPermissions(false);
} catch (e) {
setErrorPermissions(e);
setLoadingPermissions(false);
}
};
return useSWR(GET_PERMISSIONS_LIST, fetcher, {
keepPreviousData: true,
dedupingInterval: 30000,
});
fetchPermissions();
}, []);
return { permissions, loadingPermissions, errorPermissions };
};
export default usePermissionsList;