rez-table-listing-mui 1.3.7 → 1.3.9

package/src/listing/types/filter.ts

@@ -1,3 +1,4 @@
+import { ButtonProps } from "@mui/material";
 import { onFilterChangeFunctionProps } from "./common";
 import { CraftTableOptionsProps } from "./table-options";
 
@@ -11,6 +12,7 @@ type OperationMapProps = {
 };
 
 export interface FilterOperationListProps {
+  code: string;
   label: string;
   value: string;
 }
@@ -65,6 +67,17 @@ export interface FilterDropdownDataProps {
 export interface FilterComponentOptionsMainFilterOptions {
   showSaveButton?: boolean;
   showClearAllButton?: boolean;
+  customButtons?: Array<
+    {
+      label: string;
+      onClick: () => void;
+    } & Partial<ButtonProps>
+  >;
+}
+
+export interface FilterComponentOptionsSavedFilterOptions {
+  showBackButton?: boolean;
+  editMode?: boolean;
 }
 
 // Button config type
@@ -88,28 +101,33 @@ type RecordFilterComponentProps = {
   delete: ModalConfig;
 };
 
+export type TabType = "main" | "saved" | "attributes";
+
+interface FilterComponentTabOptions {
+  mainFilter?: FilterComponentOptionsMainFilterOptions;
+  savedFilter?: FilterComponentOptionsSavedFilterOptions;
+  isSingleFilter?: boolean;
+  showFilter?: TabType;
+}
+
 export type FilterComponentOptions =
   | {
+      showTabs?: true; // when true → additional fields allowed
       showMainHeader?: boolean;
       mainHeaderTitle?: string;
-      showTabs?: true; // when true → additional fields allowed
       showMainFilter?: boolean;
       showSavedFilter?: boolean;
       showAttributesFilter?: boolean;
       isRuleEngine?: boolean;
-      tabOptions?: {
-        mainFilter?: FilterComponentOptionsMainFilterOptions;
-      };
+      tabOptions?: FilterComponentTabOptions;
       recordFilterComponentProps?: RecordFilterComponentProps;
     }
   | {
+      showTabs?: false; // explicitly false or omitted
       showMainHeader?: boolean;
       mainHeaderTitle?: string;
-      showTabs?: false; // explicitly false or omitted
       isRuleEngine?: boolean;
-      tabOptions?: {
-        mainFilter?: FilterComponentOptionsMainFilterOptions;
-      };
+      tabOptions?: FilterComponentTabOptions;
       recordFilterComponentProps?: RecordFilterComponentProps;
     };
 
@@ -231,6 +249,7 @@ export interface FilterMasterStateProps {
   saved_filters: {
     selectedId: string;
     selectedName: string;
+    selectedCode?: string;
   };
   activeFilterTabIndex: number;
 }

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;