rez-table-listing-mui 2.0.13 → 2.0.15

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

@@ -0,0 +1,424 @@
+import { useEffect, useState } from "react";
+import {
+  Box,
+  Select,
+  MenuItem,
+  FormControl,
+  Typography,
+  Checkbox,
+  FormControlLabel,
+  Grid,
+} from "@mui/material";
+
+import ListingValues from "../common/listing-values";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import { TabsStyles } from "../style";
+import { craftTableFilterSettingsOptionsProps } from "../../../types/table-options";
+
+const SwimLane = ({
+  filterSettingStates,
+  tabsApiDataLoading,
+  selectSwinLandData,
+  swimLaneHideListData,
+}: {
+  filterSettingStates: craftTableFilterSettingsOptionsProps;
+  columnsData: any;
+  tabsApiData?: { label: string; value: string }[];
+  tabsApiDataLoading?: boolean;
+  selectSwinLandData?: { label: string; value: string }[];
+  swimLaneHideListData?: { label: string; value: string }[];
+}) => {
+  const { kanbanSettingsData, setKanbanSettingsData } = filterSettingStates;
+
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [currentSwimLaneAttribute, setCurrentSwimLaneAttribute] =
+    useState<string>(kanbanSettingsData?.swim_lane?.attribute || "");
+
+  const isStatusAttribute =
+    kanbanSettingsData?.swim_lane?.attribute === "lead_status" ||
+    kanbanSettingsData?.swim_lane?.attribute === "status";
+  const isSourceAttribute =
+    kanbanSettingsData?.swim_lane?.attribute === "lead_source";
+
+  useEffect(() => {
+    if (isStatusAttribute) {
+      setKanbanSettingsData((prev) => ({
+        ...prev,
+        swim_lane: {
+          ...prev.swim_lane,
+          sorting: "sort_by",
+        },
+      }));
+    }
+  }, [kanbanSettingsData?.swim_lane?.attribute]);
+
+  useEffect(() => {
+    if (!isSourceAttribute) return;
+
+    setKanbanSettingsData((prev) => ({
+      ...prev,
+      swim_lane: {
+        ...prev.swim_lane,
+        sorting: "count_dsc",
+      },
+    }));
+  }, [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)
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    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 = [...(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);
+        }
+      }
+    }
+
+    // -------------------------------------
+    // 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);
+        }
+      }
+    }
+
+    // ----------------------------------------------------------
+    // ⭐ 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,
+      swim_lane: {
+        ...prev?.swim_lane,
+        show_list: [
+          ...(prev?.swim_lane?.show_list || []),
+          ...(prev?.swim_lane?.hide_list || []),
+        ],
+        hide_list: [],
+      },
+    }));
+  };
+
+  const handleHideAll = () => {
+    setKanbanSettingsData((prev) => ({
+      ...prev,
+      swim_lane: {
+        ...prev?.swim_lane,
+        hide_list: [
+          ...(prev?.swim_lane?.hide_list || []),
+          ...(prev?.swim_lane?.show_list || []),
+        ],
+        show_list: [],
+      },
+    }));
+  };
+
+  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%" }}>
+      <Typography variant="caption" sx={TabsStyles.mainTabsHeader}>
+        **Swim Lane settings will be reflected in vertical lanes
+      </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={kanbanSettingsData?.swim_lane?.attribute || ""}
+                onChange={(e) =>
+                  setKanbanSettingsData((prev) => ({
+                    ...prev,
+                    swim_lane: {
+                      ...prev?.swim_lane,
+                      attribute: e.target.value,
+                    },
+                  }))
+                }
+              >
+                {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
+                value={kanbanSettingsData?.swim_lane?.sorting || "asc"}
+                disabled={isStatusAttribute}
+                onChange={(e) =>
+                  setKanbanSettingsData((prev) => ({
+                    ...prev,
+                    swim_lane: {
+                      ...prev?.swim_lane,
+                      sorting: e.target.value,
+                    },
+                  }))
+                }
+              >
+                {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}
+          onDragEnd={handleDragEnd}
+        >
+          <Grid sx={{ mt: 2 }} container spacing={2} size={12}>
+            <ListingValues
+              buttonText="Show All"
+              onClick={handleShowAll}
+              headerText="List of Values"
+              filteredValues={filteredListValues}
+              searchTerm={searchTerm}
+              setSearchTerm={setSearchTerm}
+              containerId="list"
+              tabsApiDataLoading={tabsApiDataLoading}
+              onItemToggle={handleItemToggle}
+              enableDragAndDrop={enableDND}
+            />
+
+            <ListingValues
+              buttonText="Hide All"
+              onClick={handleHideAll}
+              headerText="View as Lanes"
+              filteredValues={showListValues}
+              containerId="tabs"
+              onItemToggle={handleItemToggle}
+              enableDragAndDrop={enableDND}
+            />
+          </Grid>
+        </DndContext>
+      </Grid>
+    </Box>
+  );
+};
+
+export default SwimLane;

