loan/expert-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleaning datatable component and make it more flexible/ debug notification and add pending/ add some extra to datatable.

Browse Source
This commit is contained in:
Mohammad Jalali
2023-08-07 14:00:04 +03:30
parent 2211c4803b
commit ac1ad3b8fe
26 changed files with 508 additions and 605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
example.env.local
View File

@@ -4,6 +4,6 @@ NEXT_PUBLIC_DEFAULT_DIRECTION = "rtl"
NEXT_PUBLIC_API_URL = "http://Your IP:3000"
NEXT_PUBLIC_BASE_URL = "deploy api"
NEXT_PUBLIC_BASE_URL = "https://loan.witel.ir"
NODE_ENV = "development"

2
public/locales/fa/app.json
View File

@@ -100,7 +100,7 @@
"notifications": {
"code": "کد",
"error": "خطا",
"warning": "خطر",
"warning": "خطا",
"success": "موفق",
"error_static_text": "عملیات شما با خطا مواجه شد",
"warning_static_text": "خطا سرور",

12
src/components/dashboard/change-password/index.jsx
View File

@@ -20,13 +20,7 @@ const DashboardChangePasswordComponent = () => {
const {directionApp} = useDirection();
const handleSubmit = (values, {setSubmitting, resetForm}) => {
toast.dismiss();
const pendingToast = toast(t("notifications.pending"), {
position: directionApp === "ltr" ? "top-left" : "top-right",
autoClose: false,
closeOnClick: false,
draggable: false,
});
Notifications(directionApp, t);
axios
.post(
CHANGE_PASSWORD,
@@ -41,12 +35,12 @@ const DashboardChangePasswordComponent = () => {
)
.then((response) => {
toast.dismiss(pendingToast); // Dismiss the pending toast notification
Notifications(directionApp, response, t);
Notifications(directionApp, t, response);
resetForm();
})
.catch((error) => {
toast.dismiss(pendingToast); // Dismiss the pending toast notification
Notifications(directionApp, error.response, t);
Notifications(directionApp, t, error.response);
})
.finally(() => {
setSubmitting(false); // Set `setSubmitting` to false after the API request completes

11
src/components/dashboard/edit-profile/index.jsx
View File

@@ -20,6 +20,7 @@ const DashboardEditProfile = () => {
const {directionApp} = useDirection();
const editAvatar = async (avatar) => {
Notifications(directionApp, t);
try {
const formData = new FormData();
@@ -36,7 +37,7 @@ const DashboardEditProfile = () => {
},
});
} catch (error) {
Notifications(directionApp, error.response, t);
Notifications(directionApp, t, error.response);
throw error;
}
};
@@ -54,13 +55,13 @@ const DashboardEditProfile = () => {
// });
// })
// .then((response) => {
// Notifications(directionApp, response, t);
// Notifications(directionApp, t, response);
// getUser((data) => {
// changeUser(data);
// });
// })
// .catch((error) => {
// Notifications(directionApp, error.response, t);
// Notifications(directionApp, t, error.response);
// })
// .finally(() => {
// setSubmitting(false);
@@ -74,13 +75,13 @@ const DashboardEditProfile = () => {
// },
// })
// .then((response) => {
// Notifications(directionApp, response, t);
// Notifications(directionApp, t, response);
// getUser((data) => {
// changeUser(data);
// });
// })
// .catch((error) => {
// Notifications(directionApp, error.response, t);
// Notifications(directionApp, t, error.response);
// })
// .finally(() => {
// setSubmitting(false);

98
src/components/dashboard/machinary-office/TableRowActions.jsx
View File

@@ -1,58 +1,92 @@
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import {Box, IconButton, Tooltip} from "@mui/material";
import {useContext} from "react";
import ConfirmForm from "./Form/ConfirmForm";
import RejectForm from "./Form/RejectForm";
import {useTranslations} from "next-intl";
import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
import {useCallback, useState} from "react";
import axios from "axios";
import Notifications from "@/core/components/notifications";
import useUser from "@/lib/app/hooks/useUser";
import useDirection from "@/lib/app/hooks/useDirection";
const TableRowActions = ({row}) => {
const TableRowActions = ({row, mutate, fetchUrl}) => {
const t = useTranslations();
const {
openConfirmDialog,
openRejectDialog,
handleOpenConfirmDialog,
handleOpenRejectDialog,
handleCloseConfirmDialog,
handleCloseRejectDialog,
rowId,
confirmData,
rejectData,
} = useContext(DataTableContext);
const {token} = useUser();
const {directionApp} = useDirection();
// Confirm
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const handleCloseConfirmDialog = () => {
setOpenConfirmDialog(false);
};
const confirmData = useCallback((url, rowID, values) => {
Notifications(directionApp, t, undefined)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Confirm
// Reject
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const handleCloseRejectDialog = () => {
setOpenRejectDialog(false);
};
const rejectData = useCallback((url, rowID, values) => {
Notifications(directionApp, t)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Reject
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
handleOpenConfirmDialog(row);
setOpenConfirmDialog(true)
}}
>
<ThumbUpAltIcon/>
</IconButton>
</Tooltip>
{openConfirmDialog && (
<ConfirmForm
rowId={rowId}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
)}
<ConfirmForm
rowId={row.getValue("id")}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
{openRejectDialog && (
<RejectForm
rowId={rowId}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
)}
<RejectForm
rowId={row.getValue("id")}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
</Box>
);
};

15
src/components/dashboard/machinary-office/index.jsx
View File

@@ -1,9 +1,7 @@
import DataTableStructure from "@/core/components/DatatableStructure";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import {useMemo} from "react";
// import TableToolbar from "./TableTollbar";
import {GET_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
import TableRowActions from "./TableRowActions";
@@ -11,6 +9,7 @@ import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "jalali-moment";
import {faIR} from "@mui/x-date-pickers/locales";
import DataTable from "@/core/components/DataTable";
function DashboardMachinaryOfficeComponent() {
const t = useTranslations();
@@ -23,7 +22,6 @@ function DashboardMachinaryOfficeComponent() {
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
@@ -94,7 +92,6 @@ function DashboardMachinaryOfficeComponent() {
enableColumnFilter: true,
datatype: "date",
filterFn: "lessThan",
minSize: 200,
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
@@ -170,7 +167,6 @@ function DashboardMachinaryOfficeComponent() {
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
@@ -201,7 +197,6 @@ function DashboardMachinaryOfficeComponent() {
header: t("MachinaryOffice.state_name"),
enableColumnFilter: false,
datatype: "numeric",
minSize: 300,
// filterFn: "equals",
// filterSelectOptions: [
// ],
@@ -216,22 +211,22 @@ function DashboardMachinaryOfficeComponent() {
return (
<DashboardLayouts>
<Box sx={{px: 3}}>
<DataTableStructure
<DataTable
tableUrl={GET_MACHINARY_OFFICE}
columns={columns}
selectableRow={false}
enableCustomToolbar={true}
// CustomToolbar={<TableToolbar />}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={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 shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
renderRowActions={({row}) => <TableRowActions row={row}/>}
TableRowAction={TableRowActions}
/>
</Box>
</DashboardLayouts>

98
src/components/dashboard/passenger-boss/TableRowActions.jsx
View File

@@ -1,58 +1,92 @@
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import {Box, IconButton, Tooltip} from "@mui/material";
import {useContext} from "react";
import {useCallback, useState} from "react";
import ConfirmForm from "./Form/ConfirmForm";
import RejectForm from "./Form/RejectForm";
import {useTranslations} from "next-intl";
import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
import Notifications from "@/core/components/notifications";
import useUser from "@/lib/app/hooks/useUser";
import useDirection from "@/lib/app/hooks/useDirection";
import axios from "axios";
const TableRowActions = ({row}) => {
const TableRowActions = ({row, mutate, fetchUrl}) => {
const t = useTranslations();
const {
openConfirmDialog,
openRejectDialog,
handleOpenConfirmDialog,
handleOpenRejectDialog,
handleCloseConfirmDialog,
handleCloseRejectDialog,
rowId,
confirmData,
rejectData,
} = useContext(DataTableContext);
const {token} = useUser();
const {directionApp} = useDirection();
// Confirm
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const handleCloseConfirmDialog = () => {
setOpenConfirmDialog(false);
};
const confirmData = useCallback((url, rowID, values) => {
Notifications(directionApp, t, undefined)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Confirm
// Reject
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const handleCloseRejectDialog = () => {
setOpenRejectDialog(false);
};
const rejectData = useCallback((url, rowID, values) => {
Notifications(directionApp, t)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Reject
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
handleOpenConfirmDialog(row);
setOpenConfirmDialog(true)
}}
>
<ThumbUpAltIcon/>
</IconButton>
</Tooltip>
{openConfirmDialog && (
<ConfirmForm
rowId={rowId}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
)}
<ConfirmForm
rowId={row.getValue("id")}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
{openRejectDialog && (
<RejectForm
rowId={rowId}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
)}
<RejectForm
rowId={row.getValue("id")}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
</Box>
);
};

16
src/components/dashboard/passenger-boss/index.jsx
View File

@@ -1,16 +1,15 @@
import DataTableStructure from "@/core/components/DatatableStructure";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import {useMemo} from "react";
// import TableToolbar from "./TableTollbar";
import {GET_PASSENGER_BOSS} from "@/core/data/apiRoutes";
import {GET_PASSENGER_BOSS, GET_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
import TableRowActions from "./TableRowActions";
import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "jalali-moment";
import {faIR} from "@mui/x-date-pickers/locales";
import DataTable from "@/core/components/DataTable";
function DashboardPassengerOfficeComponent() {
const t = useTranslations();
@@ -24,7 +23,6 @@ function DashboardPassengerOfficeComponent() {
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
@@ -95,7 +93,6 @@ function DashboardPassengerOfficeComponent() {
enableColumnFilter: true,
datatype: "date",
filterFn: "lessThan",
minSize: 200,
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
@@ -171,7 +168,6 @@ function DashboardPassengerOfficeComponent() {
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
@@ -202,7 +198,6 @@ function DashboardPassengerOfficeComponent() {
header: t("PassengerBoss.state_name"),
enableColumnFilter: false,
datatype: "numeric",
minSize: 300,
// filterFn: "equals",
// filterSelectOptions: [
// ],
@@ -217,7 +212,7 @@ function DashboardPassengerOfficeComponent() {
return (
<DashboardLayouts>
<Box sx={{px: 3}}>
<DataTableStructure
<DataTable
tableUrl={GET_PASSENGER_BOSS}
columns={columns}
selectableRow={false}
@@ -225,14 +220,15 @@ function DashboardPassengerOfficeComponent() {
// CustomToolbar={<TableToolbar />}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={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 shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
renderRowActions={({row}) => <TableRowActions row={row}/>}
TableRowAction={TableRowActions}
/>
</Box>
</DashboardLayouts>

98
src/components/dashboard/passenger-office/TableRowActions.jsx
View File

@@ -1,58 +1,92 @@
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import {Box, IconButton, Tooltip} from "@mui/material";
import {useContext} from "react";
import {useCallback, useState} from "react";
import ConfirmForm from "./Form/ConfirmForm";
import RejectForm from "./Form/RejectForm";
import {useTranslations} from "next-intl";
import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
import axios from "axios";
import Notifications from "@/core/components/notifications";
import useUser from "@/lib/app/hooks/useUser";
import useDirection from "@/lib/app/hooks/useDirection";
const TableRowActions = ({row}) => {
const TableRowActions = ({row, mutate, fetchUrl}) => {
const t = useTranslations();
const {
openConfirmDialog,
openRejectDialog,
handleOpenConfirmDialog,
handleOpenRejectDialog,
handleCloseConfirmDialog,
handleCloseRejectDialog,
rowId,
confirmData,
rejectData,
} = useContext(DataTableContext);
const {token} = useUser();
const {directionApp} = useDirection();
// Confirm
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const handleCloseConfirmDialog = () => {
setOpenConfirmDialog(false);
};
const confirmData = useCallback((url, rowID, values) => {
Notifications(directionApp, t, undefined)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Confirm
// Reject
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const handleCloseRejectDialog = () => {
setOpenRejectDialog(false);
};
const rejectData = useCallback((url, rowID, values) => {
Notifications(directionApp, t)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Reject
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
handleOpenConfirmDialog(row);
setOpenConfirmDialog(true)
}}
>
<ThumbUpAltIcon/>
</IconButton>
</Tooltip>
{openConfirmDialog && (
<ConfirmForm
rowId={rowId}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
)}
<ConfirmForm
rowId={row.getValue("id")}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
{openRejectDialog && (
<RejectForm
rowId={rowId}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
)}
<RejectForm
rowId={row.getValue("id")}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
</Box>
);
};

16
src/components/dashboard/passenger-office/index.jsx
View File

@@ -1,16 +1,15 @@
import DataTableStructure from "@/core/components/DatatableStructure";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import {useMemo} from "react";
import {faIR} from "@mui/x-date-pickers/locales";
// import TableToolbar from "./TableTollbar";
import {GET_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
import TableRowActions from "./TableRowActions";
import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "jalali-moment";
import DataTable from "@/core/components/DataTable";
function DashboardPassengerOfficeComponent() {
const t = useTranslations();
@@ -23,7 +22,6 @@ function DashboardPassengerOfficeComponent() {
header: t("PassengerOffice.id"),
enableColumnFilter: true,
datatype: "numeric",
maxSize: 100,
filterFn: "equals",
columnFilterModeOptions: [
"equals",
@@ -95,7 +93,6 @@ function DashboardPassengerOfficeComponent() {
enableColumnFilter: true,
datatype: "date",
filterFn: "lessThan",
minSize: 200,
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
@@ -127,7 +124,7 @@ function DashboardPassengerOfficeComponent() {
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
sx: {minWidth: "120px"},
variant: "standard",
actionBar: {actions: ["accept", "today"]},
actionbar: {actions: ["accept", "today"]},
},
}}
value={
@@ -171,7 +168,6 @@ function DashboardPassengerOfficeComponent() {
header: t("PassengerOffice.navgan_id"),
enableColumnFilter: true,
datatype: "numeric",
maxSize: 100,
filterFn: "equals",
columnFilterModeOptions: [
"equals",
@@ -203,7 +199,6 @@ function DashboardPassengerOfficeComponent() {
header: t("PassengerOffice.state_name"),
enableColumnFilter: false,
datatype: "numeric",
minSize: 300,
// filterFn: "equals",
// filterSelectOptions: [
// ],
@@ -218,7 +213,7 @@ function DashboardPassengerOfficeComponent() {
return (
<DashboardLayouts>
<Box sx={{px: 3}}>
<DataTableStructure
<DataTable
tableUrl={GET_PASSENGER_OFFICE}
columns={columns}
selectableRow={false}
@@ -226,14 +221,15 @@ function DashboardPassengerOfficeComponent() {
// CustomToolbar={<TableToolbar />}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={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 shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
renderRowActions={({row}) => <TableRowActions row={row}/>}
TableRowAction={TableRowActions}
/>
</Box>
</DashboardLayouts>

98
src/components/dashboard/province-manager/TableRowActions.jsx
View File

@@ -1,58 +1,92 @@
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import {Box, IconButton, Tooltip} from "@mui/material";
import {useContext} from "react";
import {useCallback, useState} from "react";
import ConfirmForm from "./Form/ConfirmForm";
import RejectForm from "./Form/RejectForm";
import {useTranslations} from "next-intl";
import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
import Notifications from "@/core/components/notifications";
import useUser from "@/lib/app/hooks/useUser";
import useDirection from "@/lib/app/hooks/useDirection";
import axios from "axios";
const TableRowActions = ({row}) => {
const TableRowActions = ({row, mutate, fetchUrl}) => {
const t = useTranslations();
const {
openConfirmDialog,
openRejectDialog,
handleOpenConfirmDialog,
handleOpenRejectDialog,
handleCloseConfirmDialog,
handleCloseRejectDialog,
rowId,
confirmData,
rejectData,
} = useContext(DataTableContext);
const {token} = useUser();
const {directionApp} = useDirection();
// Confirm
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const handleCloseConfirmDialog = () => {
setOpenConfirmDialog(false);
};
const confirmData = useCallback((url, rowID, values) => {
Notifications(directionApp, t, undefined)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Confirm
// Reject
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const handleCloseRejectDialog = () => {
setOpenRejectDialog(false);
};
const rejectData = useCallback((url, rowID, values) => {
Notifications(directionApp, t)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Reject
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
handleOpenConfirmDialog(row);
setOpenConfirmDialog(true)
}}
>
<ThumbUpAltIcon/>
</IconButton>
</Tooltip>
{openConfirmDialog && (
<ConfirmForm
rowId={rowId}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
)}
<ConfirmForm
rowId={row.getValue("id")}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
{openRejectDialog && (
<RejectForm
rowId={rowId}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
)}
<RejectForm
rowId={row.getValue("id")}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
</Box>
);
};

15
src/components/dashboard/province-manager/index.jsx
View File

@@ -1,9 +1,7 @@
import DataTableStructure from "@/core/components/DatatableStructure";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import {useMemo} from "react";
// import TableToolbar from "./TableTollbar";
import {GET_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
import TableRowActions from "./TableRowActions";
@@ -11,6 +9,7 @@ import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "jalali-moment";
import {faIR} from "@mui/x-date-pickers/locales";
import DataTable from "@/core/components/DataTable";
function DashboardProvinceManagerComponent() {
const t = useTranslations();
@@ -24,7 +23,6 @@ function DashboardProvinceManagerComponent() {
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
@@ -95,7 +93,6 @@ function DashboardProvinceManagerComponent() {
enableColumnFilter: true,
datatype: "date",
filterFn: "lessThan",
minSize: 200,
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
@@ -171,7 +168,6 @@ function DashboardProvinceManagerComponent() {
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
@@ -202,7 +198,6 @@ function DashboardProvinceManagerComponent() {
header: t("ProvinceManager.state_name"),
enableColumnFilter: false,
datatype: "numeric",
minSize: 300,
// filterFn: "equals",
// filterSelectOptions: [
// ],
@@ -217,22 +212,22 @@ function DashboardProvinceManagerComponent() {
return (
<DashboardLayouts>
<Box sx={{px: 3}}>
<DataTableStructure
<DataTable
tableUrl={GET_PROVINCE_MANAGER}
columns={columns}
selectableRow={false}
enableCustomToolbar={true}
// CustomToolbar={<TableToolbar />}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={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 shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
renderRowActions={({row}) => <TableRowActions row={row}/>}
TableRowAction={TableRowActions}
/>
</Box>
</DashboardLayouts>

97
src/components/dashboard/transportation-assistance/TableRowActions.jsx
View File

@@ -1,59 +1,92 @@
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import {Box, IconButton, Tooltip} from "@mui/material";
import {useContext} from "react";
import {useCallback, useState} from "react";
import ConfirmForm from "./Form/ConfirmForm";
import RejectForm from "./Form/RejectForm";
import {useTranslations} from "next-intl";
import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
import Notifications from "@/core/components/notifications";
import useUser from "@/lib/app/hooks/useUser";
import useDirection from "@/lib/app/hooks/useDirection";
import axios from "axios";
const TableRowActions = ({row}) => {
const TableRowActions = ({row, mutate, fetchUrl}) => {
const t = useTranslations();
const {token} = useUser();
const {directionApp} = useDirection();
// Confirm
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const handleCloseConfirmDialog = () => {
setOpenConfirmDialog(false);
};
const confirmData = useCallback((url, rowID, values) => {
Notifications(directionApp, t, undefined)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Confirm
// Reject
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const handleCloseRejectDialog = () => {
setOpenRejectDialog(false);
};
const rejectData = useCallback((url, rowID, values) => {
Notifications(directionApp, t)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Reject
const {
openConfirmDialog,
openRejectDialog,
handleOpenConfirmDialog,
handleOpenRejectDialog,
handleCloseConfirmDialog,
handleCloseRejectDialog,
rowId,
confirmData,
rejectData,
} = useContext(DataTableContext);
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
handleOpenConfirmDialog(row);
setOpenConfirmDialog(true)
}}
>
<ThumbUpAltIcon/>
</IconButton>
</Tooltip>
{openConfirmDialog && (
<ConfirmForm
rowId={rowId}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
)}
<ConfirmForm
rowId={row.getValue("id")}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
{openRejectDialog && (
<RejectForm
rowId={rowId}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
)}
<RejectForm
rowId={row.getValue("id")}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
</Box>
);
};

15
src/components/dashboard/transportation-assistance/index.jsx
View File

@@ -1,9 +1,7 @@
import DataTableStructure from "@/core/components/DatatableStructure";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import {useMemo} from "react";
// import TableToolbar from "./TableTollbar";
import {GET_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
import TableRowActions from "./TableRowActions";
@@ -11,6 +9,7 @@ import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
import {faIR} from "@mui/x-date-pickers/locales";
import moment from "jalali-moment";
import DataTable from "@/core/components/DataTable";
function DashboardTransportationAssistanceComponent() {
const t = useTranslations();
@@ -23,7 +22,6 @@ function DashboardTransportationAssistanceComponent() {
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
@@ -94,7 +92,6 @@ function DashboardTransportationAssistanceComponent() {
header: t("TransportationAssistance.created_at"),
enableColumnFilter: true,
datatype: "date",
minSize: 200,
filterFn: "lessThan",
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({renderedCellValue}) => (
@@ -171,7 +168,6 @@ function DashboardTransportationAssistanceComponent() {
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
@@ -202,7 +198,6 @@ function DashboardTransportationAssistanceComponent() {
header: t("TransportationAssistance.state_name"),
enableColumnFilter: false,
datatype: "numeric",
minSize: 300,
// filterFn: "equals",
// filterSelectOptions: [
// ],
@@ -217,22 +212,22 @@ function DashboardTransportationAssistanceComponent() {
return (
<DashboardLayouts>
<Box sx={{px: 3}}>
<DataTableStructure
<DataTable
tableUrl={GET_TRANSPORTATION_ASSISTANCE}
columns={columns}
selectableRow={false}
enableCustomToolbar={true}
// CustomToolbar={<TableToolbar />}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={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 shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
renderRowActions={({row}) => <TableRowActions row={row}/>}
TableRowAction={TableRowActions}
/>
</Box>
</DashboardLayouts>

171
src/components/login-expert/index.jsx
View File

@@ -27,125 +27,100 @@ const LoginComponent = () => {
//formik properties
const handleSubmit = async (values, props) => {
Notifications(directionApp, t);
await axios
.post(GET_USER_TOKEN, {
username: values.username,
password: values.password,
username: values.username, password: values.password,
})
.then(function (response) {
setToken(response.data.token);
})
.catch(function (error) {
Notifications(directionApp, error.response, t);
Notifications(directionApp, t, error.response);
props.setSubmitting(false);
});
};
const initialValues = {
username: "",
password: "",
username: "", password: "",
};
const validationSchema = Yup.object().shape({
username: Yup.string().required(t("LoginPage.error_message_required")),
password: Yup.string().required(t("LoginPage.error_message_required")),
});
return (
<FullPageLayout sx={{p: 1}}>
<CenterLayout>
<Container maxWidth="sm">
<Paper elevation={0}>
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{(props) => (
<Stack spacing={2} sx={{p: 2}}>
return (<FullPageLayout sx={{p: 1}}>
<CenterLayout>
<Container maxWidth="sm">
<Paper elevation={0}>
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{(props) => (<Stack spacing={2} sx={{p: 2}}>
<Box
sx={{position: "relative", width: "100%", height: 200}}
>
<Image fill src="/images/login.svg" alt={t("app_name")}/>
</Box>
<Typography margin={2} variant="h4" textAlign="center">
{t("login_expert")}
</Typography>
<StyledForm sx={{width: "100%"}}>
<Stack spacing={3} sx={{p: 2}}>
<Field
as={TextField}
name="username"
variant="outlined"
label={t("LoginPage.text_field_user_name")}
placeholder={t("LoginPage.text_field_enter_your_username")}
type={"text"}
error={props.touched.username && props.errors.username ? true : false}
fullWidth
helperText={props.touched.username ? props.errors.username : null}
/>
<PasswordField
name="password"
label={t("LoginPage.text_field_password")}
error={props.touched.password && props.errors.password ? true : false}
helperText={props.touched.password ? props.errors.password : null}
placeholder={t("LoginPage.text_field_enter_your_password")}
/>
<Box
sx={{position: "relative", width: "100%", height: 200}}
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<Image fill src="/images/login.svg" alt={t("app_name")}/>
<Button
type="submit"
variant="contained"
fullWidth
size="medium"
endIcon={<LoginIcon/>}
disabled={props.isSubmitting ? true : false}
>
{t("LoginPage.button_submit")}
</Button>
</Box>
<Typography margin={2} variant="h4" textAlign="center">
{t("login_expert")}
</Typography>
<StyledForm sx={{width: "100%"}}>
<Stack spacing={3} sx={{p: 2}}>
<Field
as={TextField}
name="username"
variant="outlined"
label={t("LoginPage.text_field_user_name")}
placeholder={t(
"LoginPage.text_field_enter_your_username"
)}
type={"text"}
error={
props.touched.username && props.errors.username
? true
: false
}
fullWidth
helperText={
props.touched.username ? props.errors.username : null
}
/>
<PasswordField
name="password"
label={t("LoginPage.text_field_password")}
error={
props.touched.password && props.errors.password
? true
: false
}
helperText={
props.touched.password ? props.errors.password : null
}
placeholder={t(
"LoginPage.text_field_enter_your_password"
)}
/>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<Button
type="submit"
variant="contained"
fullWidth
size="medium"
endIcon={<LoginIcon/>}
disabled={props.isSubmitting ? true : false}
>
{t("LoginPage.button_submit")}
</Button>
</Box>
</Stack>
</StyledForm>
</Stack>
)}
</Formik>
</Paper>
</Container>
</CenterLayout>
<Stack direction="row" alignItems="center" justifyContent="center">
<LinkRouting
sx={{margin: 2}}
href={
backUrlDecodedPath ? decodeURIComponent(backUrlDecodedPath) : "/"
}
>
{t("LoginPage.link_routing_back_to")}{" "}
{backUrlDecodedPath
? t("LoginPage.link_routing_previuos_page")
: t("LoginPage.link_routing_main_page")}
</LinkRouting>
</Stack>
</FullPageLayout>
);
</StyledForm>
</Stack>)}
</Formik>
</Paper>
</Container>
</CenterLayout>
<Stack direction="row" alignItems="center" justifyContent="center">
<LinkRouting
sx={{margin: 2}}
href={backUrlDecodedPath ? decodeURIComponent(backUrlDecodedPath) : "/"}
>
{t("LoginPage.link_routing_back_to")}{" "}
{backUrlDecodedPath ? t("LoginPage.link_routing_previuos_page") : t("LoginPage.link_routing_main_page")}
</LinkRouting>
</Stack>
</FullPageLayout>);
};
export default LoginComponent;

66
src/core/components/Datatable.jsx → src/core/components/DataTable.jsx
View File

@@ -1,23 +1,21 @@
import {ReloadDataTableContext} from "@/lib/app/contexts/ReloadDatatableContext";
import useLanguage from "@/lib/app/hooks/useLanguage";
import {Typography} from "@mui/material";
import axios from "axios";
import MaterialReactTable from "material-react-table";
import moment from "moment-jalaali";
import {useTranslations} from "next-intl";
import {useContext, useEffect, useMemo, useState} from "react";
import useLanguage from "@/lib/app/hooks/useLanguage";
import {useEffect, useMemo, useState} from "react";
import moment from "moment-jalaali";
import useSWR from "swr";
import {Typography} from "@mui/material";
import MaterialReactTable from "material-react-table";
import axios from "axios";
import useUser from "@/lib/app/hooks/useUser";
import {css} from "@emotion/react";
const DataTable = (props) => {
const {reloadDataTable, setReloadDataTable} = useContext(
ReloadDataTableContext
);
function DataTable(props) {
const {token} = useUser();
const fetcher = (...args) => {
return axios
.get(args, {
headers: {
Authorization: `Bearer ${props.token}`,
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
@@ -28,6 +26,9 @@ const DataTable = (props) => {
const t = useTranslations();
const {languageApp, languageList} = useLanguage();
const [columnFilters, setColumnFilters] = useState([]);
const [sorting, setSorting] = useState([]);
const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10});
const [rowCount, setRowCount] = useState(0);
const [columnFilterFns, setColumnFilterFns] = useState(() => {
let output = {};
const list = props.columns.map((item) =>
@@ -41,9 +42,7 @@ const DataTable = (props) => {
}
return output;
});
const [sorting, setSorting] = useState([]);
const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10});
const [rowCount, setRowCount] = useState(0);
const [updateTime, setupdateTime] = useState(
moment().format("HH:mm | jYYYY/jM/jD")
);
@@ -55,7 +54,7 @@ const DataTable = (props) => {
);
const fetchUrl = useMemo(() => {
const url = new URL(props.tableUrl /* send your api */);
const url = new URL(props.tableUrl);
url.searchParams.set(
"start",
`${pagination.pageIndex * pagination.pageSize}`
@@ -85,18 +84,11 @@ const DataTable = (props) => {
sorting,
props.columns,
]);
const {data, isLoading, isValidating, mutate} = useSWR(fetchUrl, fetcher, {
const {data, isValidating, mutate} = useSWR(fetchUrl, fetcher, {
revalidateOnFocus: false,
});
useEffect(() => {
if (reloadDataTable) {
mutate(fetchUrl).then(() => {
setReloadDataTable(false); // Set reloadDataTable to false after mutation is complete
});
}
}, [reloadDataTable, setReloadDataTable]);
useEffect(() => {
setupdateTime(moment().format("HH:mm | jYYYY/jM/jD"));
}, [isValidating, languageApp]);
@@ -104,7 +96,6 @@ const DataTable = (props) => {
return (
<MaterialReactTable
localization={tableLocalization}
columns={props.columns} /* columns you send */
data={data ?? []}
manualFiltering
manualPagination
@@ -112,16 +103,28 @@ const DataTable = (props) => {
enableRowSelection={props.selectableRow} /* send condition */
enablePinning={props.enablePinning} /* send condition */
enableColumnFilters={props.enableColumnFilters} /* send condition */
enableDensityToggle={props.enableDensityToggle} /* send condition */
enableDensityToggle={props.enableDensityToggle}
enableHiding={props.enableHiding} /* send condition */
enableFullScreenToggle={props.enableFullScreenToggle} /* send condition */
enableColumnResizing={props.enableColumnResizing}
muiTableHeadCellProps={{
sx: {
color: "primary.main",
borderLeft: "1px solid #e1e1e1",
"&:first-of-type": {
borderLeft: "unset"
},
"& .Mui-TableHeadCell-Content": {justifyContent: "space-between"},
},
}}
muiTableBodyCellProps={{
sx: {
borderLeft: "1px solid #e1e1e1",
"&:first-of-type": {
borderLeft: "unset"
}
},
}}
enableColumnFilterModes
muiTablePaperProps={{elevation: 0}}
rowCount={rowCount}
@@ -158,7 +161,7 @@ const DataTable = (props) => {
</>
)}
state={{
isLoading,
isLoading: isValidating,
columnFilters,
columnFilterFns,
pagination,
@@ -166,9 +169,10 @@ const DataTable = (props) => {
}}
positionActionsColumn={"last"}
enableRowActions={props.enableRowActions}
renderRowActions={({row}) => <props.TableRowAction fetchUrl={fetchUrl} mutate={mutate} row={row}/>}
{...props}
/>
);
};
}
export default DataTable;
export default DataTable;

75
src/core/components/DataTableNew.jsx
View File

@@ -1,75 +0,0 @@
import {useTranslations} from "next-intl";
import useLanguage from "@/lib/app/hooks/useLanguage";
import {useMemo, useState} from "react";
import moment from "moment-jalaali";
import useSWR from "swr";
function DataTableNew(props) {
const t = useTranslations();
const {languageApp, languageList} = useLanguage();
const [columnFilters, setColumnFilters] = useState([]);
const [sorting, setSorting] = useState([]);
const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10});
const [rowCount, setRowCount] = useState(0);
const [columnFilterFns, setColumnFilterFns] = useState(() => {
let output = {};
const list = props.columns.map((item) =>
item.enableColumnFilter ? {[item.id]: item.filterFn} : {[item.id]: ""}
);
for (var key in list) {
var nestedObj = list[key];
for (var nestedKey in nestedObj) {
output[nestedKey] = nestedObj[nestedKey];
}
}
return output;
});
const [updateTime, setupdateTime] = useState(
moment().format("HH:mm | jYYYY/jM/jD")
);
const tableLocalization = useMemo(
() =>
languageList.find((item) => item.key == languageApp).tableLocalization,
[languageApp, languageList]
);
const fetchUrl = useMemo(() => {
const url = new URL(props.tableUrl /* send your api */);
url.searchParams.set(
"start",
`${pagination.pageIndex * pagination.pageSize}`
);
const filters = columnFilters.map((filter) => {
let datatype;
for (const i in props.columns) {
if (props.columns[i].id == filter.id) {
datatype = props.columns[i].datatype;
}
}
return {
...filter,
fn: columnFilterFns[filter.id],
datatype: datatype,
};
});
url.searchParams.set("size", pagination.pageSize);
url.searchParams.set("filters", JSON.stringify(filters ?? []));
url.searchParams.set("sorting", JSON.stringify(sorting ?? []));
return url;
}, [
props.tableUrl,
columnFilters,
columnFilterFns,
pagination,
sorting,
props.columns,
]);
const {data, isLoading, isValidating, mutate} = useSWR(fetchUrl, fetcher, {
revalidateOnFocus: false,
});
return (
<p>datatable</p>
);
}
export default DataTableNew;

15
src/core/components/DatatableStructure.jsx
View File

@@ -1,15 +0,0 @@
import {DataTableProvider} from "@/lib/app/contexts/DatatableContext";
import DataTable from "./Datatable";
import {ReloadDataTableProvider} from "@/lib/app/contexts/ReloadDatatableContext";
function DataTableStructure(props) {
return (
<ReloadDataTableProvider>
<DataTableProvider>
<DataTable {...props} token={localStorage.getItem("_token")}/>
</DataTableProvider>
</ReloadDataTableProvider>
);
}
export default DataTableStructure;

2
src/core/components/notifications/ErrorNotification.jsx
View File

@@ -2,7 +2,7 @@ import DangerousIcon from "@mui/icons-material/Dangerous";
import {Box, Typography} from "@mui/material";
import {toast} from "react-toastify";
const ErrorNotification = (directionApp, status, t, message) => {
const ErrorNotification = (directionApp, t, status, message) => {
toast(
() => (
<>

2
src/core/components/notifications/SuccessNotification.jsx
View File

@@ -2,7 +2,7 @@ import BeenhereIcon from "@mui/icons-material/Beenhere";
import {Box, Typography} from "@mui/material";
import {toast} from "react-toastify";
const SuccessNotification = (directionApp, status, t) => {
const SuccessNotification = (directionApp, t, status) => {
toast(
() => (
<>

2
src/core/components/notifications/WarningNotification.jsx
View File

@@ -2,7 +2,7 @@ import ReportIcon from "@mui/icons-material/Report";
import {Box, Typography} from "@mui/material";
import {toast} from "react-toastify";
const WarningNotification = (directionApp, status, t) => {
const WarningNotification = (directionApp, t, status) => {
toast(
() => (
<>

40
src/core/components/notifications/index.jsx
View File

@@ -1,39 +1,55 @@
import {toast} from "react-toastify";
import ErrorNotification from "./ErrorNotification";
import WarningNotification from "./WarningNotification";
import SuccessNotification from "./SuccessNotification";
const Notifications = async (directionApp, response, t) => {
const {status, data} = response;
const Notifications = async (directionApp, t, response) => {
const {status, data} = response != undefined ? response : ""
toast.dismiss();
switch (status) {
case 200:
SuccessNotification(directionApp, status, t);
SuccessNotification(directionApp, t, status);
break;
case 400:
ErrorNotification(directionApp, status, t);
ErrorNotification(directionApp, t, status);
break;
case 401:
ErrorNotification(directionApp, status, t);
ErrorNotification(directionApp, t, status);
break;
case 403:
ErrorNotification(directionApp, status, t);
ErrorNotification(directionApp, t, status);
break;
case 422:
ErrorNotification(directionApp, status, t, data.message);
ErrorNotification(directionApp, t, status, data.message);
break;
case 500:
WarningNotification(directionApp, status, t);
WarningNotification(directionApp, t, status);
break;
case 503:
WarningNotification(directionApp, status, t);
WarningNotification(directionApp, t, status);
break;
case 504:
WarningNotification(directionApp, status, t);
WarningNotification(directionApp, t, status);
break;
default:
// Handle other cases if needed
toast(t("notifications.pending"), {
position: directionApp === "ltr" ? "top-left" : "top-right",
autoClose: false,
closeOnClick: false,
draggable: false,
});
break;
}
};
export default Notifications;
/*
usage document
** for pending use ( Notifications(directionApp, t, undefined) ) this before your request.
** for success use ( Notifications(directionApp, t, response) ) this inside .then() of your request.
** for Error and Warning use ( Notifications(directionApp, t, error.response) ) this inside .catche() of your request.
end usage document
*/

5
src/layouts/MuiLayout.jsx
View File

@@ -30,8 +30,7 @@ const MuiLayout = ({children, isBot}) => {
height: "8px",
},
"*::-webkit-scrollbar-thumb": {
background: "#e1e1e1",
borderRadius: "3px",
background: `${theme.palette.primary.light}80`,
},
"*:not(.MuiTableContainer-root)": {
scrollbarWidth: "thin",
@@ -44,7 +43,7 @@ const MuiLayout = ({children, isBot}) => {
},
"*::-moz-scrollbar-thumb": {
backgroundColor: "#e1e1e1",
backgroundColor: `${theme.palette.primary.light}80`,
},
[`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
"*::-webkit-scrollbar": {

14
src/lib/app/contexts/DatatableContext.jsx
View File

@@ -1,14 +0,0 @@
import {createContext} from "react";
import useDataTable from "../hooks/useDatatable";
export const DataTableContext = createContext();
export const DataTableProvider = (props) => {
const contextValue = useDataTable();
return (
<DataTableContext.Provider value={contextValue}>
{props.children}
</DataTableContext.Provider>
);
};

15
src/lib/app/contexts/ReloadDatatableContext.jsx
View File

@@ -1,15 +0,0 @@
import {createContext, useState} from "react";
export const ReloadDataTableContext = createContext();
export const ReloadDataTableProvider = ({children}) => {
const [reloadDataTable, setReloadDataTable] = useState(false);
return (
<ReloadDataTableContext.Provider
value={{reloadDataTable, setReloadDataTable}}
>
{children}
</ReloadDataTableContext.Provider>
);
};

113
src/lib/app/hooks/useDatatable.jsx
View File

@@ -1,113 +0,0 @@
import axios from "axios";
import {useCallback, useContext, useReducer, useState} from "react";
import {ReloadDataTableContext} from "../contexts/ReloadDatatableContext";
import useUser from "./useUser";
import Notifications from "@/core/components/notifications";
import useDirection from "./useDirection";
import {useTranslations} from "next-intl";
const initialValues = {
url: "",
rowID: "",
values: {},
};
const reducer = (state, action) => {
switch (action.type) {
case "CONFIRM_DATA":
return {
...state,
url: action.url,
rowID: action.rowID,
};
case "REJECT_DATA":
return {
...state,
url: action.url,
rowID: action.rowID,
values: {},
};
default:
return state;
}
};
const useDataTable = () => {
const {setReloadDataTable} = useContext(ReloadDataTableContext);
const [state, dispatch] = useReducer(reducer, initialValues);
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const [rowId, setRowId] = useState(null);
const {directionApp} = useDirection();
const t = useTranslations();
const {token} = useUser();
const confirmData = useCallback(async (url, rowID, values) => {
dispatch({type: "CONFIRM_DATA", url: url, rowID: rowID, values: values});
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
setReloadDataTable(true);
Notifications(directionApp, response, t);
})
.catch((error) => {
Notifications(directionApp, error.response, t);
});
}, []);
const rejectData = useCallback(async (url, rowID, values) => {
dispatch({type: "REJECT_DATA", url: url, rowID: rowID, values: values});
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
setReloadDataTable(true);
Notifications(directionApp, response, t);
})
.catch((error) => {
console.log(error);
Notifications(directionApp, error.response, t);
});
}, []);
//Confirm Data
const handleOpenConfirmDialog = (row) => {
setRowId(row.getValue("id"));
setOpenConfirmDialog(true);
};
const handleCloseConfirmDialog = () => {
setOpenConfirmDialog(false);
};
//End Confirm Data
// Reject Data
const handleOpenRejectDialog = (row) => {
setRowId(row.getValue("id"));
setOpenRejectDialog(true);
};
const handleCloseRejectDialog = () => {
setOpenRejectDialog(false);
};
// End Reject Data
const contextValue = {
handleOpenConfirmDialog,
handleCloseConfirmDialog,
handleOpenRejectDialog,
handleCloseRejectDialog,
rowId,
openConfirmDialog,
openRejectDialog,
rejectData,
confirmData,
};
return contextValue;
};
export default useDataTable;