238 lines
9.8 KiB
JavaScript
238 lines
9.8 KiB
JavaScript
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
|
import {Box, IconButton, Typography} from "@mui/material";
|
|
import ClearIcon from "@mui/icons-material/Clear";
|
|
import {useMemo} from "react";
|
|
import {GET_PROVINCE_MANAGER} 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 DashboardProvinceManagerComponent() {
|
|
const t = useTranslations();
|
|
|
|
const columns = useMemo(
|
|
() => [
|
|
{
|
|
accessorFn: (row) => row.id,
|
|
id: "id",
|
|
header: t("ProvinceManager.id"),
|
|
enableColumnFilter: true,
|
|
datatype: "numeric",
|
|
filterFn: "equals",
|
|
columnFilterModeOptions: [
|
|
"equals",
|
|
"notEquals",
|
|
"contains",
|
|
"lessThan",
|
|
"greaterThan",
|
|
"between",
|
|
],
|
|
Cell: ({renderedCellValue}) => (
|
|
<Typography variant="body2">{renderedCellValue}</Typography>
|
|
),
|
|
},
|
|
{
|
|
accessorFn: (row) => row.name,
|
|
id: "name",
|
|
header: t("ProvinceManager.name"),
|
|
enableColumnFilter: true,
|
|
datatype: "text",
|
|
filterFn: "contains",
|
|
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
|
Cell: ({renderedCellValue}) => (
|
|
<Typography variant="body2">{renderedCellValue}</Typography>
|
|
),
|
|
},
|
|
{
|
|
accessorFn: (row) => row.national_id,
|
|
id: "national_id",
|
|
header: t("ProvinceManager.national_id"),
|
|
enableColumnFilter: true,
|
|
datatype: "numeric",
|
|
filterFn: "equals",
|
|
columnFilterModeOptions: [
|
|
"equals",
|
|
"notEquals",
|
|
"contains",
|
|
"lessThan",
|
|
"greaterThan",
|
|
"between",
|
|
],
|
|
Cell: ({renderedCellValue}) => (
|
|
<Typography variant="body2">{renderedCellValue}</Typography>
|
|
),
|
|
},
|
|
{
|
|
accessorFn: (row) => row.phone_number,
|
|
id: "phone_number",
|
|
header: t("ProvinceManager.phone_number"),
|
|
enableColumnFilter: true,
|
|
datatype: "numeric",
|
|
filterFn: "equals",
|
|
columnFilterModeOptions: [
|
|
"equals",
|
|
"notEquals",
|
|
"contains",
|
|
"lessThan",
|
|
"greaterThan",
|
|
"between",
|
|
],
|
|
Cell: ({renderedCellValue}) => (
|
|
<Typography variant="body2">{renderedCellValue}</Typography>
|
|
),
|
|
},
|
|
{
|
|
accessorFn: (row) =>
|
|
moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
|
|
id: "created_at",
|
|
header: t("ProvinceManager.created_at"),
|
|
enableColumnFilter: true,
|
|
datatype: "date",
|
|
filterFn: "lessThan",
|
|
columnFilterModeOptions: ["lessThan", "greaterThan"],
|
|
Cell: ({renderedCellValue}) => {
|
|
return <Typography variant="body2">{renderedCellValue}</Typography>;
|
|
},
|
|
Header: ({column}) => <em>{column.columnDef.header}</em>,
|
|
Filter: ({column}) => {
|
|
const filterFnValue = column.columnDef._filterFn;
|
|
return (
|
|
<Box sx={{display: "flex", alignItems: "start"}}>
|
|
<LocalizationProvider
|
|
dateAdapter={AdapterDateFnsJalali}
|
|
localeText={
|
|
faIR.components.MuiLocalizationProvider.defaultProps
|
|
.localeText
|
|
}
|
|
>
|
|
<MobileDateTimePicker
|
|
ampm={false}
|
|
onChange={(newValue) => {
|
|
const date = new Date(newValue);
|
|
const formattedDate = moment(date)
|
|
.locale("en")
|
|
.format("YYYY-MM-DD HH:mm");
|
|
column.setFilterValue(formattedDate);
|
|
}}
|
|
slotProps={{
|
|
textField: {
|
|
placeholder: "تاریخ خود را وارد کنید",
|
|
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
|
|
sx: {minWidth: "120px"},
|
|
variant: "standard",
|
|
},
|
|
}}
|
|
value={
|
|
column.getFilterValue()
|
|
? new Date(column.getFilterValue())
|
|
: null
|
|
}
|
|
/>
|
|
</LocalizationProvider>
|
|
<IconButton
|
|
size="small"
|
|
onClick={() => {
|
|
column.setFilterValue(null);
|
|
}}
|
|
sx={{
|
|
color: column.getFilterValue()
|
|
? "rgba(0, 0, 0, 0.54)"
|
|
: "#bfbfbf",
|
|
}}
|
|
>
|
|
<ClearIcon/>
|
|
</IconButton>
|
|
</Box>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorFn: (row) =>
|
|
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
|
|
id: "updated_at",
|
|
header: t("ProvinceManager.updated_at"),
|
|
enableColumnFilter: false,
|
|
datatype: "numeric",
|
|
Cell: ({renderedCellValue}) => (
|
|
<Typography variant="body2">{renderedCellValue}</Typography>
|
|
),
|
|
},
|
|
{
|
|
accessorFn: (row) => row.navgan_id,
|
|
id: "navgan_id",
|
|
header: t("ProvinceManager.navgan_id"),
|
|
enableColumnFilter: true,
|
|
datatype: "numeric",
|
|
filterFn: "equals",
|
|
columnFilterModeOptions: [
|
|
"equals",
|
|
"notEquals",
|
|
"contains",
|
|
"lessThan",
|
|
"greaterThan",
|
|
"between",
|
|
],
|
|
Cell: ({renderedCellValue}) => (
|
|
<Typography variant="body2">{renderedCellValue}</Typography>
|
|
),
|
|
},
|
|
{
|
|
accessorFn: (row) => row.vehicle_type,
|
|
id: "vehicle_type",
|
|
header: t("ProvinceManager.vehicle_type"),
|
|
enableColumnFilter: true,
|
|
datatype: "text",
|
|
filterFn: "contains",
|
|
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
|
Cell: ({renderedCellValue}) => (
|
|
<Typography variant="body2">{renderedCellValue}</Typography>
|
|
),
|
|
},
|
|
{
|
|
accessorFn: (row) => row.state_name,
|
|
id: "state_id",
|
|
header: t("ProvinceManager.state_name"),
|
|
enableColumnFilter: false,
|
|
datatype: "numeric",
|
|
// filterFn: "equals",
|
|
// filterSelectOptions: [
|
|
// ],
|
|
// filterVariant: "select",
|
|
Cell: ({renderedCellValue}) => (
|
|
<Typography variant="body2">{renderedCellValue}</Typography>
|
|
),
|
|
},
|
|
],
|
|
[]
|
|
);
|
|
return (
|
|
<DashboardLayouts>
|
|
<Box sx={{px: 3}}>
|
|
<DataTable
|
|
tableUrl={GET_PROVINCE_MANAGER}
|
|
columns={columns}
|
|
selectableRow={false}
|
|
enableCustomToolbar={true}
|
|
enableLastUpdate={true}
|
|
enablePinning={true}
|
|
enableDensityToggle={false}
|
|
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
|
enableColumnFilters={true}
|
|
enableHiding={true}
|
|
enableFullScreenToggle={false}
|
|
enableGlobalFilter={false}
|
|
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
|
enableRowActions={true}
|
|
TableRowAction={TableRowActions}
|
|
/>
|
|
</Box>
|
|
</DashboardLayouts>
|
|
);
|
|
}
|
|
|
|
export default DashboardProvinceManagerComponent;
|