rez-table-listing-mui 1.0.37 → 1.0.39

package/src/components/login/index.tsx

@@ -9,7 +9,7 @@ const LoginButton = () => {
     setLoading(true);
     try {
       const response = await axios.post(
-        "http://13.200.182.92:9091/api/auth/login",
+        "http://localhost:4010/api/auth/login",
         {
           email_id: "admin@rezolut.in",
           password: "Admin@123",

package/src/components/search/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { SearchIcon } from "../../assets/svg";
 import useOutsideClick from "../../libs/hooks/useOutsideClick";
 
@@ -12,14 +12,31 @@ const TableSearch: React.FC<TableSearchProps> = ({ value, onChange }) => {
   const [localValue, setLocalValue] = useState(value);
   const searchContainerRef = useRef<HTMLDivElement>(null);
 
+  // Sync local state with prop value
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
   useOutsideClick({
     ref: searchContainerRef,
-    handler: () => setShowSearchInput(false),
+    handler: () => {
+      setShowSearchInput(false);
+      // Update parent when clicking outside if value changed
+      if (localValue !== value) {
+        onChange(localValue);
+      }
+    },
   });
 
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setLocalValue(newValue);
+    onChange(newValue); // Update parent state immediately
+  };
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      onChange(localValue);
+    if (e.key === "Escape") {
+      setShowSearchInput(false);
     }
   };
 
@@ -27,7 +44,15 @@ const TableSearch: React.FC<TableSearchProps> = ({ value, onChange }) => {
     <div className="search-wrapper" ref={searchContainerRef}>
       <div
         className="search-icon ts--button"
-        onClick={() => setShowSearchInput((prev) => !prev)}
+        onClick={() => {
+          setShowSearchInput((prev) => !prev);
+          if (!showSearchInput) {
+            // Focus input when showing
+            setTimeout(() => {
+              searchContainerRef.current?.querySelector('input')?.focus();
+            }, 100);
+          }
+        }}
       >
         <SearchIcon />
       </div>
@@ -36,7 +61,7 @@ const TableSearch: React.FC<TableSearchProps> = ({ value, onChange }) => {
         className={`search-input ${showSearchInput ? "expanded" : ""}`}
         placeholder="Type to search"
         value={localValue}
-        onChange={(e) => setLocalValue(e.target.value)}
+        onChange={handleChange}
         onKeyDown={handleKeyDown}
       />
     </div>

package/src/components/table-head-popover.tsx

@@ -78,7 +78,7 @@ function TableHeadPopover<T>({
             {isPinned ? <IconPinOffOutline /> : <IconPinOutline />}
           </ListItemIcon>
           <ListItemText
-            primary={isPinned ? "Unfreeze column" : "Freeze up to column"}
+            primary={isPinned ? "Unfreeze column" : "Freeze column"}
           />
         </ListItemButton>
 

package/src/components/table-settings/common/draggable-listitem.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Box } from "@mui/material";
+import { DragIndicator } from "@mui/icons-material";
+
+export interface SortableFilterItemProps {
+  id: string;
+  containerId: string;
+  children: React.ReactNode;
+}
+
+const DraggableListItem = ({
+  id,
+  containerId,
+  children,
+}: SortableFilterItemProps) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id,
+    data: {
+      type: "filter-item",
+      containerId,
+      id,
+    },
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.8 : 1,
+  };
+
+  return (
+    <Box
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        py: 1,
+        px: 1,
+        "&:hover": { bgcolor: "#f5f5f5" },
+        borderRadius: 1,
+        marginBottom: 1,
+        backgroundColor: "white",
+        cursor: isDragging ? "grabbing" : "grab",
+        boxShadow: isDragging ? "0 2px 8px rgba(0,0,0,0.1)" : "none",
+      }}
+    >
+      <DragIndicator sx={{ mr: 1, color: "#ccc" }} />
+      {children}
+    </Box>
+  );
+};
+
+export default DraggableListItem;

package/src/components/table-settings/common/listing-values.tsx

@@ -0,0 +1,117 @@
+import { Visibility, VisibilityOff } from "@mui/icons-material";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Grid,
+  IconButton,
+  Typography,
+} from "@mui/material";
+import CustomSearch from "../../filter/components/search/index.tsx";
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { useDroppable } from "@dnd-kit/core";
+import DraggableListItem from "./draggable-listitem.tsx";
+import { listingValuesStyles } from "../style.ts";
+
+interface FilterValue {
+  id: string;
+  label: string;
+}
+
+interface ListingValuesProps {
+  filteredValues: FilterValue[];
+  buttonText: string;
+  onClick: () => void;
+  headerText: string;
+  searchTerm?: string;
+  setSearchTerm?: React.Dispatch<React.SetStateAction<string>>;
+  containerId: string;
+  tabsApiDataLoading?: boolean;
+}
+
+const ListingValues = ({
+  filteredValues,
+  buttonText,
+  onClick,
+  headerText,
+  searchTerm,
+  setSearchTerm,
+  containerId,
+  tabsApiDataLoading,
+}: ListingValuesProps) => {
+  const { setNodeRef } = useDroppable({
+    id: containerId,
+    data: {
+      type: "container",
+      containerId: containerId,
+    },
+  });
+
+  return (
+    <Grid size={6} sx={listingValuesStyles.wrapper}>
+      {tabsApiDataLoading ? (
+        <Box
+          display={"flex"}
+          justifyContent="center"
+          alignItems={"center"}
+          height={"100%"}
+        >
+          <CircularProgress />
+        </Box>
+      ) : (
+        <Box sx={{ p: 2 }}>
+          <Box sx={listingValuesStyles.headerContainer}>
+            <Typography variant="h6" sx={listingValuesStyles.heading}>
+              {headerText}
+            </Typography>
+            <Button
+              onClick={onClick}
+              variant="text"
+              size="small"
+              sx={listingValuesStyles.button}
+            >
+              {buttonText}
+            </Button>
+          </Box>
+
+          {searchTerm !== undefined && setSearchTerm !== undefined && (
+            <CustomSearch value={searchTerm} onChange={setSearchTerm} />
+          )}
+
+          <Box ref={setNodeRef} sx={listingValuesStyles.draggableContainer}>
+            <SortableContext
+              items={filteredValues.map((item) => item.id)}
+              strategy={verticalListSortingStrategy}
+            >
+              <Box sx={listingValuesStyles.draggableCover}>
+                {filteredValues.map((item) => (
+                  <DraggableListItem
+                    key={item.id}
+                    id={item.id}
+                    containerId={containerId}
+                  >
+                    <Box sx={listingValuesStyles.itemLabel}>
+                      <Typography>{item.label}</Typography>
+                    </Box>
+                    <IconButton size="small">
+                      {containerId === "tabs" ? (
+                        <Visibility />
+                      ) : (
+                        <VisibilityOff />
+                      )}
+                    </IconButton>
+                  </DraggableListItem>
+                ))}
+              </Box>
+            </SortableContext>
+          </Box>
+        </Box>
+      )}
+    </Grid>
+  );
+};
+
+export default ListingValues;

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

@@ -0,0 +1,332 @@
+import React, { useEffect, useState } from "react";
+import { Box, Typography, Tab, Grid } from "@mui/material";
+
+import ListingValues from "../common/listing-values";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import { craftTableFilterSettingsOptionsProps } from "../../../types/table-options";
+import CustomToggleSwitchButton from "./toggle-button-switch";
+import { FilterColumnsDataProps } from "../../../types/filter";
+import { TOGGLE_BUTTON_TABS } from "../constants";
+import { ColumnTabConfigProps } from "../../../types/filter-settings";
+import CustomTabs from "../tabs/horizontal";
+
+export interface ColumnItem {
+  label: string;
+  value: string;
+}
+
+export interface TabData {
+  tab_name: string;
+  show_list: ColumnItem[];
+  hide_list: ColumnItem[];
+}
+
+interface ColumnTabProps {
+  filterSettingStates: craftTableFilterSettingsOptionsProps;
+  columnsData: FilterColumnsDataProps;
+}
+
+const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);
+
+  const { quickTabStates, columnTabState, setColumnTabState } =
+    filterSettingStates;
+
+  useEffect(() => {
+    if (!Object.entries(columnTabState)?.length) {
+      const mappedColumns: ColumnItem[] =
+        columnsData?.column_list?.map((column) => ({
+          label: column?.name,
+          value: column?.attribute_key,
+        })) || [];
+
+      console.log("mappedColumnsssss", mappedColumns);
+
+      const newColumnState: ColumnTabConfigProps = {
+        isDefault: true,
+        show_list: mappedColumns,
+        hide_list: [],
+        tabs: quickTabStates?.show_list?.map((tab) => ({
+          tab_name: tab,
+          show_list: mappedColumns,
+          hide_list: [],
+        })),
+      };
+
+      setColumnTabState(newColumnState);
+    }
+  }, []);
+
+  // 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;
+
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor)
+  );
+
+  // Handle toggle between Default and Tab Wise
+  const handleToggleChange = (
+    _: React.MouseEvent<HTMLElement>,
+    newValue: boolean
+  ) => {
+    if (newValue !== null) {
+      setColumnTabState({ ...columnTabState, isDefault: newValue });
+    }
+  };
+
+  // Get current show/hide lists based on mode
+  const getCurrentLists = () => {
+    if (columnTabState?.isDefault) {
+      return {
+        showList: columnTabState.show_list || [],
+        hideList: columnTabState.hide_list || [],
+      };
+    } else {
+      const currentTab = columnTabState?.tabs?.[selectedTabIndex];
+      return {
+        showList: currentTab?.show_list || [],
+        hideList: currentTab?.hide_list || [],
+      };
+    }
+  };
+
+  const { showList, hideList } = getCurrentLists();
+
+  // Convert to FilterValue format for ListingValues component
+  const showListValues = showList.map((item) => ({
+    id: item.value,
+    label: item.label,
+    visible: true,
+  }));
+
+  const hideListValues = hideList.map((item) => ({
+    id: item.value,
+    label: item.label,
+    visible: false,
+  }));
+
+  const filteredListValues = hideListValues.filter((value) =>
+    value.label.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  // Update lists based on current mode
+  const updateLists = (
+    newShowList: ColumnItem[],
+    newHideList: ColumnItem[]
+  ) => {
+    if (isColumnDefault) {
+      setColumnTabState({
+        ...columnTabState,
+        show_list: newShowList,
+        hide_list: newHideList,
+      });
+    } else {
+      const updatedTabs = columnTabState?.tabs ? [...columnTabState.tabs] : [];
+      updatedTabs[selectedTabIndex] = {
+        ...updatedTabs[selectedTabIndex],
+        show_list: newShowList,
+        hide_list: newHideList,
+      };
+      setColumnTabState({
+        ...columnTabState,
+        tabs: updatedTabs,
+      });
+    }
+  };
+
+  // Drag and drop logic
+  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;
+
+    const activeItem = [...showList, ...hideList].find(
+      (item) => item.value === String(active.id)
+    );
+    if (!activeItem) return;
+
+    let newShowList = [...showList];
+    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);
+        }
+      }
+    } else {
+      // Move between lists
+      if (currentContainer === "list" && overContainer === "tabs") {
+        // Move from hide to show
+        const idx = newHideList.findIndex(
+          (item) => item.value === String(active.id)
+        );
+        if (idx !== -1) {
+          newHideList.splice(idx, 1);
+          newShowList.push(activeItem);
+        }
+      } else if (currentContainer === "tabs" && overContainer === "list") {
+        // Move from show to hide
+        const idx = newShowList.findIndex(
+          (item) => item.value === String(active.id)
+        );
+        if (idx !== -1) {
+          newShowList.splice(idx, 1);
+          newHideList.push(activeItem);
+        }
+      }
+    }
+
+    updateLists(newShowList, newHideList);
+  };
+
+  // Show All/Hide All logic
+  const handleShowAll = () => {
+    const newShowList = [...showList, ...hideList];
+    const newHideList: ColumnItem[] = [];
+    updateLists(newShowList, newHideList);
+  };
+
+  const handleHideAll = () => {
+    const newShowList: ColumnItem[] = [];
+    const newHideList = [...hideList, ...showList];
+    updateLists(newShowList, newHideList);
+  };
+
+  // Tab change handler
+  const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
+    setSelectedTabIndex(newValue);
+  };
+
+  return (
+    <Box sx={{ maxHeight: "600px" }}>
+      <Box sx={{ maxHeight: "500px", borderRadius: 1, bgcolor: "white" }}>
+        <Grid container spacing={2}>
+          <Grid size={12}>
+            <Box sx={{ mb: 2 }}>
+              <Typography
+                variant="subtitle2"
+                sx={{ mb: 1, fontWeight: 500, color: "#0E0C0BE5" }}
+              >
+                Customize column by
+              </Typography>
+              <CustomToggleSwitchButton
+                buttons={TOGGLE_BUTTON_TABS}
+                value={isColumnDefault}
+                onChange={handleToggleChange}
+              />
+            </Box>
+          </Grid>
+
+          {!isColumnDefault && (
+            <Grid size={12}>
+              <Box sx={{ borderBottom: 1, borderColor: "divider", mb: 2 }}>
+                <CustomTabs value={selectedTabIndex} onChange={handleTabChange}>
+                  {quickTabStates?.show_list?.map((tab) => (
+                    <Tab key={tab} label={tab} />
+                  ))}
+                </CustomTabs>
+              </Box>
+            </Grid>
+          )}
+
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <Grid container spacing={2} size={12}>
+              <ListingValues
+                buttonText="Show All"
+                onClick={handleShowAll}
+                headerText="Hidden in List"
+                filteredValues={filteredListValues}
+                searchTerm={searchTerm}
+                setSearchTerm={setSearchTerm}
+                containerId="list"
+              />
+              <ListingValues
+                buttonText="Hide All"
+                onClick={handleHideAll}
+                headerText="Shown in List"
+                filteredValues={showListValues}
+                containerId="tabs"
+              />
+            </Grid>
+          </DndContext>
+        </Grid>
+      </Box>
+    </Box>
+  );
+};
+
+export default ColumnTab;

