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

Merge branch 'feature/debug_filter' into 'develop'

Browse Source 
fix bug of filters

See merge request witel-front-end/rms!4
This commit is contained in:
AmirHossein Mahmoodi
2024-04-28 07:28:03 +00:00
parent c8f5956167 39a848da69
commit 7ebeea2f49
3 changed files with 110 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/FilterColumn.jsx
View File

@@ -56,7 +56,7 @@ function FilterColumn({ columns }) {
const initialValues = columns.reduce((acc, column) => { const initialValues = columns.reduce((acc, column) => {
if (column.enableColumnFilter) { 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') { if (column.filterFn === 'betweenNum' || column.filterFn === 'betweenDate') {
acc[column.id] = filter?.value || ["", ""]; acc[column.id] = filter?.value || ["", ""];
} }
@@ -73,7 +73,6 @@ function FilterColumn({ columns }) {
const formik = useFormik({ const formik = useFormik({
initialValues, initialValues,
onSubmit: (values) => { onSubmit: (values) => {
console.log(values)
const updatedFilters = selectedFilters.map(filter => { const updatedFilters = selectedFilters.map(filter => {
const value = values[filter.id]; const value = values[filter.id];
if (value !== undefined) { if (value !== undefined) {
@@ -81,7 +80,6 @@ function FilterColumn({ columns }) {
} }
return filter; return filter;
}); });
Object.entries(values).forEach(([fieldName, value]) => { Object.entries(values).forEach(([fieldName, value]) => {
const filterIndex = updatedFilters.findIndex(filter => filter.id === fieldName); const filterIndex = updatedFilters.findIndex(filter => filter.id === fieldName);
if (filterIndex === -1 && value !== '' && value !== null && value !== undefined) { if (filterIndex === -1 && value !== '' && value !== null && value !== undefined) {
@@ -108,30 +106,30 @@ function FilterColumn({ columns }) {
}); });
return ( return (
<> <>
<Button onClick={toggleDrawer(true)}>Open drawer</Button> <Button onClick={toggleDrawer(true)}>Open drawer</Button>
<Drawer open={open} onClose={toggleDrawer(false)} <Drawer open={open} onClose={toggleDrawer(false)}
sx={{ sx={{
"& .MuiDrawer-paper": { "& .MuiDrawer-paper": {
padding: '16px', padding: '16px',
overflowY: 'auto', overflowY: 'auto',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'space-between', justifyContent: 'space-between',
scrollbarWidth: 'thin', scrollbarWidth: 'thin',
width:450, width:450,
"&::-webkit-scrollbar": { "&::-webkit-scrollbar": {
width: '8px', width: '8px',
}, },
"&::-webkit-scrollbar-thumb": { "&::-webkit-scrollbar-thumb": {
backgroundColor: '#ccc', backgroundColor: '#ccc',
borderRadius: '4px', borderRadius: '4px',
}, },
"@media (max-width: 600px)": { "@media (max-width: 600px)": {
width: '100%' width: '100%'
}, },
} }
}} }}
> >
<DrawerHeader> <DrawerHeader>
<Typography variant="h6" mb={2}>فیلتر</Typography> <Typography variant="h6" mb={2}>فیلتر</Typography>
@@ -167,25 +165,25 @@ function FilterColumn({ columns }) {
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)} onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || []} defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || []}
/> />
: column.type === 'select' ? : column.type === 'select' ?
<SelectBox <SelectBox
key={index} key={index}
id={column.id} id={column.id}
formik={formik} formik={formik}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)} onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''} defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
/> />
: :
<TextFieldWithFnBox <TextFieldWithFnBox
key={index} key={index}
id={column.id} id={column.id}
header={column.header} header={column.header}
formik={formik} formik={formik}
defaultFilter={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.fn || column.filterFn} defaultFilter={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.fn || column.filterFn}
columnFilterModeOptions={column.columnFilterModeOptions} columnFilterModeOptions={column.columnFilterModeOptions}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)} onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={formik.values[column.id] || (settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''} defaultValue={formik.values[column.id] || (settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
/> />
) )
))} ))}
</FormControl> </FormControl>
@@ -197,7 +195,7 @@ function FilterColumn({ columns }) {
</Box> </Box>
</Box> </Box>
</Drawer> </Drawer>
</> </>
); );
} }

104
src/components/MuiDatePicker.jsx
View File

@@ -2,62 +2,66 @@ import { LocalizationProvider, MobileDateTimePicker } from "@mui/x-date-pickers"
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali"; import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "jalali-moment"; import moment from "jalali-moment";
import { faIR } from "@mui/x-date-pickers/locales"; 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 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 }) { export default function MuiDatePicker({label, name, formik, defaultValue, minDate, maxDate, onDateChange }) {
const [pickerValue, setPickerValue] = useState(defaultValue ? new Date(defaultValue) : null); const [pickerValue, setPickerValue] = useState(defaultValue ? new Date(defaultValue) : null);
return ( return (
<Box sx={{ padding: '4px', position: 'relative' }}> <Box sx={{ position: 'relative' }}>
<Box sx={{ display: "flex", alignItems: "center" }}> <LocalizationProvider
<LocalizationProvider dateAdapter={AdapterDateFnsJalali}
dateAdapter={AdapterDateFnsJalali} localeText={
localeText={ faIR.components.MuiLocalizationProvider.defaultProps.localeText
faIR.components.MuiLocalizationProvider.defaultProps }
.localeText
}
>
<MobileDateTimePicker
key={formik.values[name]}
ampm={false}
onChange={(newValue) => {
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}
/>
</LocalizationProvider>
</Box>
<IconButton
size="small"
onClick={() => {
formik.setFieldValue(name, "");
setPickerValue(null);
}}
sx={{
color: "#bfbfbf",
position: 'absolute',
right: '4px',
top: '35%',
transform: 'translateY(-50%)',
}}
> >
<ClearIcon /> <MobileDateTimePicker
</IconButton> key={formik.values[name]}
ampm={false}
onChange={(newValue) => {
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: (
<InputAdornment position="end">
<IconButton
size="small"
onClick={(event) => {
event.stopPropagation();
formik.setFieldValue(name, "");
setPickerValue(null);
}}
sx={{
color: "#bfbfbf",
'&:hover': {
backgroundColor: 'rgba(189, 189, 189, 0.1)',
},
}}
>
<ClearIcon />
</IconButton>
</InputAdornment>
),
},
},
}}
value={pickerValue}
minDate={minDate ? new Date(minDate) : null}
maxDate={maxDate ? new Date(maxDate) : null}
/>
</LocalizationProvider>
</Box> </Box>
); );
} }

