admin setting with fake data create update
This commit is contained in:
@@ -0,0 +1,88 @@
|
||||
import {Button, DialogActions, DialogContent, 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_USER_MANAGEMENT} from "@/core/data/apiRoutes";
|
||||
|
||||
const CreateContent = ({mutate, setOpenConfirmDialog}) => {
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest({auth: true})
|
||||
const validationSchema = Yup.object().shape({
|
||||
name: Yup.string("AddDialog.name_string")
|
||||
.required(t("AddDialog.setting_name_error")),
|
||||
value: Yup.string("AddDialog.value_string")
|
||||
.required(t("AddDialog.value_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
name: "",
|
||||
value: "",
|
||||
}, validationSchema, onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("name", values.name);
|
||||
formData.append("value", values.value);
|
||||
|
||||
requestServer(ADD_USER_MANAGEMENT, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenConfirmDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="name"
|
||||
rows={8}
|
||||
label={t("AddDialog.setting_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}
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="value"
|
||||
label={t("AddDialog.value")}
|
||||
value={formik.values.value}
|
||||
onChange={formik.handleChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
onBlur={formik.handleBlur("value")}
|
||||
error={formik.touched.value && Boolean(formik.errors.value)}
|
||||
helperText={formik.touched.value && formik.errors.value}
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</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 || !formik.dirty || !formik.isValid}>
|
||||
{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 "@/components/dashboard/admin-setting/Form/CreateForm/CreateContent";
|
||||
|
||||
const CreateForm = ({mutate}) => {
|
||||
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 fullWidth 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} setOpenConfirmDialog={setOpenConfirmDialog}/>
|
||||
</Dialog>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
export default CreateForm
|
||||
@@ -0,0 +1,90 @@
|
||||
import {UPDATE_USER_MANAGEMENT} from "@/core/data/apiRoutes";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const UpdateContent = ({row, mutate, setOpenConfirmDialog}) => {
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
name: Yup.string("AddDialog.name_string")
|
||||
.required(t("AddDialog.setting_name_error")),
|
||||
value: Yup.string("AddDialog.value_string")
|
||||
.required(t("AddDialog.value_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
name: row.getValue("name"),
|
||||
value: row.getValue("value"),
|
||||
}, validationSchema, onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("name", values.name);
|
||||
formData.append("value", values.value);
|
||||
requestServer(`${UPDATE_USER_MANAGEMENT}/${row.getValue("id")}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenConfirmDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="name"
|
||||
rows={8}
|
||||
label={t("UpdateDialog.setting_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}
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="value"
|
||||
rows={8}
|
||||
label={t("UpdateDialog.value")}
|
||||
value={formik.values.value}
|
||||
onChange={formik.handleChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
onBlur={formik.handleBlur("value")}
|
||||
error={formik.touched.value && Boolean(formik.errors.value)}
|
||||
helperText={formik.touched.value && formik.errors.value}
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</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 || !formik.dirty || !formik.isValid}>
|
||||
{t("UpdateDialog.button-update")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default UpdateContent
|
||||
@@ -0,0 +1,30 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import UpdateContent from "./UpdateContent";
|
||||
|
||||
const Update = ({row, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("UpdateDialog.update-tooltip")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<EditIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth 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>
|
||||
<UpdateContent row={row} mutate={mutate} setOpenConfirmDialog={setOpenConfirmDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Update
|
||||
15
src/components/dashboard/admin-setting/TableRowActions.jsx
Normal file
15
src/components/dashboard/admin-setting/TableRowActions.jsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import {Box} from "@mui/material";
|
||||
import Update from "src/components/dashboard/admin-setting/Form/UpdateForm";
|
||||
|
||||
const TableRow = ({row, mutate}) => {
|
||||
return (
|
||||
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
|
||||
<Update
|
||||
row={row}
|
||||
mutate={mutate}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableRow;
|
||||
11
src/components/dashboard/admin-setting/TableToolbar.jsx
Normal file
11
src/components/dashboard/admin-setting/TableToolbar.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import {useTranslations} from "next-intl";
|
||||
import CreateForm from "@/components/dashboard/admin-setting/Form/CreateForm";
|
||||
|
||||
function TableToolbar({mutate}) {
|
||||
const t = useTranslations();
|
||||
|
||||
return <CreateForm mutate={mutate}/>
|
||||
|
||||
}
|
||||
|
||||
export default TableToolbar;
|
||||
88
src/components/dashboard/admin-setting/index.jsx
Normal file
88
src/components/dashboard/admin-setting/index.jsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import {Box, Typography} from "@mui/material";
|
||||
import {useMemo} from "react";
|
||||
import {GET_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
|
||||
import {useTranslations} from "next-intl";
|
||||
import DataTable from "@/core/components/DataTable";
|
||||
import TableRowActions from "@/components/dashboard/admin-setting/TableRowActions";
|
||||
import TableToolbar from "@/components/dashboard/admin-setting/TableToolbar";
|
||||
|
||||
function DashboardAdminSettingComponent() {
|
||||
const t = useTranslations();
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.id,
|
||||
id: "id",
|
||||
header: t("AdminSetting.id"),
|
||||
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("AdminSetting.name"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.value,
|
||||
id: "value",
|
||||
header: t("AdminSetting.value"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "equals",
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"contains",
|
||||
],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
const data = [{
|
||||
id: 1,
|
||||
name: "amin",
|
||||
value: "hi"
|
||||
}]
|
||||
return (
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
data={data}
|
||||
tableUrl={GET_MACHINARY_OFFICE}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={true}
|
||||
CustomToolbar={TableToolbar}
|
||||
enableLastUpdate={true}
|
||||
sorting={[{
|
||||
id: 'name', desc: false
|
||||
}]}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
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 DashboardAdminSettingComponent;
|
||||
Reference in New Issue
Block a user