rez-table-listing-mui 2.0.13 → 2.0.14

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Box,
   Select,
@@ -8,7 +8,6 @@ import {
   Checkbox,
   FormControlLabel,
   Grid,
-  Alert,
 } from "@mui/material";
 
 import ListingValues from "../common/listing-values";
@@ -22,12 +21,7 @@ import {
   useSensors,
   DragEndEvent,
 } from "@dnd-kit/core";
-import {
-  QuickTabConfigProps,
-  SettingsQuickTabProps,
-} from "../../../types/filter-settings";
 import { TabsStyles } from "../style";
-import InfoAlert from "../common/info-alert";
 import { craftTableFilterSettingsOptionsProps } from "../../../types/table-options";
 import { LANE_SELECTS } from "../constants";
 
@@ -36,14 +30,15 @@ const Lane = ({
   columnsData,
   tabsApiData,
   tabsApiDataLoading,
+  selectAttributeData,
 }: {
   filterSettingStates: craftTableFilterSettingsOptionsProps;
   columnsData: any;
   tabsApiData?: { label: string; value: string }[];
   tabsApiDataLoading?: boolean;
+  selectAttributeData?: { label: string; value: string }[];
 }) => {
-  const { settingsData, setSettingsData, saveButtonError, setSaveButtonError } =
-    filterSettingStates;
+  const { settingsData, setSettingsData } = filterSettingStates;
 
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [currentQuickAttribute, setCurrentQuickAttribute] = useState<string>(
@@ -52,7 +47,6 @@ const Lane = ({
 
   const quickTabStates = settingsData?.quick_tab as any;
 
-  // In case there is no quick tab state from API
   useEffect(() => {
     const stateToArray =
       (quickTabStates && Object.entries(quickTabStates)) || [];
@@ -70,7 +64,6 @@ const Lane = ({
     }
   }, [columnsData]);
 
-  // When user changes attribute
   useEffect(() => {
     if (currentQuickAttribute === settingsData?.quick_tab?.attribute) return;
 
@@ -88,62 +81,6 @@ const Lane = ({
     }
   }, [tabsApiData]);
 
-  // Validation when user changes show list or hide list
-  useEffect(() => {
-    const showList = quickTabStates?.show_list || [];
-    const hideList = quickTabStates?.hide_list || [];
-
-    if (showList || hideList) {
-      // Check if showList is valid (between 1 and 5 items)
-      const isValidShowList = showList.length > 0 && showList.length <= 5;
-      const ERROR_CODE = "quick_tab_error";
-
-      if (!isValidShowList) {
-        const errorMessage = {
-          type: ERROR_CODE,
-          message:
-            showList.length === 0
-              ? "Quick Lane: Please select at least one item"
-              : "Quick Lane: Please select no more than 5 items",
-        };
-
-        // Check if the error is already present in the messages array
-        const hasQuickTabError = saveButtonError?.messages?.some(
-          (message) => message.type === ERROR_CODE
-        );
-
-        // Update the error state
-
-        // Later we can use this to show error message when we will make error logic more simple
-        // setSaveButtonError((prev) => {
-        //   const otherMessages =
-        //     prev?.messages?.filter((message) => message.type !== ERROR_CODE) ||
-        //     [];
-
-        //   return {
-        //     ...prev,
-        //     hasError: true,
-        //     messages: hasQuickTabError
-        //       ? [...prev?.messages]
-        //       : [...otherMessages, errorMessage],
-        //   };
-        // });
-      } 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) ||
-        //     [],
-        // }));
-      }
-    }
-  }, [quickTabStates?.hide_list, quickTabStates?.show_list]);
-
   const sortingOptions = [
     { label: "A-Z", value: "asc" },
     { label: "Z-A", value: "dsc" },
@@ -152,7 +89,6 @@ const Lane = ({
     { label: "Custom", value: "custom" },
   ];
 
-  // Convert show_list/hide_list to FilterValue[] for rendering only
   const showListValues = (quickTabStates?.show_list || [])?.map((id: any) => ({
     id,
     label: id?.charAt(0)?.toUpperCase() + id?.slice(1),
@@ -162,160 +98,102 @@ const Lane = ({
     label: id?.charAt(0)?.toUpperCase() + id?.slice(1),
   }));
 
+  const filteredListValues = hideListValues.filter((value: any) =>
+    value?.label?.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
   const sensors = useSensors(
     useSensor(MouseSensor),
     useSensor(TouchSensor),
     useSensor(KeyboardSensor)
   );
 
-  // Drag and drop logic, update only local state
   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;
     if (!currentContainer || !overContainer) return;
+
+    let newShowList = [...(quickTabStates.show_list ?? [])];
+    let newHideList = [...(quickTabStates.hide_list ?? [])];
+
     if (currentContainer === overContainer) {
-      // Reorder within the same list
-      let newShowList = [...(quickTabStates.show_list ?? [])];
-      let newHideList = [...(quickTabStates.hide_list ?? [])];
-      if (currentContainer === "list") {
-        const oldIndex = newHideList.indexOf(String(active.id));
-        const newIndex = newHideList.indexOf(String(over.id));
-        if (oldIndex !== -1 && newIndex !== -1) {
-          const [removed] = newHideList.splice(oldIndex, 1);
-          newHideList.splice(newIndex, 0, removed);
-        }
-      } else {
-        const oldIndex = newShowList.indexOf(String(active.id));
-        const newIndex = newShowList.indexOf(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.indexOf(String(active.id));
+      const newIndex = list.indexOf(String(over.id));
 
-      setSettingsData((prev) => ({
-        ...prev,
-        quick_tab: {
-          ...prev?.quick_tab,
-          show_list: newShowList,
-          hide_list: newHideList,
-        },
-      }));
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const [removed] = list.splice(oldIndex, 1);
+        list.splice(newIndex, 0, removed);
+      }
     } else {
-      // Move between lists
-      let newShowList = [...(quickTabStates.show_list ?? [])];
-      let newHideList = [...(quickTabStates.hide_list ?? [])];
       if (currentContainer === "list" && overContainer === "lanes") {
-        if (newShowList.length >= 5) return; // prevent overflow
-        // Move from hide to show
-
         const idx = newHideList.indexOf(String(active.id));
         if (idx !== -1) {
           newHideList.splice(idx, 1);
           newShowList.push(String(active.id));
         }
       } else if (currentContainer === "lanes" && overContainer === "list") {
-        // Move from show to hide
         const idx = newShowList.indexOf(String(active.id));
         if (idx !== -1) {
           newShowList.splice(idx, 1);
           newHideList.push(String(active.id));
         }
       }
-
-      setSettingsData((prev) => ({
-        ...prev,
-        quick_tab: {
-          ...prev?.quick_tab,
-          show_list: newShowList,
-          hide_list: newHideList,
-        },
-      }));
     }
-  };
-
-  const filteredListValues = hideListValues.filter((value: any) =>
-    value?.label?.toLowerCase().includes(searchTerm.toLowerCase())
-  );
-
-  // Show All/Hide All logic (local only)
-  const handleShowAll = () => {
-    const currentShowList = quickTabStates.show_list || [];
-    const currentHideList = quickTabStates.hide_list || [];
-
-    const availableSlots = 5 - currentShowList.length;
-
-    if (availableSlots <= 0) return; // Already at limit
-
-    const limitedHideList = currentHideList.slice(0, availableSlots);
 
     setSettingsData((prev) => ({
       ...prev,
       quick_tab: {
         ...prev?.quick_tab,
-        show_list: [...currentShowList, ...limitedHideList],
-        hide_list: currentHideList.filter(
-          (item: string) => !limitedHideList.includes(item)
-        ),
+        show_list: newShowList,
+        hide_list: newHideList,
       },
     }));
   };
 
-  const handleHideAll = () => {
+  const handleShowAll = () => {
     setSettingsData((prev) => ({
       ...prev,
       quick_tab: {
         ...prev?.quick_tab,
-        hide_list: [
-          ...(prev?.quick_tab?.hide_list || []),
+        show_list: [
           ...(prev?.quick_tab?.show_list || []),
+          ...(prev?.quick_tab?.hide_list || []),
         ],
-        show_list: [],
+        hide_list: [],
       },
     }));
   };
 
-  // Checkbox logic (local only)
-  const handleShowSubLaneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSettingsData((prev) => ({
-      ...prev,
-      quick_tab: {
-        ...prev?.quick_tab,
-        showSubLane: e.target.checked,
-      },
-    }));
-  };
-
-  const handleShowColorColumnsChange = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
+  const handleHideAll = () => {
     setSettingsData((prev) => ({
       ...prev,
       quick_tab: {
         ...prev?.quick_tab,
-        showColorColumns: e.target.checked,
+        hide_list: [
+          ...(prev?.quick_tab?.hide_list || []),
+          ...(prev?.quick_tab?.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") {
-      if (toShowList.length >= 5) return; // prevent overflow
-      // Move from hide_list to show_list
       const index = toHideList.indexOf(itemId);
       if (index > -1) {
         toHideList.splice(index, 1);
         toShowList.push(itemId);
       }
-    } else if (fromContainerId === "lanes") {
-      // Move from show_list to hide_list
+    } else {
       const index = toShowList.indexOf(itemId);
       if (index > -1) {
         toShowList.splice(index, 1);
@@ -333,176 +211,133 @@ const Lane = ({
     }));
   };
 
-  const enableDND = quickTabStates?.sorting === "custom" ? true : false;
+  const enableDND = quickTabStates?.sorting === "custom";
 
+  /* ================== RENDER ================== */
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        // gap: "0.5rem",
-        height: "100%",
-      }}
-    >
+    <Box sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
       <Typography variant="caption" sx={TabsStyles.mainTabsHeader}>
-        *Quick filter settings will be reflected in vertical lanes
+        **Quick filter settings will be reflected in vertical lanes
       </Typography>
-      <Box>
-        <Grid sx={{ position: "relative" }} container>
+
+      <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 || ""}
+                onChange={(e) =>
+                  setSettingsData((prev) => ({
+                    ...prev,
+                    quick_tab: {
+                      ...prev?.quick_tab,
+                      attribute: e.target.value,
+                    },
+                  }))
+                }
+              >
+                {selectAttributeData?.map((lane: any) => (
+                  <MenuItem key={lane?.key} value={lane?.value}>
+                    {lane?.value}
+                  </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,
+                    },
+                  }))
+                }
+              >
+                {sortingOptions.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="lanes"
+              onItemToggle={handleItemToggle}
+              enableDragAndDrop={enableDND}
+            />
+          </Grid>
+        </DndContext>
+
+        {quickTabStates?.attribute === "Stage Group" && (
           <Grid size={12}>
-            <Box>
-              <Grid sx={TabsStyles.mainTabDropdown} size={6}>
-                <FormControl sx={TabsStyles.mainTabSelect} size="small">
-                  <Select
-                    value={quickTabStates?.attribute || ""}
-                    onChange={(e) =>
-                      setSettingsData((prev) => ({
-                        ...prev,
-                        quick_tab: {
-                          ...prev?.quick_tab,
-                          attribute: e.target.value,
-                        },
-                      }))
-                    }
-                    displayEmpty
-                    renderValue={(selected) => {
-                      if (!selected) {
-                        return <em>Select Attribute</em>;
-                      }
-                      return selected;
-                    }}
-                  >
-                    {LANE_SELECTS?.map((lane: any) => (
-                      <MenuItem key={lane?.key} value={lane?.value}>
-                        {lane?.value}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-                <FormControl
-                  sx={TabsStyles.selectDropdownSeparator}
-                  size="small"
-                >
-                  <Select
-                    value={quickTabStates?.sorting || "asc"}
+            <Box sx={TabsStyles.checkboxStyle}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={quickTabStates?.showSubLane || false}
                     onChange={(e) =>
                       setSettingsData((prev) => ({
                         ...prev,
                         quick_tab: {
                           ...prev?.quick_tab,
-                          sorting: e.target.value,
+                          showSubLane: e.target.checked,
                         },
                       }))
                     }
-                    displayEmpty
-                    renderValue={(selected) => {
-                      if (!selected) {
-                        return <em>Sort by</em>;
-                      }
-                      const option = sortingOptions.find(
-                        (opt) => opt.value === selected
-                      );
-                      return option?.label || selected;
-                    }}
-                  >
-                    {sortingOptions.map((option) => (
-                      <MenuItem key={option?.value} value={option?.value}>
-                        {option?.label}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              </Grid>
-            </Box>
-          </Grid>
-          <Grid>
-            {/* <Alert
-              severity="info"
-              sx={{
-                fontSize: "12px",
-                color: "#088AB2",
-              }}
-            >
-              Please select at least 1 and at most 5 values to display as lanes.
-            </Alert> */}
-          </Grid>
-          <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="lanes"
-                // tabsApiDataLoading={tabsApiDataLoading}
-                onItemToggle={handleItemToggle}
-                enableDragAndDrop={enableDND}
-                AlertComponenet={
-                  <InfoAlert
-                    message="Please select at least 1 and at most 5 values to display as
-                                lanes."
-                    width={"49%"}
-                    position="absolute"
-                    color="#088AB2"
-                    top={10}
-                    zIndex={1}
-                  />
-                }
-              />
-            </Grid>
-          </DndContext>
-          <Grid size={12}>
-            <Box sx={TabsStyles.checkboxStyle}>
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    checked={quickTabStates?.showSubLane || false}
-                    onChange={handleShowSubLaneChange}
                     size="small"
-                    sx={{
-                      "&.Mui-checked": {
-                        color: "#7A5AF8",
-                      },
-                    }}
                   />
                 }
                 label="Show Sublane"
               />
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    checked={quickTabStates?.showColorColumns || false}
-                    onChange={handleShowColorColumnsChange}
-                    size="small"
-                    sx={{
-                      "&.Mui-checked": {
-                        color: "#7A5AF8",
-                      },
-                    }}
-                  />
-                }
-                label="Show Color columns"
-              />
             </Box>
           </Grid>
-        </Grid>
-      </Box>
+        )}
+
+        {quickTabStates?.attribute === "Stage Group" &&
+          quickTabStates?.showSubLane && (
+            <Grid size={12}>
+              <Grid sx={TabsStyles.mainTabDropdown} size={6}>
+                <FormControl sx={TabsStyles.mainTabSelect} size="small">
+                  <Select value="Stage" disabled>
+                    <MenuItem value="Stage">Stage</MenuItem>
+                  </Select>
+                </FormControl>
+              </Grid>
+            </Grid>
+          )}
+      </Grid>
     </Box>
   );
 };