RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working on datepickerrange problems

Browse Source
This commit is contained in:
Mohammad Jalali
2024-06-09 16:43:53 +03:30
parent 474e6f3e8d
commit 3f896ef5e9
13 changed files with 264 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@@ -22,12 +22,13 @@
"formik": "^2.4.5",
"jalali-moment": "^3.3.11",
"material-react-table": "^2.11.2",
"next": "14.1.0",
"next": "^14.2.3",
"react": "^18",
"react-dom": "^18",
"sass": "^1.75.0",
"stylis": "^4.3.1",
"stylis-plugin-rtl": "^2.1.1"
"stylis-plugin-rtl": "^2.1.1",
"yup": "^1.4.0"
},
"devDependencies": {
"eslint": "^8",

12
src/components/home/index.jsx
View File

@@ -94,13 +94,21 @@ function HomeComponent() {
"between"
],
},
{
accessorKey: 'created_at',
header: 'تاریخ ساخت',
id: "created_at",
enableColumnFilter: true,
datatype: "date",
filterFn: "between",
},
{
accessorKey: 'updated_at',
header: 'تاریخ بروزرسانی',
id: "updated_at",
enableColumnFilter: true,
datatype: "date",
filterFn: "between",
filterFn: "equals",
},
{
accessorKey: 'company',
@@ -120,7 +128,7 @@ function HomeComponent() {
header: 'منطقه',
id: "area",
enableColumnFilter: true,
datatype: "numeric",
datatype: "array",
filterFn: "equals",
columnSelectOption: [
{value: 1, label: "وایتل"},

99
src/core/components/DataTable/filter/FilterBody.jsx
View File

@@ -6,10 +6,10 @@ import useTableSetting from "@/lib/hooks/useTableSetting";
import {useEffect, useState} from "react";
import FilterBodyField from "@/core/components/DataTable/filter/FilterBodyField";
import FilterHeader from "@/core/components/DataTable/filter/FilterHeader";
import * as Yup from "yup";
const ScrollBox = styled(Box)({
flexGrow: 1,
padding: '16px',
overflowY: 'scroll',
maxWidth: "450px",
'::-webkit-scrollbar': {
@@ -40,8 +40,10 @@ function FilterBody({columns, drawerState, setDrawerState}) {
const values = columns.reduce((acc, column) => {
if (!column.enableColumnFilter) return acc;
const filter = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters']?.find((filter) => filter.id === column.id);
if (column.datatype === 'select2') {
if (column.datatype === 'array') {
acc[column.id] = filter?.value || [];
} else if (column._filterFn === "between") {
acc[column.id] = filter?.value || ["", ""];
} else {
acc[column.id] = filter?.value || '';
}
@@ -50,6 +52,33 @@ function FilterBody({columns, drawerState, setDrawerState}) {
setInitialValues(values);
}, [columns, settingStore, userId, pageName, tableName]);
console.log("initialValues", initialValues)
const validationSchema = Yup.object().shape(
columns.reduce((acc, column) => {
if (column._filterFn === "between") {
acc[column.id] = Yup.array().of(Yup.string()).test({
test(value, ctx) {
const [start, end] = value || ["", ""];
const startInt = parseInt(start, 10);
const endInt = parseInt(end, 10);
if (start && end && endInt <= startInt) {
return ctx.createError({
message: `مقدار وارده باید بیشتر از (${start}) باشد`
});
} else if (start && !end) {
return ctx.createError({
message: "این بخش را پر نمایید"
});
}
return true;
}
});
}
return acc;
}, {})
);
const handleSubmit = (values) => {
console.log("Form values:", values);
};
@@ -58,44 +87,50 @@ function FilterBody({columns, drawerState, setDrawerState}) {
<Drawer open={drawerState} onClose={() => setDrawerState(false)}
sx={{overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%"}}>
<FilterHeader setDrawerState={setDrawerState}/>
<ScrollBox>
{Object.keys(initialValues).length > 0 && (
{Object.keys(initialValues).length > 0 && (
<ScrollBox>
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{({values, handleChange, handleBlur}) => (
{({values, handleChange, handleBlur, setFieldValue, errors, touched}) => (
<Form>
{columns.map((column) => (
column.enableColumnFilter && (
<FilterBodyField
key={column.id}
column={column}
value={values[column.id]}
onChange={handleChange}
onBlur={handleBlur}
/>
)
))}
<Box sx={{px: 1, py: 2}}>
{columns.map((column) => (
column.enableColumnFilter && (
<FilterBodyField
key={column.id}
column={column}
value={values[column.id]}
handleChange={handleChange}
handleBlur={handleBlur}
setFieldValue={setFieldValue}
errors={errors}
touched={touched}
/>
)
))}
</Box>
<Box sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
pb: 2
}}>
<Button variant="contained" size="large" type="submit"
sx={{
boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
backgroundColor: "#16534a", ':hover': {
backgroundColor: "#16534a",
}, width: "50%"
}}>اعمال فیلتر</Button>
</Box>
</Form>
)}
</Formik>
)}
</ScrollBox>
<Box sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
py: 1,
}}>
<Button variant="contained" size="large" onClick={handleSubmit}
sx={{
backgroundColor: "#16534a", ':hover': {
backgroundColor: "#16534a",
}, width: "50%"
}}>اعمال فیلتر</Button>
</Box>
</ScrollBox>
)}
</Drawer>
);
}

16
src/core/components/DataTable/filter/FilterBodyField.jsx
View File

@@ -6,9 +6,9 @@ import useTableSetting from "@/lib/hooks/useTableSetting";
import CustomSelect from "@/core/components/DataTable/filter/fieldsType/CustomSelect";
import CustomTextField from "@/core/components/DataTable/filter/fieldsType/CustomTextField";
import CustomTextFieldRange from "@/core/components/DataTable/filter/fieldsType/CustomTextFieldRange";
import CustomDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDatePicker";
import CustomDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker";
import CustomSelectMultiple from "@/core/components/DataTable/filter/fieldsType/CustomSelectMultiple";
import CustomDatePickerRange from "@/core/components/DataTable/filter/fieldsType/CustomDatePickerRange";
import CustomDatePickerRange from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange";
const columnFilterModeOptionFa = {
equals: "برابر",
@@ -20,7 +20,7 @@ const columnFilterModeOptionFa = {
between: "مابین"
}
function FilterBodyField({column, value}) {
function FilterBodyField({column, value, handleChange, handleBlur, setFieldValue, errors, touched}) {
const [anchorEl, setAnchorEl] = useState(null);
const [userId, setUserId] = useState(0);
const [pageName, setPageName] = useState('testPage');
@@ -28,7 +28,6 @@ function FilterBodyField({column, value}) {
const {settingStore} = useTableSetting();
const defaultFilter = (settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.fn || column._filterFn;
const defaultFilterTranslation = columnFilterModeOptionFa[defaultFilter] || defaultFilter;
const handleOpenFilterBox = (event) => {
setAnchorEl(event.currentTarget);
};
@@ -43,11 +42,16 @@ function FilterBodyField({column, value}) {
value={value}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
handleBlur={handleBlur}
handleChange={handleChange}
errors={errors}
touched={touched}
/>
) : column.datatype === "numeric" && column._filterFn === "equals" && Array.isArray(column.columnSelectOption) ? (
<CustomSelect
column={column}
value={value}
setFieldValue={setFieldValue}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
@@ -55,6 +59,7 @@ function FilterBodyField({column, value}) {
<CustomDatePicker
column={column}
value={value}
setFieldValue={setFieldValue}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
@@ -69,6 +74,7 @@ function FilterBodyField({column, value}) {
<CustomSelectMultiple
column={column}
value={value}
setFieldValue={setFieldValue}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
@@ -78,6 +84,8 @@ function FilterBodyField({column, value}) {
value={value}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
handleBlur={handleBlur}
handleChange={handleChange}
/>
)}
{Array.isArray(column.columnFilterModeOptions) && anchorEl !== null && (

15
src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx Normal file
View File

@@ -0,0 +1,15 @@
import React from 'react';
import DatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/DatePicker";
function CustomDatePicker({column, value, defaultFilterTranslation, setFieldValue}) {
return (
<DatePicker
column={column}
value={value}
defaultFilterTranslation={defaultFilterTranslation}
setFieldValue={setFieldValue}
/>
);
}
export default CustomDatePicker;

25
src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx Normal file
View File

@@ -0,0 +1,25 @@
'use client'
import DatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/DatePicker";
import React from "react";
function CustomDatePickerRange({column, value, defaultFilterTranslation, setFieldValue}) {
return (
<>
<DatePicker
column={column}
value={value}
defaultFilterTranslation={defaultFilterTranslation}
setFieldValue={setFieldValue}
/>
<DatePicker
column={column}
value={value}
defaultFilterTranslation={defaultFilterTranslation}
setFieldValue={setFieldValue}
/>
</>
);
}
export default CustomDatePickerRange;

66
src/core/components/DataTable/filter/fieldsType/CustomDate/DatePicker.jsx Normal file
View File

@@ -0,0 +1,66 @@
import React from 'react';
import {LocalizationProvider, MobileDatePicker} from "@mui/x-date-pickers";
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
import {faIR} from "@mui/x-date-pickers/locales";
import {IconButton, InputAdornment, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import moment from "jalali-moment";
function DatePicker({column, value, defaultFilterTranslation, setFieldValue}) {
return (
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps.localeText
}
>
<MobileDatePicker
value={value ? new Date(value) : null}
sx={{my: 1, width: "100%"}}
id={column.id}
name={column.id}
onChange={(value) => {
const date = new Date(value);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD");
setFieldValue(column.id, formattedDate);
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: (
<Typography variant="button" sx={{color: "#16534a"}}>
نوع فیلتر: {defaultFilterTranslation} (تاریخ)
</Typography>
),
InputProps: {
endAdornment: (
<InputAdornment position="end">
<IconButton
size="small"
onClick={(event) => {
event.stopPropagation();
setFieldValue(column.id, "");
}}
sx={{
color: "#bfbfbf",
'&:hover': {
backgroundColor: 'rgba(189, 189, 189, 0.1)',
color: "#363434"
},
}}
>
<ClearIcon/>
</IconButton>
</InputAdornment>
),
},
},
}}
/>
</LocalizationProvider>
);
}
export default DatePicker;

30
src/core/components/DataTable/filter/fieldsType/CustomDatePicker.jsx
View File

@@ -1,30 +0,0 @@
'use client'
import {InputAdornment, TextField, Typography} from "@mui/material";
import FilterListIcon from '@mui/icons-material/FilterList';
function CustomDatePicker({column, value, defaultFilterTranslation, handleOpenFilterBox}) {
return (
<TextField
id={column.id}
label={column.header}
value={value}
fullWidth
helperText={<Typography variant="button" sx={{color: "#16534a"}}>
نوع فیلتر: {defaultFilterTranslation}
</Typography>}
variant="outlined"
size="normal"
sx={{marginY: 1}}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{cursor: "pointer"}} onClick={handleOpenFilterBox}>
<FilterListIcon/>
</InputAdornment>
),
}}
/>
);
}
export default CustomDatePicker;

30
src/core/components/DataTable/filter/fieldsType/CustomDatePickerRange.jsx
View File

@@ -1,30 +0,0 @@
'use client'
import {InputAdornment, TextField, Typography} from "@mui/material";
import FilterListIcon from '@mui/icons-material/FilterList';
function CustomDatePickerRange({column, value, defaultFilterTranslation, handleOpenFilterBox}) {
return (
<TextField
id={column.id}
label={column.header}
value={value}
fullWidth
helperText={<Typography variant="button" sx={{color: "#16534a"}}>
نوع فیلتر: {defaultFilterTranslation}
</Typography>}
variant="outlined"
size="normal"
sx={{marginY: 1}}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{cursor: "pointer"}} onClick={handleOpenFilterBox}>
<FilterListIcon/>
</InputAdornment>
),
}}
/>
);
}
export default CustomDatePickerRange;

17
src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx
View File

@@ -1,27 +1,22 @@
'use client'
import {FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography} from "@mui/material";
import {useState} from "react";
function CustomSelect({column, value, defaultFilterTranslation}) {
const [fieldValue, setFieldValue] = useState(value);
function CustomSelect({column, value, defaultFilterTranslation, setFieldValue}) {
const columnSelectOption = column.columnSelectOption;
const handleChange = (event) => {
setFieldValue(event.target.value);
};
return (
<FormControl fullWidth sx={{marginY: 1}}>
<InputLabel htmlFor="uncontrolled-native"
id={`label${column.id}`}>{column.header}</InputLabel>
<InputLabel id={`label${column.id}`}>{column.header}</InputLabel>
<Select
labelId={`label${column.id}`}
id={column.id}
name={column.header}
value={fieldValue}
value={value}
input={<OutlinedInput label={column.header}/>}
onChange={handleChange}
onChange={(e) => {
setFieldValue(column.id, e.target.value)
}}
>
{columnSelectOption.map((option) => (
<MenuItem

32
src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx
View File

@@ -1,9 +1,25 @@
'use client'
import {FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography} from "@mui/material";
import {
Box,
Chip,
FormControl,
FormHelperText,
InputLabel,
MenuItem,
OutlinedInput,
Select,
Typography
} from "@mui/material";
function CustomSelectMultiple({column, value, defaultFilterTranslation}) {
function CustomSelectMultiple({column, value, defaultFilterTranslation, setFieldValue}) {
const columnSelectOption = column.columnSelectOption;
const getLabelForValue = (value) => {
const option = columnSelectOption.find(opt => opt.value === value);
return option ? option.label : value;
};
return (
<FormControl fullWidth sx={{marginY: 1}}>
<InputLabel htmlFor="uncontrolled-native"
@@ -12,8 +28,18 @@ function CustomSelectMultiple({column, value, defaultFilterTranslation}) {
labelId={`label${column.id}`}
id={column.id}
value={value}
multiple
onChange={(e) => {
setFieldValue(column.id, e.target.value)
}}
renderValue={(selected) => (
<Box sx={{display: 'flex', flexWrap: 'wrap', gap: 0.5}}>
{selected.map((value) => (
<Chip key={value} label={getLabelForValue(value)}/>
))}
</Box>
)}
input={<OutlinedInput label={column.header}/>}
// onChange={handleChange}
>
{columnSelectOption.map((option) => (
<MenuItem

5
src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx
View File

@@ -3,12 +3,15 @@
import {InputAdornment, TextField, Typography} from "@mui/material";
import FilterListIcon from '@mui/icons-material/FilterList';
function CustomTextField({column, value, defaultFilterTranslation, handleOpenFilterBox}) {
function CustomTextField({column, value, defaultFilterTranslation, handleOpenFilterBox, handleChange, handleBlur}) {
return (
<TextField
id={column.id}
name={column.id}
label={column.header}
value={value}
onChange={handleChange}
onBlur={handleBlur}
fullWidth
helperText={<Typography variant="button" sx={{color: "#16534a"}}>
نوع فیلتر: {defaultFilterTranslation}

44
src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx
View File

@@ -1,31 +1,41 @@
'use client'
import {Box, InputAdornment, TextField, Typography} from "@mui/material";
import FilterListIcon from '@mui/icons-material/FilterList';
function CustomTextFieldRange({column, value, defaultFilterTranslation, handleOpenFilterBox}) {
function CustomTextFieldRange({
column,
value,
defaultFilterTranslation,
handleOpenFilterBox,
handleChange,
handleBlur,
errors,
touched
}) {
return (
<Box sx={{display: "flex"}}>
<TextField
id={column.id}
label={<Typography>
از {column.header}
</Typography>}
value={value}
id={`${column.id}[0]`}
name={`${column.id}[0]`}
onChange={handleChange}
onBlur={handleBlur}
label={<Typography>از {column.header}</Typography>}
value={value[0]}
fullWidth
helperText={<Typography variant="button" sx={{color: "#16534a"}}>
نوع فیلتر: {defaultFilterTranslation}
</Typography>}
helperText={<Typography variant="button" sx={{color: "#16534a"}}>نوع
فیلتر: {defaultFilterTranslation}</Typography>}
variant="outlined"
size="normal"
sx={{marginY: 1, marginRight: 1}}
/>
<TextField
id={column.id}
label={<Typography>
تا {column.header}
</Typography>}
value={value}
id={`${column.id}[1]`}
name={`${column.id}[1]`}
onChange={handleChange}
onBlur={handleBlur}
error={touched?.[column.id] && Boolean(errors?.[column.id])}
helperText={touched?.[column.id] ? errors?.[column.id] : null}
label={<Typography>تا {column.header}</Typography>}
value={value[1]}
fullWidth
variant="outlined"
size="normal"
@@ -42,4 +52,4 @@ function CustomTextFieldRange({column, value, defaultFilterTranslation, handleOp
);
}
export default CustomTextFieldRange;
export default CustomTextFieldRange;