From 95c63f1058df26e8710d3102e5898f6633dbbfb0 Mon Sep 17 00:00:00 2001
From: Yasiu1376 <yasaman1376529@gmail.com>
Date: Wed, 21 Feb 2024 13:35:00 +0330
Subject: [PATCH] change and merge yasi and mohamad code

---
 src/app/page.js                       | 87 +-----------------------
 src/components/DataTableMain.jsx      | 96 +++++++++++++++++++++++++++
 src/components/FilterColumn.jsx       | 17 ++---
 src/components/TextFieldWithFnBox.jsx |  9 +--
 4 files changed, 112 insertions(+), 97 deletions(-)
 create mode 100644 src/components/DataTableMain.jsx

diff --git a/src/app/page.js b/src/app/page.js
index ea420f9..7690561 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -1,93 +1,10 @@
-import DataTableTest from "@/components/DataTableTest";
-import FilterColumn from "@/components/FilterColumn";
-import {useMemo} from "react";
+import DataTableMain from "@/components/DataTableMain";
 
 function page() {
 
-    const columns = useMemo(
-        () => [
-            {
-                accessorKey: 'name.firstName',
-                header: 'نام',
-                size: 150,
-                id: "firstName",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
-                ],
-            },
-            {
-                accessorKey: 'name.lastName',
-                header: 'نام خانوادگی',
-                size: 150,
-                id: "lastName",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
-                ],
-            },
-            {
-                accessorKey: 'address',
-                header: 'آدرس',
-                size: 200,
-                id: "address",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
-                ],
-            },
-            {
-                accessorKey: 'city',
-                header: 'شهر',
-                size: 150,
-                id: "city",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains",
-                    "lessThan",
-                    "greaterThan",
-                    "between",
-                ],
-
-            },
-            {
-                accessorKey: 'state',
-                header: 'وضعیت',
-                size: 150,
-                id: "state",
-                text:'نام',
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
-                ],
-            },
-        ],
-        [],
-    );
     return (
         <>
-            <DataTableTest  columns={columns}/>
-            <FilterColumn column={columns}/>
+            <DataTableMain />
         </>
 
     );
diff --git a/src/components/DataTableMain.jsx b/src/components/DataTableMain.jsx
new file mode 100644
index 0000000..76f4b28
--- /dev/null
+++ b/src/components/DataTableMain.jsx
@@ -0,0 +1,96 @@
+import DataTableTest from "@/components/DataTableTest";
+import FilterColumn from "@/components/FilterColumn";
+import {useMemo} from "react";
+
+function DataTableMain() {
+
+    const columns = useMemo(
+        () => [
+            {
+                accessorKey: 'name.firstName',
+                header: 'نام',
+                size: 150,
+                id: "firstName",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains"
+                ],
+            },
+            {
+                accessorKey: 'name.lastName',
+                header: 'نام خانوادگی',
+                size: 150,
+                id: "lastName",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains"
+                ],
+            },
+            {
+                accessorKey: 'address',
+                header: 'آدرس',
+                size: 200,
+                id: "address",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains"
+                ],
+            },
+            {
+                accessorKey: 'city',
+                header: 'شهر',
+                size: 150,
+                id: "city",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+
+            },
+            {
+                accessorKey: 'state',
+                header: 'وضعیت',
+                size: 150,
+                id: "state",
+                text:'نام',
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains"
+                ],
+            },
+        ],
+        [],
+    );
+    return (
+        <>
+            <DataTableTest  columns={columns}/>
+            <FilterColumn column={columns}/>
+        </>
+
+    );
+}
+
+export default DataTableMain;
diff --git a/src/components/FilterColumn.jsx b/src/components/FilterColumn.jsx
index 37aa24a..28cbf0a 100644
--- a/src/components/FilterColumn.jsx
+++ b/src/components/FilterColumn.jsx
@@ -18,12 +18,14 @@ function FilterColumn({ onSubmit , column }) {
     const [tableName, setTableName] = useState('loan_table');
     const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting();
 
+
     useEffect(() => {
-        const initialFilters = column
-            .filter(col => col.enableColumnFilter)
-            .map(col => ({ id: col.field, fn: col.filterFn }));
-        setSelectedFilters(initialFilters);
-    }, [column]);
+
+        const settingValue = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || [];
+        setSelectedFilters(settingValue.length > 0 ? settingValue : []);
+        console.log(selectedFilters)
+
+    }, [settingStore]);
 
     const handleSelectFilter = (fieldName, filterFn) => {
         const updatedFilters = [...selectedFilters];
@@ -63,10 +65,9 @@ function FilterColumn({ onSubmit , column }) {
                         column.enableColumnFilter &&
                         <TextFieldWithFnBox
                             key={index}
+                            id={column.id}
                             formik={formik}
-                            fieldName={column.field}
-                            label={column.label}
-                            defaultFilter={column.defaultFilter}
+                            defaultFilter={column.filterFn}
                             columnFilterModeOptions={column.columnFilterModeOptions}
                             onSelectFilter={(filterFn) => handleSelectFilter(column.field, filterFn)}
                         />
diff --git a/src/components/TextFieldWithFnBox.jsx b/src/components/TextFieldWithFnBox.jsx
index c8eff76..a3c277d 100644
--- a/src/components/TextFieldWithFnBox.jsx
+++ b/src/components/TextFieldWithFnBox.jsx
@@ -3,7 +3,7 @@ import AlignHorizontalCenterIcon from '@mui/icons-material/AlignHorizontalCenter
 import {useState} from "react";
 // import FilterBox from "@/components/FiterBox";
 
-const TextFieldWithFnBox = ({formik, fieldName , label ,  defaultFilter , columnFilterModeOptions ,onSelectFilter}) => {
+const TextFieldWithFnBox = ({formik, id ,  defaultFilter , columnFilterModeOptions ,onSelectFilter}) => {
     const [anchorEl, setAnchorEl] = useState(null);
     const [open, setOpen] = useState(false);
 
@@ -20,9 +20,10 @@ const TextFieldWithFnBox = ({formik, fieldName , label ,  defaultFilter , column
     return (
         <>
             <TextField
-                name={fieldName}
-                label={label}
-                value={formik.values[fieldName]}
+                name={id}
+                label={id}
+                id={id}
+                value={formik.values[id]}
                 onChange={formik.handleChange}
                 fullWidth
                 margin="normal"