complete role page with store update and delete action
This commit is contained in:
@@ -1,12 +1,11 @@
|
||||
"use client";
|
||||
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
|
||||
import { GET_ROLE_LIST } from "@/core/utils/routes";
|
||||
import { Box, Stack, Typography } from "@mui/material";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import { useMemo } from "react";
|
||||
// import RowActions from "./RowActions";
|
||||
import Toolbar from "./Toolbar";
|
||||
import moment from "jalali-moment";
|
||||
import RowActions from "@/components/dashboard/Roles/RowAcctions";
|
||||
import RowActions from "./RowAcctions";
|
||||
|
||||
const DataTable = () => {
|
||||
const columns = useMemo(
|
||||
|
||||
186
src/components/dashboard/Roles/RowAcctions/Edit/Form/index.jsx
Normal file
186
src/components/dashboard/Roles/RowAcctions/Edit/Form/index.jsx
Normal file
@@ -0,0 +1,186 @@
|
||||
import LtrTextField from "@/core/components/LtrTextField";
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import { CREATE_ROLE } from "@/core/utils/routes";
|
||||
import useRequest from "@/lib/hooks/useRequest";
|
||||
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 usePermissionsList from "@/lib/hooks/usePermissionsList";
|
||||
|
||||
const validationSchema = object().shape({
|
||||
name: string().required("نام فارسی نقش را وارد کنید"),
|
||||
name_fa: string().required("نام انگلیسی نقش را وارد کنید"),
|
||||
permissions: array().min(1, "حداقل یک دسترسی را انتخاب نمایید")
|
||||
});
|
||||
|
||||
const UpdateRoleForm = ({ values, setOpen, mutate }) => {
|
||||
const requestServer = useRequest({ notificationSuccess: true });
|
||||
const { permissions, loadingPermissions } = usePermissionsList();
|
||||
|
||||
const defaultValues = {
|
||||
name: values.name,
|
||||
name_fa: values.name_fa,
|
||||
permissions: values.permissions?.map(p => p.id) || []
|
||||
};
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting, errors },
|
||||
} = useForm({ defaultValues, resolver: yupResolver(validationSchema) });
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
try {
|
||||
await requestServer(`${CREATE_ROLE}/${values.id}`, "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="UpdateRoleForm"
|
||||
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="UpdateRoleForm"
|
||||
size="large"
|
||||
autoFocus
|
||||
variant="contained"
|
||||
>
|
||||
{isSubmitting ? "در حال ویرایش کاربر..." : "ویرایش کاربر"}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateRoleForm;
|
||||
27
src/components/dashboard/Roles/RowAcctions/Edit/index.jsx
Normal file
27
src/components/dashboard/Roles/RowAcctions/Edit/index.jsx
Normal file
@@ -0,0 +1,27 @@
|
||||
"use client";
|
||||
import { Edit } from "@mui/icons-material";
|
||||
import { Dialog, IconButton, Tooltip } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import UpdateUserForm from "./Form";
|
||||
|
||||
const UpdateUser = ({ values, mutate }) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="ویرایش">
|
||||
<IconButton onClick={handleOpen}>
|
||||
<Edit />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog maxWidth="sm" fullWidth={true} open={open}>
|
||||
<UpdateUserForm open={open} setOpen={setOpen} mutate={mutate} values={values} />
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default UpdateUser;
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Box } from "@mui/material";
|
||||
import Delete from "./Delete";
|
||||
// import UpdateUser from "./Edit";
|
||||
import UpdateUser from "./Edit";
|
||||
const RowActions = ({ row, mutate }) => {
|
||||
return (
|
||||
<Box sx={{ display: "flex", gap: 1, alignItems: "center" }}>
|
||||
<Delete rowId={row.original.id} mutate={mutate} />
|
||||
{/*<UpdateUser values={row.original} mutate={mutate} />*/}
|
||||
<UpdateUser values={row.original} mutate={mutate} />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -39,7 +39,6 @@ const CreateRoleForm = ({ setOpen, mutate }) => {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting, errors },
|
||||
watch,
|
||||
} = useForm({ defaultValues, resolver: yupResolver(validationSchema) });
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
|
||||
Reference in New Issue
Block a user