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

63
src/components/home/index.jsx
View File

@@ -17,6 +17,7 @@ function HomeComponent() {
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "contains", filterFn: "contains",
inputType: "textField",
enableClickToCopy: true, enableClickToCopy: true,
columnFilterModeOptions: [ columnFilterModeOptions: [
"equals", "equals",
@@ -31,6 +32,7 @@ function HomeComponent() {
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "equals", filterFn: "equals",
inputType: "textField",
columnFilterModeOptions: [ columnFilterModeOptions: [
"equals", "equals",
"notEquals", "notEquals",
@@ -38,14 +40,6 @@ function HomeComponent() {
], ],
}, },
], ],
enableColumnFilter: true,
datatype: "text",
filterFn: "notEquals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
}, },
{ {
accessorKey: 'address', accessorKey: 'address',
@@ -53,7 +47,8 @@ function HomeComponent() {
id: "address", id: "address",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "contains", filterFn: "notEquals",
inputType: "textField",
columnFilterModeOptions: [ columnFilterModeOptions: [
"equals", "equals",
"notEquals", "notEquals",
@@ -66,13 +61,15 @@ function HomeComponent() {
id: "city", id: "city",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "contains", filterFn: "equals",
inputType: "textField",
columnFilterModeOptions: [ columnFilterModeOptions: [
"equals", "equals",
"notEquals", "notEquals",
"contains", "contains",
"lessThan", "lessThan",
"greaterThan", "greaterThan",
"fuzzy"
], ],
}, },
@@ -80,10 +77,10 @@ function HomeComponent() {
accessorKey: 'state', accessorKey: 'state',
header: 'وضعیت', header: 'وضعیت',
id: "state", id: "state",
text: 'نام',
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "contains", filterFn: "contains",
inputType: "textField",
columnFilterModeOptions: [ columnFilterModeOptions: [
"equals", "equals",
"notEquals", "notEquals",
@@ -91,46 +88,40 @@ function HomeComponent() {
], ],
}, },
{ {
accessorKey: 'state', accessorKey: 'price',
header: 'محدوده', header: 'محدوده',
id: "betweenNum", id: "price",
text: 'محدوده',
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "nemeric",
filterFn: "betweenNum", filterFn: "between",
columnFilterModeOptions: [], inputType: "betweenNum",
}, },
{ {
accessorKey: 'state', accessorKey: 'updated_at',
header: 'تاریخ', header: 'تاریخ بروزرسانی',
id: "betweenDate", id: "updated_at",
text: 'تاریخ',
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "date",
filterFn: "betweenDate", filterFn: "between",
columnFilterModeOptions: [], inputType: "betweenDate",
}, },
{ {
accessorKey: 'state', accessorKey: 'company',
header: 'شلکت', header: 'نام شرکت',
id: "select2", id: "company",
text: 'تاریخ',
type: 'select2',
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "equals", filterFn: "equals",
columnFilterModeOptions: [], inputType: "select2",
}, },
{ {
accessorKey: 'state', accessorKey: 'area',
header: 'سلکت', header: 'منطقه',
id: "select", id: "area",
text: 'تنتنت',
type: 'select',
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "equals", filterFn: "equals",
columnFilterModeOptions: [], inputType: "select",
}, },
], ],
[], [],

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

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

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

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

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