rez-table-listing-mui 1.2.17 → 1.2.19

package/package.json

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

package/src/kanban/index.tsx

@@ -84,7 +84,7 @@ const Kanban = ({
       swimLane.sub_lanes
         ?.filter((subLane) => subLane.lane_id === laneId)
         ?.forEach((subLane) => {
-          data.forEach((lead: any) => {
+          data?.forEach((lead: any) => {
             if (lead?.stage_id === subLane?.id && !seenLeadIds.has(lead?.id)) {
               seenLeadIds.add(lead.id);
               count++;
@@ -148,7 +148,7 @@ const Kanban = ({
                     </Box>
 
                     <Typography variant="h6" fontWeight="bold" sx={{ px: 2 }}>
-                      {lane.name}
+                      {lane?.name}
                     </Typography>
                   </Box>
                 ))}
@@ -193,7 +193,7 @@ const Kanban = ({
                     >
                       {swim_lane?.name} (
                       {
-                        data.filter(
+                        data?.filter(
                           (lead: any) => lead?.lead_status_id == swim_lane?.id
                         ).length
                       }
@@ -212,7 +212,7 @@ const Kanban = ({
                           sx={{
                             ...kanbanStyles.columnStyle,
                             bgcolor:
-                              lane.color || COLOR_CONSTANTS[index % 4].color,
+                              lane?.color || COLOR_CONSTANTS[index % 4].color,
                           }}
                           key={lane.id}
                         >
@@ -220,18 +220,18 @@ const Kanban = ({
                           {swim_lane?.sub_lanes
                             ?.filter(
                               (sub_lane: SubLane) =>
-                                sub_lane.lane_id.toString() === lane.id
+                                sub_lane.lane_id.toString() === lane?.id
                             )
                             ?.map((sub_section: SubLane) => {
-                              const subLaneKey = `${swim_lane.id}-${lane.id}-${sub_section.id}`;
+                              const subLaneKey = `${swim_lane?.id}-${lane?.id}-${sub_section?.id}`;
                               return (
                                 <Accordion
                                   key={sub_section.id}
                                   expanded={
                                     data?.filter(
                                       (lead: any) =>
-                                        lead.stage_id === sub_section.id &&
-                                        lead.lead_status_id == swim_lane.id
+                                        lead?.stage_id === sub_section?.id &&
+                                        lead?.lead_status_id == swim_lane?.id
                                     )?.length === 0
                                       ? false
                                       : subLaneExpanded[subLaneKey] || false
@@ -261,10 +261,10 @@ const Kanban = ({
                                           display:
                                             data?.filter(
                                               (lead: any) =>
-                                                lead.stage_id ===
-                                                  sub_section.id &&
-                                                lead.lead_status_id ==
-                                                  swim_lane.id
+                                                lead?.stage_id ===
+                                                  sub_section?.id &&
+                                                lead?.lead_status_id ==
+                                                  swim_lane?.id
                                             )?.length === 0
                                               ? "none"
                                               : "block",
@@ -283,15 +283,17 @@ const Kanban = ({
                                         sx={{
                                           ...kanbanStyles.subSectionCountContainer,
                                           bgcolor:
-                                            lane.darkColor ||
+                                            lane?.darkColor ||
                                             COLOR_CONSTANTS[index % 4]
                                               .darkColor,
                                         }}
                                       >
                                         {data?.filter(
                                           (lead: any) =>
-                                            lead.stage_id === sub_section.id &&
-                                            lead.lead_status_id === swim_lane.id
+                                            lead?.stage_id ===
+                                              sub_section?.id &&
+                                            lead?.lead_status_id ===
+                                              swim_lane?.id
                                         )?.length || 0}
                                       </Box>
                                       <Typography
@@ -299,7 +301,7 @@ const Kanban = ({
                                         color="#555354"
                                         fontSize="12px"
                                       >
-                                        {sub_section.name}
+                                        {sub_section?.name}
                                       </Typography>
                                     </Box>
                                   </AccordionSummary>
@@ -311,17 +313,18 @@ const Kanban = ({
                                       const leadsForThisSubLane =
                                         data?.filter(
                                           (lead: any) =>
-                                            lead.stage_id === sub_section.id &&
-                                            lead.lead_status_id ==
-                                              swim_lane.id &&
-                                            lead.stage_group_id == lane.id
+                                            lead?.stage_id ===
+                                              sub_section?.id &&
+                                            lead?.lead_status_id ==
+                                              swim_lane?.id &&
+                                            lead?.stage_group_id == lane?.id
                                         ) || [];
 
                                       return leadsForThisSubLane.map(
                                         (card: any) =>
                                           (KanbanCardComponent && (
                                             <KanbanCardComponent
-                                              key={card.id}
+                                              key={card?.id}
                                               cardData={card}
                                             />
                                           )) ||

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/listing/libs/utils/common.ts

@@ -79,7 +79,7 @@ export function customDebounce<T extends (...args: any[]) => any>(
 //ENTITY TYPE
 const ENVIRONMENT = "crm_dev";
 export const ENTITY_TYPE = "LEAD";
-export const MAPPED_ENTITY_TYPE = "LAP";
+export const MAPPED_ENTITY_TYPE = "LYPR"; // LAP OR LYPR
 
 const environments = {
   adm_dev: "http://localhost:4010/api",

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}
           />
         ),