rez-table-listing-mui 2.0.14 → 2.0.15

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

@@ -1,10 +1,12 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Box,
   Select,
   MenuItem,
   FormControl,
   Typography,
+  Checkbox,
+  FormControlLabel,
   Grid,
 } from "@mui/material";
 
@@ -21,133 +23,299 @@ import {
 } from "@dnd-kit/core";
 import { TabsStyles } from "../style";
 import { craftTableFilterSettingsOptionsProps } from "../../../types/table-options";
-import { LANE_SELECTS } from "../constants";
 
-const GroupBy = ({
+const SwimLane = ({
   filterSettingStates,
-  columnsData,
-  tabsApiData,
   tabsApiDataLoading,
+  selectSwinLandData,
+  swimLaneHideListData,
 }: {
   filterSettingStates: craftTableFilterSettingsOptionsProps;
   columnsData: any;
-  tabsApiData?: any[];
+  tabsApiData?: { label: string; value: string }[];
   tabsApiDataLoading?: boolean;
+  selectSwinLandData?: { label: string; value: string }[];
+  swimLaneHideListData?: { label: string; value: string }[];
 }) => {
-  const { settingsData, setSettingsData } = filterSettingStates;
+  const { kanbanSettingsData, setKanbanSettingsData } = filterSettingStates;
 
-  const quickTabStates = settingsData?.quick_tab as any;
-  const [searchTerm, setSearchTerm] = useState("");
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [currentSwimLaneAttribute, setCurrentSwimLaneAttribute] =
+    useState<string>(kanbanSettingsData?.swim_lane?.attribute || "");
 
-  const isStatus = quickTabStates?.attribute === "Status";
-  const enableDND =
-    quickTabStates?.attribute === "Source" &&
-    quickTabStates?.sorting === "custom";
-
-  const sensors = useSensors(
-    useSensor(MouseSensor),
-    useSensor(TouchSensor),
-    useSensor(KeyboardSensor)
-  );
+  const isStatusAttribute =
+    kanbanSettingsData?.swim_lane?.attribute === "lead_status" ||
+    kanbanSettingsData?.swim_lane?.attribute === "status";
+  const isSourceAttribute =
+    kanbanSettingsData?.swim_lane?.attribute === "lead_source";
 
   useEffect(() => {
-    if (!quickTabStates || !quickTabStates.attribute) {
-      setSettingsData((prev) => ({
+    if (isStatusAttribute) {
+      setKanbanSettingsData((prev) => ({
         ...prev,
-        quick_tab: {
-          attribute: "Status",
-          sorting: "asc",
-          show_list: [],
-          hide_list: [],
+        swim_lane: {
+          ...prev.swim_lane,
+          sorting: "sort_by",
         },
       }));
     }
-  }, []);
+  }, [kanbanSettingsData?.swim_lane?.attribute]);
 
   useEffect(() => {
-    if (!tabsApiData) return;
+    if (!isSourceAttribute) return;
 
-    setSettingsData((prev) => ({
+    setKanbanSettingsData((prev) => ({
       ...prev,
-      quick_tab: {
-        ...prev.quick_tab,
-        hide_list: tabsApiData,
-        show_list: [],
-        sorting: quickTabStates?.attribute === "Source" ? "count_dsc" : "asc",
+      swim_lane: {
+        ...prev.swim_lane,
+        sorting: "count_dsc",
       },
     }));
-  }, [quickTabStates?.attribute]);
+  }, [isSourceAttribute]);
+
+  useEffect(() => {
+    const stateToArray =
+      (kanbanSettingsData?.swim_lane &&
+        Object.entries(kanbanSettingsData?.swim_lane)) ||
+      [];
+    const isEmptyState = stateToArray.length ? false : true;
+
+    if (isEmptyState) {
+      setKanbanSettingsData((prev) => ({
+        ...prev,
+        swim_lane: {
+          ...prev?.swim_lane,
+          attribute: selectSwinLandData
+            ?.filter((i) => i?.value !== kanbanSettingsData?.lane?.attribute)
+            ?.find((i) => i?.value == "lead_status" || i?.value == "status")
+            ?.value,
+          // sorting: "asc",
+        },
+      }));
+    } else {
+      if (
+        kanbanSettingsData?.swim_lane?.attribute ==
+        kanbanSettingsData?.lane?.attribute
+      ) {
+        setKanbanSettingsData((prev) => ({
+          ...prev,
+          swim_lane: {
+            ...prev?.swim_lane,
+            attribute: selectSwinLandData
+              ?.filter((i) => i?.value !== kanbanSettingsData?.lane?.attribute)
+              ?.find((i) => i?.value == "lead_status" || i?.value == "status")
+              ?.value,
+            // sorting: "asc",
+          },
+        }));
+      }
+    }
+  }, [selectSwinLandData]);
+
+  useEffect(() => {
+    if (currentSwimLaneAttribute === kanbanSettingsData?.swim_lane?.attribute)
+      return;
+
+    if (swimLaneHideListData?.length) {
+      setKanbanSettingsData((prev) => ({
+        ...prev,
+        swim_lane: {
+          ...prev?.swim_lane,
+          hide_list: swimLaneHideListData,
+          show_list: [],
+        },
+      }));
+
+      setCurrentSwimLaneAttribute(
+        kanbanSettingsData?.swim_lane?.attribute || ""
+      );
+    } else {
+      setKanbanSettingsData((prev) => ({
+        ...prev,
+        swim_lane: {
+          ...prev?.swim_lane,
+          hide_list: [],
+          show_list: [],
+        },
+      }));
+
+      setCurrentSwimLaneAttribute("");
+    }
+  }, [swimLaneHideListData]);
+
+  const sortingOptions = [
+    { label: "Sort By", value: "sort_by" },
+    { label: "A-Z", value: "asc" },
+    { label: "Z-A", value: "dsc" },
+    { label: "Count (Ascending)", value: "count_asc" },
+    { label: "Count (Descending)", value: "count_dsc" },
+    { label: "Custom", value: "custom" },
+  ];
+
+  const normalizeTabItem = (item: any) => ({
+    label: item.label,
+    value: item?.value,
+  });
+
+  const constructHideList = () => {
+    const normalizedTabs = swimLaneHideListData?.map(normalizeTabItem) || [];
+
+    // remove items already in show_list (value-safe comparison)
+    return normalizedTabs?.filter(
+      (tab) => !showListValues?.some((i) => i?.value === tab?.value)
+    );
+  };
+
+  const showListValues = kanbanSettingsData?.swim_lane?.show_list || [];
+  const hideListValues = constructHideList() || [];
+
+  const filteredListValues = hideListValues.filter((value: any) =>
+    value?.label?.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor)
+  );
 
-  /* Drag logic unchanged */
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
     if (!over) return;
 
-    const from = active.data.current?.containerId;
-    const to = over.data.current?.containerId;
-    if (!from || !to) return;
+    const currentContainer = active.data.current?.containerId;
+    const overContainer = over.data.current?.containerId;
 
-    const showList = [...(quickTabStates.show_list ?? [])];
-    const hideList = [...(quickTabStates.hide_list ?? [])];
+    if (!currentContainer || !overContainer) return;
 
-    if (from === to) {
-      const list = from === "lanes" ? showList : hideList;
-      const oldIndex = list.indexOf(String(active.id));
-      const newIndex = list.indexOf(String(over.id));
-      if (oldIndex !== -1 && newIndex !== -1) {
-        const [moved] = list.splice(oldIndex, 1);
-        list.splice(newIndex, 0, moved);
-      }
-    } else {
-      if (from === "list" && to === "lanes") {
-        hideList.splice(hideList.indexOf(String(active.id)), 1);
-        showList.push(String(active.id));
+    let newShowList = [...(kanbanSettingsData?.swim_lane?.show_list ?? [])];
+    let newHideList = [...(kanbanSettingsData?.swim_lane?.hide_list ?? [])];
+
+    if (currentContainer === overContainer) {
+      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] = 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);
+        }
       }
-      if (from === "lanes" && to === "list") {
-        showList.splice(showList.indexOf(String(active.id)), 1);
-        hideList.push(String(active.id));
+    }
+
+    // -------------------------------------
+    // CASE 2: MOVE BETWEEN LISTS
+    // -------------------------------------
+    if (currentContainer !== overContainer) {
+      if (currentContainer === "list" && overContainer === "tabs") {
+        // if (newShowList.length < 5) {
+        const idx = newHideList.findIndex((i) => i.value === String(active.id));
+        if (idx !== -1) {
+          const item = newHideList.splice(idx, 1)[0];
+          newShowList.push(item);
+        }
+        // }
+      } else if (currentContainer === "tabs" && overContainer === "list") {
+        const idx = newShowList.findIndex((i) => i.value === String(active.id));
+        if (idx !== -1) {
+          const item = newShowList.splice(idx, 1)[0];
+          newHideList.push(item);
+        }
       }
     }
 
-    setSettingsData((prev) => ({
+    // ----------------------------------------------------------
+    // ⭐ APPLY MASTER UPDATE (with isDefault CHECK for columns)
+    // ----------------------------------------------------------
+    setKanbanSettingsData((prev) => {
+      // FINAL RETURN
+      return {
+        ...prev,
+        swim_lane: {
+          ...prev.swim_lane,
+          show_list: newShowList,
+          hide_list: newHideList,
+        },
+      };
+    });
+  };
+
+  const handleShowAll = () => {
+    setKanbanSettingsData((prev) => ({
       ...prev,
-      quick_tab: {
-        ...prev.quick_tab,
-        show_list: showList,
-        hide_list: hideList,
+      swim_lane: {
+        ...prev?.swim_lane,
+        show_list: [
+          ...(prev?.swim_lane?.show_list || []),
+          ...(prev?.swim_lane?.hide_list || []),
+        ],
+        hide_list: [],
       },
     }));
   };
 
-  const handleItemToggle = (itemId: string, fromContainerId: string) => {
-    const showList = [...(quickTabStates.show_list ?? [])];
-    const hideList = [...(quickTabStates.hide_list ?? [])];
-
-    if (fromContainerId === "list") {
-      hideList.splice(hideList.indexOf(itemId), 1);
-      showList.push(itemId);
-    } else {
-      showList.splice(showList.indexOf(itemId), 1);
-      hideList.push(itemId);
-    }
-
-    setSettingsData((prev) => ({
+  const handleHideAll = () => {
+    setKanbanSettingsData((prev) => ({
       ...prev,
-      quick_tab: {
-        ...prev.quick_tab,
-        show_list: showList,
-        hide_list: hideList,
+      swim_lane: {
+        ...prev?.swim_lane,
+        hide_list: [
+          ...(prev?.swim_lane?.hide_list || []),
+          ...(prev?.swim_lane?.show_list || []),
+        ],
+        show_list: [],
       },
     }));
   };
 
-  const sortingOptions = [
-    { label: "A-Z", value: "asc" },
-    { label: "Z-A", value: "dsc" },
-    { label: "Count (Ascending)", value: "count_asc" },
-    { label: "Count (Descending)", value: "count_dsc" },
-    { label: "Custom", value: "custom" },
-  ];
+  const handleItemToggle = (
+    item: { label: string; value: string },
+    fromContainerId: string
+  ) => {
+    setKanbanSettingsData((prev) => {
+      const toShowList = [...(kanbanSettingsData?.swim_lane?.show_list ?? [])];
+      const toHideList = [...(kanbanSettingsData?.swim_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);
+          // 🌟 ALSO create sorting tab entry if missing
+        }
+      } else if (fromContainerId === "tabs") {
+        const index = toShowList.findIndex((i) => i.value == item.value);
+        if (index > -1) {
+          toShowList.splice(index, 1);
+          toHideList.push(item);
+          // let itemIndex =
+          //   filterSettingStates?.quickTabStates?.show_list?.findIndex(
+          //     (i) => i.value == item.value
+          //   );
+          // 🔥 REMOVE COLUMN WHEN TAB REMOVED (if not default)
+        }
+      }
+      return {
+        ...prev,
+        swim_lane: {
+          ...prev?.swim_lane,
+          show_list: toShowList,
+          hide_list: toHideList,
+        },
+      };
+    });
+  };
+
+  const enableDND =
+    isSourceAttribute && kanbanSettingsData?.swim_lane?.sorting === "custom";
 
   return (
     <Box sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
@@ -156,54 +324,68 @@ const GroupBy = ({
       </Typography>
 
       <Grid sx={{ position: "relative" }} container>
+        {/* Attribute + Sort */}
         <Grid size={12}>
           <Grid sx={TabsStyles.mainTabDropdown} size={6}>
             <FormControl sx={TabsStyles.mainTabSelect} size="small">
               <Select
-                value={quickTabStates?.attribute || ""}
+                value={kanbanSettingsData?.swim_lane?.attribute || ""}
                 onChange={(e) =>
-                  setSettingsData((prev) => ({
+                  setKanbanSettingsData((prev) => ({
                     ...prev,
-                    quick_tab: {
-                      ...prev.quick_tab,
+                    swim_lane: {
+                      ...prev?.swim_lane,
                       attribute: e.target.value,
                     },
                   }))
                 }
               >
-                {LANE_SELECTS?.map((lane: any) => (
-                  <MenuItem key={lane?.key} value={lane?.value}>
-                    {lane?.value}
-                  </MenuItem>
-                ))}
+                {selectSwinLandData
+                  ?.filter(
+                    (i) => i?.value !== kanbanSettingsData?.lane?.attribute
+                  )
+                  ?.map((lane: any) => (
+                    <MenuItem key={lane?.key} value={lane?.value}>
+                      {lane?.label}
+                    </MenuItem>
+                  ))}
               </Select>
             </FormControl>
 
             <FormControl sx={TabsStyles.selectDropdownSeparator} size="small">
               <Select
-                disabled={isStatus}
-                value={quickTabStates?.sorting}
+                value={kanbanSettingsData?.swim_lane?.sorting || "asc"}
+                disabled={isStatusAttribute}
                 onChange={(e) =>
-                  setSettingsData((prev) => ({
+                  setKanbanSettingsData((prev) => ({
                     ...prev,
-                    quick_tab: {
-                      ...prev.quick_tab,
+                    swim_lane: {
+                      ...prev?.swim_lane,
                       sorting: e.target.value,
                     },
                   }))
                 }
               >
-                {!isStatus &&
-                  sortingOptions.map((opt) => (
-                    <MenuItem key={opt.value} value={opt.value}>
-                      {opt.label}
-                    </MenuItem>
-                  ))}
+                {isStatusAttribute && (
+                  <MenuItem value="sort_by" disabled>
+                    Sort By
+                  </MenuItem>
+                )}
+
+                {!isStatusAttribute &&
+                  sortingOptions
+                    .filter((option) => option.value !== "sort_by")
+                    .map((option) => (
+                      <MenuItem key={option.value} value={option.value}>
+                        {option.label}
+                      </MenuItem>
+                    ))}
               </Select>
             </FormControl>
           </Grid>
         </Grid>
 
+        {/* Lists */}
         <DndContext
           sensors={sensors}
           collisionDetection={closestCenter}
@@ -212,8 +394,9 @@ const GroupBy = ({
           <Grid sx={{ mt: 2 }} container spacing={2} size={12}>
             <ListingValues
               buttonText="Show All"
+              onClick={handleShowAll}
               headerText="List of Values"
-              filteredValues={quickTabStates?.hide_list || []}
+              filteredValues={filteredListValues}
               searchTerm={searchTerm}
               setSearchTerm={setSearchTerm}
               containerId="list"
@@ -224,9 +407,10 @@ const GroupBy = ({
 
             <ListingValues
               buttonText="Hide All"
+              onClick={handleHideAll}
               headerText="View as Lanes"
-              filteredValues={quickTabStates?.show_list || []}
-              containerId="lanes"
+              filteredValues={showListValues}
+              containerId="tabs"
               onItemToggle={handleItemToggle}
               enableDragAndDrop={enableDND}
             />
@@ -237,4 +421,4 @@ const GroupBy = ({
   );
 };
 
-export default GroupBy;
+export default SwimLane;

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

@@ -43,6 +43,9 @@ export function QuickFilterSettings({
   activeTab,
   selectAttributeData,
   selectSwinLandData,
+  laneHideListData,
+  swimLaneHideListData,
+  onSaveKanbanSettingsData,
 }: QuickFilterModalProps) {
   const [tabValue, setTabValue] = useState(0);
   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
@@ -53,6 +56,7 @@ export function QuickFilterSettings({
     columnTabState,
     sortingTabState,
     saveButtonError,
+    kanbanSettingsData,
   } = filterSettingStates;
 
   const hasAPIData = Boolean(Object.entries(columnsData).length);
@@ -100,6 +104,16 @@ export function QuickFilterSettings({
     onClose && onClose();
   };
 
+  const handleSaveKanbanSetSettingsData = () => {
+    const modifiedKanbanSettingsData = {
+      lane: kanbanSettingsData?.lane,
+      swim_lane: kanbanSettingsData?.swim_lane,
+    };
+    onSaveKanbanSettingsData &&
+      onSaveKanbanSettingsData(modifiedKanbanSettingsData);
+    onClose && onClose();
+  };
+
   return (
     <CustomDialog
       open={show || showListViewSettings}
@@ -190,6 +204,7 @@ export function QuickFilterSettings({
                       filterSettingStates={filterSettingStates}
                       columnsData={columnsData}
                       selectAttributeData={selectAttributeData}
+                      laneHideListData={laneHideListData}
                     />
                   )}
                 </CustomTabPanel>
@@ -202,6 +217,7 @@ export function QuickFilterSettings({
                       filterSettingStates={filterSettingStates}
                       columnsData={columnsData}
                       selectSwinLandData={selectSwinLandData}
+                      swimLaneHideListData={swimLaneHideListData}
                     />
                   )}
                 </CustomTabPanel>
@@ -235,7 +251,7 @@ export function QuickFilterSettings({
           )}
 
           {view === "kanban" && tabValue === 1 && (
-            <CustomButton onClick={handleSaveSetSettingsData}>
+            <CustomButton onClick={handleSaveKanbanSetSettingsData}>
               Save
             </CustomButton>
           )}

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

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { craftTableFilterSettingsOptionsProps } from "../../types/table-options";
 import {
   ColumnTabConfigProps,
+  KanbanSettingsDataProps,
   QuickTabConfigProps,
   SavedButtonErrorProps,
   SettingsDataProps,
@@ -14,6 +15,8 @@ export function useCraftTableFilterSettings() {
     useState<boolean>(false);
 
   const [settingsData, setSettingsData] = useState<SettingsDataProps>({});
+  const [kanbanSettingsData, setKanbanSettingsData] =
+    useState<KanbanSettingsDataProps>({});
 
   // Quick FIlter settings local states
 
@@ -46,6 +49,8 @@ export function useCraftTableFilterSettings() {
     {
       settingsData: settingsData,
       setSettingsData: setSettingsData,
+      kanbanSettingsData: kanbanSettingsData,
+      setKanbanSettingsData: setKanbanSettingsData,
       showListViewSettings: showListViewSettings,
       setShowListViewSettings: setShowListViewSettings,
       quickTabStates: quickTabStates,

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

@@ -347,14 +347,22 @@ export const useSaveSettingsDataAPI = (entity_type: string) => {
   return { saveSettingsDataMutation };
 };
 
-export const useGetSettingsDataAPI = (entity_type: string) => {
-  const { data: getSettingsAPIData } = useQuery({
+export const useGetSettingsDataAPI = (entity_type: string, type: string) => {
+  const {
+    data: getSettingsAPIData,
+    isSuccess: getSettingsAPIDataSuccess,
+    isPending: getSettingsAPIDataPending,
+  } = useQuery({
     queryKey: ["getSettingsData", entity_type],
-    queryFn: () => getSettingsData(entity_type),
+    queryFn: () => getSettingsData(entity_type, type),
     enabled: !!entity_type,
   });
 
-  return { getSettingsAPIData };
+  return {
+    getSettingsAPIData,
+    getSettingsAPIDataSuccess,
+    getSettingsAPIDataPending,
+  };
 };
 
 export const useGetFilterEntityListAndCriteria = ({

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

@@ -142,11 +142,20 @@ export const saveSettingsData = async (payload: any) => {
   }
 };
 
-export const getSettingsData = async (entity_type: any) => {
+export const getSettingsData = async (entity_type: string, type: string) => {
+  let url = `/meta/layout-preference`;
+
+  // if (entity_type === USER || entity_type === ROLE || entity_type === ORGP) {
+  //   url = `sso/layout`;
+  // }
+
+  const params = {
+    entity_type: entity_type,
+    type: type,
+  };
+
   try {
-    const response = await api.get(
-      `meta/layout-preference?entity_type=${entity_type}`
-    );
+    const response = await api.get(url, { params });
     return response.data;
   } catch (error) {
     console.error("Failed to fetch settings data:", error);