diff --git a/src/components/FilterColumn.jsx b/src/components/FilterColumn.jsx index 3c86f51..08e42c0 100644 --- a/src/components/FilterColumn.jsx +++ b/src/components/FilterColumn.jsx @@ -56,7 +56,7 @@ function FilterColumn({ columns }) { const initialValues = columns.reduce((acc, column) => { if (column.enableColumnFilter) { - const filter = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters']?.find((filter) => filter.id === column.id); + const filter = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters']?.find((filter) => filter.id === column.id); if (column.filterFn === 'betweenNum' || column.filterFn === 'betweenDate') { acc[column.id] = filter?.value || ["", ""]; } @@ -73,7 +73,6 @@ function FilterColumn({ columns }) { const formik = useFormik({ initialValues, onSubmit: (values) => { - console.log(values) const updatedFilters = selectedFilters.map(filter => { const value = values[filter.id]; if (value !== undefined) { @@ -81,7 +80,6 @@ function FilterColumn({ columns }) { } return filter; }); - Object.entries(values).forEach(([fieldName, value]) => { const filterIndex = updatedFilters.findIndex(filter => filter.id === fieldName); if (filterIndex === -1 && value !== '' && value !== null && value !== undefined) { @@ -108,30 +106,30 @@ function FilterColumn({ columns }) { }); return ( - <> - + <> + فیلتر @@ -167,25 +165,25 @@ function FilterColumn({ columns }) { onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)} defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || []} /> - : column.type === 'select' ? - handleSelectFilter(column.id, filterFn)} - defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''} - /> - : - filter.id === column.id)?.fn || column.filterFn} - columnFilterModeOptions={column.columnFilterModeOptions} - onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)} - defaultValue={formik.values[column.id] || (settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''} - /> + : column.type === 'select' ? + handleSelectFilter(column.id, filterFn)} + defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''} + /> + : + filter.id === column.id)?.fn || column.filterFn} + columnFilterModeOptions={column.columnFilterModeOptions} + onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)} + defaultValue={formik.values[column.id] || (settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''} + /> ) ))} @@ -197,7 +195,7 @@ function FilterColumn({ columns }) { - + ); } diff --git a/src/components/MuiDatePicker.jsx b/src/components/MuiDatePicker.jsx index 0929c61..f2b0876 100644 --- a/src/components/MuiDatePicker.jsx +++ b/src/components/MuiDatePicker.jsx @@ -2,62 +2,66 @@ 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 { Box, IconButton, InputAdornment, TextField } from "@mui/material"; import ClearIcon from "@mui/icons-material/Clear"; -import {useState} from "react"; +import { useState } from "react"; export default function MuiDatePicker({label, name, formik, defaultValue, minDate, maxDate, onDateChange }) { const [pickerValue, setPickerValue] = useState(defaultValue ? new Date(defaultValue) : null); + return ( - - - - { - const date = new Date(newValue); - const formattedDate = moment(date) - .locale("en") - .format("YYYY-MM-DD HH:mm"); - formik.setFieldValue(name, formattedDate); - onDateChange(formattedDate); - setPickerValue(newValue); - }} - slotProps={{ - textField: { - placeholder: "تاریخ خود را وارد کنید", - helperText: label, - }, - }} - value={pickerValue} - minDate={minDate ? new Date(minDate) : null} - maxDate={maxDate ? new Date(maxDate) : null} - /> - - - { - formik.setFieldValue(name, ""); - setPickerValue(null); - }} - sx={{ - color: "#bfbfbf", - position: 'absolute', - right: '4px', - top: '35%', - transform: 'translateY(-50%)', - }} + + - - + { + const date = new Date(newValue); + const formattedDate = moment(date) + .locale("en") + .format("YYYY-MM-DD HH:mm"); + formik.setFieldValue(name, formattedDate); + onDateChange(formattedDate); + setPickerValue(newValue); + }} + slotProps={{ + textField: { + placeholder: "تاریخ خود را وارد کنید", + helperText: label, + InputProps: { + endAdornment: ( + + { + event.stopPropagation(); + formik.setFieldValue(name, ""); + setPickerValue(null); + }} + sx={{ + color: "#bfbfbf", + '&:hover': { + backgroundColor: 'rgba(189, 189, 189, 0.1)', + }, + }} + > + + + + ), + }, + }, + }} + value={pickerValue} + minDate={minDate ? new Date(minDate) : null} + maxDate={maxDate ? new Date(maxDate) : null} + /> + ); } diff --git a/src/components/SelectBoxMultiple.jsx b/src/components/SelectBoxMultiple.jsx index b3b943d..4355c72 100644 --- a/src/components/SelectBoxMultiple.jsx +++ b/src/components/SelectBoxMultiple.jsx @@ -1,4 +1,4 @@ -import { useTheme } from '@mui/material/styles'; +import {useTheme} from '@mui/material/styles'; import Box from '@mui/material/Box'; import OutlinedInput from '@mui/material/OutlinedInput'; import InputLabel from '@mui/material/InputLabel'; @@ -41,7 +41,7 @@ function getStyles(name, personName, theme) { }; } -const SelectBoxMultiple = ({formik, id , defaultValue}) => { +const SelectBoxMultiple = ({formik, id, defaultValue}) => { const theme = useTheme(); const [personName, setPersonName] = useState(defaultValue || []); @@ -54,10 +54,13 @@ const SelectBoxMultiple = ({formik, id , defaultValue}) => { const handleChange = (event) => { const { - target: { value }, + target: {value}, } = event; - console.log(value) - const selectedValues = typeof value === 'string' ? value.split(',') : value; + + const selectedValues = typeof value === 'string' ? value.split(',').filter(item => item.trim() !== '') : value; + + formik.setFieldValue(id, []); + if (selectedValues.length === 0) { setPersonName([]); formik.setFieldValue(id, []); @@ -71,18 +74,18 @@ const SelectBoxMultiple = ({formik, id , defaultValue}) => { return ( <> - + انتخاب