Merge branch 'feature/datatable_hide_action' into 'develop'

debug hide action of datatable

See merge request witel-front-end/rms!10

src/core/components/DataTable/Main.js

@@ -11,15 +11,14 @@ import useSWR from "swr";
 const DataTable_Main = (props) => {
     const request = useRequest();
     const isEmptyObject = (obj) => obj && Object.keys(obj).length === 0 && obj.constructor === Object;
-    const { filterData, sortData, setSortData } = useDataTable();
+    const { filterData, sortData, setSortData, hideData, setHideData } = useDataTable();
     const { need_filter, table_url, user_id, page_name, table_name, columns, initialStateProps, TableToolbar } = props;
     const flatColumns = flattenArrayOfObjects(columns, "columns");
     const { settingStore, hideAction } = useTableSetting();
     const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
 
     const onColumnVisibilityChange = (event) => {
-        const settingValue = event();
+        setHideData(event);
-        hideAction(user_id, page_name, table_name, settingValue, flatColumns);
     };
 
     const onSortingChange = (event) => {
@@ -57,13 +56,13 @@ const DataTable_Main = (props) => {
         data: data?.data ?? [],
         initialState: {
             density: "compact",
-            columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"],
+            columnVisibility: hideData,
             sorting: sortData,
             ...initialStateProps,
         },
         state: {
             showProgressBars: isValidating,
-            columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"],
+            columnVisibility: hideData,
             sorting: sortData,
             pagination,
         },

src/core/components/NotificationDesign/AskForKeepData.jsx

@@ -6,8 +6,8 @@ import DownloadIcon from "@mui/icons-material/Download";
 import { toast } from "react-toastify";
 import useTableSetting from "@/lib/hooks/useTableSetting";
 
-function AskForKeepData({ filterData, sortData, user_id, page_name, table_name, columns }) {
+function AskForKeepData({ filterData, sortData, hideData, user_id, page_name, table_name, columns }) {
-    const { filterAction, sortAction } = useTableSetting();
+    const { filterAction, sortAction, hideAction } = useTableSetting();
 
     const onSaveFilter = () => {
         const filteredItems = Object.keys(filterData)
@@ -25,8 +25,8 @@ function AskForKeepData({ filterData, sortData, user_id, page_name, table_name,
             })
             .filter(Boolean);
         filterAction(user_id, page_name, table_name, filteredItems, columns);
-
         sortAction(user_id, page_name, table_name, sortData, columns);
+        hideAction(user_id, page_name, table_name, hideData, columns);
         toast.dismiss({ containerId: "datatable" });
     };
 

src/lib/contexts/DataTable.js

@@ -11,9 +11,11 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns }
     const [isInitStates, setInitStates] = useState(false);
     const flatColumns = flattenArrayOfObjects(columns, "columns");
     const [initFilter, setInitFilter] = useState({});
-    const [initSort, setInitSort] = useState([]);
     const [filterData, setFilterData] = useState({});
+    const [initSort, setInitSort] = useState([]);
     const [sortData, setSortData] = useState([]);
+    const [initHide, setInitHide] = useState([]);
+    const [hideData, setHideData] = useState([]);
 
     useEffect(() => {
         if (!settingStore) return;
@@ -47,22 +49,26 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns }
             return acc;
         }, {});
         setFilterData(values);
-        setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []);
         setInitFilter(values);
+        setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []);
         setInitSort(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []);
+        setHideData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"] || []);
+        setInitHide(settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"] || []);
         setInitStates(true);
     }, [settingStore, isInitStates]);
 
     useEffect(() => {
         if (
             JSON.stringify(initFilter) !== JSON.stringify(filterData) ||
-            JSON.stringify(initSort) !== JSON.stringify(sortData)
+            JSON.stringify(initSort) !== JSON.stringify(sortData) ||
+            JSON.stringify(initHide) !== JSON.stringify(hideData)
         ) {
             if (!toast.isActive("keep_data", "filtering")) {
                 toast(
                     <AskForKeepData
                         filterData={filterData}
                         sortData={sortData}
+                        hideData={hideData}
                         user_id={user_id}
                         page_name={page_name}
                         table_name={table_name}
@@ -85,6 +91,7 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns }
                         <AskForKeepData
                             filterData={filterData}
                             sortData={sortData}
+                            hideData={hideData}
                             user_id={user_id}
                             page_name={page_name}
                             table_name={table_name}
@@ -96,12 +103,12 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns }
         } else {
             toast.dismiss({ containerId: "datatable" });
         }
-    }, [filterData, sortData]);
+    }, [filterData, sortData, hideData]);
 
     if (!isInitStates) return null;
 
     return (
-        <DataTableContext.Provider value={{ filterData, setFilterData, sortData, setSortData }}>
+        <DataTableContext.Provider value={{ filterData, setFilterData, sortData, setSortData, hideData, setHideData }}>
             {children}
         </DataTableContext.Provider>
     );

src/lib/hooks/useDataTable.js

@@ -2,8 +2,8 @@ import { useContext } from "react";
 import { DataTableContext } from "@/lib/contexts/DataTable";
 
 const useTableSetting = () => {
-    const { filterData, setFilterData, sortData, setSortData } = useContext(DataTableContext);
+    const { filterData, setFilterData, sortData, setSortData, hideData, setHideData } = useContext(DataTableContext);
-    return { filterData, setFilterData, sortData, setSortData };
+    return { filterData, setFilterData, sortData, setSortData, hideData, setHideData };
 };
 
 export default useTableSetting;