From 3f896ef5e91868bf257d54b366d8305a30a7ffc5 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Sun, 9 Jun 2024 16:43:53 +0330 Subject: [PATCH] working on datepickerrange problems --- package.json | 5 +- src/components/home/index.jsx | 12 ++- .../DataTable/filter/FilterBody.jsx | 99 +++++++++++++------ .../DataTable/filter/FilterBodyField.jsx | 16 ++- .../CustomDate/CustomDatePicker.jsx | 15 +++ .../CustomDate/CustomDatePickerRange.jsx | 25 +++++ .../fieldsType/CustomDate/DatePicker.jsx | 66 +++++++++++++ .../filter/fieldsType/CustomDatePicker.jsx | 30 ------ .../fieldsType/CustomDatePickerRange.jsx | 30 ------ .../filter/fieldsType/CustomSelect.jsx | 17 ++-- .../fieldsType/CustomSelectMultiple.jsx | 32 +++++- .../filter/fieldsType/CustomTextField.jsx | 5 +- .../fieldsType/CustomTextFieldRange.jsx | 44 +++++---- 13 files changed, 264 insertions(+), 132 deletions(-) create mode 100644 src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx create mode 100644 src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx create mode 100644 src/core/components/DataTable/filter/fieldsType/CustomDate/DatePicker.jsx delete mode 100644 src/core/components/DataTable/filter/fieldsType/CustomDatePicker.jsx delete mode 100644 src/core/components/DataTable/filter/fieldsType/CustomDatePickerRange.jsx diff --git a/package.json b/package.json index 3e7a01c..0290200 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/home/index.jsx b/src/components/home/index.jsx index ae8a116..359e13e 100644 --- a/src/components/home/index.jsx +++ b/src/components/home/index.jsx @@ -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: "وایتل"}, diff --git a/src/core/components/DataTable/filter/FilterBody.jsx b/src/core/components/DataTable/filter/FilterBody.jsx index 42e826b..fb6dcea 100644 --- a/src/core/components/DataTable/filter/FilterBody.jsx +++ b/src/core/components/DataTable/filter/FilterBody.jsx @@ -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}) { setDrawerState(false)} sx={{overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%"}}> - - {Object.keys(initialValues).length > 0 && ( + {Object.keys(initialValues).length > 0 && ( + - {({values, handleChange, handleBlur}) => ( + {({values, handleChange, handleBlur, setFieldValue, errors, touched}) => (
- {columns.map((column) => ( - column.enableColumnFilter && ( - - ) - ))} + + {columns.map((column) => ( + column.enableColumnFilter && ( + + ) + ))} + + + + )}
- )} - - - - + + )} ); } diff --git a/src/core/components/DataTable/filter/FilterBodyField.jsx b/src/core/components/DataTable/filter/FilterBodyField.jsx index f60f9df..879a5e0 100644 --- a/src/core/components/DataTable/filter/FilterBodyField.jsx +++ b/src/core/components/DataTable/filter/FilterBodyField.jsx @@ -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) ? ( @@ -55,6 +59,7 @@ function FilterBodyField({column, value}) { @@ -69,6 +74,7 @@ function FilterBodyField({column, value}) { @@ -78,6 +84,8 @@ function FilterBodyField({column, value}) { value={value} defaultFilterTranslation={defaultFilterTranslation} handleOpenFilterBox={handleOpenFilterBox} + handleBlur={handleBlur} + handleChange={handleChange} /> )} {Array.isArray(column.columnFilterModeOptions) && anchorEl !== null && ( diff --git a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx new file mode 100644 index 0000000..ec57e2f --- /dev/null +++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx @@ -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 ( + + ); +} + +export default CustomDatePicker; \ No newline at end of file diff --git a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx new file mode 100644 index 0000000..847c16f --- /dev/null +++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx @@ -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 ( + <> + + + + ); +} + +export default CustomDatePickerRange; diff --git a/src/core/components/DataTable/filter/fieldsType/CustomDate/DatePicker.jsx b/src/core/components/DataTable/filter/fieldsType/CustomDate/DatePicker.jsx new file mode 100644 index 0000000..19ffb3d --- /dev/null +++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/DatePicker.jsx @@ -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 ( + + { + const date = new Date(value); + const formattedDate = moment(date) + .locale("en") + .format("YYYY-MM-DD"); + setFieldValue(column.id, formattedDate); + }} + slotProps={{ + textField: { + placeholder: "تاریخ خود را وارد کنید", + helperText: ( + + نوع فیلتر: {defaultFilterTranslation} (تاریخ) + + ), + InputProps: { + endAdornment: ( + + { + event.stopPropagation(); + setFieldValue(column.id, ""); + }} + sx={{ + color: "#bfbfbf", + '&:hover': { + backgroundColor: 'rgba(189, 189, 189, 0.1)', + color: "#363434" + }, + }} + > + + + + ), + }, + }, + }} + /> + + ); +} + +export default DatePicker; \ No newline at end of file diff --git a/src/core/components/DataTable/filter/fieldsType/CustomDatePicker.jsx b/src/core/components/DataTable/filter/fieldsType/CustomDatePicker.jsx deleted file mode 100644 index 5e600f0..0000000 --- a/src/core/components/DataTable/filter/fieldsType/CustomDatePicker.jsx +++ /dev/null @@ -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 ( - - نوع فیلتر: {defaultFilterTranslation} - } - variant="outlined" - size="normal" - sx={{marginY: 1}} - InputProps={{ - endAdornment: ( - - - - ), - }} - /> - ); -} - -export default CustomDatePicker; diff --git a/src/core/components/DataTable/filter/fieldsType/CustomDatePickerRange.jsx b/src/core/components/DataTable/filter/fieldsType/CustomDatePickerRange.jsx deleted file mode 100644 index ace1e3f..0000000 --- a/src/core/components/DataTable/filter/fieldsType/CustomDatePickerRange.jsx +++ /dev/null @@ -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 ( - - نوع فیلتر: {defaultFilterTranslation} - } - variant="outlined" - size="normal" - sx={{marginY: 1}} - InputProps={{ - endAdornment: ( - - - - ), - }} - /> - ); -} - -export default CustomDatePickerRange; diff --git a/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx b/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx index 4c44a5f..ad21280 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx @@ -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 ( - {column.header} + {column.header}