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

debug filter

Browse Source
This commit is contained in:
Mohammad Jalali
2024-05-18 10:07:24 +03:30
parent d3a932ef27
commit dbb0264858
4 changed files with 87 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/core/components/DataTable/filter/FilterColumn.jsx
View File

@@ -1,7 +1,6 @@
"use client"
import {Box, Button, Divider, Drawer, FormControl, IconButton, styled, Tooltip, Typography} from '@mui/material';
import {useFormik} from 'formik';
import TextFieldWithFnBox from "@/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox";
import {useEffect, useState} from "react";
import useTableSetting from "@/lib/hooks/useTableSetting";
import BetweenNumberFilter from "@/core/components/DataTable/filter/BetweenNumberFilter";
@@ -10,6 +9,7 @@ import SelectBoxMultiple from "@/core/components/DataTable/filter/SelectBoxMulti
import SelectBox from "@/core/components/DataTable/filter/SelectBox";
import FilterAltIcon from '@mui/icons-material/FilterAlt';
import CloseIcon from '@mui/icons-material/Close';
import TextFieldWithFnBox from "@/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox";
function FilterColumn({columns}) {
const [open, setOpen] = useState(false);
@@ -34,11 +34,13 @@ function FilterColumn({columns}) {
useEffect(() => {
const settingValue = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || [];
setSelectedFilters(settingValue.length > 0 ? settingValue : []);
if (!settingValue.length > 0) {
formik.resetForm();
}
}, [settingStore]);
const handleSelectFilter = (fieldName, filterFn) => {
const filterIndex = selectedFilters.findIndex(filter => filter.id === fieldName);
if (filterIndex !== -1) {
const updatedFilters = [...selectedFilters];
updatedFilters[filterIndex].fn = filterFn;
@@ -139,36 +141,32 @@ function FilterColumn({columns}) {
<FormControl fullWidth>
{columns.map((column, index) => (
column.enableColumnFilter &&
(column.filterFn === 'betweenDate' ?
(column.inputType === 'betweenDate' ?
<BetWeenDateFilter
key={index}
id={column.id}
formik={formik}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
/>
: column.filterFn === 'betweenNum' ?
: column.inputType === 'betweenNum' ?
<BetweenNumberFilter
key={index}
id={column.id}
formik={formik}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ["", ""]}
/>
: column.type === 'select2' ?
: column.inputType === 'select2' ?
<SelectBoxMultiple
key={index}
id={column.id}
formik={formik}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || []}
/>
: column.type === 'select' ?
: column.inputType === 'select' ?
<SelectBox
key={index}
id={column.id}
formik={formik}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
/>
:
@@ -177,7 +175,7 @@ function FilterColumn({columns}) {
id={column.id}
header={column.header}
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}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={formik.values[column.id] || (settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}

6
src/core/components/DataTable/filter/TextFieldWithFnBox/FilterBox.jsx
View File

@@ -1,4 +1,5 @@
import {ClickAwayListener, List, ListItem, ListItemText, Paper, Popper} from '@mui/material';
import {useState} from "react";
const columnFilterModeOptionFa = {
equals: "برابر",
@@ -6,15 +7,18 @@ const columnFilterModeOptionFa = {
contains: "شامل",
lessThan: "کوچکتر",
greaterThan: "بزرگتر",
fuzzy: "فازی",
}
function FilterBox({
anchorEl, open = false, handleClose = () => {
}, columnFilterModeOptions, onSelectFilter, defaultFilter
}) {
const [selectedFilter, setSelectedFilter] = useState(defaultFilter);
const id = open ? 'simple-popper' : undefined;
const handleSelectFilter = (filterFn) => {
setSelectedFilter(filterFn);
onSelectFilter(filterFn);
handleClose();
};
@@ -27,7 +31,7 @@ function FilterBox({
<List>
{columnFilterModeOptions.map((option, index) => (
<ListItem key={index} onClick={() => handleSelectFilter(option)}
selected={option === defaultFilter} sx={{cursor: 'pointer'}}>
selected={option === selectedFilter} sx={{cursor: 'pointer'}}>
<ListItemText primary={columnFilterModeOptionFa[option]}/>
</ListItem>
))}

72
src/core/components/DataTable/index.js
View File

@@ -8,48 +8,68 @@ import Toolbar from "@/components/home/Toolbar";
const data = [
{
name: {
firstName: 'John',
lastName: 'Doe',
firstName: 'امین',
lastName: 'قاسمپور',
},
address: '261 Erdman Ford',
city: 'East Daphne',
state: 'Kentucky',
address: 'فلان جا',
city: 'تهران',
state: 'بررسی شده',
price: '20',
updated_at: '2024/05/02',
company: 'همراه اول',
area: 'منطقه 5',
},
{
name: {
firstName: 'Jane',
lastName: 'Doe',
firstName: 'امیر حسین',
lastName: 'محمودی',
},
address: '769 Dominic Grove',
city: 'Columbus',
state: 'Ohio',
address: 'فلان جا',
city: 'تهران',
state: 'تکمیل شده',
price: '27',
updated_at: '2024/05/02',
company: 'وایتل',
area: 'منطقه 27',
},
{
name: {
firstName: 'Joe',
lastName: 'Doe',
firstName: 'یاسمن',
lastName: 'علی اکبری',
},
address: '566 Brakus Inlet',
city: 'South Linda',
state: 'West Virginia',
address: 'فلان جا',
city: 'شیراز',
state: 'بررسی شده',
price: '32',
updated_at: '2024/05/02',
company: 'ایرانسل',
area: 'منطقه 23',
},
{
name: {
firstName: 'Kevin',
lastName: 'Vandy',
firstName: 'حمیدرضا',
lastName: 'رنجبرپور',
},
address: '722 Emie Stream',
city: 'Lincoln',
state: 'Nebraska',
address: 'فلان جا',
city: 'اصفهان',
state: 'بررسی شده',
price: '45',
updated_at: '2024/05/02',
company: 'ایرانول',
area: 'منطقه 21',
},
{
name: {
firstName: 'Joshua',
lastName: 'Rolluffs',
firstName: 'محمد',
lastName: 'جلالی',
},
address: '32188 Larkin Turnpike',
city: 'Charleston',
state: 'South Carolina',
address: 'فلان جا',
city: 'رشت',
state: 'درحال بررسی',
price: '8',
updated_at: '2024/05/02',
company: 'فیلیمو',
area: 'منطقه 8',
},
];
@@ -116,7 +136,7 @@ const DataTable = (props) => {
...props
})
return <DataTable_Main table={table} columns={columns}/>;
return <DataTable_Main table={table} columns={flatColumns}/>;
};
export default DataTable;