rez-table-listing-mui 2.0.13 → 2.0.14

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

@@ -1,511 +0,0 @@
-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?: { label: string; value: 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;
-
-    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;