custom notification and duplicate index of datatable to main and start making context for table filtering

public/global.scss

@@ -1 +1,7 @@
-@import "fontiran";
+@import "fontiran";
+
+.filter-toast {
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+  background-color: #d0dfe8;
+  border: 1px dashed #095b8c;
+}

src/components/home/Toolbar.jsx

@@ -1,15 +1,9 @@
 import {Button} from "@mui/material";
-import {toast} from "react-toastify";
 
 const Toolbar = ({columns}) => {
-
-    const notif = () => {
-        toast("Wow so easy!")
-    }
-
     return (
         <>
-            <Button onClick={notif}>add something</Button>
+            <Button>add something</Button>
         </>
     )
 }

src/core/components/DataTable/Main.js

@@ -1,19 +1,149 @@
-import {useMaterialReactTable} from "material-react-table";
 import DataTable_Paper from "./table/Paper";
+import {useMaterialReactTable} from "material-react-table";
+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";
 
-const isTableInstanceProp = (props) => props.table !== undefined;
+const data = [
+    {
+        name: {
+            firstName: 'امین',
+            lastName: 'قاسمپور',
+        },
+        address: 'فلان جا',
+        city: 'تهران',
+        state: 'بررسی شده',
+        price: '20',
+        updated_at: '2024/05/02',
+        company: 'همراه اول',
+        area: 'منطقه 5',
+    },
+    {
+        name: {
+            firstName: 'امیر حسین',
+            lastName: 'محمودی',
+        },
+        address: 'فلان جا',
+        city: 'تهران',
+        state: 'تکمیل شده',
+        price: '27',
+        updated_at: '2024/05/02',
+        company: 'وایتل',
+        area: 'منطقه 27',
+    },
+    {
+        name: {
+            firstName: 'یاسمن',
+            lastName: 'علی اکبری',
+        },
+        address: 'فلان جا',
+        city: 'شیراز',
+        state: 'بررسی شده',
+        price: '32',
+        updated_at: '2024/05/02',
+        company: 'ایرانسل',
+        area: 'منطقه 23',
+    },
+    {
+        name: {
+            firstName: 'حمیدرضا',
+            lastName: 'رنجبرپور',
+        },
+        address: 'فلان جا',
+        city: 'اصفهان',
+        state: 'بررسی شده',
+        price: '45',
+        updated_at: '2024/05/02',
+        company: 'ایرانول',
+        area: 'منطقه 21',
+    },
+    {
+        name: {
+            firstName: 'محمد',
+            lastName: 'جلالی',
+        },
+        address: 'فلان جا',
+        city: 'رشت',
+        state: 'درحال بررسی',
+        price: '8',
+        updated_at: '2024/05/02',
+        company: 'فیلیمو',
+        area: 'منطقه 8',
+    },
+];
 
 const DataTable_Main = (props) => {
-    let table;
+    const {userId, pageName, tableName, columns, initialStateProps} = props
 
-    if (isTableInstanceProp(props)) {
+    const flatColumns = flattenArrayOfObjects(columns, 'columns')
-        table = props.table;
+    const {settingStore, hideAction, sortAction} = useTableSetting();
-    } else {
+
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+    const onColumnVisibilityChange = (event) => {
-        table = useMaterialReactTable(props);
+        const settingValue = event();
+        hideAction(userId, pageName, tableName, settingValue, flatColumns);
+    };
+    const onSortingChange = (event) => {
+        const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []);
+        sortAction(userId, pageName, tableName, settingValue, flatColumns);
     }
 
-    return <DataTable_Paper table={table} columns={props.columns}/>;
+    const table = useMaterialReactTable({
+        localization: FA_DATATABLE_LOCALIZATION,
+        columns,
+        data: data,
+        // manualSorting: true,
+        renderTopToolbarCustomActions: ({table}) => (<>
+            <Toolbar
+                columns={flatColumns}
+            />
+        </>),
+        initialState: {
+            density: 'compact',
+            columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
+            sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [],
+            ...initialStateProps
+        },
+        state: {
+            columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
+            sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
+        },
+        muiTableHeadProps: {
+            sx: {
+                borderTop: "1px solid #e1e1e1",
+                borderBottom: "2px solid #e1e1e1",
+            }
+        },
+        muiTableHeadCellProps: {
+            sx: {
+                color: "primary.main",
+                borderLeft: "1px solid #e1e1e1",
+                "&:first-of-type": {
+                    borderLeft: "unset"
+                }
+            },
+        },
+        muiTableBodyCellProps: {
+            sx: {
+                borderLeft: "1px solid #e1e1e1",
+                "&:first-of-type": {
+                    borderLeft: "unset"
+                }
+            },
+        },
+        manualFiltering: true,
+        manualPagination: true,
+        manualSorting: true,
+        onColumnVisibilityChange: onColumnVisibilityChange,
+        onSortingChange: onSortingChange,
+        ...props
+    })
+
+    return <DataTable_Paper table={table} columns={flatColumns} userid={userId} pagename={pageName}
+                            tablename={tableName}/>;
 };
 
 export default DataTable_Main;
