diff --git a/src/components/home/index.jsx b/src/components/home/index.jsx index 4efdf85..2682b64 100644 --- a/src/components/home/index.jsx +++ b/src/components/home/index.jsx @@ -17,6 +17,7 @@ function HomeComponent() { enableColumnFilter: true, datatype: "text", filterFn: "contains", + inputType: "textField", enableClickToCopy: true, columnFilterModeOptions: [ "equals", @@ -31,6 +32,7 @@ function HomeComponent() { enableColumnFilter: true, datatype: "text", filterFn: "equals", + inputType: "textField", columnFilterModeOptions: [ "equals", "notEquals", @@ -38,14 +40,6 @@ function HomeComponent() { ], }, ], - enableColumnFilter: true, - datatype: "text", - filterFn: "notEquals", - columnFilterModeOptions: [ - "equals", - "notEquals", - "contains" - ], }, { accessorKey: 'address', @@ -53,7 +47,8 @@ function HomeComponent() { id: "address", enableColumnFilter: true, datatype: "text", - filterFn: "contains", + filterFn: "notEquals", + inputType: "textField", columnFilterModeOptions: [ "equals", "notEquals", @@ -66,13 +61,15 @@ function HomeComponent() { id: "city", enableColumnFilter: true, datatype: "text", - filterFn: "contains", + filterFn: "equals", + inputType: "textField", columnFilterModeOptions: [ "equals", "notEquals", "contains", "lessThan", "greaterThan", + "fuzzy" ], }, @@ -80,10 +77,10 @@ function HomeComponent() { accessorKey: 'state', header: 'وضعیت', id: "state", - text: 'نام', enableColumnFilter: true, datatype: "text", filterFn: "contains", + inputType: "textField", columnFilterModeOptions: [ "equals", "notEquals", @@ -91,46 +88,40 @@ function HomeComponent() { ], }, { - accessorKey: 'state', + accessorKey: 'price', header: 'محدوده', - id: "betweenNum", - text: 'محدوده', + id: "price", enableColumnFilter: true, - datatype: "text", - filterFn: "betweenNum", - columnFilterModeOptions: [], + datatype: "nemeric", + filterFn: "between", + inputType: "betweenNum", }, { - accessorKey: 'state', - header: 'تاریخ', - id: "betweenDate", - text: 'تاریخ', + accessorKey: 'updated_at', + header: 'تاریخ بروزرسانی', + id: "updated_at", enableColumnFilter: true, - datatype: "text", - filterFn: "betweenDate", - columnFilterModeOptions: [], + datatype: "date", + filterFn: "between", + inputType: "betweenDate", }, { - accessorKey: 'state', - header: 'شلکت', - id: "select2", - text: 'تاریخ', - type: 'select2', + accessorKey: 'company', + header: 'نام شرکت', + id: "company", enableColumnFilter: true, datatype: "text", filterFn: "equals", - columnFilterModeOptions: [], + inputType: "select2", }, { - accessorKey: 'state', - header: 'سلکت', - id: "select", - text: 'تنتنت', - type: 'select', + accessorKey: 'area', + header: 'منطقه', + id: "area", enableColumnFilter: true, datatype: "text", filterFn: "equals", - columnFilterModeOptions: [], + inputType: "select", }, ], [], diff --git a/src/core/components/DataTable/filter/FilterColumn.jsx b/src/core/components/DataTable/filter/FilterColumn.jsx index 1daa295..efe809b 100644 --- a/src/core/components/DataTable/filter/FilterColumn.jsx +++ b/src/core/components/DataTable/filter/FilterColumn.jsx @@ -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}) { {columns.map((column, index) => ( column.enableColumnFilter && - (column.filterFn === 'betweenDate' ? + (column.inputType === 'betweenDate' ? handleSelectFilter(column.id, filterFn)} defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''} /> - : column.filterFn === 'betweenNum' ? + : column.inputType === 'betweenNum' ? handleSelectFilter(column.id, filterFn)} defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ["", ""]} /> - : column.type === 'select2' ? + : column.inputType === 'select2' ? handleSelectFilter(column.id, filterFn)} defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || []} /> - : column.type === 'select' ? + : column.inputType === 'select' ? 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 || ''} diff --git a/src/core/components/DataTable/filter/TextFieldWithFnBox/FilterBox.jsx b/src/core/components/DataTable/filter/TextFieldWithFnBox/FilterBox.jsx index 25f10c6..3bba610 100644 --- a/src/core/components/DataTable/filter/TextFieldWithFnBox/FilterBox.jsx +++ b/src/core/components/DataTable/filter/TextFieldWithFnBox/FilterBox.jsx @@ -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({ {columnFilterModeOptions.map((option, index) => ( handleSelectFilter(option)} - selected={option === defaultFilter} sx={{cursor: 'pointer'}}> + selected={option === selectedFilter} sx={{cursor: 'pointer'}}> ))} diff --git a/src/core/components/DataTable/index.js b/src/core/components/DataTable/index.js index 408994a..aba1d1c 100644 --- a/src/core/components/DataTable/index.js +++ b/src/core/components/DataTable/index.js @@ -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 ; + return ; }; export default DataTable;