TF-96 role management initialize
This commit is contained in:
@@ -0,0 +1,137 @@
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
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: Yup.string().required(t("AddDialog.name_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: "",
|
||||
name_fa: "",
|
||||
permissions: [],
|
||||
}, 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(ADD_ROLE_MANAGEMENT, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenConfirmDialog(false)
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<TextField
|
||||
name="name"
|
||||
label={t("AddDialog.name")}
|
||||
type="text"
|
||||
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("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
|
||||
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
|
||||
@@ -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 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'}}}>
|
||||
<DialogTitle>{t("AddDialog.add")}</DialogTitle>
|
||||
<CreateContent mutate={mutate} fetchUrl={fetchUrl} setOpenConfirmDialog={setOpenConfirmDialog}/>
|
||||
</Dialog>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
export default CreateForm
|
||||
67
src/components/dashboard/role-management/Form/DeleteForm.jsx
Normal file
67
src/components/dashboard/role-management/Form/DeleteForm.jsx
Normal 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;
|
||||
156
src/components/dashboard/role-management/Form/UpdateForm.jsx
Normal file
156
src/components/dashboard/role-management/Form/UpdateForm.jsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
FormHelperText,
|
||||
FormLabel,
|
||||
Grid,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip
|
||||
} from "@mui/material";
|
||||
import {useFormik} from "formik";
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import {UPDATE_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import * as Yup from "yup";
|
||||
import usePermissions from "@/lib/app/hooks/usePermissions";
|
||||
|
||||
const UpdateForm = ({row, fetchUrl, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
const {permissions_list} = usePermissions()
|
||||
|
||||
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 (<>
|
||||
<Tooltip title={t("UpdateDialog.update-tooltip")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<EditIcon/>
|
||||
</IconButton>
|
||||
</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>
|
||||
<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>
|
||||
</Dialog>
|
||||
</>);
|
||||
};
|
||||
export default UpdateForm;
|
||||
23
src/components/dashboard/role-management/TableRowActions.jsx
Normal file
23
src/components/dashboard/role-management/TableRowActions.jsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import {Box} from "@mui/material";
|
||||
import DeleteForm from "./Form/DeleteForm"
|
||||
import UpdateForm from "./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
11
src/components/dashboard/role-management/TableToolbar.jsx
Normal 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;
|
||||
96
src/components/dashboard/role-management/index.jsx
Normal file
96
src/components/dashboard/role-management/index.jsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import {Box, Typography} from "@mui/material";
|
||||
import {useMemo} from "react";
|
||||
import {GET_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
|
||||
import {useTranslations} from "next-intl";
|
||||
import DataTable from "@/core/components/DataTable";
|
||||
import moment from "jalali-moment";
|
||||
import MuiDatePicker from "@/core/components/MuiDatePicker";
|
||||
import TableToolbar from "@/components/dashboard/role-management/TableToolbar";
|
||||
import TableRowActions from "./TableRowActions"
|
||||
|
||||
function DashboardRoleManagementComponent() {
|
||||
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 (<DashboardLayouts>
|
||||
<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>
|
||||
</DashboardLayouts>);
|
||||
}
|
||||
|
||||
export default DashboardRoleManagementComponent;
|
||||
Reference in New Issue
Block a user