feat(registry-overview): establish routing, sidenav, store

src/app/app.routes.ts

@@ -2,6 +2,8 @@ import { provideStates } from '@ngxs/store';
 
 import { Routes } from '@angular/router';
 
+import { RegistryOverviewState } from '@osf/features/registry/store/registry-overview';
+
 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';
@@ -148,6 +150,11 @@ export const routes: Routes = [
         path: 'registries',
         loadChildren: () => import('./features/registries/registries.routes').then((mod) => mod.registriesRoutes),
       },
+      {
+        path: 'registries/my-registrations/:registrationId',
+        loadChildren: () => import('./features/registry/registry.routes').then((mod) => mod.registryRoutes),
+        providers: [provideStates([RegistryOverviewState])],
+      },
       {
         path: '**',
         loadComponent: () =>

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

@@ -1,53 +1,80 @@
 <nav class="nav-menu">
   <p-panelMenu [model]="mainMenuItems" [multiple]="false">
     <ng-template #item let-item>
-      <a
-        [routerLink]="item.routerLink"
-        routerLinkActive="active"
-        [routerLinkActiveOptions]="{
-          exact: item.label !== 'navigation.myProjects' ? item.useExactMatch : true,
-        }"
-        class="nav-link flex align-items-center"
-        [class.mt-5]="item.label === 'navigation.settings' || item.label === 'navigation.myProjects'"
-        (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>
+      @if (item.label !== 'navigation.registriesSubRoutes.registryDetails') {
+        <a
+          [routerLink]="item.routerLink"
+          routerLinkActive="active"
+          [routerLinkActiveOptions]="{
+            exact: item.label !== 'navigation.myProjects' ? item.useExactMatch : true,
+          }"
+          class="nav-link flex align-items-center"
+          [class.mt-5]="item.label === 'navigation.settings' || item.label === 'navigation.myProjects'"
+          (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>
+
+        @if (item.label === 'navigation.myProjects' && 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 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>
         }
-      </a>
+      }
 
-      @if (item.label === 'navigation.myProjects' && 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 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 (item.label === 'navigation.registriesSubRoutes.registryDetails' && isRegistryRoute()) {
+        <p-panelMenu [model]="registrationMenuItems" [multiple]="false" class="border-none">
+          <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 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>
       }
     </ng-template>
   </p-panelMenu>

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

@@ -9,4 +9,8 @@
     border-radius: mix.rem(8px);
     font-weight: 700;
   }
+
+  ::ng-deep li[aria-label="navigation.registriesSubRoutes.registryDetails"] {
+    border-left-color: transparent !important;
+  }
 }

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

@@ -9,7 +9,7 @@ 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 { NAV_ITEMS, PROJECT_MENU_ITEMS } from '@core/constants';
+import { NAV_ITEMS, PROJECT_MENU_ITEMS, REGISTRATION_MENU_ITEMS } from '@core/constants';
 import { IconComponent } from '@osf/shared/components';
 import { NavItem } from '@osf/shared/models';
 
