diff --git a/src/core/components/DataTable/filter/FilterBody.jsx b/src/core/components/DataTable/filter/FilterBody.jsx index 7f221fd..fbaed68 100644 --- a/src/core/components/DataTable/filter/FilterBody.jsx +++ b/src/core/components/DataTable/filter/FilterBody.jsx @@ -4,9 +4,9 @@ import {Box, Button, Drawer, styled} from "@mui/material"; import {Form, Formik} from "formik"; 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"; +import FilterBodyField from "@/core/components/DataTable/filter/FilterBodyField"; const ScrollBox = styled(Box)({ flexGrow: 1, @@ -38,11 +38,23 @@ function FilterBody({columns, drawerState, setDrawerState}) { if (!column.enableColumnFilter) return acc; const filter = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters']?.find((filter) => filter.id === column.id); if (column.datatype === 'array') { - acc[column.id] = filter?.value || []; + acc[column.id] = { + value: filter?.value || [], + filterFn: filter?.fn || column._filterFn, + datatype: column.datatype + }; } else if (column._filterFn === "between") { - acc[column.id] = filter?.value || ["", ""]; + acc[column.id] = { + value: filter?.value || ["", ""], + filterFn: filter?.fn || column._filterFn, + datatype: column.datatype + }; } else { - acc[column.id] = filter?.value || ''; + acc[column.id] = { + value: filter?.value || '', + filterFn: filter?.fn || column._filterFn, + datatype: column.datatype + }; } return acc; }, {}); @@ -54,7 +66,8 @@ function FilterBody({columns, drawerState, setDrawerState}) { if (column._filterFn === "between" && column.datatype === "numeric") { acc[column.id] = Yup.array().of(Yup.string()).test({ test(value, ctx) { - const [start, end] = value || ["", ""]; + console.log("vavavava", value) + const [start, end] = value.value || ["", ""]; const startInt = parseInt(start, 10); const endInt = parseInt(end, 10); if (start && end && endInt <= startInt) { @@ -99,24 +112,28 @@ function FilterBody({columns, drawerState, setDrawerState}) { touched, isSubmitting, isValid, - dirty + dirty, + resetForm }) => (
- {columns.map((column) => ( - column.enableColumnFilter && ( - - ) - ))} + { + columns.map((column) => ( + column.enableColumnFilter && ( + + ) + )) + } filter.id === column.id)?.fn || column._filterFn; - const defaultFilterTranslation = columnFilterModeOptionFa[defaultFilter] || defaultFilter; + const defaultFilterTranslation = columnFilterModeOptionFa[filterParameters.filterFn] || filterParameters.filterFn; + const handleOpenFilterBox = (event) => { setAnchorEl(event.currentTarget); }; - const handleCloseFilterBox = () => { - setAnchorEl(null); - }; + return ( <> - {column.datatype === "numeric" && column._filterFn === "between" ? ( + {column.datatype === "numeric" && filterParameters.filterFn === "between" ? ( - ) : column.datatype === "numeric" && column._filterFn === "equals" && Array.isArray(column.columnSelectOption) ? ( + ) : column.datatype === "numeric" && filterParameters.filterFn === "equals" && Array.isArray(column.columnSelectOption) ? ( - ) : column.datatype === "date" && column._filterFn === "equals" ? ( + ) : column.datatype === "date" && filterParameters.filterFn === "equals" ? ( - ) : column.datatype === "date" && column._filterFn === "between" ? ( + ) : column.datatype === "date" && filterParameters.filterFn === "between" ? ( - ) : column.datatype === "array" && column._filterFn === "equals" ? ( + ) : column.datatype === "array" && filterParameters.filterFn === "equals" ? ( setFieldValue(`${column.id}.value`, e.target.value)} /> )} - {Array.isArray(column.columnFilterModeOptions) && anchorEl !== null && ( + {Array.isArray(column.columnFilterModeOptions) && ( )} diff --git a/src/core/components/DataTable/filter/FilterOptionList.jsx b/src/core/components/DataTable/filter/FilterOptionList.jsx index 842aee6..ce02c23 100644 --- a/src/core/components/DataTable/filter/FilterOptionList.jsx +++ b/src/core/components/DataTable/filter/FilterOptionList.jsx @@ -3,13 +3,28 @@ import {ListItem, Menu} from "@mui/material"; import {useState} from "react"; -function FilterOptionList({defaultFilter, filterOption, anchorEl, columnFilterModeOptionFa, handleCloseFilterBox}) { - const [selectedFilter, setSelectedFilter] = useState(defaultFilter); +function FilterOptionList({ + column, + filterType, + filterOption, + anchorEl, + columnFilterModeOptionFa, + setAnchorEl, + setFieldValue + }) { + const [selectedFilter, setSelectedFilter] = useState(filterType); - const handleChnageItem = (event, index) => { + const handleChangeItem = (event, index) => { + setFieldValue(`${column.id}.value`, filterOption[index] === "between" ? ["", ""] : ""); + setFieldValue(`${column.id}.filterFn`, filterOption[index]); setSelectedFilter(filterOption[index]); + setAnchorEl(null); } + const handleCloseFilterBox = () => { + setAnchorEl(null); + }; + return ( {filterOption.map((option, index) => ( handleChnageItem(event, index)} + onClick={(event) => handleChangeItem(event, index)} selected={option === selectedFilter} sx={{cursor: 'pointer', width: "100px", display: "flex", justifyContent: "center"}}> {columnFilterModeOptionFa[option]} diff --git a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx index db402a7..32c41a0 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx @@ -2,11 +2,11 @@ import React from 'react'; import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker"; import {Typography} from "@mui/material"; -function CustomDatePicker({column, value, defaultFilterTranslation, setFieldValue}) { +function CustomDatePicker({column, filterParameters, defaultFilterTranslation, setFieldValue}) { return ( @@ -21,10 +21,10 @@ function CustomDatePickerRange({column, value, defaultFilterTranslation, setFiel } /> diff --git a/src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx b/src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx index 40783ad..21cd195 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx @@ -19,6 +19,7 @@ function MuiDatePicker({value, setFieldValue, name, minDate, maxDate, helperText name={name} aria-describedby="component-helper-text" onChange={(value) => { + console.log(value) const date = new Date(value); const formattedDate = moment(date) .locale("en") diff --git a/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx b/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx index ad21280..2208d83 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx @@ -2,7 +2,7 @@ import {FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography} from "@mui/material"; -function CustomSelect({column, value, defaultFilterTranslation, setFieldValue}) { +function CustomSelect({column, filterParameters, defaultFilterTranslation, setFieldValue}) { const columnSelectOption = column.columnSelectOption; return ( @@ -11,11 +11,11 @@ function CustomSelect({column, value, defaultFilterTranslation, setFieldValue}) { - setFieldValue(column.id, e.target.value) + setFieldValue(`${column.id}.value`, e.target.value) }} renderValue={(selected) => ( diff --git a/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx b/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx index 7753d25..c5c35d8 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx @@ -1,15 +1,20 @@ -'use client' - import {InputAdornment, TextField, Typography} from "@mui/material"; import FilterListIcon from '@mui/icons-material/FilterList'; -function CustomTextField({column, value, defaultFilterTranslation, handleOpenFilterBox, handleChange, handleBlur}) { +function CustomTextField({ + column, + filterParameters, + defaultFilterTranslation, + handleOpenFilterBox, + handleChange, + handleBlur + }) { return ( از {column.header}} - value={value[0]} + value={filterParameters.value[0]} fullWidth error={touched?.[column.id] && Boolean(errors?.[column.id])} helperText={نوع @@ -29,14 +29,14 @@ function CustomTextFieldRange({ sx={{marginY: 1, marginRight: 1}} /> تا {column.header}} - value={value[1]} + value={filterParameters.value[1]} fullWidth variant="outlined" size="normal"