Feat/214 registration components

src/app/features/registry/components/registration-links-card/registration-links-card.component.html

@@ -13,6 +13,20 @@ <h2 class="align-self-center">
       </div>
       <div class="flex flex-wrap flex-column lg:flex-nowrap lg:flex-row justify-content-between gap-5">
         <div class="flex gap-3 flex-column w-full">
+          @if (isComponentData() && componentsDataTyped()?.registrationSupplement) {
+            <div class="flex gap-2 align-items-baseline">
+              <strong>{{ 'project.registrations.card.registrationTemplate' | translate }}</strong>
+              <span>{{ componentsDataTyped()!.registrationSupplement }}</span>
+            </div>
+          }
+
+          @if (isComponentData() && componentsDataTyped()?.registry) {
+            <div class="flex gap-2">
+              <strong>{{ 'project.registrations.card.registry' | translate }}</strong>
+              <span>{{ componentsDataTyped()!.registry }}</span>
+            </div>
+          }
+
           <div class="flex gap-2 align-items-baseline">
             <strong>{{ 'project.registrations.card.registered' | translate }}</strong>
             <span>{{ registrationData().dateCreated | date: 'medium' }}</span>
@@ -88,20 +102,18 @@ <h2 class="align-self-center">
           </div>
         </div>
 
-        @if (hasResources()) {
-          <div class="flex flex-column min-w-max">
-            <h3 class="mb-1">{{ 'shared.resources.title' | translate }}</h3>
-            <osf-data-resources
-              [vertical]="true"
-              [resourceId]="registrationData().id"
-              [hasData]="registrationDataTyped()?.hasData"
-              [hasAnalyticCode]="registrationDataTyped()?.hasAnalyticCode"
-              [hasMaterials]="registrationDataTyped()?.hasMaterials"
-              [hasPapers]="registrationDataTyped()?.hasPapers"
-              [hasSupplements]="registrationDataTyped()?.hasSupplements"
-            ></osf-data-resources>
-          </div>
-        }
+        <div class="flex flex-column min-w-max">
+          <h3 class="mb-1">{{ 'shared.resources.title' | translate }}</h3>
+          <osf-data-resources
+            [vertical]="true"
+            [resourceId]="registrationData().id"
+            [hasData]="registrationDataTyped()?.hasData || isComponentData()"
+            [hasAnalyticCode]="registrationDataTyped()?.hasAnalyticCode || isComponentData()"
+            [hasMaterials]="registrationDataTyped()?.hasMaterials || isComponentData()"
+            [hasPapers]="registrationDataTyped()?.hasPapers || isComponentData()"
+            [hasSupplements]="registrationDataTyped()?.hasSupplements || isComponentData()"
+          ></osf-data-resources>
+        </div>
       </div>
     </div>
   }

src/app/features/registry/components/registration-links-card/registration-links-card.component.ts

@@ -6,7 +6,7 @@ import { Card } from 'primeng/card';
 import { DatePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
 
-import { LinkedNode, LinkedRegistration } from '@osf/features/registry/models';
+import { LinkedNode, LinkedRegistration, RegistryComponentModel } from '@osf/features/registry/models';
 import { DataResourcesComponent, TruncatedTextComponent } from '@shared/components';
 import { RevisionReviewStates } from '@shared/enums';
 
@@ -18,7 +18,8 @@ import { RevisionReviewStates } from '@shared/enums';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RegistrationLinksCardComponent {
-  readonly registrationData = input.required<LinkedRegistration | LinkedNode>();
+  readonly registrationData = input.required<LinkedRegistration | LinkedNode | RegistryComponentModel>();
+
   readonly updateEmitRegistrationData = output<string>();
   readonly reviewEmitRegistrationData = output<string>();
 
@@ -29,16 +30,18 @@ export class RegistrationLinksCardComponent {
     return 'reviewsState' in data;
   });
 
+  protected readonly isComponentData = computed(() => {
+    const data = this.registrationData();
+    return 'registrationSupplement' in data;
+  });
+
   protected readonly registrationDataTyped = computed(() => {
     const data = this.registrationData();
     return this.isRegistrationData() ? (data as LinkedRegistration) : null;
   });
 
-  protected readonly hasResources = computed(() => {
-    const regData = this.registrationDataTyped();
-    if (!regData) return false;
-    return (
-      regData.hasData || regData.hasAnalyticCode || regData.hasMaterials || regData.hasPapers || regData.hasSupplements
-    );
+  protected readonly componentsDataTyped = computed(() => {
+    const data = this.registrationData();
+    return this.isComponentData() ? (data as RegistryComponentModel) : null;
   });
 }

src/app/features/registry/mappers/index.ts

@@ -3,6 +3,7 @@ export * from './bibliographic-contributors.mapper';
 export * from './cedar-form.mapper';
 export * from './linked-nodes.mapper';
 export * from './linked-registrations.mapper';
+export * from './registry-components.mapper';
 export * from './registry-metadata.mapper';
 export * from './registry-overview.mapper';
 export * from './registry-resource.mapper';

src/app/features/registry/mappers/registry-components.mapper.ts

@@ -0,0 +1,23 @@
+import { RegistryComponentModel } from '../models/registry-components.models';
+import { RegistryComponentJsonApi } from '../models/registry-components-json-api.model';
+
+export class RegistryComponentsMapper {
+  static fromApiResponse(apiComponent: RegistryComponentJsonApi): RegistryComponentModel {
+    return {
+      id: apiComponent.id,
+      title: apiComponent.attributes.title,
+      description: apiComponent.attributes.description,
+      category: apiComponent.attributes.category,
+      dateCreated: apiComponent.attributes.date_created,
+      dateModified: apiComponent.attributes.date_modified,
+      dateRegistered: apiComponent.attributes.date_registered,
+      registrationSupplement: apiComponent.attributes.registration_supplement,
+      tags: apiComponent.attributes.tags,
+      isPublic: apiComponent.attributes.public,
+    };
+  }
+
+  static fromApiResponseArray(apiComponents: RegistryComponentJsonApi[]): RegistryComponentModel[] {
+    return apiComponents.map(this.fromApiResponse);
+  }
+}

src/app/features/registry/mappers/registry-overview.mapper.ts

@@ -60,6 +60,7 @@ export function MapRegistryOverview(data: RegistryOverviewJsonApiData): Registry
       revisionResponses: schemaResponse.attributes?.revision_responses,
       updatedResponseKeys: schemaResponse.attributes?.updated_response_keys,
     })),