@@ -24,6 +24,7 @@ export class NavMenuComponent {
   private readonly route = inject(ActivatedRoute);
   protected readonly navItems = NAV_ITEMS;
   protected readonly myProjectMenuItems = PROJECT_MENU_ITEMS;
+  protected readonly registrationMenuItems = REGISTRATION_MENU_ITEMS;
   protected readonly mainMenuItems = this.navItems.map((item) => this.convertToMenuItem(item));
 
   closeMenu = output<void>();
@@ -40,6 +41,13 @@ export class NavMenuComponent {
 
   protected readonly currentProjectId = computed(() => this.currentRoute().projectId);
   protected readonly isProjectRoute = computed(() => !!this.currentProjectId());
+  protected readonly isRegistryRoute = computed(() => {
+    const segments = this.currentRoute().segments;
+    if (segments && segments.length > 0) {
+      return segments[0] === 'registries' && segments[1] === 'my-registrations' && !!segments[2];
+    }
+    return false;
+  });
 
   convertToMenuItem(item: NavItem): MenuItem {
     const currentUrl = this.router.url;
@@ -60,8 +68,9 @@ export class NavMenuComponent {
   getRouteInfo() {
     const projectId = this.route.firstChild?.snapshot.params['id'] || null;
     const section = this.route.firstChild?.firstChild?.snapshot.url[0]?.path || 'overview';
+    const segments = this.route.firstChild?.snapshot.url.map((s) => s.path);
 
-    return { projectId, section };
+    return { projectId, section, segments };
   }
 
   goToLink(item: MenuItem) {

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

@@ -40,6 +40,16 @@ export const NAV_ITEMS: NavItem[] = [
         label: 'navigation.registriesSubRoutes.overview',
         useExactMatch: false,
       },
+      {
+        path: '/my-registrations',
+        label: 'navigation.registriesSubRoutes.myRegistrations',
+        useExactMatch: false,
+      },
+      {
+        path: '/registry-overview',
+        label: 'navigation.registriesSubRoutes.registryDetails',
+        useExactMatch: false,
+      },
     ],
   },
   {
@@ -165,3 +175,21 @@ export const PROJECT_MENU_ITEMS: MenuItem[] = [
     ],
   },
 ];
+
+export const REGISTRATION_MENU_ITEMS: MenuItem[] = [
+  {
+    label: 'navigation.registration.details',
+    icon: 'osf-icon-my-projects',
+    expanded: true,
+    items: [
+      { label: 'navigation.registration.overview', routerLink: 'overview' },
+      { label: 'navigation.registration.metadata', routerLink: 'metadata' },
+      { label: 'navigation.registration.files', routerLink: 'files' },
+      { label: 'navigation.registration.resources', routerLink: 'resources' },
+      { label: 'navigation.registration.wiki', routerLink: 'wiki' },
+      { label: 'navigation.registration.components', routerLink: 'components' },
+      { label: 'navigation.registration.links', routerLink: 'links' },
+      { label: 'navigation.registration.analytics', routerLink: 'analytics' },
+    ],
+  },
+];

src/app/features/collections/services/collections.service.ts

@@ -56,4 +56,32 @@ export class CollectionsService {
 
     return this.#jsonApiService.delete(url, payload);
   }
+
+  addRegistrationToBookmarks(bookmarksId: string, registryId: string): Observable<void> {
+    const url = `${environment.apiUrl}/collections/${bookmarksId}/relationships/linked_registrations/`;
+    const payload = {
+      data: [
+        {
+          type: 'linked_registrations',
+          id: registryId,
+        },
+      ],
+    };
+
+    return this.#jsonApiService.post<void>(url, payload);
+  }
+
+  removeRegistrationFromBookmarks(bookmarksId: string, registryId: string): Observable<void> {
+    const url = `${environment.apiUrl}/collections/${bookmarksId}/relationships/linked_registrations/`;
+    const payload = {
+      data: [
+        {
+          type: 'linked_registrations',
+          id: registryId,
+        },
+      ],
+    };
+
+    return this.#jsonApiService.delete(url, payload);
+  }
 }

src/app/features/collections/store/collections.actions.ts

@@ -1,22 +1,26 @@
+import { ResourceType } from '@shared/enums';
+
 export class GetBookmarksCollectionId {
   static readonly type = '[Collections] Get Bookmarks Collection Id';
 }
 
-export class AddProjectToBookmarks {
-  static readonly type = '[Collections] Add Project To Bookmarks';
+export class AddResourceToBookmarks {
+  static readonly type = '[Collections] Add Resource To Bookmarks';
 
   constructor(
     public bookmarksId: string,
-    public projectId: string
+    public resourceId: string,
+    public resourceType: ResourceType
   ) {}
 }
 
-export class RemoveProjectFromBookmarks {
-  static readonly type = '[Collections] Remove Project From Bookmarks';
+export class RemoveResourceFromBookmarks {
+  static readonly type = '[Collections] Remove Resource From Bookmarks';
 
   constructor(
     public bookmarksId: string,
-    public projectId: string
+    public resourceId: string,
+    public resourceType: ResourceType
   ) {}
 }