resolve conflicts

src/lib/contexts/DataTable.js

@@ -17,6 +17,16 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns,
     const [sortData, setSortData] = useState(initialSort || []);
     const [initHide, setInitHide] = useState({});
     const [hideData, setHideData] = useState({});
+    const [isDirty, setIsDirty] = useState(false);
+
+    useEffect(() => {
+        const hasConflict =
+            JSON.stringify(hideData) !== JSON.stringify(initHide) ||
+            JSON.stringify(sortData) !== JSON.stringify(initSort) ||
+            JSON.stringify(filterData) !== JSON.stringify(initFilter);
+
+        setIsDirty(hasConflict);
+    }, [hideData, sortData, filterData, initHide, initSort, initFilter]);
 
     useEffect(() => {
         if (!settingStore) return;
@@ -29,34 +39,27 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns,
                 acc[column.id] = {
                     id: column.id,
                     value: storeFilter?.value || [],
-                    filterFn: storeFilter?.filterFn || column._filterFn,
+                    filterMode: storeFilter?.filterMode || column.filterMode,
                     datatype: column.datatype,
                 };
-            } else if (column._filterFn === "between") {
+            } else if (column.filterMode === "between") {
                 acc[column.id] = {
                     id: column.id,
                     value: storeFilter?.value || ["", ""],
-                    filterFn: storeFilter?.filterFn || column._filterFn,
+                    filterMode: storeFilter?.filterMode || column.filterMode,
                     datatype: column.datatype,
                 };
             } else {
                 acc[column.id] = {
                     id: column.id,
                     value: storeFilter?.value || "",
-                    filterFn: storeFilter?.filterFn || column._filterFn,
+                    filterMode: storeFilter?.filterMode || column.filterMode,
                     datatype: column.datatype,
                 };
             }
             return acc;
         }, {});
-        setFilterData(filterValues);
-        setInitFilter(filterValues);
-        setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || initialSort);
-        setInitSort(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || initialSort);
-        setInitStates(true);
-    }, [settingStore, isInitStates]);
 
-    useEffect(() => {
         const getHideValues = (columns) => {
             return columns.reduce((acc, column) => {
                 const columnId = column.id;
@@ -74,7 +77,12 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns,
         const hideValues = getHideValues(columns);
         setHideData(hideValues);
         setInitHide(hideValues);
-    }, [settingStore, isInitStates]);
+        setFilterData(filterValues);
+        setInitFilter(filterValues);
+        setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || initialSort);
+        setInitSort(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || initialSort);
+        setInitStates(true);
+    }, [settingStore]);
 
     useEffect(() => {
         if (
@@ -127,7 +135,9 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns,
     if (!isInitStates) return <LinearProgress sx={{ borderRadius: 2 }} />;
 
     return (
-        <DataTableContext.Provider value={{ filterData, setFilterData, sortData, setSortData, hideData, setHideData }}>
+        <DataTableContext.Provider
+            value={{ filterData, setFilterData, sortData, setSortData, hideData, setHideData, isDirty }}
+        >
             {children}
         </DataTableContext.Provider>
     );

src/lib/hooks/useDataTable.js

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

src/lib/hooks/useRequest.js

@@ -8,11 +8,9 @@ const defaultOptions = {
     requestOptions: {
         headers: {},
     },
-    notification: {
-        show: true,
-        success: false,
-        failed: true,
-    },
+    notificationShow: true,
+    notificationSuccess: false,
+    notificationFailed: true
 };
 
 const useRequest = (initOptions) => {
@@ -30,13 +28,13 @@ const useRequest = (initOptions) => {
                 withCredentials: true,
                 ...mergedOptions.requestOptions,
             });
-            successRequest(mergedOptions.notification.show && mergedOptions.notification.success, "request_data");
+            successRequest(mergedOptions.notificationShow && mergedOptions.notificationSuccess, "request_data");
             return response;
         } catch (error) {
             if (error.response) {
                 errorResponse(
                     error.response,
-                    mergedOptions.notification.show && mergedOptions.notification.failed,
+                    mergedOptions.notificationShow && mergedOptions.notificationFailed,
                     "request_data",
                     logout
                 );

src/lib/hooks/useRoadItemGetISubtems.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { GET_ROAD_ITEMS_SUB_ITEM } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+
+const useRoadItemGetItems = (id) => {
+    const requestServer = useRequest();
+    const [subItemsList, setSubItemsList] = useState([]);
+    const [loadingSubItemsList, setLoadingSubItemsList] = useState(true);
+    const [errorSubItemsList, setErrorSubItemsList] = useState(null);
+
+    useEffect(() => {
+        const fetchSubItems = async () => {
+            try {
+                const response = await requestServer(`${GET_ROAD_ITEMS_SUB_ITEM}/${id}`);
+                setSubItemsList(response.data.data);
+                setLoadingSubItemsList(false);
+            } catch (e) {
+                setErrorSubItemsList(e);
+                setLoadingSubItemsList(false);
+            }
+        };
+
+        fetchSubItems();
+    }, []);
+
+    return { subItemsList, loadingSubItemsList, errorSubItemsList };
+};
+
+export default useRoadItemGetItems;

src/lib/hooks/useRoadItemGetItems.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { GET_ROAD_ITEMS_ITEM } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+
+const useRoadItemGetItems = () => {
+    const requestServer = useRequest();
+    const [itemsList, setItemsList] = useState([]);
+    const [loadingItemsList, setLoadingItemsList] = useState(true);
+    const [errorItemsList, setErrorItemsList] = useState(null);
+
+    useEffect(() => {
+        const fetchItems = async () => {
+            try {
+                const response = await requestServer(`${GET_ROAD_ITEMS_ITEM}`);
+                setItemsList(response.data.data);
+                setLoadingItemsList(false);
+            } catch (e) {
+                setErrorItemsList(e);
+                setLoadingItemsList(false);
+            }
+        };
+
+        fetchItems();
+    }, []);
+
+    return { itemsList, loadingItemsList, errorItemsList };
+};
+
+export default useRoadItemGetItems;