rez-table-listing-mui 2.0.14 → 2.0.15

package/package.json

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

package/src/kanban/hooks/hooks.ts

@@ -1,6 +1,9 @@
 import { useQueries, useQuery } from "@tanstack/react-query";
 import { getKanbanData } from "../services/service";
-import { commonFetchDropdownDataAPI } from "../../listing/libs/utils/apiColumn";
+import {
+  commonFetchDropdownDataAPI,
+  newCommonGetDropdownDataAPI,
+} from "../../listing/libs/utils/apiColumn";
 
 export const kanbanDropdownResults = (
   entity_type: string,
@@ -21,6 +24,20 @@ export const kanbanDropdownResults = (
   });
 };
 
+export const useGetAttributeDropdown = (
+  entity_type: string,
+  attribute_key: string
+) =>
+  useQuery({
+    queryKey: ["commonDropdown", entity_type, attribute_key],
+    queryFn: () =>
+      newCommonGetDropdownDataAPI({
+        entity_type,
+        attribute_key,
+      }),
+    enabled: Boolean(entity_type && attribute_key),
+  });
+
 export const useGetKanbanData = (entity_type: string) => {
   const {
     data: metaData,

package/src/listing/components/table-settings/components/lane.tsx

@@ -23,7 +23,6 @@ import {
 } from "@dnd-kit/core";
 import { TabsStyles } from "../style";
 import { craftTableFilterSettingsOptionsProps } from "../../../types/table-options";
-import { LANE_SELECTS } from "../constants";
 
 const Lane = ({
   filterSettingStates,
@@ -31,55 +30,92 @@ const Lane = ({
   tabsApiData,
   tabsApiDataLoading,
   selectAttributeData,
+  laneHideListData,
 }: {
   filterSettingStates: craftTableFilterSettingsOptionsProps;
   columnsData: any;
   tabsApiData?: { label: string; value: string }[];
   tabsApiDataLoading?: boolean;
   selectAttributeData?: { label: string; value: string }[];
+  laneHideListData?: { label: string; value: string }[];
 }) => {
-  const { settingsData, setSettingsData } = filterSettingStates;
+  const { kanbanSettingsData, setKanbanSettingsData } = filterSettingStates;
 
   const [searchTerm, setSearchTerm] = useState<string>("");
-  const [currentQuickAttribute, setCurrentQuickAttribute] = useState<string>(
-    settingsData?.quick_tab?.attribute || ""
+  const [currentLaneAttribute, setCurrentLaneAttribute] = useState<string>(
+    kanbanSettingsData?.lane?.attribute || ""
   );
 
-  const quickTabStates = settingsData?.quick_tab as any;
+  console.log("selectAttributeData", selectAttributeData);
 
   useEffect(() => {
     const stateToArray =
-      (quickTabStates && Object.entries(quickTabStates)) || [];
+      (kanbanSettingsData?.lane && Object.entries(kanbanSettingsData?.lane)) ||
+      [];
     const isEmptyState = stateToArray.length ? false : true;
 
     if (isEmptyState) {
-      setSettingsData((prev) => ({
+      setKanbanSettingsData((prev) => ({
         ...prev,
-        quick_tab: {
-          ...prev?.quick_tab,
-          attribute: LANE_SELECTS[0].value,
-          sorting: "asc",
+        lane: {
+          ...prev?.lane,
+          attribute:
+            selectAttributeData
+              ?.filter(
+                (i) => i?.value !== kanbanSettingsData?.swim_lane?.attribute
+              )
+              ?.find((i) => i?.value == "stage_group")?.value || "",
         },
       }));
+    } else {
+      if (
+        kanbanSettingsData?.swim_lane?.attribute ==
+        kanbanSettingsData?.lane?.attribute
+      ) {
+        setKanbanSettingsData((prev) => ({
+          ...prev,
+          swim_lane: {
+            ...prev?.swim_lane,
+            attribute:
+              selectAttributeData
+                ?.filter(
+                  (i) => i?.value !== kanbanSettingsData?.swim_lane?.attribute
+                )
+                ?.find((i) => i?.value == "stage_group")?.value || "",
+            // sorting: "asc",
+          },
+        }));
+      }
     }
-  }, [columnsData]);
+  }, [selectAttributeData]);
 
   useEffect(() => {
-    if (currentQuickAttribute === settingsData?.quick_tab?.attribute) return;
+    if (currentLaneAttribute === kanbanSettingsData?.lane?.attribute) return;
 
-    if (tabsApiData?.length) {
-      setSettingsData((prev) => ({
+    if (laneHideListData?.length) {
+      setKanbanSettingsData((prev) => ({
         ...prev,
-        quick_tab: {
-          ...prev?.quick_tab,
-          hide_list: tabsApiData,
+        lane: {
+          ...prev?.lane,
+          hide_list: laneHideListData,
           show_list: [],
         },
       }));
 
-      setCurrentQuickAttribute(settingsData?.quick_tab?.attribute || "");
+      setCurrentLaneAttribute(kanbanSettingsData?.lane?.attribute || "");
+    } else {
+      setKanbanSettingsData((prev) => ({
+        ...prev,
+        lane: {
+          ...prev?.lane,
+          hide_list: [],
+          show_list: [],
+        },
+      }));
+
+      setCurrentLaneAttribute("");
     }
-  }, [tabsApiData]);
+  }, [laneHideListData]);
 
   const sortingOptions = [
     { label: "A-Z", value: "asc" },
@@ -89,19 +125,53 @@ const Lane = ({
     { label: "Custom", value: "custom" },
   ];
 
-  const showListValues = (quickTabStates?.show_list || [])?.map((id: any) => ({
-    id,
-    label: id?.charAt(0)?.toUpperCase() + id?.slice(1),
-  }));
-  const hideListValues = (quickTabStates?.hide_list || [])?.map((id: any) => ({
-    id,
-    label: id?.charAt(0)?.toUpperCase() + id?.slice(1),
-  }));
+  const isWorkflowAttribute =
+    kanbanSettingsData?.lane?.attribute === "stage_group" ||
+    kanbanSettingsData?.lane?.attribute === "stage";
+
+  const isSourceAttribute =
+    kanbanSettingsData?.lane?.attribute === "lead_source";
+
+  useEffect(() => {
+    if (isSourceAttribute) {
+      setKanbanSettingsData((prev) => ({
+        ...prev,
+        lane: {
+          ...prev.lane,
+          sorting: prev.lane?.sorting || "asc",
+        },
+      }));
+    }
+  }, [kanbanSettingsData?.lane?.attribute]);
+
+  const displaySortingValue = isWorkflowAttribute
+    ? "workflow_sequence"
+    : kanbanSettingsData?.lane?.sorting;
+
+  const enableDND =
+    isSourceAttribute && kanbanSettingsData?.lane?.sorting === "custom";
+
+  const normalizeTabItem = (item: any) => ({
+    label: item.label,
+    value: item?.value,
+  });
+  const constructHideList = () => {
+    const normalizedTabs = laneHideListData?.map(normalizeTabItem) || [];
+    return normalizedTabs?.filter(
+      (tab) => !showListValues?.some((i) => i?.value === tab?.value)
+    );
+  };
+
+  const showListValues = kanbanSettingsData?.lane?.show_list || [];
+  const hideListValues = constructHideList() || [];
 
   const filteredListValues = hideListValues.filter((value: any) =>
     value?.label?.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
+  /* ===========================================================
+     DND CONFIG
+     =========================================================== */
   const sensors = useSensors(
     useSensor(MouseSensor),
     useSensor(TouchSensor),
@@ -109,45 +179,59 @@ const Lane = ({
   );
 
   const handleDragEnd = (event: DragEndEvent) => {
+    if (!enableDND) return; // protect reorder when drag is disabled
+
     const { active, over } = event;
     if (!over) return;
 
     const currentContainer = active.data.current?.containerId;
     const overContainer = over.data.current?.containerId;
+
     if (!currentContainer || !overContainer) return;
 
-    let newShowList = [...(quickTabStates.show_list ?? [])];
-    let newHideList = [...(quickTabStates.hide_list ?? [])];
+    let newShowList = [...(kanbanSettingsData?.lane?.show_list ?? [])];
+    let newHideList = [...(kanbanSettingsData?.lane?.hide_list ?? [])];
 
     if (currentContainer === overContainer) {
-      const list = currentContainer === "list" ? newHideList : newShowList;
-      const oldIndex = list.indexOf(String(active.id));
-      const newIndex = list.indexOf(String(over.id));
+      if (currentContainer === "list") {
+        const oldIndex = newHideList.findIndex((i) => i.value === active.id);
+        const newIndex = newHideList.findIndex((i) => i.value === over.id);
 
-      if (oldIndex !== -1 && newIndex !== -1) {
-        const [removed] = list.splice(oldIndex, 1);
-        list.splice(newIndex, 0, removed);
+        if (oldIndex !== -1 && newIndex !== -1) {
+          const [removed] = newHideList.splice(oldIndex, 1);
+          newHideList.splice(newIndex, 0, removed);
+        }
+      } else {
+        const oldIndex = newShowList.findIndex((i) => i.value === active.id);
+        const newIndex = newShowList.findIndex((i) => i.value === over.id);
+
+        if (oldIndex !== -1 && newIndex !== -1) {
+          const [removed] = newShowList.splice(oldIndex, 1);
+          newShowList.splice(newIndex, 0, removed);
+        }
       }
-    } else {
-      if (currentContainer === "list" && overContainer === "lanes") {
-        const idx = newHideList.indexOf(String(active.id));
+    }
+
+    if (currentContainer !== overContainer) {
+      if (currentContainer === "list" && overContainer === "tabs") {
+        const idx = newHideList.findIndex((i) => i.value === String(active.id));
         if (idx !== -1) {
-          newHideList.splice(idx, 1);
-          newShowList.push(String(active.id));
+          const item = newHideList.splice(idx, 1)[0];
+          newShowList.push(item);
         }
-      } else if (currentContainer === "lanes" && overContainer === "list") {
-        const idx = newShowList.indexOf(String(active.id));
+      } else if (currentContainer === "tabs" && overContainer === "list") {
+        const idx = newShowList.findIndex((i) => i.value === String(active.id));
         if (idx !== -1) {
-          newShowList.splice(idx, 1);
-          newHideList.push(String(active.id));
+          const item = newShowList.splice(idx, 1)[0];
+          newHideList.push(item);
         }
       }
     }
 
-    setSettingsData((prev) => ({
+    setKanbanSettingsData((prev) => ({
       ...prev,
-      quick_tab: {
-        ...prev?.quick_tab,
+      lane: {
+        ...prev.lane,
         show_list: newShowList,
         hide_list: newHideList,
       },
@@ -155,13 +239,13 @@ const Lane = ({
   };
 
   const handleShowAll = () => {
-    setSettingsData((prev) => ({
+    setKanbanSettingsData((prev) => ({
       ...prev,
-      quick_tab: {
-        ...prev?.quick_tab,
+      lane: {
+        ...prev?.lane,
         show_list: [
-          ...(prev?.quick_tab?.show_list || []),
-          ...(prev?.quick_tab?.hide_list || []),
+          ...(prev?.lane?.show_list || []),
+          ...(prev?.lane?.hide_list || []),
         ],
         hide_list: [],
       },
@@ -169,51 +253,56 @@ const Lane = ({
   };
 
   const handleHideAll = () => {
-    setSettingsData((prev) => ({
+    setKanbanSettingsData((prev) => ({
       ...prev,
-      quick_tab: {
-        ...prev?.quick_tab,
+      lane: {
+        ...prev?.lane,
         hide_list: [
-          ...(prev?.quick_tab?.hide_list || []),
-          ...(prev?.quick_tab?.show_list || []),
+          ...(prev?.lane?.hide_list || []),
+          ...(prev?.lane?.show_list || []),
         ],
         show_list: [],
       },
     }));
   };
 
-  /* ---------- ITEM TOGGLE (UNCHANGED) ---------- */
-  const handleItemToggle = (itemId: string, fromContainerId: string) => {
-    const toShowList = [...(quickTabStates.show_list ?? [])];
-    const toHideList = [...(quickTabStates.hide_list ?? [])];
-
-    if (fromContainerId === "list") {
-      const index = toHideList.indexOf(itemId);
-      if (index > -1) {
-        toHideList.splice(index, 1);
-        toShowList.push(itemId);
-      }
-    } else {
-      const index = toShowList.indexOf(itemId);
-      if (index > -1) {
-        toShowList.splice(index, 1);
-        toHideList.push(itemId);
+  const handleItemToggle = (
+    item: { label: string; value: string },
+    fromContainerId: string
+  ) => {
+    setKanbanSettingsData((prev) => {
+      const toShowList = [...(kanbanSettingsData?.lane?.show_list ?? [])];
+      const toHideList = [...(kanbanSettingsData?.lane?.hide_list ?? [])];
+
+      if (fromContainerId === "list") {
+        const index = toHideList.findIndex((i) => i.value == item.value);
+        if (index > -1) {
+          toHideList.splice(index, 1);
+          toShowList.push(item);
+        }
+      } else if (fromContainerId === "tabs") {
+        const index = toShowList.findIndex((i) => i.value == item.value);
+        if (index > -1) {
+          toShowList.splice(index, 1);
+          toHideList.push(item);
+        }
       }
-    }
-
-    setSettingsData((prev) => ({
-      ...prev,
-      quick_tab: {
-        ...prev?.quick_tab,
-        show_list: toShowList,
-        hide_list: toHideList,
-      },
-    }));
+      return {
+        ...prev,
+        lane: {
+          ...prev?.lane,
+          show_list: toShowList,
+          hide_list: toHideList,
+        },
+      };
+    });
   };
 
-  const enableDND = quickTabStates?.sorting === "custom";
+  console.log("kanban", kanbanSettingsData);
 
-  /* ================== RENDER ================== */
+  /* ===========================================================
+     RENDER
+     =========================================================== */
   return (
     <Box sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
       <Typography variant="caption" sx={TabsStyles.mainTabsHeader}>
@@ -226,49 +315,70 @@ const Lane = ({
           <Grid sx={TabsStyles.mainTabDropdown} size={6}>
             <FormControl sx={TabsStyles.mainTabSelect} size="small">
               <Select
-                value={quickTabStates?.attribute || ""}
+                value={kanbanSettingsData?.lane?.attribute || ""}
                 onChange={(e) =>
-                  setSettingsData((prev) => ({
+                  setKanbanSettingsData((prev) => ({
                     ...prev,
-                    quick_tab: {
-                      ...prev?.quick_tab,
+                    lane: {
+                      ...prev?.lane,
                       attribute: e.target.value,
                     },
                   }))
                 }
               >
-                {selectAttributeData?.map((lane: any) => (
-                  <MenuItem key={lane?.key} value={lane?.value}>
-                    {lane?.value}
-                  </MenuItem>
-                ))}
+                {selectAttributeData
+                  ?.filter(
+                    (i) => i?.value !== kanbanSettingsData?.swim_lane?.attribute
+                  )
+                  ?.map((lane: any) => (
+                    <MenuItem key={lane?.key} value={lane?.value}>
+                      {lane?.label}
+                    </MenuItem>
+                  ))}
               </Select>
             </FormControl>
 
             <FormControl sx={TabsStyles.selectDropdownSeparator} size="small">
               <Select
-                value={quickTabStates?.sorting || "asc"}
-                onChange={(e) =>
-                  setSettingsData((prev) => ({
-                    ...prev,
-                    quick_tab: {
-                      ...prev?.quick_tab,
-                      sorting: e.target.value,
-                    },
-                  }))
-                }
+                value={displaySortingValue || ""}
+                disabled={isWorkflowAttribute}
+                onChange={(e) => {
+                  if (!isWorkflowAttribute) {
+                    const value = e.target.value as
+                      | "asc"
+                      | "dsc"
+                      | "count_asc"
+                      | "count_dsc"
+                      | "custom";
+
+                    setKanbanSettingsData((prev) => ({
+                      ...prev,
+                      lane: {
+                        ...prev?.lane,
+                        sorting: value,
+                      },
+                    }));
+                  }
+                }}
               >
-                {sortingOptions.map((option) => (
-                  <MenuItem key={option.value} value={option.value}>
-                    {option.label}
+                {isWorkflowAttribute && (
+                  <MenuItem value="workflow_sequence">
+                    Workflow Sequence
                   </MenuItem>
-                ))}
+                )}
+
+                {!isWorkflowAttribute &&
+                  sortingOptions.map((option) => (
+                    <MenuItem key={option.value} value={option.value}>
+                      {option.label}
+                    </MenuItem>
+                  ))}
               </Select>
             </FormControl>
           </Grid>
         </Grid>
 
-        {/* Lists */}
+        {/* LISTING + DRAG */}
         <DndContext
           sensors={sensors}
           collisionDetection={closestCenter}
@@ -293,26 +403,27 @@ const Lane = ({
               onClick={handleHideAll}
               headerText="View as Lanes"
               filteredValues={showListValues}
-              containerId="lanes"
+              containerId="tabs"
               onItemToggle={handleItemToggle}
               enableDragAndDrop={enableDND}
             />
           </Grid>
         </DndContext>
 
-        {quickTabStates?.attribute === "Stage Group" && (
+        {/* SUBLANE CHECKBOX */}
+        {kanbanSettingsData?.lane?.attribute === "stage_group" && (
           <Grid size={12}>
             <Box sx={TabsStyles.checkboxStyle}>
               <FormControlLabel
                 control={
                   <Checkbox
-                    checked={quickTabStates?.showSubLane || false}
+                    checked={kanbanSettingsData?.lane?.isSubLane || false}
                     onChange={(e) =>
-                      setSettingsData((prev) => ({
+                      setKanbanSettingsData((prev) => ({
                         ...prev,
-                        quick_tab: {
-                          ...prev?.quick_tab,
-                          showSubLane: e.target.checked,
+                        lane: {
+                          ...prev?.lane,
+                          isSubLane: e.target.checked,
                         },
                       }))
                     }
@@ -325,12 +436,13 @@ const Lane = ({
           </Grid>
         )}
 
-        {quickTabStates?.attribute === "Stage Group" &&
-          quickTabStates?.showSubLane && (
+        {/* SUBLANE STAGE SELECT */}
+        {kanbanSettingsData?.lane?.attribute === "stage_group" &&
+          kanbanSettingsData?.lane?.isSubLane && (
             <Grid size={12}>
               <Grid sx={TabsStyles.mainTabDropdown} size={6}>
                 <FormControl sx={TabsStyles.mainTabSelect} size="small">
-                  <Select value="Stage" disabled>
+                  <Select value="Stage">
                     <MenuItem value="Stage">Stage</MenuItem>
                   </Select>
                 </FormControl>