21
src/components/SelectBoxMultiple.jsx
View File

@@ -1,4 +1,4 @@
import { useTheme } from '@mui/material/styles'; import {useTheme} from '@mui/material/styles';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import OutlinedInput from '@mui/material/OutlinedInput'; import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel'; 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 theme = useTheme();
const [personName, setPersonName] = useState(defaultValue || []); const [personName, setPersonName] = useState(defaultValue || []);
@@ -54,10 +54,13 @@ const SelectBoxMultiple = ({formik, id , defaultValue}) => {
const handleChange = (event) => { const handleChange = (event) => {
const { const {
target: { value }, target: {value},
} = event; } = 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) { if (selectedValues.length === 0) {
setPersonName([]); setPersonName([]);
formik.setFieldValue(id, []); formik.setFieldValue(id, []);
@@ -71,18 +74,18 @@ const SelectBoxMultiple = ({formik, id , defaultValue}) => {
return ( return (
<> <>
<FormControl sx={{width: '100%' }}> <FormControl sx={{width: '100%'}}>
<InputLabel id={id}>انتخاب</InputLabel> <InputLabel id={id}>انتخاب</InputLabel>
<Select <Select
id={id} id={id}
multiple multiple
value={personName} value={personName}
onChange={handleChange} onChange={handleChange}
input={<OutlinedInput label="Chip" />} input={<OutlinedInput label="Chip"/>}
renderValue={(selected) => ( renderValue={(selected) => (
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}> <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 0.5}}>
{selected.map((value) => ( {selected.map((value) => (
<Chip key={value} label={value} /> <Chip key={value} label={value}/>
))} ))}
</Box> </Box>
)} )}