+    registry: data.embeds.provider.data.attributes.name,
     status: MapRegistryStatus(data.attributes),
     revisionStatus: data.attributes.revision_state,
     links: {

src/app/features/registry/models/get-registry-overview-json-api.model.ts

@@ -114,6 +114,13 @@ export interface RegistryOverviewJsonApiEmbed {
       };
     }[];
   };
+  provider: {
+    data: {
+      attributes: {
+        name: string;
+      };
+    };
+  };
 }
 
 export interface RegistryOverviewJsonApiRelationships {

src/app/features/registry/models/index.ts

@@ -7,6 +7,8 @@ export * from './linked-nodes.models';
 export * from './linked-nodes-json-api.model';
 export * from './linked-registrations-json-api.model';
 export * from './linked-response.models';
+export * from './registry-components.models';
+export * from './registry-components-json-api.model';
 export * from './registry-contributor-json-api.model';
 export * from './registry-institution.model';
 export * from './registry-institutions-json-api.model';

src/app/features/registry/models/registry-components-json-api.model.ts

@@ -0,0 +1,30 @@
+import { RegistryComponentModel } from './registry-components.models';
+
+export interface RegistryComponentJsonApi {
+  id: string;
+  type: string;
+  attributes: {
+    title: string;
+    description: string;
+    category: string;
+    date_created: string;
+    date_modified: string;
+    date_registered: string;
+    registration_supplement: string;
+    tags: string[];
+    public: boolean;
+  };
+}
+
+export interface RegistryComponentsJsonApiResponse {
+  data: RegistryComponentJsonApi[];
+  meta: {
+    total: number;
+    per_page: number;
+  };
+}
+
+export interface RegistryComponentsResponseJsonApi {
+  data: RegistryComponentModel[];
+  meta: { total: number; per_page: number };
+}

src/app/features/registry/models/registry-components.models.ts

@@ -0,0 +1,17 @@
+import { NodeBibliographicContributor } from './bibliographic-contributors.models';
+
+export interface RegistryComponentModel {
+  id: string;
+  title: string;
+  description: string;
+  category: string;
+  dateCreated: string;
+  dateModified: string;
+  dateRegistered: string;
+  registrationSupplement: string;
+  tags: string[];
+  isPublic: boolean;
+  contributorsCount?: number;
+  contributors?: NodeBibliographicContributor[];
+  registry?: string;
+}

src/app/features/registry/models/registry-overview.models.ts

@@ -16,6 +16,7 @@ export interface RegistryOverview {
   registrationType: string;
   doi: string;
   tags: string[];
+  registry?: string;
   contributors: ProjectOverviewContributor[];
   citation: string;
   category: string;

src/app/features/registry/pages/registry-components/registry-components.component.html

@@ -0,0 +1,26 @@
+<section class="flex flex-column flex-1">
+  <osf-sub-header [title]="'navigation.registration.components' | translate" />
+
+  <div class="flex flex-column gap-6 p-4 bg-white">
+    <section class="flex flex-column gap-4">
+      @if (registryComponentsLoading()) {
+        <div class="flex justify-content-center p-4">
+          <osf-loading-spinner />
+        </div>
+      } @else if (components().length === 0) {
+        <div class="text-center p-6">
+          <p>{{ 'registry.components.noComponentsFound' | translate }}</p>
+        </div>
+      } @else {
+        <div class="flex flex-column gap-4 w-full">
+          @for (component of components(); track component.id) {
+            <osf-registration-links-card
+              (reviewEmitRegistrationData)="reviewComponentDetails($event)"
+              [registrationData]="component"
+            />
+          }
+        </div>
+      }
+    </section>
+  </div>
+</section>

src/app/features/registry/pages/registry-components/registry-components.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegistryComponentsComponent } from './registry-components.component';
+
+describe('RegistryComponentsComponent', () => {
+  let component: RegistryComponentsComponent;
+  let fixture: ComponentFixture<RegistryComponentsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RegistryComponentsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RegistryComponentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/registry/pages/registry-components/registry-components.component.ts

@@ -0,0 +1,100 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { ChangeDetectionStrategy, Component, effect, inject, OnInit, signal } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { RegistrationLinksCardComponent } from '@osf/features/registry/components';
+import { RegistryComponentModel } from '@osf/features/registry/models';
+import { GetRegistryById, RegistryOverviewSelectors } from '@osf/features/registry/store/registry-overview';
+import { LoadingSpinnerComponent, SubHeaderComponent } from '@shared/components';
+
+import { GetRegistryComponents, RegistryComponentsSelectors } from '../../store/registry-components';
+import { GetBibliographicContributorsForRegistration, RegistryLinksSelectors } from '../../store/registry-links';
+
+@Component({
+  selector: 'osf-registry-components',
+  imports: [SubHeaderComponent, TranslatePipe, LoadingSpinnerComponent, RegistrationLinksCardComponent],
+  templateUrl: './registry-components.component.html',
+  styleUrl: './registry-components.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RegistryComponentsComponent implements OnInit {
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+
+  private registryId = signal('');
+
+  protected actions = createDispatchMap({
+    getRegistryComponents: GetRegistryComponents,
+    getBibliographicContributorsForRegistration: GetBibliographicContributorsForRegistration,
+    getRegistryById: GetRegistryById,
+  });
+
+  components = signal<RegistryComponentModel[]>([]);
+
+  protected registryComponents = select(RegistryComponentsSelectors.getRegistryComponents);
+  protected registryComponentsLoading = select(RegistryComponentsSelectors.getRegistryComponentsLoading);
+
+  protected bibliographicContributorsForRegistration = select(
+    RegistryLinksSelectors.getBibliographicContributorsForRegistration
+  );
+  protected bibliographicContributorsForRegistrationId = select(
+    RegistryLinksSelectors.getBibliographicContributorsForRegistrationId
+  );
+
+  protected registry = select(RegistryOverviewSelectors.getRegistry);
+
+  constructor() {
+    effect(() => {
+      const components = this.registryComponents();
+
+      if (components.length > 0) {
+        components.forEach((component) => {
+          this.fetchContributorsForComponent(component.id);
+        });
+
+        this.components.set(components);
+      }
+    });
+
+    effect(() => {
+      const bibliographicContributorsForRegistration = this.bibliographicContributorsForRegistration();
+      const bibliographicContributorsForRegistrationId = this.bibliographicContributorsForRegistrationId();
+
+      if (bibliographicContributorsForRegistration && bibliographicContributorsForRegistrationId) {
+        this.components.set(
+          this.registryComponents().map((component) => {
+            if (component.id === bibliographicContributorsForRegistrationId) {
+              return {
+                ...component,
+                registry: this.registry()?.registry,
+                contributors: bibliographicContributorsForRegistration,
+              };
+            }
+
+            return component;
+          })
+        );
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    this.registryId.set(this.route.parent?.parent?.snapshot.params['id']);
+
+    if (this.registryId()) {
+      this.actions.getRegistryComponents(this.registryId());
+      this.actions.getRegistryById(this.registryId(), true);
+    }
+  }
+
+  fetchContributorsForComponent(componentId: string): void {
+    this.actions.getBibliographicContributorsForRegistration(componentId);
+  }
+
+  reviewComponentDetails(id: string): void {
+    this.router.navigate(['/registries', id, 'overview']);
+  }
+}

src/app/features/registry/registry.routes.ts

@@ -2,6 +2,7 @@ import { provideStates } from '@ngxs/store';
 
 import { Routes } from '@angular/router';
 
+import { RegistryComponentsState } from '@osf/features/registry/store/registry-components';
 import { RegistryFilesState } from '@osf/features/registry/store/registry-files';
 import { RegistryLinksState } from '@osf/features/registry/store/registry-links';
 import { RegistryMetadataState } from '@osf/features/registry/store/registry-metadata';
@@ -78,6 +79,14 @@ export const registryRoutes: Routes = [
           context: ResourceType.Registration,
         },
       },
+      {
+        path: 'components',
+        loadComponent: () =>
+          import('./pages/registry-components/registry-components.component').then(
+            (c) => c.RegistryComponentsComponent
+          ),
+        providers: [provideStates([RegistryComponentsState, RegistryLinksState])],
+      },
       {
         path: 'resources',
         loadComponent: () =>

src/app/features/registry/services/index.ts

@@ -1,3 +1,4 @@
+export * from './registry-components.service';
 export * from './registry-links.service';
 export * from './registry-metadata.service';
 export * from './registry-overview.service';