Merge branch 'develop' into 'feature/darkLightTheme'
# Conflicts: # src/components/login-expert/index.jsx # src/layouts/MuiLayout.jsx
This commit is contained in:
@@ -7,6 +7,6 @@ NEXT_PUBLIC_SECONDARY_MAIN = "#FF4E00"
|
||||
|
||||
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"
|
||||
@@ -111,7 +111,7 @@
|
||||
"notifications": {
|
||||
"code": "کد",
|
||||
"error": "خطا",
|
||||
"warning": "خطر",
|
||||
"warning": "خطا",
|
||||
"success": "موفق",
|
||||
"error_static_text": "عملیات شما با خطا مواجه شد",
|
||||
"warning_static_text": "خطا سرور",
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
@@ -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,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,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,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(
|
||||
() => (
|
||||
<>
|
||||
|
||||
@@ -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
|
||||
*/
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user