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

CFE-4 role management page component

Browse Source
This commit is contained in:
Amin Ghasempoor
2023-10-02 15:56:26 +03:30
parent 4a28c81940
commit f7d2341483
18 changed files with 822 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx Normal file
View File

@@ -0,0 +1,139 @@
import {
Button,
Checkbox,
DialogActions,
DialogContent, DialogTitle,
FormControl,
FormControlLabel,
FormHelperText,
FormLabel,
Grid,
Stack,
TextField
} from "@mui/material";
import {useTranslations} from "next-intl";
import useRequest from "@/lib/app/hooks/useRequest";
import * as Yup from "yup";
import {useFormik} from "formik";
import {ADD_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
import usePermissions from "@/lib/app/hooks/usePermissions";
const CreateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => {
const t = useTranslations();
const requestServer = useRequest({auth: true})
const {permissions_list} = usePermissions()
const validationSchema = Yup.object().shape({
name_en: Yup.string().required(t("AddDialog.name_en_error")),
name_fa: Yup.string().required(t("AddDialog.name_fa_error")),
permissions: Yup.array().min(1, t("AddDialog.permission_min_error")).required(t("AddDialog.permission")),
});
const formik = useFormik({
initialValues: {
name_en: "",
name_fa: "",
permissions: [],
}, validationSchema, onSubmit: (values, {setSubmitting}) => {
const formData = new FormData();
formData.append("name_en", values.name_en);
formData.append("name_fa", values.name_fa);
for (let i = 0; i < values.permissions.length; i++) {
formData.append(`permissions[${i}]`, values.permissions[i]);
}
requestServer(ADD_ROLE_MANAGEMENT, 'post', {
data: formData,
}).then((response) => {
setOpenConfirmDialog(false)
mutate(fetchUrl)
update_notification()
}).catch(() => {
}).finally(() => {
setSubmitting(false);
});
},
});
return (
<>
<DialogTitle>{t("AddDialog.add")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack direction="row" spacing={2}>
<TextField
name="name_en"
label={t("AddDialog.name_en")}
type="text"
value={formik.values.name}
onChange={formik.handleChange}
fullWidth
variant="outlined"
onBlur={formik.handleBlur("name_en")}
error={formik.touched.name_en && Boolean(formik.errors.name_en)}
helperText={formik.touched.name_en && formik.errors.name_en}
/>
<TextField
name="name_fa"
label={t("AddDialog.name_fa")}
value={formik.values.name_fa}
onChange={formik.handleChange}
fullWidth
variant="outlined"
onBlur={formik.handleBlur("name_fa")}
error={formik.touched.name_fa && Boolean(formik.errors.name_fa)}
helperText={formik.touched.name_fa && formik.errors.name_fa}
/>
</Stack>
<Stack>
<FormLabel>{t("AddDialog.permission")}<br/>
<FormControl
name="permissions"
error={formik.touched.permissions && Boolean(formik.errors.permissions)}
onBlur={formik.handleBlur("permissions")}
sx={{mt: 2}}
>
<FormHelperText>{formik.touched.permissions && formik.errors.permissions}</FormHelperText>
<Grid container spacing={2}>
{permissions_list ? (
permissions_list.map((permission) => (
<Grid key={permission.id} item xs={6}>
<FormControlLabel
control={
<Checkbox
data-testid="PermissionList-checkbox"
checked={formik.values.permissions.includes(permission.id)}
onChange={(e) => {
if (e.target.checked) {
formik.setFieldValue("permissions", [...formik.values.permissions, permission.id])
} else {
formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id))
}
}}
/>
}
label={permission.name_fa}
/>
</Grid>
))
) : null}
</Grid>
</FormControl>
</FormLabel>
</Stack>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
disabled={formik.isSubmitting} autoFocus>
{t("AddDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting}>
{t("AddDialog.button-add")}
</Button>
</DialogActions>
</>
)
}
export default CreateContent

83
src/components/dashboard/role-management/Form/CreateForm/__test__/CreateContent.test.js Normal file
View File

@@ -0,0 +1,83 @@
import {act, fireEvent, render, screen} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
import CreateContent from "@/components/dashboard/role-management/Form/CreateForm/CreateContent";
describe("Create Content component from Create Form Component in Role Management Component",()=>{
describe("Rendering", ()=>{
it('should see AddDialog text in the top ', () => {
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const textElement = screen.queryByText("افزودن")
expect(textElement).toBeInTheDocument()
});
it('should see name_en text', () => {
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const textElement = screen.queryByLabelText("نام انگلیسی")
expect(textElement).toBeInTheDocument()
});
it('should see name_fa text', () => {
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const textElement = screen.queryByLabelText("نام فارسی")
expect(textElement).toBeInTheDocument()
});
})
describe("Behavior",()=>{
it('should see what fill in the name_en input', async () => {
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const nameEnglishInput = screen.getByLabelText('نام انگلیسی');
fireEvent.change(nameEnglishInput, {target: {value: 'testuser'}});
await act(()=>{
// Simulate user input
expect(nameEnglishInput).toHaveValue('testuser');
})
});
it('should see what fill in the name_fa input', async () => {
localStorage.setItem("_token", "token")
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const nameFarsiInput = screen.getByLabelText('نام فارسی');
fireEvent.change(nameFarsiInput, {target: {value: 'testuser'}});
await act(()=>{
// Simulate user input
expect(nameFarsiInput).toHaveValue('testuser');
})
});
it('should return permissions_list', async () => {
localStorage.setItem("_token", "token")
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const checkboxElement = await screen.findAllByTestId("PermissionList-checkbox")
expect(checkboxElement).toHaveLength(2)
});
it('should ', () => {
});
})
})

30
src/components/dashboard/role-management/Form/CreateForm/__test__/index.test.js Normal file
View File

@@ -0,0 +1,30 @@
import {fireEvent, queryByText, render, screen} from "@testing-library/react";
import CreateForm from "@/components/dashboard/role-management/Form/CreateForm";
import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
describe("Create Form Component from Role Management Component",()=>{
describe("Rendering",()=>{
it('should see Dialog text', () => {
render(
<MockAppWithProviders>
<CreateForm />
</MockAppWithProviders>
)
const textElement = screen.queryByText("افزودن")
expect(textElement).toBeInTheDocument()
});
it('should see Tooltip text when mouse over', () => {
render(
<MockAppWithProviders>
<CreateForm />
</MockAppWithProviders>
)
const buttonElement = screen.getByText("افزودن");
fireEvent.mouseOver(buttonElement);
const tooltipTextElement = screen.getByText("افزودن");
expect(tooltipTextElement).toBeInTheDocument();
});
})
})

34
src/components/dashboard/role-management/Form/CreateForm/index.jsx Normal file
View File

@@ -0,0 +1,34 @@
import {Button, Dialog, DialogTitle, Stack, Tooltip} from "@mui/material";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import {useTranslations} from "next-intl";
import {useState} from "react";
import CreateContent from "./CreateContent";
const CreateForm = ({mutate, fetchUrl}) => {
const t = useTranslations();
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
return (
<Stack direction={"row"} spacing={2}>
<Tooltip title={t("AddDialog.add")} arrow placement="right">
<Button
color="primary"
variant="contained"
size="small"
sx={{textTransform: "unset", alignSelf: "center"}}
startIcon={<DataSaverOnIcon/>}
onClick={() => {
setOpenConfirmDialog(true)
}}
>
{t("AddDialog.add")}
</Button>
</Tooltip>
<Dialog maxWidth={"md"} open={openConfirmDialog}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
<CreateContent mutate={mutate} fetchUrl={fetchUrl} setOpenConfirmDialog={setOpenConfirmDialog}/>
</Dialog>
</Stack>
)
}
export default CreateForm

67
src/components/dashboard/role-management/Form/DeleteForm.jsx Normal file
View File

@@ -0,0 +1,67 @@
import {useTranslations} from "next-intl";
import {useState} from "react";
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
IconButton,
Tooltip,
Typography
} from "@mui/material";
import DeleteIcon from '@mui/icons-material/Delete';
import useRequest from "@/lib/app/hooks/useRequest";
import useNotification from "@/lib/app/hooks/useNotification";
import {DELETE_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
const DeleteForm = ({rowId, fetchUrl, mutate}) => {
const t = useTranslations();
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false)
const requestServer = useRequest({auth: true})
const {update_notification} = useNotification()
const handleSubmit = () => {
setIsSubmitting(true)
requestServer(`${DELETE_ROLE_MANAGEMENT}/${rowId}`, 'delete').then((response) => {
mutate(fetchUrl)
update_notification()
}).catch(() => {
}).finally(() => {
setIsSubmitting(false)
});
}
return (
<>
<Tooltip title={t("DeleteDialog.delete")}>
<IconButton
color="primary"
onClick={() => {
setOpenConfirmDialog(true)
}}
>
<DeleteIcon/>
</IconButton>
</Tooltip>
<Dialog maxWidth="sm" open={openConfirmDialog}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
<DialogTitle>{t("DeleteDialog.delete")}</DialogTitle>
<DialogContent>
<Typography>{t("DeleteDialog.typography")}</Typography>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
disabled={isSubmitting} autoFocus>
{t("DeleteDialog.button-cancel")}
</Button>
<Button onClick={handleSubmit} variant="contained" color="primary"
disabled={isSubmitting}>
{t("DeleteDialog.button-delete")}
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default DeleteForm;

138
src/components/dashboard/role-management/Form/UpdateForm/UpdateContext.jsx Normal file
View File

@@ -0,0 +1,138 @@
import {
Button,
Checkbox, DialogActions,
DialogContent,
FormControl,
FormControlLabel,
FormHelperText,
FormLabel,
Grid,
Stack,
TextField
} from "@mui/material";
import {useFormik} from "formik";
import {UPDATE_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
import * as Yup from "yup";
import usePermissions from "@/lib/app/hooks/usePermissions";
import useNotification from "@/lib/app/hooks/useNotification";
import useRequest from "@/lib/app/hooks/useRequest";
import {useTranslations} from "next-intl";
import {useState} from "react";
const UpdateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => {
const t = useTranslations();
const requestServer = useRequest({auth: true})
const {update_notification} = useNotification()
const {permissions_list} = usePermissions()
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const validationSchema = Yup.object().shape({
name: Yup.string().required(t("UpdateDialog.name_error")),
name_fa: Yup.string().required(t("UpdateDialog.name_fa_error")),
permissions: Yup.array().min(1, t("UpdateDialog.permission_min_error")).required(t("UpdateDialog.permission")),
});
const formik = useFormik({
initialValues: {
name: row.getValue("name"),
name_fa: row.getValue("name_fa"),
permissions: row.original.permissions.map((obj) => obj.id),
}, validationSchema, onSubmit: (values, {setSubmitting}) => {
const formData = new FormData();
formData.append("name", values.name);
formData.append("name_fa", values.name_fa);
for (let i = 0; i < values.permissions.length; i++) {
formData.append(`permissions[${i}]`, values.permissions[i]);
}
requestServer(`${UPDATE_ROLE_MANAGEMENT}/${row.getValue("id")}`, 'post', {
data: formData,
}).then((response) => {
mutate(fetchUrl)
update_notification()
}).catch(() => {
}).finally(() => {
setSubmitting(false);
});
},
});
return(
<>
<DialogContent>
<Stack spacing={2}>
<Stack direction="row" spacing={2} sx={{mt: 1}}>
<TextField
name="name"
label={t("UpdateDialog.name")}
value={formik.values.name}
onChange={formik.handleChange}
fullWidth
variant="outlined"
onBlur={formik.handleBlur("name")}
error={formik.touched.name && Boolean(formik.errors.name)}
helperText={formik.touched.name && formik.errors.name}
/>
<TextField
name="name_fa"
label={t("UpdateDialog.name_fa")}
value={formik.values.name_fa}
onChange={formik.handleChange}
fullWidth
variant="outlined"
onBlur={formik.handleBlur("name_fa")}
error={formik.touched.name_fa && Boolean(formik.errors.name_fa)}
helperText={formik.touched.name_fa && formik.errors.name_fa}
/>
</Stack>
<Stack>
<FormLabel>{t("UpdateDialog.permission")}<br/>
<FormControl
name="permissions"
error={formik.touched.permissions && Boolean(formik.errors.permissions)}
onBlur={formik.handleBlur("permissions")}
sx={{mt: 2}}
>
<FormHelperText>{formik.touched.permissions && formik.errors.permissions}</FormHelperText>
<Grid container spacing={2}>
{permissions_list ? (
permissions_list.map((permission) => (
<Grid key={permission.id} item xs={6}>
<FormControlLabel
control={
<Checkbox
checked={formik.values.permissions.includes(permission.id)}
onChange={(e) => {
if (e.target.checked) {
formik.setFieldValue("permissions", [...formik.values.permissions, permission.id])
} else {
formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id))
}
}}
/>
}
label={permission.name_fa}
/>
</Grid>
))
) : null}
</Grid>
</FormControl>
</FormLabel>
</Stack>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
disabled={formik.isSubmitting} autoFocus>
{t("UpdateDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting}>
{t("UpdateDialog.button-update")}
</Button>
</DialogActions>
</>
)
}
export default UpdateContent

35
src/components/dashboard/role-management/Form/UpdateForm/index.jsx Normal file
View File

@@ -0,0 +1,35 @@
import {Button, Dialog, DialogTitle, Stack, Tooltip} from "@mui/material";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import {useTranslations} from "next-intl";
import {useState} from "react";
import CreateContent from "./CreateContent";
const UpdateForm = ({mutate, fetchUrl}) => {
const t = useTranslations();
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
return (
<Stack direction={"row"} spacing={2}>
<Tooltip title={t("UpdateDialog.update")} arrow placement="right">
<Button
color="primary"
variant="contained"
size="small"
sx={{textTransform: "unset", alignSelf: "center"}}
startIcon={<DataSaverOnIcon/>}
onClick={() => {
setOpenConfirmDialog(true)
}}
>
{t("UpdateDialog.update")}
</Button>
</Tooltip>
<Dialog maxWidth={"md"} open={openConfirmDialog}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
<DialogTitle>{t("UpdateDialog.update ")}</DialogTitle>
<CreateContent mutate={mutate} fetchUrl={fetchUrl} setOpenConfirmDialog={setOpenConfirmDialog}/>
</Dialog>
</Stack>
)
}
export default UpdateForm

94
src/components/dashboard/role-management/RoleManagementComponent.jsx Normal file
View File

@@ -0,0 +1,94 @@
import DataTable from "@/core/components/DataTable";
import {GET_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
import TableToolbar from "@/components/dashboard/role-management/TableToolbar";
import TableRowActions from "@/components/dashboard/role-management/TableRowActions";
import {Box, Typography} from "@mui/material";
import {useTranslations} from "next-intl";
import {useMemo} from "react";
import moment from "jalali-moment";
import MuiDatePicker from "@/core/components/MuiDatePicker";
const RoleManagementComponent = () => {
const t = useTranslations();
const columns = useMemo(() => [{
accessorFn: (row) => row.id,
id: "id",
sortDescFirst: true,
header: t("RoleManagement.id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between",],
Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
},
{
accessorFn: (row) => row.name_fa,
id: "name_fa",
header: t("RoleManagement.name_fa"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
},
{
accessorFn: (row) => row.name,
id: "name",
header: t("RoleManagement.name"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains"],
Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
},
{
accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "created_at",
header: t("RoleManagement.created_at"),
enableColumnFilter: true,
datatype: "date",
filterFn: "lessThan",
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({column}) => <>{column.columnDef.header}</>,
Filter: ({column}) => {
return (<MuiDatePicker column={column}/>);
},
}, {
accessorFn: (row) => moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "updated_at",
header: t("RoleManagement.updated_at"),
enableColumnFilter: false,
datatype: "numeric",
Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
}], []);
return(
<Box sx={{px: 3}}>
<DataTable
tableUrl={GET_ROLE_MANAGEMENT}
columns={columns}
selectableRow={false}
enableCustomToolbar={true}
CustomToolbar={TableToolbar}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={false}
sorting={[{
id: 'id', desc: true
}]}
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
enableColumnFilters={true}
enableHiding={true}
enableFullScreenToggle={false}
enableGlobalFilter={false}
enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
TableRowAction={TableRowActions}
/>
</Box>
)
}
export default RoleManagementComponent

24
src/components/dashboard/role-management/TableRowActions.jsx Normal file
View File

@@ -0,0 +1,24 @@
import {Box} from "@mui/material";
import DeleteForm from "./Form/DeleteForm"
import UpdateForm from "@/components/dashboard/role-management/Form/UpdateForm";
const TableRowActions = ({row, mutate, fetchUrl}) => {
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<UpdateForm
row={row}
mutate={mutate}
fetchUrl={fetchUrl}
/>
<DeleteForm
rowId={row.getValue("id")}
fetchUrl={fetchUrl}
mutate={mutate}
/>
</Box>
);
};
export default TableRowActions;

11
src/components/dashboard/role-management/TableToolbar.jsx Normal file
View File

@@ -0,0 +1,11 @@
import {useTranslations} from "next-intl";
import CreateForm from "./Form/CreateForm/index";
function TableToolbar({mutate, fetchUrl}) {
const t = useTranslations();
return <CreateForm mutate={mutate} fetchUrl={fetchUrl}/>
}
export default TableToolbar;

17
src/components/dashboard/role-management/__test__/RoleManagementComponent.test.js Normal file
View File

@@ -0,0 +1,17 @@
import {render} from "@testing-library/react";
import MockAppWithProviders from "../../../../../mocks/AppWithProvider";
import RoleManagementComponent from "@/components/dashboard/role-management/RoleManagementComponent";
describe("Role Management Component from Role Management page",()=>{
describe("Rendering",()=>{
it('should show columns text', () => {
render((
<MockAppWithProviders>
<RoleManagementComponent />
</MockAppWithProviders>
))
const textElement = screen.getByText("کد یکتا")
expect(textElement).toBeInTheDocument()
});
})
})

13
src/components/dashboard/role-management/index.jsx Normal file
View File

@@ -0,0 +1,13 @@
import DashboardLayouts from "@/layouts/dashboardLayouts";
import RoleManagementComponent from "@/components/dashboard/role-management/RoleManagementComponent";
function DashboardRoleManagementComponent() {
return (
<DashboardLayouts>
<RoleManagementComponent />
</DashboardLayouts>
);
}
export default DashboardRoleManagementComponent;