package/src/components/table-settings/components/custom-button.tsx

@@ -0,0 +1,15 @@
+import { Button, ButtonProps } from "@mui/material";
+import { dialogStyles } from "../style";
+interface CustomButtonProps extends ButtonProps {}
+
+const CustomButton = ({ ...props }: CustomButtonProps) => {
+  const customSx = { ...dialogStyles.dialogActionsButton, ...props.sx };
+
+  return (
+    <Button variant="contained" {...props} sx={customSx}>
+      {props.children}
+    </Button>
+  );
+};
+
+export default CustomButton;

package/src/components/table-settings/components/custom-dialog.tsx

@@ -0,0 +1,27 @@
+import { Dialog, Slide, styled } from "@mui/material";
+import { dialogStyles } from "../style";
+import React from "react";
+import { TransitionProps } from "@mui/material/transitions";
+
+export const CustomDialog = styled(Dialog)(({ theme }) => ({
+  "& .MuiPaper-root": {
+    borderRadius: 0,
+    height: "100%",
+  },
+  "& .MuiDialogContent-root": {
+    ...dialogStyles.dialogContent,
+    padding: theme.spacing(2),
+  },
+  "& .MuiDialogActions-root": {
+    padding: theme.spacing(2),
+  },
+}));
+
+export const DialogTransition = React.forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement<any, any>;
+  },
+  ref: React.Ref<unknown>
+) {
+  return <Slide direction="down" ref={ref} {...props} />;
+});