rez-table-listing-mui 1.0.40 → 1.0.41

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

@@ -35,36 +35,73 @@ const Sorting = ({
   filterSettingStates,
   columnsData,
 }: SettingsSortingProps) => {
-  const { quickTabStates, sortingTabState, setSortingTabState } =
-    filterSettingStates;
+  const {
+    quickTabStates,
+    sortingTabState,
+    setSortingTabState,
+    saveButtonError,
+    setSaveButtonError,
+  } = filterSettingStates;
 
   const [activeTab, setActiveTab] = useState<string | undefined>(
     quickTabStates?.show_list?.[0]
   );
 
+  const isSortingDefault = sortingTabState?.isDefault;
+
   useEffect(() => {
-    if (!Object.entries(sortingTabState)?.length) {
-      // Render empty columns
-      const emptySortBy: SortingConfigSortByProps[] = [
-        { column: "", order: "asc" },
-      ];
+    // Render empty columns
+    const emptySortBy: SortingConfigSortByProps[] = [
+      { column: "", order: "asc" },
+    ];
+
+    const mappedQuickTabs =
+      quickTabStates?.show_list?.map((tab) => ({
+        tab_name: tab,
+        sortby: emptySortBy,
+      })) || [];
 
+    if (!Object.entries(sortingTabState)?.length) {
       // Create a new default sorting state
       const newSortingState: SortingConfigProps = {
         isDefault: true,
         sortby: emptySortBy,
-        tabs: quickTabStates?.show_list?.map((tab) => ({
-          tab_name: tab,
-          sortby: emptySortBy,
-        })),
+        tabs: mappedQuickTabs,
       };
 
+      setSaveButtonError((prev) => ({
+        ...prev,
+        hasError: true,
+        messages: [
+          ...saveButtonError?.messages,
+          { type: "sorting_error", message: "Please select a column" },
+        ],
+      }));
+
       setActiveTab(newSortingState?.tabs?.[0]?.tab_name);
       setSortingTabState(newSortingState);
     }
-  }, []);
 
-  const isDefault = sortingTabState?.isDefault;
+    // If show_list is not empty
+    // if (quickTabStates?.show_list?.length) {
+    //   setSortingTabState((prev) => ({
+    //     ...prev,
+    //     tabs: mappedQuickTabs,
+    //   }));
+    //   setActiveTab(mappedQuickTabs?.[0]?.tab_name);
+    // }
+  }, [quickTabStates?.show_list]);
+
+  // useEffect(() => {
+  //   const hasEmptySortBy = false;
+
+  //   if (isSortingDefault !== undefined && isSortingDefault) {
+  //     console.log("first");
+  //   } else {
+  //     console.log("second");
+  //   }
+  // }, [isSortingDefault]);
+
   const sensors = useSensors(useSensor(PointerSensor));
 
   const activeTabIndex = sortingTabState?.tabs?.findIndex(
@@ -84,7 +121,7 @@ const Sorting = ({
    * * - Return an empty array
    */
   const tabSortedList = useMemo(() => {
-    return isDefault
+    return isSortingDefault
       ? sortingTabState?.sortby
       : activeTab !== undefined
       ? sortingTabState?.tabs?.[activeTabIndex || 0]?.sortby
@@ -113,6 +150,20 @@ const Sorting = ({
   ) => {
     if (!tabSortedList) return;
 
+    // Check if sorting_error exists
+    // If it does, remove it
+    if (key === "column") {
+      const otherErrors = saveButtonError?.messages?.filter(
+        (error) => error.type !== "sorting_error"
+      );
+
+      setSaveButtonError((prev) => ({
+        ...prev,
+        hasError: otherErrors.length > 0,
+        messages: otherErrors,
+      }));
+    }
+
     const updated = [...tabSortedList];
     updated[index] = { ...updated[index], [key]: value };
     updateSortList(updated);
@@ -122,9 +173,19 @@ const Sorting = ({
     if (!tabSortedList) return;
 
     const newItem: SortingConfigSortByProps = {
-      column: columnsData?.column_list?.[0]?.attribute_key || "",
+      column: "",
       order: "asc",
     };
+
+    setSaveButtonError((prev) => ({
+      ...prev,
+      hasError: true,
+      messages: [
+        ...saveButtonError?.messages,
+        { type: "sorting_error", message: "Please select a column" },
+      ],
+    }));
+
     updateSortList([...tabSortedList, newItem]);
   };
 
@@ -133,6 +194,23 @@ const Sorting = ({
 
     const updated = tabSortedList.filter((item) => item.column !== columnKey);
     updateSortList(updated);
+
+    // ! CHECK THIS LOGIC AND CHANGE AS NEEDED
+    // check if any of the columns are empty
+    const columnsHasEmptyValue =
+      updated.some((item) => item.column === "") || updated.length === 0;
+
+    if (columnsHasEmptyValue) {
+      const filteredErrors = saveButtonError?.messages?.filter(
+        (error) => error.type !== "sorting_error"
+      );
+
+      setSaveButtonError((prev) => ({
+        ...prev,
+        hasError: true,
+        messages: filteredErrors,
+      }));
+    }
   };
 
   const handleModeChange = (
@@ -159,461 +237,127 @@ const Sorting = ({
     }
   };
 
+  const hasShowListQuickTabs =
+    quickTabStates?.show_list?.length !== 0 || isSortingDefault ? true : false;
+  const showAddSortButton =
+    tabSortedList?.length !== columnsData?.column_list?.length;
+
+  const isAddSortDisabled = useMemo(() => {
+    return saveButtonError?.messages?.some(
+      (error) => error?.type === "sorting_error"
+    );
+  }, [saveButtonError]);
+
   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}
+        value={isSortingDefault}
         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
+      {hasShowListQuickTabs ? (
+        <>
+          <Box>
+            {!isSortingDefault && (
+              <CustomTabs
+                value={activeTab}
+                onChange={(_, tab) => setActiveTab(tab)}
+              >
+                {quickTabStates?.show_list?.map((tab) => (
+                  <Tab key={tab} label={tab} value={tab} />
+                ))}
+              </CustomTabs>
+            )}
+
+            <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}
+                            disabled={tabSortedList.some(
+                              (s) => s.column === 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>
+
+            {showAddSortButton && (
+              <Box>
+                <Button
+                  onClick={handleAddSort}
+                  startIcon={<AddIcon />}
+                  variant="text"
+                  sx={{
+                    fontSize: 13,
+                    color: "#7A5AF8",
+                  }}
+                  disabled={isAddSortDisabled}
                 >
-                  {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>
+                  Add Sort
+                </Button>
               </Box>
-            </SortableItem>
-          ))}
-        </SortableContext>
-      </DndContext>
-
-      <Button
-        onClick={handleAddSort}
-        startIcon={<AddIcon />}
-        variant="text"
-        sx={{
-          fontSize: 13,
-          color: "#7A5AF8",
-        }}
-      >
-        Add Sort
-      </Button>
+            )}
+          </Box>
+        </>
+      ) : (
+        <Typography>View as Tabs empty in Quick Tab</Typography>
+      )}
     </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;