fix: popper menu and jobs status

goat-community · Sep 30, 2023 · c0ec39b · c0ec39b
1 parent 91e1120
commit c0ec39b
Show file tree

Hide file tree

Showing 27 changed files with 2,976 additions and 2,777 deletions.
diff --git a/apps/web/app/[lng]/layout.tsx b/apps/web/app/[lng]/layout.tsx
@@ -37,9 +37,9 @@ export default function RootLayout({
       <body className={mulish.className}>
         <StoreProvider>
           <AuthProvider>
-            <ToastProvider>
-              <ThemeRegistry>{children}</ThemeRegistry>
-            </ToastProvider>
+            <ThemeRegistry>
+              <ToastProvider>{children} </ToastProvider>
+            </ThemeRegistry>
           </AuthProvider>
         </StoreProvider>
       </body>

diff --git a/apps/web/components/common/PopperMenu.tsx b/apps/web/components/common/PopperMenu.tsx
@@ -12,6 +12,7 @@ import { Icon } from "@p4b/ui/components/Icon";
 import { useState } from "react";
 
 export interface PopperMenuItem {
+  id: string;
   label: string;
   icon?: ICON_NAME;
   color?: string;
@@ -21,7 +22,7 @@ export interface PopperMenuProps {
   menuItems: PopperMenuItem[];
   selectedItem?: PopperMenuItem;
   menuButton: React.ReactNode;
-  onSelect: (index: number) => void;
+  onSelect: (item: PopperMenuItem) => void;
 }
 
 export default function PopperMenu(props: PopperMenuProps) {
@@ -51,7 +52,7 @@ export default function PopperMenu(props: PopperMenuProps) {
                 selected={selectedItem?.label === item.label}
                 key={index}
                 onClick={() => {
-                  props.onSelect(index);
+                  props.onSelect(item);
                   setPopperMenuOpen(false);
                 }}
                 sx={{

diff --git a/apps/web/components/common/TreeViewItem.tsx b/apps/web/components/common/TreeViewItem.tsx
diff --git a/apps/web/components/dashboard/common/ContentSearchbar.tsx b/apps/web/components/dashboard/common/ContentSearchbar.tsx
@@ -40,18 +40,22 @@ export default function ContentSearchBar(props: ContentSearchBarProps) {
 
   const sortByItems: PopperMenuItem[] = [
     {
+      id: "sort-by-alpha-asc",
       label: "A-Z (Asc)",
       icon: ICON_NAME.SORT_ALPHA_ASC,
     },
     {
+      id: "sort-by-alpha-desc",
       label: "A-Z (Desc)",
       icon: ICON_NAME.SORT_ALPHA_DESC,
     },
     {
+      id: "sort-by-last-updated",
       label: "Last updated",
       icon: ICON_NAME.CLOCK,
     },
     {
+      id: "sort-by-last-created",
       label: "Last created",
       icon: ICON_NAME.CLOCK,
     },
@@ -61,12 +65,12 @@ export default function ContentSearchBar(props: ContentSearchBarProps) {
     sortByItems[0],
   );
 
-  const sortByOptions = [
-    { order_by: "name", order: "ascendent" as const },
-    { order_by: "name", order: "descendent" as const },
-    { order_by: "updated_at", order: "descendent" as const },
-    { order_by: "created_at", order: "descendent" as const },
-  ];
+  const soryByOptions = {
+    "sort-by-alpha-asc": { order_by: "name", order: "ascendent" },
+    "sort-by-alpha-desc": { order_by: "name", order: "descendent" },
+    "sort-by-last-updated": { order_by: "updated_at", order: "descendent" },
+    "sort-by-last-created": { order_by: "created_at", order: "descendent" },
+  };
 
   return (
     <Box
@@ -111,11 +115,11 @@ export default function ContentSearchBar(props: ContentSearchBarProps) {
 
         <SortByMenu
           selectedItem={selectedSortBy}
-          onSelect={(index) => {
-            setSelectedSortBy(sortByItems[index]);
+          onSelect={(item: PopperMenuItem) => {
+            setSelectedSortBy(item);
             setQueryParams({
               ...queryParams,
-              ...sortByOptions[index],
+              ...soryByOptions[item?.id],
             });
           }}
           menuItems={sortByItems}

diff --git a/apps/web/components/dashboard/common/FoldersTreeView.tsx b/apps/web/components/dashboard/common/FoldersTreeView.tsx
@@ -93,10 +93,12 @@ export default function FoldersTreeView(props: FoldersTreeViewProps) {
 
   const moreMenuItems: PopperMenuItem[] = [
     {
+      id: "rename",
       label: "Rename",
       icon: ICON_NAME.EDIT,
     },
     {
+      id: "delete",
       label: "Delete",
       icon: ICON_NAME.TRASH,
       color: theme.palette.error.main,
@@ -286,26 +288,18 @@ export default function FoldersTreeView(props: FoldersTreeViewProps) {
                                   />
                                 </IconButton>
                               }
-                              onSelect={(index) => {
-                                if (index === 0) {
-                                  setEditModal({
-                                    type: "update",
-                                    selectedFolder: {
-                                      id: item.id,
-                                      name: item.name,
-                                    },
-                                    open: true,
-                                  });
-                                } else if (index === 1) {
-                                  setEditModal({
-                                    type: "delete",
-                                    selectedFolder: {
-                                      id: item.id,
-                                      name: item.name,
-                                    },
-                                    open: true,
-                                  });
-                                }
+                              onSelect={(menuItem: PopperMenuItem) => {
+                                setEditModal({
+                                  type:
+                                    menuItem.id === "rename"
+                                      ? "update"
+                                      : "delete",
+                                  selectedFolder: {
+                                    id: item.id,
+                                    name: item.name,
+                                  },
+                                  open: true,
+                                });
                               }}
                             />
                           )}

diff --git a/apps/web/components/dashboard/common/TileCard.tsx b/apps/web/components/dashboard/common/TileCard.tsx
@@ -25,7 +25,7 @@ export interface TileCard {
   cardType: "list" | "grid";
   item: Project | Layer;
   moreMenuOptions?: PopperMenuItem[];
-  onMoreMenuSelect?: (optionIndex: number, item: Project | Layer) => void;
+  onMoreMenuSelect?: (menuItem: PopperMenuItem, contentItem: Project | Layer) => void;
 }
 
 export interface ActiveCard {
@@ -99,9 +99,9 @@ const TileCard = (props: TileCard) => {
           />
         </IconButton>
       }
-      onSelect={(index: number) => {
+      onSelect={(menuItem: PopperMenuItem) => {
         setMoreMenuOpen(false);
-        props.onMoreMenuSelect?.(index, item);
+        props.onMoreMenuSelect?.(menuItem, item);
       }}
     />
   );