rez-table-listing-mui 1.2.14 → 1.2.16

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

@@ -0,0 +1,510 @@
+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";
+
+const Lane = ({
+  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;
+
+    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 Lane;

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

@@ -68,8 +68,6 @@ const Sorting = ({
           sortby: emptySortBy,
         },
       }));
-
-      console.log("sorting is empty");
     } else if (isEmptyDefault) {
       setSettingsData((prev) => ({
         ...prev,

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

@@ -6,6 +6,18 @@ export const SETTINGS_TABS: { label: string }[] = [
   { label: "Sorting" },
 ];
 
+export const KANBAN_SETTINGS_TABS: { label: string }[] = [
+  { label: "Lane" },
+  { label: "Group By" },
+];
+
+export const LANE_SELECTS = [
+  { key: "stage_group", value: "Stage Group" },
+  { key: "stage", value: "Stage" },
+  { key: "source", value: "Source" },
+  { key: "status", value: "Status" },
+];
+
 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

@@ -17,10 +17,13 @@ import { QuickFilterModalProps } from "../../types/filter-settings";
 import { CustomDialog, DialogTransition } from "./components/custom-dialog";
 import { dialogStyles } from "./style";
 import CustomButton from "./components/custom-button";
-import { SETTINGS_TABS } from "./constants";
+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";
 
 export function QuickFilterSettings({
+  view = "listing",
   show,
   filterSettingStates,
   onClose,
@@ -108,38 +111,67 @@ export function QuickFilterSettings({
             <CustomVerticalTabs
               value={tabValue}
               onChange={handleTabChange}
-              tabItems={SETTINGS_TABS}
+              tabItems={
+                view === "listing" ? SETTINGS_TABS : KANBAN_SETTINGS_TABS
+              }
             />
 
             <Box sx={{ flex: "1" }}>
-              <CustomTabPanel value={tabValue} index={0}>
-                {tabValue === 0 && (
-                  <QuickTab
-                    filterSettingStates={filterSettingStates}
-                    columnsData={columnsData}
-                    tabsApiData={tabsApiData}
-                    tabsApiDataLoading={tabsApiDataLoading}
-                  />
-                )}
-              </CustomTabPanel>
+              {view.toLowerCase() === "listing" && (
+                <CustomTabPanel value={tabValue} index={0}>
+                  {tabValue === 0 && (
+                    <QuickTab
+                      filterSettingStates={filterSettingStates}
+                      columnsData={columnsData}
+                      tabsApiData={tabsApiData}
+                      tabsApiDataLoading={tabsApiDataLoading}
+                    />
+                  )}
+                </CustomTabPanel>
+              )}
 
-              <CustomTabPanel value={tabValue} index={1}>
-                {tabValue === 1 && (
-                  <Column
-                    filterSettingStates={filterSettingStates}
-                    columnsData={columnsData}
-                  />
-                )}
-              </CustomTabPanel>
+              {view.toLowerCase() === "listing" && (
+                <CustomTabPanel value={tabValue} index={1}>
+                  {tabValue === 1 && (
+                    <Column
+                      filterSettingStates={filterSettingStates}
+                      columnsData={columnsData}
+                    />
+                  )}
+                </CustomTabPanel>
+              )}
 
-              <CustomTabPanel value={tabValue} index={2}>
-                {tabValue === 2 && (
-                  <Sorting
-                    filterSettingStates={filterSettingStates}
-                    columnsData={columnsData}
-                  />
-                )}
-              </CustomTabPanel>
+              {view.toLowerCase() === "listing" && (
+                <CustomTabPanel value={tabValue} index={2}>
+                  {tabValue === 2 && (
+                    <Sorting
+                      filterSettingStates={filterSettingStates}
+                      columnsData={columnsData}
+                    />
+                  )}
+                </CustomTabPanel>
+              )}
+              {view.toLowerCase() === "kanban" && (
+                <CustomTabPanel value={tabValue} index={0}>
+                  {tabValue === 0 && (
+                    <Lane
+                      filterSettingStates={filterSettingStates}
+                      columnsData={columnsData}
+                    />
+                  )}
+                </CustomTabPanel>
+              )}
+
+              {view.toLowerCase() === "kanban" && (
+                <CustomTabPanel value={tabValue} index={1}>
+                  {tabValue === 1 && (
+                    <GroupBy
+                      filterSettingStates={filterSettingStates}
+                      columnsData={columnsData}
+                    />
+                  )}
+                </CustomTabPanel>
+              )}
             </Box>
           </>
         )}
@@ -152,7 +184,7 @@ export function QuickFilterSettings({
             disabled={saveButtonError?.hasError}
             onClick={handleSaveSetSettingsData}
           >
-            Save Quick Filter
+            {view === "listing" ? "Save Quick Filter" : "Save Kanban Layout"}
           </CustomButton>
         </DialogActions>
       )}

package/src/listing/components/tabs/index.scss

@@ -19,7 +19,7 @@
       cursor: pointer;
       color: var(--grey-900);
       font-size: 0.875rem;
-      font-family: "Satoshi", sans-serif;
+      font-family: "Satoshi";
       font-weight: 700;
 
       .tab__label {

package/src/listing/libs/hooks/useDefaultColumns.tsx

@@ -97,7 +97,6 @@ export const useDefaultColumns = () => {
           label: "Status",
           type: "custom",
           propName: "renderStatus",
-          align: "right",
         },
       },
       {

package/src/listing/libs/hooks/useEntityTableAPI.tsx

@@ -270,7 +270,6 @@ export const useSaveSettingsDataAPI = (entity_type: string) => {
     },
     onError: (error: any) => {
       const msg = error?.response?.data?.message;
-      console.log("Error in saving settings tab data", msg, error);
     },
   });