complete making needed data for keeping in local storage

src/app/(withAuth)/dashboard/template.js

@@ -2,7 +2,6 @@ import {Box, Stack} from "@mui/material";
 import HeaderWithLogo from "@/components/layouts/dashboard/headerWithLogo";
 import HeaderWithSidebar from "@/components/layouts/dashboard/headerWithSidebar";
 import 'react-toastify/dist/ReactToastify.css';
-import {ToastContainer} from "react-toastify";
 
 const Template = ({children}) => {
     return (<Stack>
@@ -10,7 +9,6 @@ const Template = ({children}) => {
         <Box>
             <HeaderWithSidebar>
                 {children}
-                <ToastContainer/>
             </HeaderWithSidebar>
         </Box>
     </Stack>)

src/components/home/index.jsx

@@ -87,11 +87,10 @@ function HomeComponent() {
                 id: "price",
                 enableColumnFilter: true,
                 datatype: "numeric",
-                filterFn: "between",
+                filterFn: "equals",
                 columnFilterModeOptions: [
                     "equals",
                     "notEquals",
-                    "between"
                 ],
             },
             {

src/core/components/DataTable/Main.js

@@ -4,6 +4,7 @@ import {FA_DATATABLE_LOCALIZATION} from "./localization/fa/datatable";
 import useTableSetting from "@/lib/hooks/useTableSetting";
 import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects";
 import Toolbar from "@/components/home/Toolbar";
+import useDataTable from "@/lib/hooks/useDataTable";
 
 const data = [
     {
@@ -74,6 +75,7 @@ const data = [
 ];
 
 const DataTable_Main = (props) => {
+    const {filterData} = useDataTable();
     const {userId, pageName, tableName, columns, initialStateProps} = props
 
     const flatColumns = flattenArrayOfObjects(columns, 'columns')

src/core/components/DataTable/filter/FilterBody.jsx

@@ -3,12 +3,13 @@
 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 {useEffect, useRef, useState} from "react";
 import FilterHeader from "@/core/components/DataTable/filter/FilterHeader";
 import * as Yup from "yup";
 import FilterBodyField from "@/core/components/DataTable/filter/FilterBodyField";
 import {toast} from "react-toastify";
 import AskForKeep from "@/core/components/NotificationDesign/AskForKeep";
+import useDataTable from "@/lib/hooks/useDataTable";
 
 const ScrollBox = styled(Box)({
     flexGrow: 1,
@@ -30,6 +31,13 @@ const ScrollBox = styled(Box)({
 function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tableName}) {
     const {settingStore, filterAction} = useTableSetting();
     const [initialValues, setInitialValues] = useState({});
+    const [validationSchema, setValidationSchema] = useState({});
+    const {filterData, setFilterData} = useDataTable();
+    const filterDataRef = useRef(filterData); // Create a ref to hold the latest filterData
+
+    useEffect(() => {
+        filterDataRef.current = filterData; // Update ref whenever filterData changes
+    }, [filterData]);
 
     useEffect(() => {
         const values = columns.reduce((acc, column) => {
@@ -37,18 +45,21 @@ function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tab
             const filter = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters']?.find((filter) => filter.id === column.id);
             if (column.datatype === 'array') {
                 acc[column.id] = {
+                    id: column.id,
                     value: filter?.value || [],
                     filterFn: filter?.fn || column._filterFn,
                     datatype: column.datatype
                 };
             } else if (column._filterFn === "between") {
                 acc[column.id] = {
+                    id: column.id,
                     value: filter?.value || ["", ""],
                     filterFn: filter?.fn || column._filterFn,
                     datatype: column.datatype
                 };
             } else {
                 acc[column.id] = {
+                    id: column.id,
                     value: filter?.value || '',
                     filterFn: filter?.fn || column._filterFn,
                     datatype: column.datatype
@@ -56,39 +67,47 @@ function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tab
             }
             return acc;
         }, {});
-        setInitialValues(values);
+        setInitialValues(Object.keys(filterData).length !== 0 ? filterData : values);
-    }, [columns, settingStore, userId, pageName, tableName]);
+    }, [columns, settingStore, userId, pageName, tableName, filterData]);
+
+
+    useEffect(() => {
+        const generatedSchema = Yup.object().shape(
+            Object.keys(initialValues).reduce((acc, key) => {
+                const initialValue = initialValues[key];
+                if (initialValue.filterFn === "between") {
+                    acc[key] = Yup.object().shape({
+                        value: Yup.array()
+                            .of(Yup.string().nullable())
+                            .test({
+                                test(value, ctx) {
+                                    const [start, end] = value || ["", ""];
+                                    if (initialValue.datatype === "numeric" && parseInt(end, 10) <= parseInt(start, 10)) {
+                                        return ctx.createError({
+                                            message: `مقدار وارده باید بیشتر از (${start}) باشد`,
+                                        });
+                                    } else if ((start && !end) || (!start && end)) {
+                                        return ctx.createError({
+                                            message: "این بخش را تکمیل نمایید",
+                                        });
+                                    }
+                                    return true;
+                                },
+                            }),
+                    });
+                }
+                return acc;
+            }, {})
+        );
+
+        setValidationSchema(generatedSchema);
+    }, [initialValues]);
 
-    const validationSchema = Yup.object().shape(
-        columns.reduce((acc, column) => {
-            if (column._filterFn === "between") {
-                acc[column.id] = Yup.object().shape({
-                    value: Yup.array()
-                        .of(Yup.string().nullable())
-                        .test({
-                            test(value, ctx) {
-                                const [start, end] = value || ["", ""];
-                                if (column.datatype === "numeric" && start && end && parseInt(end, 10) <= parseInt(start, 10)) {
-                                    return ctx.createError({
-                                        message: `مقدار وارده باید بیشتر از (${start}) باشد`,
-                                    });
-                                } else if ((start && !end) || (!start && end)) {
-                                    return ctx.createError({
-                                        message: "این بخش را تکمیل نمایید",
-                                    });
-                                }
-                                return true;
-                            },
-                        }),
-                });
-            }
-            return acc;
-        }, {})
-    );
 
     const handleSubmit = (values, {setSubmitting}) => {
         toast.dismiss({containerId: "filtering"});
         setDrawerState(false);
+        setFilterData(values);
         toast(<AskForKeep onSaveFilter={onSaveFilter}/>, {
             containerId: "filtering",
             className: "filter-toast",
@@ -100,6 +119,15 @@ function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tab
     };
 
     const onSaveFilter = () => {
+        const currentFilterData = filterDataRef.current; // Use the ref to get the latest filterData
+        const arrayOfObjects = Object.keys(currentFilterData).map(key => {
+            const value = currentFilterData[key].value;
+            if (value !== "" &&
+                !(Array.isArray(value) && (value.length === 0 || (value.length === 2 && value[0] === "" && value[1] === "")))) {
+                return currentFilterData[key];
+            }
+        }).filter(Boolean);
+        console.log("arrayOfObjects", arrayOfObjects);
         toast.dismiss({containerId: "filtering"});
     };
 
@@ -168,7 +196,6 @@ function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tab
                                         </Button>
                                     </Box>
                                 </Form>
-
                             )}
                     </Formik>
                 </ScrollBox>

src/core/components/DataTable/filter/FilterBodyField.jsx

@@ -36,7 +36,7 @@ function FilterBodyField({
 
     return (
         <>
-            {column.datatype === "numeric" && filterParameters.filterFn === "between" ? (
+            {filterParameters.datatype === "numeric" && filterParameters.filterFn === "between" ? (
                 <CustomTextFieldRange
                     column={column}
                     filterParameters={filterParameters}
@@ -47,7 +47,7 @@ function FilterBodyField({
                     errors={errors}
                     touched={touched}
                 />
-            ) : column.datatype === "numeric" && filterParameters.filterFn === "equals" && Array.isArray(column.columnSelectOption) ? (
+            ) : filterParameters.datatype === "numeric" && filterParameters.filterFn === "equals" && Array.isArray(column.columnSelectOption) ? (
                 <CustomSelect
                     column={column}
                     filterParameters={filterParameters}
@@ -55,7 +55,7 @@ function FilterBodyField({
                     defaultFilterTranslation={defaultFilterTranslation}
                     handleOpenFilterBox={handleOpenFilterBox}
                 />
-            ) : column.datatype === "date" && filterParameters.filterFn === "equals" ? (
+            ) : filterParameters.datatype === "date" && filterParameters.filterFn === "equals" ? (
                 <CustomDatePicker
                     column={column}
                     filterParameters={filterParameters}
@@ -63,7 +63,7 @@ function FilterBodyField({
                     defaultFilterTranslation={defaultFilterTranslation}
                     handleOpenFilterBox={handleOpenFilterBox}
                 />
-            ) : column.datatype === "date" && filterParameters.filterFn === "between" ? (
+            ) : filterParameters.datatype === "date" && filterParameters.filterFn === "between" ? (
                 <CustomDatePickerRange
                     column={column}
                     filterParameters={filterParameters}
@@ -73,7 +73,7 @@ function FilterBodyField({
                     errors={errors}
                     touched={touched}
                 />
-            ) : column.datatype === "array" && filterParameters.filterFn === "equals" ? (
+            ) : filterParameters.datatype === "array" && filterParameters.filterFn === "equals" ? (
                 <CustomSelectMultiple
                     column={column}
                     filterParameters={filterParameters}

src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx

@@ -9,6 +9,7 @@ function CustomTextField({
                              handleChange,
                              handleBlur
                          }) {
+
     return (
         <TextField
             id={column.id}

src/core/components/DataTable/index.js

@@ -1,8 +1,11 @@
 import DataTable_Main from "./Main";
+import DataTableProvider from "@/lib/contexts/DataTable";
 
 const DataTable = (props) => {
     return (
-        <DataTable_Main {...props}/>
+        <DataTableProvider>
+            <DataTable_Main {...props}/>
+        </DataTableProvider>
     );
 };
 

src/lib/contexts/DataTable.jsx

@@ -0,0 +1,15 @@
+import {createContext, useState} from "react";
+
+export const DataTableContext = createContext();
+
+const DataTableProvider = ({children}) => {
+    const [filterData, setFilterData] = useState({});
+
+    return (
+        <DataTableContext.Provider value={{filterData, setFilterData}}>
+            {children}
+        </DataTableContext.Provider>
+    );
+};
+
+export default DataTableProvider;

src/lib/hooks/useDataTable.jsx

@@ -0,0 +1,9 @@
+import {useContext} from "react";
+import {DataTableContext} from "@/lib/contexts/DataTable";
+
+const useTableSetting = () => {
+    const {filterData, setFilterData} = useContext(DataTableContext);
+    return {filterData, setFilterData};
+};
+
+export default useTableSetting;