Merge pull request #236 from CenterForOpenScience/feat/left-menu-updates

Feat/left menu updates

Author: nsemets

src/app/app.routes.ts

@@ -8,9 +8,14 @@ import { authGuard, redirectIfLoggedInGuard } from './core/guards';
 import { MyProfileResourceFiltersOptionsState } from './features/my-profile/components/filters/store';
 import { MyProfileResourceFiltersState } from './features/my-profile/components/my-profile-resource-filters/store';
 import { MyProfileState } from './features/my-profile/store';
+import { PreprintState } from './features/preprints/store/preprint';
+import { RegistriesState } from './features/registries/store';
+import { LicensesHandlers, ProjectsHandlers, ProvidersHandlers } from './features/registries/store/handlers';
+import { FilesHandlers } from './features/registries/store/handlers/files.handlers';
 import { ResourceFiltersOptionsState } from './features/search/components/filters/store';
 import { ResourceFiltersState } from './features/search/components/resource-filters/store';
 import { SearchState } from './features/search/store';
+import { LicensesService } from './shared/services';
 
 export const routes: Routes = [
   {
@@ -60,12 +65,9 @@ export const routes: Routes = [
         data: { skipBreadcrumbs: true },
       },
       {
-        path: 'collections',
-        loadChildren: () => import('./features/collections/collections.routes').then((mod) => mod.collectionsRoutes),
-      },
-      {
-        path: 'meetings',
-        loadChildren: () => import('./features/meetings/meetings.routes').then((mod) => mod.meetingsRoutes),
+        path: 'search',
+        loadComponent: () => import('./features/search/search.component').then((mod) => mod.SearchComponent),
+        providers: [provideStates([ResourceFiltersState, ResourceFiltersOptionsState, SearchState])],
       },
       {
         path: 'my-projects',
@@ -75,24 +77,53 @@ export const routes: Routes = [
         canActivate: [authGuard],
       },
       {
-        path: 'my-projects/:id',
-        loadChildren: () => import('./features/project/project.routes').then((mod) => mod.projectRoutes),
-        providers: [provideStates([ProjectsState, BookmarksState])],
+        path: 'my-registrations',
         canActivate: [authGuard],
+        loadComponent: () => import('@osf/features/registries/pages').then((c) => c.MyRegistrationsComponent),
+        providers: [
+          provideStates([RegistriesState]),
+          ProvidersHandlers,
+          ProjectsHandlers,
+          LicensesService,
+          LicensesHandlers,
+          FilesHandlers,
+        ],
       },
       {
-        path: 'settings',
-        loadChildren: () => import('./features/settings/settings.routes').then((mod) => mod.settingsRoutes),
+        path: 'my-preprints',
+        canActivate: [authGuard],
+        loadComponent: () =>
+          import('@osf/features/preprints/pages/my-preprints/my-preprints.component').then(
+            (m) => m.MyPreprintsComponent
+          ),
+        providers: [provideStates([PreprintState])],
+      },
+      {
+        path: 'project/:id',
+        loadChildren: () => import('./features/project/project.routes').then((mod) => mod.projectRoutes),
+        providers: [provideStates([ProjectsState, BookmarksState])],
         canActivate: [authGuard],
       },
       {
         path: 'preprints',
         loadChildren: () => import('./features/preprints/preprints.routes').then((mod) => mod.preprintsRoutes),
       },
       {
-        path: 'search',
-        loadComponent: () => import('./features/search/search.component').then((mod) => mod.SearchComponent),
-        providers: [provideStates([ResourceFiltersState, ResourceFiltersOptionsState, SearchState])],
+        path: 'preprints/:providerId/:id',
+        loadComponent: () =>
+          import('@osf/features/preprints/pages/preprint-details/preprint-details.component').then(
+            (c) => c.PreprintDetailsComponent
+          ),
+      },
+      {
+        path: 'registries',
+        loadChildren: () => import('./features/registries/registries.routes').then((mod) => mod.registriesRoutes),
+      },
+      {
+        path: 'registries/:id',
+        loadChildren: () => import('./features/registry/registry.routes').then((mod) => mod.registryRoutes),
+        providers: [provideStates([BookmarksState])],
+        canActivate: [authGuard],
       },
       {
         path: 'my-profile',
@@ -107,13 +138,16 @@ export const routes: Routes = [
         loadChildren: () => import('./features/institutions/institutions.routes').then((r) => r.routes),
       },
       {
-        path: 'registries',
-        loadChildren: () => import('./features/registries/registries.routes').then((mod) => mod.registriesRoutes),
+        path: 'collections',
+        loadChildren: () => import('./features/collections/collections.routes').then((mod) => mod.collectionsRoutes),
       },
       {
-        path: 'registries/:id',
-        loadChildren: () => import('./features/registry/registry.routes').then((mod) => mod.registryRoutes),
-        providers: [provideStates([BookmarksState])],
+        path: 'meetings',
+        loadChildren: () => import('./features/meetings/meetings.routes').then((mod) => mod.meetingsRoutes),
+      },
+      {
+        path: 'settings',
+        loadChildren: () => import('./features/settings/settings.routes').then((mod) => mod.settingsRoutes),
         canActivate: [authGuard],
       },
       {

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

@@ -1,80 +1,26 @@
 <nav class="nav-menu">
   <p-panelMenu [model]="mainMenuItems()" [multiple]="false">
     <ng-template #item let-item>
-      @if (item.id !== 'registry-details') {
-        <a
-          [routerLink]="item.routerLink"
-          routerLinkActive="active"
-          [routerLinkActiveOptions]="item.routerLinkActiveOptions"
-          class="nav-link flex align-items-center"
-          (click)="goToLink(item)"
-        >
-          @if (item.icon) {
-            <osf-icon [iconClass]="`nav-icon ${item.icon}`"></osf-icon>
-          }
-
-          <span>{{ item.label | translate }}</span>
+      <a
+        [routerLink]="item.routerLink ? item.routerLink : null"
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="item.routerLinkActiveOptions"
+        class="nav-link flex align-items-center"
+        (click)="goToLink(item)"
+      >
+        @if (item.icon) {
+          <osf-icon [iconClass]="`nav-icon ${item.icon}`"></osf-icon>
+        }
 
-          @if (item.items) {
-            <osf-icon
-              class="ml-auto pt-1"
-              [iconClass]="item.expanded ? `fas fa-chevron-down fa-sm` : `fas fa-chevron-right fa-sm`"
-            ></osf-icon>
-          }
-        </a>
+        <span>{{ item.label | translate }}</span>
 
-        @if (item.id === 'my-projects' && !isRegistryRoute() && isProjectRoute()) {
-          <div class="ml-4">
-            <p-panelMenu [model]="myProjectMenuItems" [multiple]="false">
-              <ng-template #item let-item>
-                <a
-                  [routerLink]="item.routerLink ? ['/my-projects', currentResourceId(), item.routerLink] : null"
-                  [routerLinkActive]="item.routerLink ? 'active' : ''"
-                  [routerLinkActiveOptions]="{ exact: true }"
-                  class="nav-link flex align-items-center"
-                  (click)="goToLink(item)"
-                >
-                  @if (item.icon) {
-                    <osf-icon [iconClass]="`nav-icon ${item.icon}`"></osf-icon>
-                  }
-                  <span>{{ item.label | translate }}</span>
-                  @if (item.items) {
-                    <osf-icon
-                      class="ml-auto pt-1"
-                      [iconClass]="item.expanded ? `fas fa-chevron-down fa-sm` : `fas fa-chevron-right fa-sm`"
-                    ></osf-icon>
-                  }
-                </a>
-              </ng-template>
-            </p-panelMenu>
-          </div>
+        @if (hasVisibleChildren | wrapFn: item) {
+          <osf-icon
+            class="ml-auto pt-1"
+            [iconClass]="item.expanded ? `fas fa-chevron-down fa-sm` : `fas fa-chevron-right fa-sm`"
+          ></osf-icon>
         }
-      }
-      @if (item.id === 'registry-details' && isRegistryRoute()) {
-        <p-panelMenu [model]="registrationMenuItems()" [multiple]="false" class="border-none">
-          <ng-template #item let-item>
-            <a
-              [routerLink]="item.routerLink"
-              [routerLinkActive]="item.routerLink ? 'active' : ''"
-              [queryParams]="item.queryParams"
-              [routerLinkActiveOptions]="{ exact: true }"
-              class="nav-link flex align-items-center"
-              (click)="goToLink(item)"
-            >
-              @if (item.icon) {
-                <osf-icon [iconClass]="`nav-icon ${item.icon}`"></osf-icon>
-              }
-              <span>{{ item.label | translate }}</span>
-              @if (item.items) {
-                <osf-icon
-                  class="ml-auto pt-1"
-                  [iconClass]="item.expanded ? `fas fa-chevron-down fa-sm` : `fas fa-chevron-right fa-sm`"
-                ></osf-icon>
-              }
-            </a>
-          </ng-template>
-        </p-panelMenu>
-      }
+      </a>
     </ng-template>
   </p-panelMenu>
 </nav>

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

@@ -11,16 +11,16 @@ import { Component, computed, inject, output } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
 
-import { MENU_ITEMS, MODERATION_MENU_ITEM, PROJECT_MENU_ITEMS, REGISTRATION_MENU_ITEMS } from '@core/constants';
-import { filterMenuItems } from '@osf/core/helpers';
-import { ProviderSelectors } from '@osf/core/store/provider';
-import { UserSelectors } from '@osf/core/store/user';
+import { MENU_ITEMS } from '@core/constants';
+import { filterMenuItems, updateMenuItems } from '@osf/core/helpers';
+import { RouteContext } from '@osf/core/models';
 import { AuthSelectors } from '@osf/features/auth/store';
 import { IconComponent } from '@osf/shared/components';
+import { WrapFnPipe } from '@osf/shared/pipes';
 
 @Component({
   selector: 'osf-nav-menu',
-  imports: [RouterLinkActive, RouterLink, PanelMenuModule, TranslatePipe, IconComponent],
+  imports: [RouterLinkActive, RouterLink, PanelMenuModule, TranslatePipe, IconComponent, WrapFnPipe],
   templateUrl: './nav-menu.component.html',
   styleUrl: './nav-menu.component.scss',
 })
@@ -32,47 +32,23 @@ export class NavMenuComponent {
 
   private readonly isAuthenticated = select(AuthSelectors.isAuthenticated);
 
-  protected readonly myProjectMenuItems = PROJECT_MENU_ITEMS;
-  protected readonly registrationMenuItems = computed(() => {
-    const menu = [...REGISTRATION_MENU_ITEMS];
-    if (this.isUserModerator()) {
-      const menuItems = menu[0].items ?? [];
-      if (!menuItems.some((item) => item.label === MODERATION_MENU_ITEM.label)) {
-        menuItems.push(MODERATION_MENU_ITEM);
-      }
-    }
-    const withRouterLinks = menu.map((section) => ({
-      ...section,
-      items: section.items?.map((item) => {
-        const isModerationPage = item.state && item.state['isModeration'];
-        const routeId = isModerationPage ? this.provider()?.id : this.currentResourceId();
-        return {
-          ...item,
-          routerLink: item.routerLink ? ['/registries', routeId, item.routerLink] : null,
-          queryParams: isModerationPage ? { resourceId: this.currentResourceId() } : {},
-        };
-      }),
-    }));
-    return withRouterLinks;
-  });
-  protected readonly isUserModerator = select(UserSelectors.isCurrentUserModerator);
-  protected readonly provider = select(ProviderSelectors.getCurrentProvider);
-
   protected readonly mainMenuItems = computed(() => {
     const isAuthenticated = this.isAuthenticated();
-    const menuItems = filterMenuItems(MENU_ITEMS, isAuthenticated);
-
-    if (this.isRegistryRouteDetails()) {
-      menuItems.map((menuItem) => {
-        if (menuItem.id === 'registries') {
-          menuItem.expanded = true;
-          return menuItem;
-        }
-        return menuItem;
-      });
-    }
+    const filtered = filterMenuItems(MENU_ITEMS, isAuthenticated);
+
+    const routeContext: RouteContext = {
+      resourceId: this.currentResourceId(),
+      providerId: this.currentProviderId(),
+      isProject: this.isProjectRoute() && !this.isRegistryRoute() && !this.isPreprintRoute(),
+      isRegistry: this.isRegistryRoute(),
+      isPreprint: this.isPreprintRoute(),
+      isCollections: this.isCollectionsRoute() || false,
+      currentUrl: this.router.url,
+    };
+
+    const items = updateMenuItems(filtered, routeContext);
 
-    return this.isCollectionsRoute() ? menuItems : menuItems.filter((item) => item.routerLink !== '/collections');
+    return items;
   });
 
   protected readonly currentRoute = toSignal(
@@ -86,25 +62,27 @@ export class NavMenuComponent {
   );
 
   protected readonly currentResourceId = computed(() => this.currentRoute().resourceId);
+  protected readonly currentProviderId = computed(() => this.currentRoute().providerId);
   protected readonly isProjectRoute = computed(() => !!this.currentResourceId());
   protected readonly isCollectionsRoute = computed(() => this.currentRoute().isCollectionsWithId);
   protected readonly isRegistryRoute = computed(() => this.currentRoute().isRegistryRoute);
-  protected readonly isRegistryRouteDetails = computed(() => this.currentRoute().isRegistryRouteDetails);
+  protected readonly isPreprintRoute = computed(() => this.currentRoute().isPreprintRoute);
 
   private getRouteInfo() {
     const urlSegments = this.router.url.split('/').filter((segment) => segment);
     const resourceFromQueryParams = this.route.snapshot.queryParams['resourceId'];
     const resourceId = this.route.firstChild?.snapshot.params['id'] || resourceFromQueryParams;
-    const section = this.route.firstChild?.firstChild?.snapshot.url[0]?.path || 'overview';
+    const providerId = this.route.firstChild?.snapshot.params['providerId'];
     const isCollectionsWithId = urlSegments[0] === 'collections' && urlSegments[1] && urlSegments[1] !== '';
     const isRegistryRoute = urlSegments[0] === 'registries' && !!urlSegments[2];
-    const isRegistryRouteDetails = urlSegments[0] === 'registries' && urlSegments[2] === 'overview';
+    const isPreprintRoute = urlSegments[0] === 'preprints' && !!urlSegments[2];
+
     return {
       resourceId,
-      section,
+      providerId,
       isCollectionsWithId,
       isRegistryRoute,
-      isRegistryRouteDetails,
+      isPreprintRoute,
     };
   }
 
@@ -113,4 +91,7 @@ export class NavMenuComponent {
       this.closeMenu.emit();
     }
   }
+
+  protected readonly hasVisibleChildren = (item: MenuItem): boolean =>
+    Array.isArray(item.items) && item.items.some((child) => !!child.visible);
 }