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

Merge branch 'feature/date_picker_TF-93' into 'develop'

Browse Source 
TF-93 Implementation of Date picker filter for tables to component

See merge request witel3/loan-facilities-expert!77
This commit is contained in:
AmirHossein Mahmoodi
2023-08-27 10:37:34 +00:00
parent e64f3bbf34 4ba97d9719
commit 82cf9ac49b
11 changed files with 91 additions and 557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/dashboard/commercial-chief/index.jsx
View File

@@ -1,15 +1,12 @@
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import {Box, Typography} from "@mui/material";
import {useMemo} from "react";
import {GET_COMMERCIAL_CHIEF} 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";
import MuiDatePicker from "@/core/components/MuiDatePicker";
function DashboardCommercialChiefComponent() {
const t = useTranslations();
@@ -96,56 +93,10 @@ function DashboardCommercialChiefComponent() {
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({column}) => <em>{column.columnDef.header}</em>,
Header: ({column}) => <>{column.columnDef.header}</>,
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>
<MuiDatePicker column={column}/>
);
},
},

57
src/components/dashboard/development-assistant/index.jsx
View File

@@ -1,15 +1,12 @@
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import {Box, Typography} from "@mui/material";
import {useMemo} from "react";
import {GET_DEVELOPMENT_ASSISTANT} 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";
import MuiDatePicker from "@/core/components/MuiDatePicker";
function DashboardDevelopmentAssistantComponent() {
const t = useTranslations();
@@ -97,56 +94,10 @@ function DashboardDevelopmentAssistantComponent() {
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({column}) => <em>{column.columnDef.header}</em>,
Header: ({column}) => <>{column.columnDef.header}</>,
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>
<MuiDatePicker column={column}/>
);
},
},

57
src/components/dashboard/inspector-expert/index.jsx
View File

@@ -1,15 +1,12 @@
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import {Box, Typography} from "@mui/material";
import {useMemo} from "react";
import {GET_INSPECTOR_EXPERT} 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";
import MuiDatePicker from "@/core/components/MuiDatePicker";
function DashboardInspectorExpertComponent() {
const t = useTranslations();
@@ -96,56 +93,10 @@ function DashboardInspectorExpertComponent() {
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({column}) => <em>{column.columnDef.header}</em>,
Header: ({column}) => <>{column.columnDef.header}</>,
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>
<MuiDatePicker column={column}/>
);
},
},

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

@@ -1,15 +1,12 @@
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import {Box, Typography} from "@mui/material";
import {useMemo} from "react";
import {GET_MACHINARY_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";
import MuiDatePicker from "@/core/components/MuiDatePicker";
function DashboardMachinaryOfficeComponent() {
const t = useTranslations();
@@ -96,56 +93,10 @@ function DashboardMachinaryOfficeComponent() {
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({column}) => <em>{column.columnDef.header}</em>,
Header: ({column}) => <>{column.columnDef.header}</>,
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>
<MuiDatePicker column={column}/>
);
},
},

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

@@ -1,15 +1,12 @@
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import {Box, Typography} from "@mui/material";
import {useMemo} from "react";
import {GET_NAVGAN_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";
import MuiDatePicker from "@/core/components/MuiDatePicker";
function DashboardNavganProvinceManagerComponent() {
const t = useTranslations();
@@ -97,56 +94,10 @@ function DashboardNavganProvinceManagerComponent() {
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({column}) => <em>{column.columnDef.header}</em>,
Header: ({column}) => <>{column.columnDef.header}</>,
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>
<MuiDatePicker column={column}/>
);
},
},

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

@@ -1,15 +1,12 @@
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import {Box, Typography} from "@mui/material";
import {useMemo} from "react";
import {GET_PASSENGER_BOSS} 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";
import MuiDatePicker from "@/core/components/MuiDatePicker";
function DashboardPassengerOfficeComponent() {
const t = useTranslations();
@@ -97,56 +94,10 @@ function DashboardPassengerOfficeComponent() {
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({column}) => <em>{column.columnDef.header}</em>,
Header: ({column}) => <>{column.columnDef.header}</>,
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>
<MuiDatePicker column={column}/>
);
},
},

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

