rez-table-listing-mui 1.0.49 → 1.0.50

package/src/components/table-settings/components/column.tsx

@@ -17,6 +17,8 @@ import CustomToggleSwitchButton from "./toggle-button-switch";
 import { FilterColumnsDataProps } from "../../../types/filter";
 import { TOGGLE_BUTTON_TABS } from "../constants";
 import CustomTabs from "../tabs/horizontal";
+import { ColumnTabConfigProps } from "../../../types/filter-settings";
+import InfoAlert from "../common/info-alert";
 
 export interface ColumnItem {
   label: string;
@@ -38,109 +40,125 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);
 
-  const { quickTabStates, columnTabState, setColumnTabState, settingsData } =
-    filterSettingStates;
-
+  const {
+    quickTabStates,
+    settingsData,
+    setSettingsData,
+    saveButtonError,
+    setSaveButtonError,
+  } = filterSettingStates;
+  const settingsColumnState = (settingsData?.column ||
+    {}) as ColumnTabConfigProps;
+  const isColumnDefault = settingsColumnState?.isDefault || false;
+  const ERROR_CODE = "column_error";
+
+  /**
+   * ? What is this for?
+   *
+   * Three main conditions are checked here:
+   * - If the state is empty, then set the state to default and add all columns in show_list
+   * - if Default is selected and Default is empty, then add all columns in show_list
+   * - If Default is not selected and tabs is empty, then add all columns in show_list
+   *      of their respective tabs
+   */
   useEffect(() => {
+    const stateToArray = Object.entries(settingsColumnState) || [];
+    const isStateEmpty = stateToArray.length ? false : true;
+    const isDefaultEmpty =
+      settingsColumnState?.show_list?.length ||
+      settingsColumnState?.hide_list?.length
+        ? false
+        : true;
+    const isTabWiseEmpty = settingsColumnState?.tabs?.length ? false : true;
+
     const mappedColumns: ColumnItem[] =
       columnsData?.column_list?.map((column) => ({
         label: column?.name,
         value: column?.attribute_key,
       })) || [];
 
-    // If you have real tab data, use it
-    if (settingsData?.column?.tabs?.length) {
-      setColumnTabState({
-        isDefault: settingsData.column.isDefault ?? true,
-        show_list: mappedColumns,
-        hide_list: [],
-        tabs: settingsData.column.tabs, // Use the real tab data!
-      });
-      return;
-    }
-
-    // Otherwise, use the default mapping
-    const mappedTabs: TabData[] =
-      quickTabStates?.show_list?.map((tab) => ({
-        tab_name: tab,
-        show_list: mappedColumns,
-        hide_list: [],
-      })) || [];
-
-    if (!Object.entries(columnTabState)?.length) {
-      setColumnTabState({
-        isDefault: true,
-        show_list: mappedColumns,
-        hide_list: [],
-        tabs: mappedTabs,
-      });
-    }
-
-    // console.log(
-    //   "+++++++++",
-    //   columnTabState?.tabs,
-    //   !settingsData?.column?.tabs?.length
-    // );
-
-    /**
-     * * If isDefault is true and tabs is undefined
-     * *    - we need to set tabs
-     *
-     * * If isDefault is false and show_list and hide_list are undefined
-     * *    - we need to set show_list and hide_list
-     */
-    if (
-      columnTabState?.tabs?.length === undefined &&
-      !settingsData?.column?.tabs?.length
-    ) {
-      setColumnTabState((prev) => ({
+    if (isStateEmpty) {
+      setSettingsData((prev) => ({
         ...prev,
-        tabs: mappedTabs,
+        column: {
+          isDefault: true,
+          show_list: mappedColumns,
+          hide_list: [],
+        },
       }));
-    } else if (!columnTabState?.show_list && !columnTabState?.hide_list) {
-      setColumnTabState((prev) => ({
+    } else if (isColumnDefault && isDefaultEmpty) {
+      setSettingsData((prev) => ({
         ...prev,
-        show_list: mappedColumns,
-        hide_list: [],
+        column: {
+          ...prev.column,
+          show_list: mappedColumns,
+          hide_list: [],
+        },
+      }));
+    } else if (!isColumnDefault && isTabWiseEmpty) {
+      const mappedTabs: TabData[] =
+        quickTabStates?.show_list?.map((tab) => ({
+          tab_name: tab,
+          show_list: mappedColumns,
+          hide_list: [],
+        })) || [];
+
+      setSettingsData((prev) => ({
+        ...prev,
+        column: {
+          ...prev.column,
+          tabs: mappedTabs,
+        },
       }));
     }
-  }, [settingsData, columnsData, quickTabStates]); // Added dependencies for consistency
-
-  // useEffect(() => {
-  //   if (settingsData?.column) {
-  //     const mappedColumns: ColumnItem[] =
-  //       columnsData?.column_list?.map((col) => ({
-  //         label: col.name,
-  //         value: col.attribute_key,
-  //       })) || [];
-
-  //     const selectedTabNames: string[] =
-  //       settingsData?.quick_tab?.show_list || [];
-
-  //     const columnTabsMap: Record<string, TabData> = {};
-  //     settingsData?.column?.tabs?.forEach((tab) => {
-  //       columnTabsMap[tab.tab_name] = tab; // tab_name → TabData
-  //     });
-
-  //     const filteredTabs: TabData[] = selectedTabNames.map((name) => ({
-  //       tab_name: name,
-  //       show_list: columnTabsMap[name]?.show_list || [],
-  //       hide_list: columnTabsMap[name]?.hide_list || [],
-  //     }));
-
-  //     console.log("filteredTabs", filteredTabs);
-
-  //     setColumnTabState({
-  //       isDefault: settingsData.column.isDefault ?? true,
-  //       show_list: mappedColumns,
-  //       hide_list: [],
-  //       tabs: filteredTabs,
-  //     });
-  //     console.log("mappedColumns", mappedColumns);
-  //   }
-  // }, [settingsData]);
-
-  const isColumnDefault = columnTabState?.isDefault;
+  }, [isColumnDefault]);
+
+  useEffect(() => {
+    const showList = settingsColumnState?.show_list || [];
+    const hideList = settingsColumnState?.hide_list || [];
+
+    if (showList || hideList) {
+      const isValidShowList = showList?.length > 0;
+      console.log("inside show list and hide list if", isValidShowList);
+
+      if (!isValidShowList) {
+        console.log("not a valid show list");
+
+        const hasColumnError = saveButtonError.messages.some(
+          (message) => message.type === ERROR_CODE
+        );
+
+        if (!hasColumnError) {
+          console.log("inside if");
+          setSaveButtonError((prev) => ({
+            ...prev,
+            hasError: true,
+            messages: [
+              ...prev.messages,
+              {
+                type: ERROR_CODE,
+                message: "Column: Please select at least one column",
+              },
+            ],
+          }));
+        }
+      } else {
+        console.log("inside else");
+        const hasOtherMessages = saveButtonError?.messages?.some(
+          (message) => message.type !== ERROR_CODE
+        );
+
+        // Reset error state if the list is valid
+        setSaveButtonError((prev) => ({
+          ...prev,
+          hasError: hasOtherMessages,
+          messages:
+            prev?.messages?.filter((message) => message.type !== ERROR_CODE) ||
+            [],
+        }));
+      }
+    }
+  }, [settingsColumnState?.show_list, settingsColumnState?.hide_list]);
 
   const sensors = useSensors(
     useSensor(MouseSensor),
@@ -148,25 +166,29 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
     useSensor(KeyboardSensor)
   );
 
-  // Handle toggle between Default and Tab Wise
   const handleToggleChange = (
     _: React.MouseEvent<HTMLElement>,
     newValue: boolean
   ) => {
     if (newValue !== null) {
-      setColumnTabState({ ...columnTabState, isDefault: newValue });
+      setSettingsData((prev) => ({
+        ...prev,
+        column: {
+          ...prev.column,
+          isDefault: newValue,
+        },
+      }));
     }
   };
 
-  // Get current show/hide lists based on mode
   const getCurrentLists = () => {
-    if (columnTabState?.isDefault) {
+    if (settingsColumnState?.isDefault) {
       return {
-        showList: columnTabState.show_list || [],
-        hideList: columnTabState.hide_list || [],
+        showList: settingsColumnState.show_list || [],
+        hideList: settingsColumnState.hide_list || [],
       };
     } else {
-      const currentTab = columnTabState?.tabs?.[selectedTabIndex];
+      const currentTab = settingsColumnState?.tabs?.[selectedTabIndex];
       return {
         showList: currentTab?.show_list || [],
         hideList: currentTab?.hide_list || [],
@@ -176,7 +198,6 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
 
   const { showList, hideList } = getCurrentLists();
 
-  // Convert to FilterValue format for ListingValues component
   const showListValues = showList.map((item) => ({
     id: item.value,
     label: item.label,
@@ -198,55 +219,48 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
     let newHideList = [...hideList];
 
     if (fromContainerId === "tabs") {
-      // Move from show to hide
-      const itemIndex = newShowList.findIndex((item) => item.value === itemId);
-      if (itemIndex > -1) {
-        const [itemToMove] = newShowList.splice(itemIndex, 1);
-        newHideList.push(itemToMove);
+      const idx = newShowList.findIndex((item) => item.value === itemId);
+      if (idx > -1) {
+        const [moved] = newShowList.splice(idx, 1);
+        newHideList.push(moved);
       }
     } else if (fromContainerId === "list") {
-      // Move from hide to show
-      const itemIndex = newHideList.findIndex((item) => item.value === itemId);
-      if (itemIndex > -1) {
-        const [itemToMove] = newHideList.splice(itemIndex, 1);
-        newShowList.push(itemToMove);
+      const idx = newHideList.findIndex((item) => item.value === itemId);
+      if (idx > -1) {
+        const [moved] = newHideList.splice(idx, 1);
+        newShowList.push(moved);
       }
     }
 
-    updateLists(newShowList, newHideList);
-  };
-
-  // Update lists based on current mode
-  const updateLists = (
-    newShowList: ColumnItem[],
-    newHideList: ColumnItem[]
-  ) => {
     if (isColumnDefault) {
-      setColumnTabState({
-        ...columnTabState,
-        show_list: newShowList,
-        hide_list: newHideList,
-      });
+      setSettingsData((prev) => ({
+        ...prev,
+        column: {
+          ...prev.column,
+          show_list: newShowList,
+          hide_list: newHideList,
+        },
+      }));
     } else {
-      const updatedTabs = columnTabState?.tabs ? [...columnTabState.tabs] : [];
+      const updatedTabs = [...(settingsColumnState?.tabs || [])];
       updatedTabs[selectedTabIndex] = {
         ...updatedTabs[selectedTabIndex],
         show_list: newShowList,
         hide_list: newHideList,
       };
-      setColumnTabState({
-        ...columnTabState,
-        tabs: updatedTabs,
-      });
+      setSettingsData((prev) => ({
+        ...prev,
+        column: {
+          ...prev.column,
+          tabs: updatedTabs,
+        },
+      }));
     }
   };
 
-  // Drag and drop logic
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
-    if (!over) {
-      return;
-    }
+    if (!over) return;
 
     const currentContainer = active.data.current?.containerId;
     const overContainer = over.data.current?.containerId;
@@ -261,34 +275,17 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
     let newHideList = [...hideList];
 
     if (currentContainer === overContainer) {
-      // Reorder within the same list
-      if (currentContainer === "list") {
-        const oldIndex = newHideList.findIndex(
-          (item) => item.value === String(active.id)
-        );
-        const newIndex = newHideList.findIndex(
-          (item) => item.value === String(over.id)
-        );
-        if (oldIndex !== -1 && newIndex !== -1) {
-          const [removed] = newHideList.splice(oldIndex, 1);
-          newHideList.splice(newIndex, 0, removed);
-        }
-      } else {
-        const oldIndex = newShowList.findIndex(
-          (item) => item.value === String(active.id)
-        );
-        const newIndex = newShowList.findIndex(
-          (item) => item.value === String(over.id)
-        );
-        if (oldIndex !== -1 && newIndex !== -1) {
-          const [removed] = newShowList.splice(oldIndex, 1);
-          newShowList.splice(newIndex, 0, removed);
-        }
+      const list = currentContainer === "list" ? newHideList : newShowList;
+      const oldIndex = list.findIndex(
+        (item) => item.value === String(active.id)
+      );
+      const newIndex = list.findIndex((item) => item.value === String(over.id));
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const [removed] = list.splice(oldIndex, 1);
+        list.splice(newIndex, 0, removed);
       }
     } else {
-      // Move between lists
       if (currentContainer === "list" && overContainer === "tabs") {
-        // Move from hide to show
         const idx = newHideList.findIndex(
           (item) => item.value === String(active.id)
         );
@@ -297,7 +294,6 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
           newShowList.push(activeItem);
         }
       } else if (currentContainer === "tabs" && overContainer === "list") {
-        // Move from show to hide
         const idx = newShowList.findIndex(
           (item) => item.value === String(active.id)
         );
@@ -308,29 +304,60 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
       }
     }
 
-    updateLists(newShowList, newHideList);
+    if (isColumnDefault) {
+      setSettingsData((prev) => ({
+        ...prev,
+        column: {
+          ...prev.column,
+          show_list: newShowList,
+          hide_list: newHideList,
+        },
+      }));
+    } else {
+      const updatedTabs = [...(settingsColumnState?.tabs || [])];
+      updatedTabs[selectedTabIndex] = {
+        ...updatedTabs[selectedTabIndex],
+        show_list: newShowList,
+        hide_list: newHideList,
+      };
+      setSettingsData((prev) => ({
+        ...prev,
+        column: {
+          ...prev.column,
+          tabs: updatedTabs,
+        },
+      }));
+    }
   };
 
-  // Show All/Hide All logic
   const handleShowAll = () => {
-    const newShowList = [...showList, ...hideList];
-    const newHideList: ColumnItem[] = [];
-    updateLists(newShowList, newHideList);
+    setSettingsData((prev) => ({
+      ...prev,
+      column: {
+        ...prev.column,
+        show_list: [...showList, ...hideList],
+        hide_list: [],
+      },
+    }));
   };
 
   const handleHideAll = () => {
-    const newShowList: ColumnItem[] = [];
-    const newHideList = [...hideList, ...showList];
-    updateLists(newShowList, newHideList);
+    setSettingsData((prev) => ({
+      ...prev,
+      column: {
+        ...prev.column,
+        show_list: [],
+        hide_list: [...hideList, ...showList],
+      },
+    }));
   };
 
-  // Tab change handler
   const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
     setSelectedTabIndex(newValue);
   };
 
   const hasShowListQuickTabs =
-    quickTabStates?.show_list?.length !== 0 || isColumnDefault ? true : false;
+    quickTabStates?.show_list?.length !== 0 || isColumnDefault;
 
   return (
     <Box
@@ -339,17 +366,18 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
         flexDirection: "column",
         gap: "0.75rem",
         height: "100%",
+        position: "relative",
       }}
     >
       <Box>
         <Typography variant="subtitle2" sx={{ mb: 1 }}>
           Customize column by
         </Typography>
-        <CustomToggleSwitchButton
+        {/* <CustomToggleSwitchButton
           buttons={TOGGLE_BUTTON_TABS}
           value={isColumnDefault}
           onChange={handleToggleChange}
-        />
+        /> */}
       </Box>
 
       <Box sx={{ flex: 1 }}>
@@ -367,7 +395,7 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
             collisionDetection={closestCenter}
             onDragEnd={handleDragEnd}
           >
-            <Grid container spacing={2} size={12}>
+            <Grid container spacing={2}>
               <ListingValues
                 containerId="list"
                 headerText="Hidden In List"
@@ -385,6 +413,18 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
                 buttonText="Hide All"
                 onClick={handleHideAll}
                 onItemToggle={handleItemToggle}
+                AlertComponenet={
+                  <InfoAlert
+                    message={
+                      "Please select at least 1 value to display as tabs."
+                    }
+                    width={"49%"}
+                    position="absolute"
+                    color="#088AB2"
+                    top={2}
+                    zIndex={1}
+                  />
+                }
               />
             </Grid>
           </DndContext>