package/src/listing/components/table-settings/constants.ts

@@ -8,7 +8,7 @@ export const SETTINGS_TABS: { label: string }[] = [
 
 export const KANBAN_SETTINGS_TABS: { label: string }[] = [
   { label: "Lane" },
-  { label: "Group By" },
+  { label: "Swim Lane" },
 ];
 
 export const LANE_SELECTS = [
@@ -22,3 +22,4 @@ export const TOGGLE_BUTTON_TABS: ToggleButtonTabsProps[] = [
   { label: "Default", value: true, isDisabled: false },
   { label: "Tab Wise", value: false, isDisabled: false },
 ];
+

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

@@ -20,7 +20,7 @@ import CustomButton from "./components/custom-button";
 import { KANBAN_SETTINGS_TABS, SETTINGS_TABS } from "./constants";
 import Loader from "../common/loader/loader";
 import Lane from "./components/lane";
-import GroupBy from "./components/group-by";
+import GroupBy from "./components/swim-lane";
 import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
 
 export function QuickFilterSettings({
@@ -41,6 +41,11 @@ export function QuickFilterSettings({
   tabsApiDataLoading,
   onSaveSettingsData,
   activeTab,
+  selectAttributeData,
+  selectSwinLandData,
+  laneHideListData,
+  swimLaneHideListData,
+  onSaveKanbanSettingsData,
 }: QuickFilterModalProps) {
   const [tabValue, setTabValue] = useState(0);
   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
@@ -51,6 +56,7 @@ export function QuickFilterSettings({
     columnTabState,
     sortingTabState,
     saveButtonError,
+    kanbanSettingsData,
   } = filterSettingStates;
 
   const hasAPIData = Boolean(Object.entries(columnsData).length);
@@ -66,27 +72,27 @@ export function QuickFilterSettings({
   };
 
   const handleSaveSetSettingsData = () => {
-    const copyColumnTabState = columnTabState?.isDefault
-      ? {
-          isDefault: true,
-          show_list: columnTabState?.show_list || [],
-          hide_list: columnTabState?.hide_list || [],
-        }
-      : {
-          isDefault: false,
-          tabs: columnTabState?.tabs || [],
-        };
-
-    const copySortingTabState = sortingTabState?.isDefault
-      ? {
-          isDefault: true,
-          sortby:
-            sortingTabState?.sortby?.filter((item) => item.column !== "") || [],
-        }
-      : {
-          isDefault: false,
-          tabs: sortingTabState?.tabs || [],
-        };
+    const copyColumnTabState = {
+      isDefault: columnTabState?.isDefault,
+      show_list: columnTabState?.show_list || [],
+      hide_list: columnTabState?.hide_list || [],
+      tabs: columnTabState?.tabs || [],
+    };
+    // : {
+    //     isDefault: false,
+    //     tabs: columnTabState?.tabs || [],
+    //   };
+    // commented as per the requirement
+    const copySortingTabState = {
+      isDefault: sortingTabState?.isDefault,
+      sortby:
+        sortingTabState?.sortby?.filter((item) => item.column !== "") || [],
+      tabs: sortingTabState?.tabs || [],
+    };
+    // : {
+    //     isDefault: false,
+    //     tabs: sortingTabState?.tabs || [],
+    //   };
 
     const modifiedSettingsData = {
       quick_tab: quickTabStates,
@@ -98,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}
@@ -109,7 +125,12 @@ export function QuickFilterSettings({
       container={fullscreenContainer}
     >
       <DialogTitle sx={dialogStyles.dialogTitle}>
-        <Typography sx={{ fontSize: "1.125rem" }}>List View Setting</Typography>
+        <Typography sx={{ fontSize: "1.125rem" }}>
+          {view === "listing"
+            ? "Quick Filter Settings"
+            : "Kanban View Settings"}
+        </Typography>
+
         <IconButton
           size="small"
           color="inherit"
@@ -182,6 +203,8 @@ export function QuickFilterSettings({
                     <Lane
                       filterSettingStates={filterSettingStates}
                       columnsData={columnsData}
+                      selectAttributeData={selectAttributeData}
+                      laneHideListData={laneHideListData}
                     />
                   )}
                 </CustomTabPanel>
@@ -193,6 +216,8 @@ export function QuickFilterSettings({
                     <GroupBy
                       filterSettingStates={filterSettingStates}
                       columnsData={columnsData}
+                      selectSwinLandData={selectSwinLandData}
+                      swimLaneHideListData={swimLaneHideListData}
                     />
                   )}
                 </CustomTabPanel>
@@ -203,15 +228,33 @@ export function QuickFilterSettings({
       </DialogContent>
 
       {!columnsDataLoading && hasAPIData && (
+        // <DialogActions>
+        //   <CustomButton
+        //     // disabled={saveButtonError?.hasError}
+        //     // disabled={saveButtonError?.hasError}
+        //     disabled={disbaledCondition}
+        //     onClick={handleSaveSetSettingsData}
+        //   >
+        //     {view === "listing" ? "Save Quick Filter" : "Save Kanban Layout"}
+        //   </CustomButton>
+        // </DialogActions>
         <DialogActions>
-          <CustomButton
-            // disabled={saveButtonError?.hasError}
-            // disabled={saveButtonError?.hasError}
-            disabled={disbaledCondition}
-            onClick={handleSaveSetSettingsData}
-          >
-            {view === "listing" ? "Save Quick Filter" : "Save Kanban Layout"}
-          </CustomButton>
+          {view === "kanban" && tabValue === 0 && (
+            <>
+              <CustomButton onClick={handleSaveSetSettingsData}>
+                Save & Close
+              </CustomButton>
+              <CustomButton onClick={() => setTabValue(1)} variant="contained">
+                Next
+              </CustomButton>
+            </>
+          )}
+
+          {view === "kanban" && tabValue === 1 && (
+            <CustomButton onClick={handleSaveKanbanSetSettingsData}>
+              Save
+            </CustomButton>
+          )}
         </DialogActions>
       )}
     </CustomDialog>

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

@@ -4,7 +4,12 @@ import {
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
-import { api, ENTITY_TYPE, MAPPED_ENTITY_TYPE } from "../utils/common";
+import {
+  api,
+  APP_CODE,
+  ENTITY_TYPE,
+  MAPPED_ENTITY_TYPE,
+} from "../utils/common";
 import {
   APIParamsProps,
   EntityListingResponse,
@@ -62,7 +67,7 @@ const entityListingCall = async ({
   responseStatus: number;
   data: EntityListingResponse;
 }> => {
-  const url = `filter/adm`;
+  const url = `filter/${APP_CODE}`;
 
   const body = {
     entity_type,
@@ -102,6 +107,7 @@ export const useEntityTableAPI = ({
   ],
   attributeFilter = [],
   flatJson,
+  module_code,
 }: EntityTableAPIProps) => {
   const { data, isPending: isTableDataPending } = useQuery({
     queryKey: ["entityTable", page, size, tabs, quickFilter],
@@ -341,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 = ({