@@ -1,15 +1,12 @@
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import {Box, Typography} from "@mui/material";
import {useMemo} from "react";
import {faIR} from "@mui/x-date-pickers/locales";
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";
import MuiDatePicker from "@/core/components/MuiDatePicker";
function DashboardPassengerOfficeComponent() {
const t = useTranslations();
@@ -97,57 +94,10 @@ function DashboardPassengerOfficeComponent() {
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({column}) => <em>{column.columnDef.header}</em>,
Header: ({column}) => <>{column.columnDef.header}</>,
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",
actionbar: {actions: ["accept", "today"]},
},
}}
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>
<MuiDatePicker column={column}/>
);
},
},

57
src/components/dashboard/province-head-expert/index.jsx
View File

@@ -1,15 +1,12 @@
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import {Box, Typography} from "@mui/material";
import {useMemo} from "react";
import {GET_PROVINCE_HEAD_EXPERT} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
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";
import TableRowActions from "./TableRowActions"
import MuiDatePicker from "@/core/components/MuiDatePicker";
function DashboardProvinceHeadExpertComponent() {
const t = useTranslations();
@@ -97,56 +94,10 @@ function DashboardProvinceHeadExpertComponent() {
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({column}) => <em>{column.columnDef.header}</em>,
Header: ({column}) => <>{column.columnDef.header}</>,
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>
<MuiDatePicker column={column}/>
);
},
},

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

@@ -1,15 +1,12 @@
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import {Box, Typography} from "@mui/material";
import {useMemo} from "react";
import {faIR} from "@mui/x-date-pickers/locales";
import {GET_REFAHI_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 DataTable from "@/core/components/DataTable";
import MuiDatePicker from "@/core/components/MuiDatePicker";
function DashboardRefahiProvinceManagerComponent() {
const t = useTranslations();
@@ -97,57 +94,10 @@ function DashboardRefahiProvinceManagerComponent() {
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({column}) => <em>{column.columnDef.header}</em>,
Header: ({column}) => <>{column.columnDef.header}</>,
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",
actionbar: {actions: ["accept", "today"]},
},
}}
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>
<MuiDatePicker column={column}/>
);
},
},

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

@@ -1,15 +1,12 @@
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import {Box, Typography} from "@mui/material";
import {useMemo} from "react";
import {GET_TRANSPORTATION_ASSISTANCE} 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 {faIR} from "@mui/x-date-pickers/locales";
import moment from "jalali-moment";
import DataTable from "@/core/components/DataTable";
import MuiDatePicker from "@/core/components/MuiDatePicker";
function DashboardTransportationAssistanceComponent() {
const t = useTranslations();
@@ -97,56 +94,10 @@ function DashboardTransportationAssistanceComponent() {
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
Header: ({column}) => <em>{column.columnDef.header}</em>,
Header: ({column}) => <>{column.columnDef.header}</>,
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>
<MuiDatePicker column={column}/>
);
},
},

76
src/core/components/MuiDatePicker.jsx
View File

@@ -1,35 +1,61 @@
import {DatePicker, LocalizationProvider} from "@mui/x-date-pickers";
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 {Box, IconButton} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import {useTranslations} from "next-intl";
export default function MuiDatePicker({
setFieldValue,
selectType,
error,
helperText,
}) {
export default function MuiDatePicker({column}) {
const t = useTranslations();
const handleDateChange = (date) => {
const selectedDate = moment(date).locale("fa"); // should add .format() at the end to format the data
setFieldValue(selectType, selectedDate);
};
const filterFnValue = column.columnDef._filterFn;
return (
<LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
<DatePicker
sx={{width: "100%"}}
label={t("MuiDatePicker.date_picker_birthday")}
slotProps={{
textField: {
size: "small",
helperText: helperText ? `${helperText}` : "YYYY-MM-DD",
error: error ? true : false,
},
<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);
}}
onChange={handleDateChange}
/>
</LocalizationProvider>
sx={{
color: column.getFilterValue()
? "rgba(0, 0, 0, 0.54)"
: "#bfbfbf",
}}
>
<ClearIcon/>
</IconButton>
</Box>
);
}