rez-table-listing-mui 1.2.16 → 1.2.18

package/src/view/FIlterWrapper.tsx

@@ -0,0 +1,130 @@
+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,
+  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;
+      const filters = getNavigationLayoutQuery?.data?.filters || [];
+      const filterMaster = getNavigationLayoutQuery?.data?.filterMaster || {};
+
+      if (filters.length > 0) {
+        tableStates.setShowTableFilter(true);
+      }
+
+      setFilters(filters);
+      setFilterMaster(filterMaster);
+    }
+  }, [getNavigationLayoutQuery.isSuccess, getNavigationLayoutQuery.data]);
+
+  return (
+    <CraftTableFilter
+      tableStates={tableStates}
+      onClose={() => tableStates.setShowTableFilter(false)}
+      columnsData={columnsData}
+      dropdownData={dropdownData || []}
+      onUpdateFilter={handleUpdateFilter}
+      onDeleteFilter={handleRemoveFilter}
+      onSaveFilter={handleSaveFilter}
+      onChangeFunction={onChangeFunction}
+    />
+  );
+};
+
+export default CraftTableFilterWrapper;

package/src/view/ListingView.tsx

@@ -6,7 +6,7 @@ import {
   useDetailsQueryAPI,
   useFetchData,
 } from "../listing/libs/hooks/useEntityTableHooks";
-import { ENTITY_TYPE } from "../listing/libs/utils/common";
+import { ENTITY_TYPE, MAPPED_ENTITY_TYPE } from "../listing/libs/utils/common";
 import {
   useCommonDropdownAPI,
   useDeleteFilterAPI,
@@ -22,9 +22,10 @@ import { ColumnDef } from "@tanstack/react-table";
 import { FilterMasterStateProps } from "../listing/types/filter";
 import { SettingsDataProps } from "../listing/types/filter-settings";
 import TableWrapper from "../listing/components/index-table";
-import { CraftTableFilter } from "..";
 import { TableTabs } from "../listing/components/tabs";
 import { QuickFilterSettings } from "../listing/components/table-settings";
+import CraftTableFilterWrapper from "./FIlterWrapper";
+import { saveLayoutAPI } from "../listing/libs/services/saveLayoutAPI";
 
 function ListingView() {
   // const [mockLoading, setMockLoading] = useState<boolean>(true);
@@ -54,7 +55,7 @@ function ListingView() {
   );
 
   const { savedMutation } = useSavedFilterAPI(); //API CALL FOR SAVED FILTER
-  const { deleteMutation } = useDeleteFilterAPI(); //API FOR DELETING FILTER
+  const { deleteMutation } = useDeleteFilterAPI(tableStates); //API FOR DELETING FILTER
   const { updateMutation } = useUpdateFilterAPI(); //API FOR UPDATE FILTER
   const { saveSettingsDataMutation } = useSaveSettingsDataAPI(ENTITY_TYPE);
   const { dropdownData } = useCommonDropdownAPI(metaQuery.data);
@@ -288,6 +289,17 @@ function ListingView() {
     );
   };
 
+  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);
+  };
+
   // API to handle removing or deleting a filter
   const handleRemoveFilter = () => {
     const payload = {
@@ -304,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,
@@ -325,7 +339,7 @@ function ListingView() {
 
   const handleSaveSettingsData = (settingsData: SettingsDataProps) => {
     const payload = {
-      entity_type: "LAP",
+      entity_type: MAPPED_ENTITY_TYPE,
       mapped_entity_type: ENTITY_TYPE,
       layout_json: settingsData,
     };
@@ -336,8 +350,6 @@ function ListingView() {
   return (
     <TableWrapper
       data={filteredData}
-      // data={data}
-      // columns={defaultColumns}
       columns={columns && columns.length > 0 ? columns : defaultColumns}
       tableStates={tableStates}
       featureOptions={{
@@ -367,14 +379,15 @@ function ListingView() {
       filterOptions={{
         show: tableStates?.showTableFilter,
         component: (
-          <CraftTableFilter
+          <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}
           />
         ),
       }}