rez-table-listing-mui 1.3.8 → 1.3.10

package/src/testing-grounds/filter-in-modal/saved-filter-modal.tsx

@@ -0,0 +1,181 @@
+import { Dialog } from "@mui/material";
+import { TableFilter } from "../../listing/components/filter";
+import { useCraftTable } from "../../listing/libs/hooks/useCraftTable";
+import { Dispatch, useEffect } from "react";
+import {
+  useDetailsQueryAPI,
+  useFetchData,
+} from "../../listing/libs/hooks/useEntityTableHooks";
+import {
+  ENTITY_TYPE,
+  MAPPED_ENTITY_TYPE,
+} from "../../listing/libs/utils/common";
+import {
+  useCommonFilterDropdownAPI,
+  useDeleteFilterAPI,
+  useGetFilterEntityListAndCriteria,
+  useUpdateFilterAPI,
+} from "../../listing/libs/hooks/useEntityTableAPI";
+import { saveLayoutAPI } from "../../listing/libs/services/saveLayoutAPI";
+
+const SavedFilterModal = ({
+  open,
+  setOpen,
+}: {
+  open: boolean;
+  setOpen: Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  const tableStates = useCraftTable();
+  const {
+    filters,
+    setFilters,
+    filterMaster,
+    filterToDelete,
+    selectedFilterEntity,
+    setFilterData,
+  } = tableStates;
+
+  const { metaQuery } = useFetchData(ENTITY_TYPE);
+  const { detailsQuery } = useDetailsQueryAPI(
+    filterMaster?.saved_filters?.selectedId
+  );
+  const { dropdownFilterData } = useCommonFilterDropdownAPI(filters);
+  const { updateMutation } = useUpdateFilterAPI(); //API FOR UPDATE FILTER
+  const { deleteMutation } = useDeleteFilterAPI(tableStates);
+
+  const { filterEntityList, filterEntityWiseCriteria } =
+    useGetFilterEntityListAndCriteria({
+      entity_type: ENTITY_TYPE,
+      selectedFilterEntity,
+    });
+
+  useEffect(() => {
+    const data: any = filterEntityList?.data;
+
+    setFilterData((prev: any) => ({
+      ...prev,
+      mainFilter: {
+        ...prev?.mainFilter,
+        entityList: {
+          data: data ?? [],
+          isPending: filterEntityList?.isPending ?? false,
+        },
+      },
+    }));
+  }, [filterEntityList?.data, filterEntityList?.isPending]);
+
+  useEffect(() => {
+    const data = filterEntityWiseCriteria?.data?.data?.attribute_list;
+
+    setFilterData((prev: any) => ({
+      ...prev,
+      mainFilter: {
+        ...prev?.mainFilter,
+        entityWiseCriteria: {
+          data: data ?? [],
+          isPending: filterEntityWiseCriteria?.isPending ?? false,
+        },
+      },
+    }));
+  }, [filterEntityWiseCriteria?.data, filterEntityWiseCriteria?.isPending]);
+
+  useEffect(() => {
+    setFilters(detailsQuery.data ?? []);
+  }, [detailsQuery.data]);
+
+  const handleClose = () => setOpen(false);
+
+  const handleChangeFunction = async (data: any) => {
+    const payload = {
+      entity_type: MAPPED_ENTITY_TYPE,
+      mapped_entity_type: ENTITY_TYPE,
+      mapped_json: data,
+      type: "filter",
+    };
+
+    await saveLayoutAPI(payload);
+  };
+
+  const handleUpdateFilter = () => {
+    const quickFilter = filters.map((f) => ({ ...f }));
+
+    const payload = {
+      name: filterMaster?.saved_filters?.selectedName, // Name of the filter
+      is_default: false,
+      id: filterMaster?.saved_filters?.selectedId,
+      mapped_entity_type: ENTITY_TYPE,
+      status: "ACTIVE",
+      entity_type: "SFM",
+      filterDetails: quickFilter,
+    };
+    const entity_type = "SFM";
+    updateMutation.mutate({ entity_type, payload });
+  };
+
+  const handleRemoveFilter = () => {
+    const payload = {
+      name: filterToDelete?.label,
+      id: filterToDelete?.value,
+      is_default: false,
+      mapped_entity_type: ENTITY_TYPE,
+      status: "INACTIVE",
+      entity_type: "SFM",
+    };
+    const entity_type = "SFM";
+    deleteMutation.mutate({ entity_type, payload });
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      PaperProps={{
+        sx: {
+          height: "100%",
+          minWidth: { xs: "400px", md: "500px" }, // 100% on mobile, 500px on desktop
+          minHeight: { md: "80vh" }, // full height on mobile, 80% of viewport on desktop
+          "& .MuiInputAdornment-positionStart": {
+            pl: 1,
+          },
+
+          "&& .css-ediul2": {
+            maxHeight: "calc(100vh - 340px)",
+          },
+
+          "&& .main-filter-component-wrapper": {
+            height: "100%",
+          },
+        },
+      }}
+    >
+      <TableFilter
+        tableStates={tableStates}
+        columnsData={metaQuery?.data || {}}
+        dropdownData={dropdownFilterData || {}}
+        onClose={handleClose}
+        onUpdateFilter={handleUpdateFilter}
+        onDeleteFilter={handleRemoveFilter}
+        onChangeFunction={handleChangeFunction}
+        filterComponentOptions={{
+          showMainHeader: true,
+          mainHeaderTitle: "Add New Filter",
+          showTabs: false,
+          isRuleEngine: true,
+          tabOptions: {
+            showFilter: "saved",
+            savedFilter: {
+              // showBackButton: false,
+              editMode: true,
+            },
+            // mainFilter: {
+            //   showSaveButton: true,
+            //   showClearAllButton: true,
+            // },
+          },
+        }}
+      />
+    </Dialog>
+  );
+};
+
+export default SavedFilterModal;