rez-table-listing-mui 1.0.37 → 1.0.39

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

@@ -0,0 +1,619 @@
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  Box,
+  Button,
+  IconButton,
+  MenuItem,
+  Select,
+  Tab,
+  Typography,
+} from "@mui/material";
+import {
+  SettingsSortingProps,
+  SortingConfigProps,
+  SortingConfigSortByProps,
+} from "../../../types/filter-settings";
+import CustomToggleSwitchButton from "./toggle-button-switch";
+import CustomTabs from "../tabs/horizontal";
+import {
+  closestCenter,
+  DndContext,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import SortableItem from "../../sorting-modal.tsx/sorting-item";
+import {
+  arrayMove,
+  SortableContext,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { AddIcon, CloseIcon } from "../../../assets/svg";
+import { TOGGLE_BUTTON_TABS } from "../constants";
+
+const Sorting = ({
+  filterSettingStates,
+  columnsData,
+}: SettingsSortingProps) => {
+  const { quickTabStates, sortingTabState, setSortingTabState } =
+    filterSettingStates;
+
+  const [activeTab, setActiveTab] = useState<string | undefined>(
+    quickTabStates?.show_list?.[0]
+  );
+
+  useEffect(() => {
+    if (!Object.entries(sortingTabState)?.length) {
+      // Render empty columns
+      const emptySortBy: SortingConfigSortByProps[] = [
+        { column: "", order: "asc" },
+      ];
+
+      // Create a new default sorting state
+      const newSortingState: SortingConfigProps = {
+        isDefault: true,
+        sortby: emptySortBy,
+        tabs: quickTabStates?.show_list?.map((tab) => ({
+          tab_name: tab,
+          sortby: emptySortBy,
+        })),
+      };
+
+      setActiveTab(newSortingState?.tabs?.[0]?.tab_name);
+      setSortingTabState(newSortingState);
+    }
+  }, []);
+
+  const isDefault = sortingTabState?.isDefault;
+  const sensors = useSensors(useSensor(PointerSensor));
+
+  const activeTabIndex = sortingTabState?.tabs?.findIndex(
+    (tab) => tab?.tab_name === activeTab
+  );
+
+  /**
+   * * What is happening here?
+   *
+   * * If isDefault is true
+   * * - Return the sortby array from the state
+   *
+   * * If isDefault is false
+   * * - Filter tabs array from sortingTabState according to activeTab index
+   *
+   * * If activeTab is undefined
+   * * - Return an empty array
+   */
+  const tabSortedList = useMemo(() => {
+    return isDefault
+      ? sortingTabState?.sortby
+      : activeTab !== undefined
+      ? sortingTabState?.tabs?.[activeTabIndex || 0]?.sortby
+      : [];
+  }, [sortingTabState, activeTab]);
+
+  const updateSortList = (updated: SortingConfigSortByProps[]) => {
+    setSortingTabState((prev) => {
+      if (prev.isDefault) {
+        return { ...prev, sortby: updated };
+      } else {
+        const tabs = [...(prev.tabs || [])];
+        tabs[activeTabIndex || 0] = {
+          ...tabs[activeTabIndex || 0],
+          sortby: updated,
+        };
+        return { ...prev, tabs };
+      }
+    });
+  };
+
+  const handleDNDDropdownChange = (
+    key: "column" | "order",
+    value: string,
+    index: number
+  ) => {
+    if (!tabSortedList) return;
+
+    const updated = [...tabSortedList];
+    updated[index] = { ...updated[index], [key]: value };
+    updateSortList(updated);
+  };
+
+  const handleAddSort = () => {
+    if (!tabSortedList) return;
+
+    const newItem: SortingConfigSortByProps = {
+      column: columnsData?.column_list?.[0]?.attribute_key || "",
+      order: "asc",
+    };
+    updateSortList([...tabSortedList, newItem]);
+  };
+
+  const handleRemove = (columnKey: string) => {
+    if (!tabSortedList) return;
+
+    const updated = tabSortedList.filter((item) => item.column !== columnKey);
+    updateSortList(updated);
+  };
+
+  const handleModeChange = (
+    _: React.MouseEvent<HTMLElement>,
+    value: boolean
+  ) => {
+    if (value !== null) {
+      setSortingTabState((prev) => ({ ...prev, isDefault: value }));
+    }
+  };
+
+  const handleDragEnd = (event: any) => {
+    if (!tabSortedList) return;
+
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+
+    const oldIndex = tabSortedList.findIndex((i) => i.column === active.id);
+    const newIndex = tabSortedList.findIndex((i) => i.column === over.id);
+
+    if (oldIndex !== -1 && newIndex !== -1) {
+      const reordered = arrayMove(tabSortedList, oldIndex, newIndex);
+      updateSortList(reordered);
+    }
+  };
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+      <Typography>Select attribute(s) you want to sort by</Typography>
+
+      <CustomToggleSwitchButton
+        buttons={TOGGLE_BUTTON_TABS}
+        value={isDefault}
+        onChange={handleModeChange}
+      />
+
+      <Box>
+        {!isDefault && (
+          <CustomTabs
+            value={activeTab}
+            onChange={(_, tab) => setActiveTab(tab)}
+          >
+            {quickTabStates?.show_list?.map((tab) => (
+              <Tab key={tab} label={tab} value={tab} />
+            ))}
+          </CustomTabs>
+        )}
+      </Box>
+
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext
+          items={tabSortedList?.map((s) => s.column) || []}
+          strategy={verticalListSortingStrategy}
+        >
+          {tabSortedList?.map((sort, index) => (
+            <SortableItem key={sort.column} id={sort.column}>
+              <Box display="flex" gap={1} alignItems="center" mb={1}>
+                <Select
+                  value={sort.column}
+                  onChange={(e) =>
+                    handleDNDDropdownChange("column", e.target.value, index)
+                  }
+                  size="small"
+                  fullWidth
+                >
+                  {columnsData?.column_list?.map((column) => (
+                    <MenuItem
+                      key={column?.attribute_key}
+                      value={column?.attribute_key}
+                    >
+                      {column?.name}
+                    </MenuItem>
+                  ))}
+                </Select>
+                <Select
+                  value={sort.order}
+                  onChange={(e) =>
+                    handleDNDDropdownChange("order", e.target.value, index)
+                  }
+                  size="small"
+                  fullWidth
+                >
+                  <MenuItem value="asc">Ascending</MenuItem>
+                  <MenuItem value="desc">Descending</MenuItem>
+                </Select>
+                <IconButton
+                  size="small"
+                  onClick={() => handleRemove(sort.column)}
+                >
+                  <CloseIcon />
+                </IconButton>
+              </Box>
+            </SortableItem>
+          ))}
+        </SortableContext>
+      </DndContext>
+
+      <Button
+        onClick={handleAddSort}
+        startIcon={<AddIcon />}
+        variant="text"
+        sx={{
+          fontSize: 13,
+          color: "#7A5AF8",
+        }}
+      >
+        Add Sort
+      </Button>
+    </Box>
+
+    // <Box sx={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+    //   <Typography>Select attribute(s) you want to sort by</Typography>
+
+    //   <CustomToggleSwitchButton value={isDefault} onChange={handleModeChange} />
+
+    //   <Box>
+    //     {!isDefault && (
+    //       <Tabs
+    //         value={tab}
+    //         onChange={(_, v) => setTab(v as TabKey)}
+    //         sx={{
+    //           mb: 2,
+    //           "& .MuiTab-root": {
+    //             color: "#0E0C0BE5",
+    //             textTransform: "none",
+    //             fontWeight: 500,
+    //           },
+    //           "& .Mui-selected": {
+    //             color: "#7A5AF8",
+    //           },
+    //           "& .MuiTabs-indicator": {
+    //             backgroundColor: "#7A5AF8",
+    //             height: 3,
+    //           },
+    //         }}
+    //       >
+    //         {tabs.map((t) => (
+    //           <Tab key={t} label={t} value={t} />
+    //         ))}
+    //       </Tabs>
+    //     )}
+
+    //     <DndContext
+    //       sensors={sensors}
+    //       collisionDetection={closestCenter}
+    //       onDragEnd={handleDragEnd}
+    //     >
+    //       <SortableContext
+    //         items={currentSortList?.map((s) => s.id)}
+    //         strategy={verticalListSortingStrategy}
+    //       >
+    //         {currentSortList?.map((sort) => (
+    //           <SortableItem key={sort.id} id={sort.id}>
+    //             <Box display="flex" gap={1} alignItems="center" mb={1}>
+    //               <Select
+    //                 value={sort.field}
+    //                 onChange={(e) =>
+    //                   handleChange(sort.id, "field", e.target.value)
+    //                 }
+    //                 size="small"
+    //                 fullWidth
+    //               >
+    //                 {attributes.map((attr) => (
+    //                   <MenuItem key={attr} value={attr}>
+    //                     {attr}
+    //                   </MenuItem>
+    //                 ))}
+    //               </Select>
+    //               <Select
+    //                 value={sort.direction}
+    //                 onChange={(e) =>
+    //                   handleChange(sort.id, "direction", e.target.value)
+    //                 }
+    //                 size="small"
+    //                 fullWidth
+    //               >
+    //                 <MenuItem value="asc">Ascending</MenuItem>
+    //                 <MenuItem value="desc">Descending</MenuItem>
+    //               </Select>
+    //               <IconButton
+    //                 size="small"
+    //                 onClick={() => handleRemove(sort.id)}
+    //               >
+    //                 <CloseIcon />
+    //               </IconButton>
+    //             </Box>
+    //           </SortableItem>
+    //         ))}
+    //       </SortableContext>
+    //     </DndContext>
+
+    //     <Button
+    //       onClick={handleAddSort}
+    //       startIcon={<AddIcon />}
+    //       sx={{
+    //         fontSize: 13,
+    //         color: "#7A5AF8",
+    //         textTransform: "uppercase",
+    //       }}
+    //     >
+    //       Add Sort
+    //     </Button>
+    //   </Box>
+
+    //   <Box>
+    //     <Button
+    //       onClick={handleSave}
+    //       sx={{
+    //         backgroundColor: "#7A5AF8",
+    //         color: "#fff",
+    //         textTransform: "none",
+    //       }}
+    //     >
+    //       Save Sorting
+    //     </Button>
+    //   </Box>
+    // </Box>
+  );
+};
+
+export default Sorting;
+
+// import React, { useEffect, useState } from "react";
+// import {
+//   Box,
+//   Tabs,
+//   Tab,
+//   Button,
+//   Select,
+//   MenuItem,
+//   IconButton,
+//   Typography,
+// } from "@mui/material";
+// import {
+//   DndContext,
+//   closestCenter,
+//   useSensors,
+//   useSensor,
+//   PointerSensor,
+// } from "@dnd-kit/core";
+// import {
+//   SortableContext,
+//   arrayMove,
+//   verticalListSortingStrategy,
+// } from "@dnd-kit/sortable";
+// import SortableItem from "../../sorting-modal.tsx/sorting-item";
+// import { AddIcon, CloseIcon } from "../../../assets/svg";
+// import CustomToggleSwitchButton from "./toggle-button-switch";
+// import { SettingsSortingProps } from "../../../types/filter-settings";
+
+// const tabs = ["Active", "Reject"];
+// type TabKey = (typeof tabs)[number];
+
+// interface SortItem {
+//   id: string;
+//   field: string;
+//   direction: "asc" | "desc";
+// }
+
+// interface sortingTabState {
+//   isDefault: boolean;
+//   default: SortItem[];
+//   tabs: Record<TabKey, SortItem[]>;
+// }
+
+// const Sorting = ({ columnsData }: SettingsSortingProps) => {
+//   const [tab, setTab] = useState<TabKey>("Active");
+//   const [sortingTabState, setSortingTabState] = useState<sortingTabState>({
+//     isDefault: true,
+//     default: [],
+//     tabs: {
+//       Active: [],
+//       Reject: [],
+//     },
+//   });
+
+//   const isDefault = sortingTabState?.isDefault;
+
+//   const attributes = ["Id", "Status", "Name", "Date"];
+//   const sensors = useSensors(useSensor(PointerSensor));
+
+//   const currentSortList = isDefault ? sortingTabState.default : sortingTabState.tabs[tab];
+
+//   const updateSortList = (updated: SortItem[]) => {
+//     setSortingTabState((prev) =>
+//       isDefault
+//         ? { ...prev, default: updated }
+//         : { ...prev, tabs: { ...prev.tabs, [tab]: updated } }
+//     );
+//   };
+
+//   const handleDragEnd = (event: any) => {
+//     const { active, over } = event;
+//     if (!over || active.id === over.id) return;
+
+//     const list = currentSortList;
+//     const oldIndex = list.findIndex((i) => i.id === active.id);
+//     const newIndex = list.findIndex((i) => i.id === over.id);
+//     const reordered = arrayMove(list, oldIndex, newIndex);
+//     updateSortList(reordered);
+//   };
+
+//   const handleChange = (id: string, key: keyof SortItem, value: any) => {
+//     const updated = currentSortList.map((item) =>
+//       item.id === id ? { ...item, [key]: value } : item
+//     );
+//     updateSortList(updated);
+//   };
+
+//   const handleAddSort = () => {
+//     const newItem: SortItem = {
+//       id: Date.now().toString(),
+//       field: attributes[0],
+//       direction: "asc",
+//     };
+//     updateSortList([...currentSortList, newItem]);
+//   };
+
+//   const handleRemove = (id: string) => {
+//     const updated = currentSortList.filter((item) => item.id !== id);
+//     updateSortList(updated);
+//   };
+
+//   const handleModeChange = (
+//     _: React.MouseEvent<HTMLElement>,
+//     value: boolean
+//   ) => {
+//     if (value !== null) {
+//       setSortingTabState((prev) => ({ ...prev, isDefault: value }));
+//     }
+//   };
+
+//   const handleSave = () => {
+//     const payload: any = {
+//       isDefault: sortingTabState.isDefault,
+//     };
+
+//     if (sortingTabState.isDefault) {
+//       payload.sortby = sortingTabState.default.map((s) => ({
+//         column: s.field.toLowerCase(),
+//         order: s.direction,
+//       }));
+//     } else {
+//       payload.tabs = Object.entries(sortingTabState.tabs).map(
+//         ([tabName, sortby]) => ({
+//           tab_name: tabName.toLowerCase(),
+//           sortby: sortby.map((s) => ({
+//             column: s.field.toLowerCase(),
+//             order: s.direction,
+//           })),
+//         })
+//       );
+//     }
+//   };
+
+//   return (
+//     <Box p={2}>
+//       <Typography
+//         variant="h6"
+//         mb={2}
+//         sx={{ color: "#0E0C0BE5", fontWeight: "500", fontSize: "16px" }}
+//       >
+//         Select attribute(s) you want to sort by
+//       </Typography>
+
+//       <Box
+//         display="flex"
+//         flexDirection="column"
+//         alignItems="flex-start"
+//         gap={1}
+//         mb={2}
+//       >
+//         <CustomToggleSwitchButton value={isDefault} onChange={handleModeChange} />
+
+//         <Button
+//           onClick={handleAddSort}
+//           startIcon={<AddIcon />}
+//           sx={{
+//             fontSize: 13,
+//             padding: 0,
+//             color: "#7A5AF8",
+//             textTransform: "uppercase",
+//             fontWeight: 500,
+//             minHeight: 0,
+//             minWidth: 0,
+//           }}
+//         >
+//           Add Sort
+//         </Button>
+//       </Box>
+
+//       {!isDefault && (
+//         <Tabs
+//           value={tab}
+//           onChange={(_, v) => setTab(v as TabKey)}
+//           sx={{
+//             mb: 2,
+//             "& .MuiTab-root": {
+//               color: "#0E0C0BE5",
+//               textTransform: "none",
+//               fontWeight: 500,
+//             },
+//             "& .Mui-selected": {
+//               color: "#7A5AF8",
+//             },
+//             "& .MuiTabs-indicator": {
+//               backgroundColor: "#7A5AF8",
+//               height: 3,
+//             },
+//           }}
+//         >
+//           {tabs.map((t) => (
+//             <Tab key={t} label={t} value={t} />
+//           ))}
+//         </Tabs>
+//       )}
+
+//       <DndContext
+//         sensors={sensors}
+//         collisionDetection={closestCenter}
+//         onDragEnd={handleDragEnd}
+//       >
+//         <SortableContext
+//           items={currentSortList.map((s) => s.id)}
+//           strategy={verticalListSortingStrategy}
+//         >
+//           {currentSortList.map((sort) => (
+//             <SortableItem key={sort.id} id={sort.id}>
+//               <Box display="flex" gap={1} alignItems="center" mb={1}>
+//                 <Select
+//                   value={sort.field}
+//                   onChange={(e) =>
+//                     handleChange(sort.id, "field", e.target.value)
+//                   }
+//                   size="small"
+//                   sx={{ minWidth: 450 }}
+//                 >
+//                   {attributes.map((attr) => (
+//                     <MenuItem key={attr} value={attr}>
+//                       {attr}
+//                     </MenuItem>
+//                   ))}
+//                 </Select>
+//                 <Select
+//                   value={sort.direction}
+//                   onChange={(e) =>
+//                     handleChange(sort.id, "direction", e.target.value)
+//                   }
+//                   size="small"
+//                   sx={{ minWidth: 450 }}
+//                 >
+//                   <MenuItem value="asc">Ascending</MenuItem>
+//                   <MenuItem value="desc">Descending</MenuItem>
+//                 </Select>
+//                 <IconButton size="small" onClick={() => handleRemove(sort.id)}>
+//                   <CloseIcon />
+//                 </IconButton>
+//               </Box>
+//             </SortableItem>
+//           ))}
+//         </SortableContext>
+//       </DndContext>
+
+//       <Box sx={{ mt: 20, marginLeft: "700px" }}>
+//         <Button
+//           onClick={handleSave}
+//           sx={{
+//             backgroundColor: "#7A5AF8",
+//             color: "#fff",
+//             textTransform: "none",
+//           }}
+//         >
+//           Save Sorting
+//         </Button>
+//       </Box>
+//     </Box>
+//   );
+// };
+
+// export default Sorting;

package/src/components/table-settings/components/toggle-button-switch.tsx

@@ -0,0 +1,45 @@
+import {
+  SxProps,
+  ToggleButton,
+  ToggleButtonGroup,
+  ToggleButtonGroupProps,
+} from "@mui/material";
+import { ToggleButtonTabsProps } from "../../../types/filter-settings";
+
+const selectedTabStyle: SxProps = {
+  textTransform: "initial",
+  minWidth: "5rem",
+  minHeight: "1.875rem",
+  color: "#7A5AF8",
+  fontWeight: 500,
+  fontSize: "0.813rem",
+  borderColor: "#7A5AF8",
+
+  "&.Mui-selected": {
+    backgroundColor: "#7A5AF8",
+    color: "#fff",
+    fontWeight: 600,
+    "&:hover": {
+      backgroundColor: "#6346e2",
+    },
+  },
+};
+
+export default function CustomToggleSwitchButton({
+  buttons,
+  ...props
+}: { buttons: ToggleButtonTabsProps[] } & ToggleButtonGroupProps) {
+  return (
+    <ToggleButtonGroup exclusive size="small" color="primary" {...props}>
+      {buttons.map((button) => (
+        <ToggleButton
+          value={button?.value}
+          disabled={button?.isDisabled}
+          sx={selectedTabStyle}
+        >
+          {button.label}
+        </ToggleButton>
+      ))}
+    </ToggleButtonGroup>
+  );
+}

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

@@ -0,0 +1,12 @@
+import { ToggleButtonTabsProps } from "../../types/filter-settings";
+
+export const SETTINGS_TABS: { label: string }[] = [
+  { label: "Quick Tab" },
+  { label: "Column" },
+  { label: "Sorting" },
+];
+
+export const TOGGLE_BUTTON_TABS: ToggleButtonTabsProps[] = [
+  { label: "Default", value: true, isDisabled: false },
+  { label: "Tab Wise", value: false, isDisabled: false },
+];