Feat/143 - My Projects project details submenu

src/app/core/components/nav-menu/nav-menu.component.html

@@ -1,10 +1,12 @@
 <nav class="nav-menu">
-  <p-panelMenu [model]="menuItems" [multiple]="false">
+  <p-panelMenu [model]="mainMenuItems" [multiple]="false">
     <ng-template #item let-item>
       <a
         [routerLink]="item.routerLink"
         routerLinkActive="active"
-        [routerLinkActiveOptions]="{ exact: item.useExactMatch }"
+        [routerLinkActiveOptions]="{
+          exact: item.label !== 'My Projects' ? item.useExactMatch : true,
+        }"
         class="nav-link flex"
         [class.mt-5]="item.label === 'Settings' || item.label === 'My Projects'"
       >
@@ -20,28 +22,37 @@
         }
       </a>
 
-      <!-- TODO Add routing and nav for the active project-->
-
-      <!--      @if(item.label === 'My Projects') {-->
-      <!--        <div class="ml-4">-->
-      <!--          <p-panelMenu [model]="projectMenuItems" [multiple]="false">-->
-      <!--            <ng-template #item let-item>-->
-      <!--              <a-->
-      <!--                [routerLink]="item.routerLink"-->
-      <!--                routerLinkActive="active"-->
-      <!--                [routerLinkActiveOptions]="{ exact: item.useExactMatch }"-->
-      <!--                class="nav-link flex"-->
-      <!--              >-->
-      <!--                @if (item.icon) {-->
-      <!--                  <i [class]="item.icon" class="nav-icon"></i>-->
-      <!--                }-->
-      <!--                <span >{{ item.label }}</span>-->
-      <!--              </a>-->
-      <!--            </ng-template>-->
-      <!--          </p-panelMenu>-->
-      <!--        </div>-->
-
-      <!--      }-->
+      @if (item.label === "My Projects" && isProjectRoute()) {
+        <div class="ml-4">
+          <p-panelMenu [model]="myProjectMenuItems" [multiple]="false">
+            <ng-template #item let-item>
+              <a
+                [routerLink]="
+                  item.routerLink
+                    ? ['/my-projects', currentProjectId(), item.routerLink]
+                    : null
+                "
+                [routerLinkActive]="item.routerLink ? 'active' : ''"
+                [routerLinkActiveOptions]="{ exact: true }"
+                class="nav-link flex"
+              >
+                @if (item.icon) {
+                  <i [class]="item.icon" class="nav-icon"></i>
+                }
+                <span>{{ item.label }}</span>
+                @if (item.items) {
+                  <i
+                    [class]="
+                      item.expanded ? 'osf-icon-arrow-down' : 'osf-icon-arrow'
+                    "
+                    class="nav-icon ml-auto pt-1"
+                  ></i>
+                }
+              </a>
+            </ng-template>
+          </p-panelMenu>
+        </div>
+      }
     </ng-template>
   </p-panelMenu>
 </nav>

src/app/core/components/nav-menu/nav-menu.component.ts

@@ -1,8 +1,20 @@
-import { Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { NAV_ITEMS } from '@core/constants/nav-items.constant';
+import { Component, computed, inject } from '@angular/core';
+import {
+  RouterLink,
+  RouterLinkActive,
+  Router,
+  NavigationEnd,
+  ActivatedRoute,
+} from '@angular/router';
+import {
+  NAV_ITEMS,
+  PROJECT_MENU_ITEMS,
+} from '@core/constants/nav-items.constant';
 import { PanelMenuModule } from 'primeng/panelmenu';
 import { MenuItem } from 'primeng/api';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { filter, map } from 'rxjs';
+import { NavItem } from '@shared/entities/nav-item.interface';
 
 @Component({
   selector: 'osf-nav-menu',
@@ -11,19 +23,47 @@ import { MenuItem } from 'primeng/api';
   styleUrl: './nav-menu.component.scss',
 })
 export class NavMenuComponent {
-  navItems = NAV_ITEMS;
+  readonly #router = inject(Router);
+  readonly #route = inject(ActivatedRoute);
+  protected readonly navItems = NAV_ITEMS;
+  protected readonly myProjectMenuItems = PROJECT_MENU_ITEMS;
+  protected readonly mainMenuItems = this.navItems.map((item) =>
+    this.#convertToMenuItem(item),
+  );
+
+  protected readonly currentRoute = toSignal(
+    this.#router.events.pipe(
+      filter((event): event is NavigationEnd => event instanceof NavigationEnd),
+      map(() => this.#getRouteInfo()),
+    ),
+    {
+      initialValue: this.#getRouteInfo(),
+    },
+  );
+
+  protected readonly currentProjectId = computed(
+    () => this.currentRoute().projectId,
+  );
+  protected readonly isProjectRoute = computed(() => !!this.currentProjectId());
+
+  #convertToMenuItem(item: NavItem): MenuItem {
+    const currentUrl = this.#router.url;
+    const isExpanded = item.isCollapsible && currentUrl.startsWith(item.path);
 
-  private convertToMenuItem(item: (typeof NAV_ITEMS)[number]): MenuItem {
     return {
       label: item.label,
       icon: item.icon ? `osf-icon-${item.icon}` : '',
-      expanded: false,
+      expanded: isExpanded,
       routerLink: item.isCollapsible ? undefined : item.path,
-      items: item.items?.map((subItem) => this.convertToMenuItem(subItem)),
+      items: item.items?.map((subItem) => this.#convertToMenuItem(subItem)),
     };
   }
 
-  protected menuItems: MenuItem[] = this.navItems.map((item) =>
-    this.convertToMenuItem(item),
-  );
+  #getRouteInfo() {
+    const projectId = this.#route.firstChild?.snapshot.params['id'] || null;
+    const section =
+      this.#route.firstChild?.firstChild?.snapshot.url[0]?.path || 'overview';
+
+    return { projectId, section };
+  }
 }

src/app/core/constants/nav-items.constant.ts

@@ -1,4 +1,5 @@
 import { NavItem } from '@shared/entities/nav-item.interface';
+import { MenuItem } from 'primeng/api';
 
 export const NAV_ITEMS: NavItem[] = [
   { path: '/home', label: 'Home', icon: 'home', useExactMatch: true },
@@ -61,3 +62,17 @@ export const NAV_ITEMS: NavItem[] = [
     useExactMatch: true,
   },
 ];
+
+export const PROJECT_MENU_ITEMS: MenuItem[] = [
+  {
+    label: 'Project details',
+    icon: 'osf-icon-my-projects',
+    expanded: true,
+    items: [
+      { label: 'Overview', routerLink: 'overview' },
+      { label: 'Metadata', routerLink: 'metadata' },
+      { label: 'Files', routerLink: 'files' },
+      { label: 'Registrations', routerLink: 'registrations' },
+    ],
+  },
+];

src/app/shared/components/add-project-form/add-project-form.component.ts

@@ -108,6 +108,8 @@ export class AddProjectFormComponent implements OnInit {
     this.#store.dispatch(
       new GetMyProjects(1, MY_PROJECTS_TABLE_PARAMS.rows, {}),
     );
+
+    this.selectAllAffiliations();
   }
 
   selectAllAffiliations(): void {