From fddf62921472fadc8a509308588ae1f29baff7d5 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Sat, 25 May 2024 17:32:26 +0330 Subject: [PATCH] design filter part and do step1 (default value for filterFn) --- src/components/home/index.jsx | 33 +++-- .../DataTable/filter/FilterBody.jsx | 139 ++++++++++++------ .../DataTable/filter/FilterBodyField.jsx | 59 +++++++- .../DataTable/filter/FilterHeader.jsx | 32 ++++ .../DataTable/filter/FilterOptionList.jsx | 29 ++++ 5 files changed, 232 insertions(+), 60 deletions(-) create mode 100644 src/core/components/DataTable/filter/FilterHeader.jsx create mode 100644 src/core/components/DataTable/filter/FilterOptionList.jsx diff --git a/src/components/home/index.jsx b/src/components/home/index.jsx index 2682b64..f8a3d65 100644 --- a/src/components/home/index.jsx +++ b/src/components/home/index.jsx @@ -14,10 +14,9 @@ function HomeComponent() { accessorKey: 'name.firstName', header: 'نام', id: "firstName", - enableColumnFilter: true, + enableColumnFilter: false, datatype: "text", filterFn: "contains", - inputType: "textField", enableClickToCopy: true, columnFilterModeOptions: [ "equals", @@ -32,7 +31,6 @@ function HomeComponent() { enableColumnFilter: true, datatype: "text", filterFn: "equals", - inputType: "textField", columnFilterModeOptions: [ "equals", "notEquals", @@ -48,7 +46,6 @@ function HomeComponent() { enableColumnFilter: true, datatype: "text", filterFn: "notEquals", - inputType: "textField", columnFilterModeOptions: [ "equals", "notEquals", @@ -62,7 +59,6 @@ function HomeComponent() { enableColumnFilter: true, datatype: "text", filterFn: "equals", - inputType: "textField", columnFilterModeOptions: [ "equals", "notEquals", @@ -80,7 +76,6 @@ function HomeComponent() { enableColumnFilter: true, datatype: "text", filterFn: "contains", - inputType: "textField", columnFilterModeOptions: [ "equals", "notEquals", @@ -94,7 +89,11 @@ function HomeComponent() { enableColumnFilter: true, datatype: "nemeric", filterFn: "between", - inputType: "betweenNum", + columnFilterModeOptions: [ + "equals", + "notEquals", + "between" + ], }, { accessorKey: 'updated_at', @@ -103,16 +102,24 @@ function HomeComponent() { enableColumnFilter: true, datatype: "date", filterFn: "between", - inputType: "betweenDate", + columnFilterModeOptions: [ + "equals", + "notEquals", + "between" + ], }, { accessorKey: 'company', header: 'نام شرکت', id: "company", enableColumnFilter: true, - datatype: "text", + datatype: "select2", filterFn: "equals", - inputType: "select2", + columnFilterModeOptions: [ + "equals", + "notEquals", + "contains" + ], }, { accessorKey: 'area', @@ -121,7 +128,11 @@ function HomeComponent() { enableColumnFilter: true, datatype: "text", filterFn: "equals", - inputType: "select", + columnFilterModeOptions: [ + "equals", + "notEquals", + "contains" + ], }, ], [], diff --git a/src/core/components/DataTable/filter/FilterBody.jsx b/src/core/components/DataTable/filter/FilterBody.jsx index b87f980..42e826b 100644 --- a/src/core/components/DataTable/filter/FilterBody.jsx +++ b/src/core/components/DataTable/filter/FilterBody.jsx @@ -1,58 +1,103 @@ 'use client' -import {Box, Drawer, IconButton, Typography} from "@mui/material"; -import CancelIcon from '@mui/icons-material/Cancel'; +import {Box, Button, Drawer, styled} from "@mui/material"; +import {Form, Formik} from "formik"; +import useTableSetting from "@/lib/hooks/useTableSetting"; +import {useEffect, useState} from "react"; import FilterBodyField from "@/core/components/DataTable/filter/FilterBodyField"; +import FilterHeader from "@/core/components/DataTable/filter/FilterHeader"; + +const ScrollBox = styled(Box)({ + flexGrow: 1, + padding: '16px', + overflowY: 'scroll', + maxWidth: "450px", + '::-webkit-scrollbar': { + width: '5px', + }, + '::-webkit-scrollbar-track': { + boxShadow: 'inset 0 0 5px #fff', + borderRadius: '5px', + }, + '::-webkit-scrollbar-thumb': { + background: '#16534a', + borderRadius: '0px', + }, + '::-webkit-scrollbar-thumb:hover': { + background: '#ffffff', + }, +}); function FilterBody({columns, drawerState, setDrawerState}) { - // const initialValues = columns.reduce((acc, column) => { - // if (column.enableColumnFilter) { - // 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 || ["", ""]; - // } else if (column.type === 'select2') { - // acc[column.id] = filter?.value || []; - // } else { - // acc[column.id] = filter?.value || ''; - // } - // } - // return acc; - // }, {}); - // const initialValues = {}; + const [userId, setUserId] = useState(0); + const [pageName, setPageName] = useState('testPage'); + const [tableName, setTableName] = useState('testTable'); + const {settingStore, filterAction} = useTableSetting(); + + const [initialValues, setInitialValues] = useState({}); + + useEffect(() => { + const values = columns.reduce((acc, column) => { + if (!column.enableColumnFilter) return acc; + const filter = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters']?.find((filter) => filter.id === column.id); + if (column.datatype === 'select2') { + acc[column.id] = filter?.value || []; + } else { + acc[column.id] = filter?.value || ''; + } + return acc; + }, {}); + setInitialValues(values); + }, [columns, settingStore, userId, pageName, tableName]); + + const handleSubmit = (values) => { + console.log("Form values:", values); + }; + return ( - { - setDrawerState(false) - }}> - - فیلتر - { - setDrawerState(false) - }}> - - - - - {/**/} - {columns.map((column) => { - - })} - {/**/} + setDrawerState(false)} + sx={{overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%"}}> + + + {Object.keys(initialValues).length > 0 && ( + + {({values, handleChange, handleBlur}) => ( +
+ {columns.map((column) => ( + column.enableColumnFilter && ( + + ) + ))} + + )} +
+ )} + + + ); } -export default FilterBody; +export default FilterBody; \ No newline at end of file diff --git a/src/core/components/DataTable/filter/FilterBodyField.jsx b/src/core/components/DataTable/filter/FilterBodyField.jsx index e78697e..9d20133 100644 --- a/src/core/components/DataTable/filter/FilterBodyField.jsx +++ b/src/core/components/DataTable/filter/FilterBodyField.jsx @@ -1,8 +1,63 @@ 'use client' -function FilterBodyField({column}) { +import {InputAdornment, TextField, Typography} from "@mui/material"; +import FilterListIcon from '@mui/icons-material/FilterList'; +import {useState} from "react"; +import FilterOptionList from "@/core/components/DataTable/filter/FilterOptionList"; +import useTableSetting from "@/lib/hooks/useTableSetting"; + +const columnFilterModeOptionFa = { + equals: "برابر", + notEquals: "نابرابر", + contains: "شامل", + lessThan: "کوچکتر", + greaterThan: "بزرگتر", + fuzzy: "فازی", + between: "مابین" +} + +function FilterBodyField({column, value}) { + const [anchorEl, setAnchorEl] = useState(null); + const [userId, setUserId] = useState(0); + const [pageName, setPageName] = useState('testPage'); + const [tableName, setTableName] = useState('testTable'); + const {settingStore} = useTableSetting(); + const defaultFilter = (settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.fn || column._filterFn; + const defaultFilterTranslation = columnFilterModeOptionFa[defaultFilter] || defaultFilter; + + const HandleOpenFilterBox = (event) => { + setAnchorEl(event.currentTarget); + }; + const handleCloseFilterBox = () => { + setAnchorEl(null); + }; + return ( - asdasdasd + <> + + نوع فیلتر: {defaultFilterTranslation} + } + variant="outlined" + size="normal" + sx={{marginY: 1}} + InputProps={{ + endAdornment: ( + + + + ), + }} + /> + + ); } diff --git a/src/core/components/DataTable/filter/FilterHeader.jsx b/src/core/components/DataTable/filter/FilterHeader.jsx new file mode 100644 index 0000000..015801d --- /dev/null +++ b/src/core/components/DataTable/filter/FilterHeader.jsx @@ -0,0 +1,32 @@ +'use client' + +import {Box, IconButton, Typography} from "@mui/material"; +import CancelIcon from '@mui/icons-material/Cancel'; +import FilterAltIcon from '@mui/icons-material/FilterAlt'; + +function FilterHeader({setDrawerState}) { + return ( + + + + فیلتر + + setDrawerState(false)}> + + + + ); +} + +export default FilterHeader; \ No newline at end of file diff --git a/src/core/components/DataTable/filter/FilterOptionList.jsx b/src/core/components/DataTable/filter/FilterOptionList.jsx new file mode 100644 index 0000000..fb4fc46 --- /dev/null +++ b/src/core/components/DataTable/filter/FilterOptionList.jsx @@ -0,0 +1,29 @@ +'use client' + +import {ListItem, Menu} from "@mui/material"; +import {useState} from "react"; + +function FilterOptionList({defaultFilter, filterOption, handleCloseFilterBox, anchorEl, columnFilterModeOptionFa}) { + + const [selectedFilter, setSelectedFilter] = useState(defaultFilter); + + return ( + + {filterOption.map((option, index) => ( + + {columnFilterModeOptionFa[option]} + + ))} + + ); +} + +export default FilterOptionList;