+
+
+

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

@@ -22,17 +22,13 @@ const ScrollBox = styled(Box)({
         borderRadius: '5px',
     },
     '::-webkit-scrollbar-thumb': {
-        background: '#16534a',
+        background: '#155175',
         borderRadius: '0px',
     }
 });
 
-function FilterBody({columns, drawerState, setDrawerState}) {
+function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tableName}) {
-    const [userId, setUserId] = useState(0);
-    const [pageName, setPageName] = useState('testPage');
-    const [tableName, setTableName] = useState('testTable');
     const {settingStore, filterAction} = useTableSetting();
-
     const [initialValues, setInitialValues] = useState({});
 
     useEffect(() => {
@@ -91,11 +87,14 @@ function FilterBody({columns, drawerState, setDrawerState}) {
     );
 
     const handleSubmit = (values, {setSubmitting}) => {
+        toast.dismiss({containerId: "filtering"});
+        setDrawerState(false);
         toast(<AskForKeep onSaveFilter={onSaveFilter}/>, {
-            draggable: true,
             containerId: "filtering",
-            autoClose: false,
+            className: "filter-toast",
             position: "bottom-left",
+            draggable: true,
+            autoClose: false,
         });
         setSubmitting(false);
     };
@@ -161,8 +160,8 @@ function FilterBody({columns, drawerState, setDrawerState}) {
                                             disabled={isSubmitting || !isValid || !dirty}
                                             sx={{
                                                 boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
-                                                backgroundColor: "#16534a", ':hover': {
+                                                backgroundColor: "#155175", ':hover': {
-                                                    backgroundColor: "#16534a",
+                                                    backgroundColor: "#155175",
                                                 }, width: "50%"
                                             }}>
                                             اعمال فیلتر

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

@@ -13,7 +13,7 @@ function FilterHeader({setDrawerState}) {
                 justifyContent: "space-between",
                 px: 2,
                 py: 1,
-                backgroundColor: "#16534a",
+                backgroundColor: "#155175",
                 boxShadow: "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
                 maxWidth: "450px"
             }}

src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx

@@ -10,7 +10,7 @@ function CustomDatePicker({column, filterParameters, defaultFilterTranslation, s
             setFieldValue={setFieldValue}
             placeholder={column.header}
             helperText={
-                <Typography variant="button" sx={{color: "#16534a"}}>
+                <Typography variant="button" sx={{color: "#155175"}}>
                     نوع فیلتر: {defaultFilterTranslation} (تاریخ)
                 </Typography>
             }

src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx

@@ -14,7 +14,7 @@ function CustomDatePickerRange({column, filterParameters, defaultFilterTranslati
                 maxDate={filterParameters.value[1]}
                 placeholder={`از تاریخ`}
                 helperText={
-                    <Typography variant="button" sx={{color: "#16534a"}}>
+                    <Typography variant="button" sx={{color: "#155175"}}>
                         نوع فیلتر: {defaultFilterTranslation} (تاریخ)
                     </Typography>
                 }

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

@@ -28,7 +28,7 @@ function CustomSelect({column, filterParameters, defaultFilterTranslation, setFi
                 ))}
             </Select>
             <FormHelperText>
-                <Typography variant="button" sx={{color: "#16534a"}}>
+                <Typography variant="button" sx={{color: "#155175"}}>
                     نوع فیلتر: {defaultFilterTranslation}
                 </Typography>
             </FormHelperText>

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

@@ -51,7 +51,7 @@ function CustomSelectMultiple({column, filterParameters, defaultFilterTranslatio
                 ))}
             </Select>
             <FormHelperText>
-                <Typography variant="button" sx={{color: "#16534a"}}>
+                <Typography variant="button" sx={{color: "#155175"}}>
                     نوع فیلتر: {defaultFilterTranslation}
                 </Typography>
             </FormHelperText>

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

@@ -18,7 +18,7 @@ function CustomTextField({
             onChange={handleChange}
             onBlur={handleBlur}
             fullWidth
-            helperText={<Typography variant="button" sx={{color: "#16534a"}}>
+            helperText={<Typography variant="button" sx={{color: "#155175"}}>
                 نوع فیلتر: {defaultFilterTranslation}
             </Typography>}
             variant="outlined"

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

@@ -22,7 +22,7 @@ function CustomTextFieldRange({
                 value={filterParameters.value[0]}
                 fullWidth
                 error={touched?.[`${column.id}`]?.value && Boolean(errors?.[`${column.id}`]?.value)}
-                helperText={<Typography variant="button" sx={{color: "#16534a"}}>نوع
+                helperText={<Typography variant="button" sx={{color: "#155175"}}>نوع
                     فیلتر: {defaultFilterTranslation}</Typography>}
                 variant="outlined"
                 size="normal"

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

@@ -4,13 +4,14 @@ import {useState} from "react";
 import FilterButton from "@/core/components/DataTable/filter/FilterButton";
 import FilterBody from "@/core/components/DataTable/filter/FilterBody";
 
-function FilterColumn({columns}) {
+function FilterColumn({columns, userid, pagename, tablename}) {
     const [open, setOpen] = useState(false);
 
     return (
         <>
             <FilterButton drawerState={open} setDrawerState={setOpen}/>
-            <FilterBody columns={columns} drawerState={open} setDrawerState={setOpen}/>
+            <FilterBody columns={columns} drawerState={open} setDrawerState={setOpen} userid={userid}
+                        pagename={pagename} tablename={tablename}/>
         </>
     );
 }

src/core/components/DataTable/index.js

@@ -1,142 +1,9 @@
-import {useMaterialReactTable} from "material-react-table";
 import DataTable_Main from "./Main";
-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";
-
-const data = [
-    {
-        name: {
-            firstName: 'امین',
-            lastName: 'قاسمپور',
-        },
-        address: 'فلان جا',
-        city: 'تهران',
-        state: 'بررسی شده',
-        price: '20',
-        updated_at: '2024/05/02',
-        company: 'همراه اول',
-        area: 'منطقه 5',
-    },
-    {
-        name: {
-            firstName: 'امیر حسین',
-            lastName: 'محمودی',
-        },
-        address: 'فلان جا',
-        city: 'تهران',
-        state: 'تکمیل شده',
-        price: '27',
-        updated_at: '2024/05/02',
-        company: 'وایتل',
-        area: 'منطقه 27',
-    },
-    {
-        name: {
-            firstName: 'یاسمن',
-            lastName: 'علی اکبری',
-        },
-        address: 'فلان جا',
-        city: 'شیراز',
-        state: 'بررسی شده',
-        price: '32',
-        updated_at: '2024/05/02',
-        company: 'ایرانسل',
-        area: 'منطقه 23',
-    },
-    {
-        name: {
-            firstName: 'حمیدرضا',
-            lastName: 'رنجبرپور',
-        },
-        address: 'فلان جا',
-        city: 'اصفهان',
-        state: 'بررسی شده',
-        price: '45',
-        updated_at: '2024/05/02',
-        company: 'ایرانول',
-        area: 'منطقه 21',
-    },
-    {
-        name: {
-            firstName: 'محمد',
-            lastName: 'جلالی',
-        },
-        address: 'فلان جا',
-        city: 'رشت',
-        state: 'درحال بررسی',
-        price: '8',
-        updated_at: '2024/05/02',
-        company: 'فیلیمو',
-        area: 'منطقه 8',
-    },
-];
 
 const DataTable = (props) => {
-    const {userId, pageName, tableName, columns, initialStateProps} = props
+    return (
-    const {settingStore, hideAction, sortAction} = useTableSetting();
+        <DataTable_Main {...props}/>
-    const flatColumns = flattenArrayOfObjects(columns, 'columns')
+    );
-
-    const onColumnVisibilityChange = (event) => {
-        const settingValue = event();
-        hideAction(userId, pageName, tableName, settingValue, flatColumns);
-    };
-    const onSortingChange = (event) => {
-        const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []);
-        sortAction(userId, pageName, tableName, settingValue, flatColumns);
-    }
-
-
-    const table = useMaterialReactTable({
-        localization: FA_DATATABLE_LOCALIZATION,
-        columns,
-        data: data,
-        // manualSorting: true,
-        renderTopToolbarCustomActions: ({table}) => (<>
-            <Toolbar
-                columns={flatColumns}
-            />
-        </>),
-        initialState: {
-            density: 'compact',
-            columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
-            sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [],
-            ...initialStateProps
-        },
-        state: {
-            columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
-            sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
-        },
-        muiTableHeadProps: {
-            sx: {
-                borderTop: "1px solid #e1e1e1",
-                borderBottom: "2px solid #e1e1e1",
-            }
-        },
-        muiTableHeadCellProps: {
-            sx: {
-                color: "primary.main",
-                borderLeft: "1px solid #e1e1e1",
-                "&:first-of-type": {
-                    borderLeft: "unset"
-                }
-            },
-        },
-        muiTableBodyCellProps: {
-            sx: {
-                borderLeft: "1px solid #e1e1e1",
-                "&:first-of-type": {
-                    borderLeft: "unset"
-                }
-            },
-        },
-        onColumnVisibilityChange: onColumnVisibilityChange,
-        onSortingChange: onSortingChange,
-        ...props
-    })
-
-    return <DataTable_Main table={table} columns={flatColumns}/>;
 };
 
-export default DataTable;
+export default DataTable;

src/core/components/DataTable/table/Paper.js

@@ -65,7 +65,9 @@ const DataTable_Paper = ({table, ...rest}) => {
         >
             {enableTopToolbar &&
                 (parseFromValuesOrFunc(renderTopToolbar, {table}) ?? (
-                    <DataTable_TopToolbar table={table} columns={paperProps.columns}/>
+                    <DataTable_TopToolbar table={table} columns={paperProps.columns} userid={paperProps.userid}
+                                          pagename={paperProps.pagename}
+                                          tablename={paperProps.tablename}/>
                 ))}
             <DataTable_TableContainer table={table}/>
             {enableBottomToolbar &&

src/core/components/DataTable/toolbar/TopToolbar.js

@@ -6,7 +6,7 @@ import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons";
 import FilterColumn from "@/core/components/DataTable/filter";
 import RefactorTable from "@/core/components/DataTable/refactor/RefactorTable";
 
-const DataTable_TopToolbar = ({table, columns}) => {
+const DataTable_TopToolbar = ({table, columns, userid, pagename, tablename}) => {
     const {
         getState,
         options: {
@@ -73,7 +73,7 @@ const DataTable_TopToolbar = ({table, columns}) => {
                         }}
                     >
                         <RefactorTable/>
-                        <FilterColumn columns={columns}/>
+                        <FilterColumn columns={columns} userid={userid} pagename={pagename} tablename={tablename}/>
                         <DataTable_ToolbarInternalButtons table={table}/>
                     </Box>
                 )}

src/core/components/NotificationDesign/AskForKeep.jsx

@@ -1,6 +1,6 @@
 'use client'
 
-import BeenhereIcon from '@mui/icons-material/Beenhere';
+import SaveIcon from '@mui/icons-material/Save';
 import {Box, Button, Typography} from "@mui/material";
 import DownloadIcon from '@mui/icons-material/Download';
 import {toast} from "react-toastify";
@@ -14,10 +14,10 @@ function AskForKeep({onSaveFilter}) {
     return (
         <Box sx={{width: "100%"}}>
             <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1}}>
-                <Typography color="#16534a" variant="subtitle1" sx={{fontWeight: "500"}}>
+                <Typography color="#155175" variant="subtitle1" sx={{fontWeight: "500"}}>
                     ذخیره سازی اطلاعات
                 </Typography>
-                <BeenhereIcon sx={{color: "#16534a"}}/>
+                <SaveIcon sx={{color: "#155175"}}/>
             </Box>
             <Box sx={{display: "flex", flexDirection: "column"}}>
                 <Typography variant="caption">
@@ -34,8 +34,8 @@ function AskForKeep({onSaveFilter}) {
                 <Button variant="contained" component="label" endIcon={<DownloadIcon/>}
                         onClick={onSaveFilter}
                         sx={{
-                            backgroundColor: "#16534a",
+                            backgroundColor: "#155175",
-                            ':hover': {backgroundColor: "#16534a"},
+                            ':hover': {backgroundColor: "#155175"},
                             boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
                         }}>ذخیره
                     فیلتر</Button>