rez-table-listing-mui 1.2.14 → 1.2.15

package/src/listing/components/table-settings/components/group-by.tsx

@@ -0,0 +1,513 @@
+import React, { useEffect, useState } from "react";
+import {
+  Box,
+  Select,
+  MenuItem,
+  FormControl,
+  Typography,
+  Checkbox,
+  FormControlLabel,
+  Grid,
+  Alert,
+} from "@mui/material";
+
+import ListingValues from "../common/listing-values";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  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";
+import { Group } from "@mui/icons-material";
+
+const GroupBy = ({
+  filterSettingStates,
+  columnsData,
+  tabsApiData,
+  tabsApiDataLoading,
+}: {
+  filterSettingStates: craftTableFilterSettingsOptionsProps;
+  columnsData: any;
+  tabsApiData?: string[];
+  tabsApiDataLoading?: boolean;
+}) => {
+  const { settingsData, setSettingsData, saveButtonError, setSaveButtonError } =
+    filterSettingStates;
+
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [currentQuickAttribute, setCurrentQuickAttribute] = useState<string>(
+    settingsData?.quick_tab?.attribute || ""
+  );
+
+  const quickTabStates = settingsData?.quick_tab as any;
+
+  // In case there is no quick tab state from API
+  useEffect(() => {
+    const stateToArray =
+      (quickTabStates && Object.entries(quickTabStates)) || [];
+    const isEmptyState = stateToArray.length ? false : true;
+    console.log("columnsData", columnsData);
+    console.log("first", columnsData.lanes.map((item: any) => item.name)[0]);
+
+    if (isEmptyState) {
+      setSettingsData((prev) => ({
+        ...prev,
+        quick_tab: {
+          ...prev?.quick_tab,
+          attribute: LANE_SELECTS[0].value,
+          sorting: "asc",
+        },
+      }));
+    }
+  }, [columnsData]);
+
+  // When user changes attribute
+  useEffect(() => {
+    if (currentQuickAttribute === settingsData?.quick_tab?.attribute) return;
+
+    if (tabsApiData?.length) {
+      setSettingsData((prev) => ({
+        ...prev,
+        quick_tab: {
+          ...prev?.quick_tab,
+          hide_list: tabsApiData,
+          show_list: [],
+        },
+      }));
+
+      setCurrentQuickAttribute(settingsData?.quick_tab?.attribute || "");
+    }
+  }, [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" },
+    { label: "Count (Ascending)", value: "count_asc" },
+    { label: "Count (Descending)", value: "count_dsc" },
+    { 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),
+  }));
+  const hideListValues = (quickTabStates?.hide_list || []).map((id: any) => ({
+    id,
+    label: id?.charAt(0)?.toUpperCase() + id?.slice(1),
+  }));
+
+  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;
+    }
+    const currentContainer = active.data.current?.containerId;
+    const overContainer = over.data.current?.containerId;
+    if (!currentContainer || !overContainer) return;
+    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);
+        }
+      }
+
+      setSettingsData((prev) => ({
+        ...prev,
+        quick_tab: {
+          ...prev?.quick_tab,
+          show_list: newShowList,
+          hide_list: newHideList,
+        },
+      }));
+    } 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)
+        ),
+      },
+    }));
+  };
+
+  const handleHideAll = () => {
+    setSettingsData((prev) => ({
+      ...prev,
+      quick_tab: {
+        ...prev?.quick_tab,
+        hide_list: [
+          ...(prev?.quick_tab?.hide_list || []),
+          ...(prev?.quick_tab?.show_list || []),
+        ],
+        show_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>
+  ) => {
+    setSettingsData((prev) => ({
+      ...prev,
+      quick_tab: {
+        ...prev?.quick_tab,
+        showColorColumns: e.target.checked,
+      },
+    }));
+  };
+
+  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
+      const index = toShowList.indexOf(itemId);
+      if (index > -1) {
+        toShowList.splice(index, 1);
+        toHideList.push(itemId);
+      }
+    }
+
+    setSettingsData((prev) => ({
+      ...prev,
+      quick_tab: {
+        ...prev?.quick_tab,
+        show_list: toShowList,
+        hide_list: toHideList,
+      },
+    }));
+  };
+
+  const enableDND = quickTabStates?.sorting === "custom" ? true : false;
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        // gap: "0.5rem",
+        height: "100%",
+      }}
+    >
+      <Typography variant="caption" sx={TabsStyles.mainTabsHeader}>
+        *Quick filter settings will be reflected in vertical lanes
+      </Typography>
+      <Box>
+        <Grid sx={{ position: "relative" }} container>
+          <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"}
+                    onChange={(e) =>
+                      setSettingsData((prev) => ({
+                        ...prev,
+                        quick_tab: {
+                          ...prev?.quick_tab,
+                          sorting: e.target.value,
+                        },
+                      }))
+                    }
+                    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>
+    </Box>
+  );
+};
+
+export default GroupBy;