Feature/user management

src/lib/contexts/DataTable.js

@@ -0,0 +1,211 @@
+import { createContext, useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import useTableSetting from "@/lib/hooks/useTableSetting";
+import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects";
+import AskForKeepData from "@/core/components/NotificationDesign/AskForKeepData";
+import { LinearProgress } from "@mui/material";
+
+export const DataTableContext = createContext();
+
+const DataTableProvider = ({
+  children,
+  user_id,
+  page_name,
+  table_name,
+  columns,
+  initialSort = [],
+}) => {
+  const { settingStore } = useTableSetting();
+  const [isInitStates, setInitStates] = useState(false);
+  const flatColumns = flattenArrayOfObjects(columns, "columns");
+  const [initFilter, setInitFilter] = useState({});
+  const [filterData, setFilterData] = useState({});
+  const [initSort, setInitSort] = useState(initialSort || []);
+  const [sortData, setSortData] = useState(initialSort || []);
+  const [initHide, setInitHide] = useState({});
+  const [hideData, setHideData] = useState({});
+  const [isDirty, setIsDirty] = useState(false);
+  const [isAnyDirty, setIsAnyDirty] = useState(false);
+
+  useEffect(() => {
+    let hasAnyConflict = false;
+    const hasConflict =
+      JSON.stringify(hideData) !== JSON.stringify(initHide) ||
+      JSON.stringify(sortData) !== JSON.stringify(initSort) ||
+      JSON.stringify(filterData) !== JSON.stringify(initFilter);
+
+    const CheckFilterValues = Object.values(filterData).every((innerObject) => {
+      if (
+        innerObject.datatype === "date" &&
+        innerObject.filterMode === "between"
+      ) {
+        return (
+          Array.isArray(innerObject.value) &&
+          innerObject.value.length === 2 &&
+          innerObject.value.every((v) => v === "")
+        );
+      } else {
+        return innerObject.value === "";
+      }
+    });
+    const flattenObject = (obj) => {
+      let result = {};
+      for (const key in obj) {
+        if (typeof obj[key] === "object" && obj[key] !== null) {
+          Object.assign(result, flattenObject(obj[key])); // باز کردن اشیای تودرتو
+        } else {
+          result[key] = obj[key];
+        }
+      }
+      return result;
+    };
+
+    // تبدیل آبجکت به آبجکت فلت شده
+    const flatHideData = flattenObject(hideData);
+
+    const CheckHideValues = Object.values(flatHideData).every(
+      (value) => value === true,
+    );
+    hasAnyConflict =
+      !CheckHideValues ||
+      JSON.stringify(sortData) !== JSON.stringify(initialSort) ||
+      !CheckFilterValues;
+
+    setIsDirty(hasConflict);
+    setIsAnyDirty(hasAnyConflict);
+  }, [hideData, sortData, filterData, initHide, initSort, initFilter]);
+
+  useEffect(() => {
+    if (!settingStore) return;
+    const filterValues = flatColumns.reduce((acc, column) => {
+      if (!column.enableColumnFilter) return acc;
+      const storeFilter = settingStore?.[user_id]?.[page_name]?.[table_name]?.[
+        "filters"
+      ]?.find((filter) => filter.id === column.id);
+      if (column.datatype === "array") {
+        acc[column.id] = {
+          id: column.id,
+          value: storeFilter?.value || [],
+          filterMode: storeFilter?.filterMode || column.filterMode,
+          datatype: column.datatype,
+        };
+      } else if (column.filterMode === "between") {
+        acc[column.id] = {
+          id: column.id,
+          value: storeFilter?.value || ["", ""],
+          filterMode: storeFilter?.filterMode || column.filterMode,
+          datatype: column.datatype,
+        };
+      } else {
+        acc[column.id] = {
+          id: column.id,
+          value: storeFilter?.value || "",
+          filterMode: storeFilter?.filterMode || column.filterMode,
+          datatype: column.datatype,
+        };
+      }
+      return acc;
+    }, {});
+
+    const getHideValues = (columns) => {
+      return columns.reduce((acc, column) => {
+        const columnId = column.id;
+        const storeHide =
+          settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"]?.[
+            columnId
+          ];
+        if (column.columns && column.columns.length > 0) {
+          acc[columnId] = getHideValues(column.columns);
+        } else {
+          acc[columnId] = storeHide !== undefined ? storeHide : true;
+        }
+
+        return acc;
+      }, {});
+    };
+
+    const hideValues = getHideValues(columns);
+    setHideData(hideValues);
+    setInitHide(hideValues);
+    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 (
+      JSON.stringify(initFilter) !== JSON.stringify(filterData) ||
+      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}
+            columns={flatColumns}
+          />,
+          {
+            containerId: "filtering",
+            toastId: "keep_data",
+            className: "filter-toast",
+            position: "bottom-left",
+            draggable: true,
+            autoClose: false,
+          },
+        );
+      } else {
+        toast.update("keep_data", {
+          containerId: "filtering",
+          toastId: "keep_data",
+          render: (
+            <AskForKeepData
+              filterData={filterData}
+              sortData={sortData}
+              hideData={hideData}
+              user_id={user_id}
+              page_name={page_name}
+              table_name={table_name}
+              columns={flatColumns}
+            />
+          ),
+        });
+      }
+    } else {
+      toast.dismiss({ containerId: "datatable" });
+    }
+  }, [filterData, sortData, hideData]);
+
+  if (!isInitStates) return <LinearProgress sx={{ borderRadius: 2 }} />;
+
+  return (
+    <DataTableContext.Provider
+      value={{
+        filterData,
+        setFilterData,
+        sortData,
+        setSortData,
+        hideData,
+        setHideData,
+        isDirty,
+        isAnyDirty,
+      }}
+    >
+      {children}
+    </DataTableContext.Provider>
+  );
+};
+
+export default DataTableProvider;