rez-table-listing-mui 1.2.17 → 1.2.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.2.17",
+  "version": "1.2.18",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",

package/src/listing/components/filter/index.tsx

@@ -244,6 +244,28 @@ export function TableFilter({
             label: editMode ? "Replace Filter" : "Save",
             onClick: (inputValue) => {
               if (editMode) {
+                const selectedId = filterMaster?.saved_filters?.selectedId;
+                const selectedName =
+                  inputValue || filterMaster?.saved_filters?.selectedName;
+
+                const newFilterMasterState = {
+                  ...filterMaster,
+                  saved_filters: {
+                    ...filterMaster?.attributes,
+                    selectedId,
+                    selectedName,
+                  },
+                } as FilterMasterStateProps;
+
+                setFilterMaster(newFilterMasterState);
+
+                const newState = {
+                  filterMaster: newFilterMasterState,
+                  filters: filters,
+                };
+
+                onChangeFunction && onChangeFunction(newState);
+
                 onUpdateFilter && onUpdateFilter(inputValue || "");
                 setSaveFilterModalOpen(false);
                 setEditMode(false);

package/src/listing/libs/hooks/useEntityTableAPI.tsx

@@ -150,32 +150,10 @@ export const useDeleteFilterAPI = (tableStates: CraftTableOptionsProps) => {
     onSuccess: async () => {
       queryClient.invalidateQueries({ queryKey: ["meta"] });
 
-      console.log("on success is running");
-
       const { filters, filterToDelete, filterMaster, setFilterMaster } =
         tableStates;
 
-      console.log(
-        filterToDelete?.value === filterMaster?.saved_filters?.selectedId,
-        filterToDelete,
-        filterMaster
-      );
-
       if (filterToDelete?.value === filterMaster?.saved_filters?.selectedId) {
-        console.log("inside if condition");
-        // const newFilterMasterState: FilterMasterStateProps = {
-        //   ...filterMaster,
-        //   attributes: {
-        //     selected: filterMaster?.attributes.selected || "",
-        //     radio: filterMaster?.attributes.radio || [],
-        //   },
-        //   saved_filters: {
-        //     selectedId: "",
-        //     selectedName: "",
-        //   },
-        //   activeFilterTabIndex: -1,
-        // };
-
         const newFilterMasterState = {
           ...filterMaster,
           saved_filters: {
@@ -184,7 +162,6 @@ export const useDeleteFilterAPI = (tableStates: CraftTableOptionsProps) => {
           },
           activeFilterTabIndex: -1,
         };
-        console.log(" 1");
 
         setFilterMaster(newFilterMasterState as FilterMasterStateProps);
 
@@ -193,8 +170,6 @@ export const useDeleteFilterAPI = (tableStates: CraftTableOptionsProps) => {
           filters: filters,
         };
 
-        console.log("first");
-
         const payload = {
           entity_type: MAPPED_ENTITY_TYPE,
           mapped_entity_type: ENTITY_TYPE,
@@ -202,8 +177,6 @@ export const useDeleteFilterAPI = (tableStates: CraftTableOptionsProps) => {
           type: "filter",
         };
 
-        console.log("payload - ", payload);
-
         await saveLayoutAPI(payload);
       }
     },
@@ -269,29 +242,6 @@ export const useCommonDropdownAPI = (
 
 //ALL VIEW SETTINGS API
 
-// export const useSettingsDropDownAPI = () => {
-//   const queryClient = useQueryClient();
-
-//   const viewSettingsDropDownMutation = useMutation({
-//     mutationKey: ["viewsettingsDropdown"],
-//     mutationFn: ({
-//       entity_type,
-//       column,
-//       sort_by,
-//     }: {
-//       entity_type: string;
-//       column: string;
-//       sort_by: string;
-//     }) => {
-//       return viewSettingsDropDown(entity_type, column, sort_by);
-//     },
-//     // onSuccess: () => {
-//     //   queryClient.invalidateQueries({ queryKey: ["meta"] });
-//     // },
-//   });
-
-//   return { viewSettingsDropDownMutation };
-
 export const useSettingsDropDownAPI = ({
   entity_type,
   column,

package/src/listing/libs/utils/apiColumn.ts

@@ -124,7 +124,6 @@ export const updateSavedFilter = async (
 };
 
 // ALL View Settings API
-
 export const saveSettingsData = async (payload: any) => {
   try {
     const response = await api.post(`/entity/create?entity_type=${MAPPED_ENTITY_TYPE}`, payload);

package/src/view/FIlterWrapper.tsx

@@ -2,18 +2,102 @@ import { useEffect } from "react";
 import { CraftTableFilter } from "..";
 import { useGetNavigationLayoutAPI } from "../listing/libs/hooks/useGetNavigationLayoutAPI";
 import { ENTITY_TYPE } from "../listing/libs/utils/common";
+import {
+  useDeleteFilterAPI,
+  useSavedFilterAPI,
+  useUpdateFilterAPI,
+} from "../listing/libs/hooks/useEntityTableAPI";
+import { FilterMasterStateProps } from "../listing/types/filter";
 
 const CraftTableFilterWrapper = ({
   tableStates,
   dropdownData,
-  onDeleteFilter,
-  onSaveFilter,
-  handleUpdateFilter,
   onChangeFunction,
   columnsData,
 }: any) => {
   const getNavigationLayoutQuery = useGetNavigationLayoutAPI(ENTITY_TYPE);
 
+  const { filters, filterMaster, setFilterMaster, filterToDelete } =
+    tableStates;
+
+  const { savedMutation } = useSavedFilterAPI(); //API CALL FOR SAVED FILTER
+  const { updateMutation } = useUpdateFilterAPI(); //API FOR UPDATE FILTER
+  const { deleteMutation } = useDeleteFilterAPI(tableStates); //API FOR DELETING FILTER
+
+  // API to handle saving a filter
+  const handleSaveFilter = (name: string) => {
+    const quickFilter = filters.map((f: any) => ({
+      filter_attribute: f.filter_attribute,
+      filter_operator: f.filter_operator,
+      filter_value: f.filter_value,
+    }));
+
+    const payload = {
+      name,
+      is_default: false,
+      mapped_entity_type: ENTITY_TYPE, // For that entity type
+      status: "ACTIVE",
+      entity_type: "SFM", // FIXED entity type
+      filterDetails: quickFilter,
+    };
+    const entity_type = "SFM";
+    savedMutation.mutate(
+      { entity_type, payload },
+      {
+        onSuccess: (response) => {
+          const newFilterId = response?.id;
+          if (newFilterId) {
+            setFilterMaster(
+              (prev: FilterMasterStateProps) =>
+                ({
+                  ...prev,
+                  saved_filters: {
+                    ...prev?.saved_filters,
+                    selectedId: newFilterId.toString(),
+                    selectedName: name,
+                  },
+                  activeFilterTabIndex: 1,
+                } as FilterMasterStateProps)
+            );
+          }
+        },
+      }
+    );
+  };
+
+  const handleUpdateFilter = () => {
+    const quickFilter = filters.map((f: any) => ({
+      filter_attribute: f.filter_attribute,
+      filter_operator: f.filter_operator,
+      filter_value: f.filter_value,
+    }));
+
+    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 });
+  };
+
   useEffect(() => {
     if (getNavigationLayoutQuery.isSuccess) {
       const { setFilters, setFilterMaster } = tableStates;
@@ -33,11 +117,11 @@ const CraftTableFilterWrapper = ({
     <CraftTableFilter
       tableStates={tableStates}
       onClose={() => tableStates.setShowTableFilter(false)}
-      onUpdateFilter={handleUpdateFilter}
       columnsData={columnsData}
       dropdownData={dropdownData || []}
-      onDeleteFilter={onDeleteFilter}
-      onSaveFilter={onSaveFilter}
+      onUpdateFilter={handleUpdateFilter}
+      onDeleteFilter={handleRemoveFilter}
+      onSaveFilter={handleSaveFilter}
       onChangeFunction={onChangeFunction}
     />
   );

package/src/view/ListingView.tsx

@@ -316,6 +316,8 @@ function ListingView() {
 
   //API to update the filter
   const handleUpdateFilter = () => {
+    console.log("handleUpdateFilter");
+
     const quickFilter = filters.map((f) => ({
       filter_attribute: f.filter_attribute,
       filter_operator: f.filter_operator,
@@ -380,11 +382,11 @@ function ListingView() {
           <CraftTableFilterWrapper
             tableStates={tableStates}
             onClose={() => tableStates.setShowTableFilter(false)}
-            onUpdateFilter={handleUpdateFilter}
             columnsData={metaQuery.data || {}}
             dropdownData={dropdownData || []}
-            onDeleteFilter={handleRemoveFilter}
-            onSaveFilter={handleSaveFilter}
+            // onUpdateFilter={handleUpdateFilter}
+            // onDeleteFilter={handleRemoveFilter}
+            // onSaveFilter={handleSaveFilter}
             onChangeFunction={handleChangeFunction}
           />
         ),