chore(registries): ui + api

src/app/app.routes.ts

@@ -204,6 +204,10 @@ export const routes: Routes = [
           import('./core/components/request-access/request-access.component').then((mod) => mod.RequestAccessComponent),
         data: { skipBreadcrumbs: true },
       },
+      {
+        path: 'registries',
+        loadChildren: () => import('./features/registries/registries.routes').then((mod) => mod.registriesRoutes),
+      },
       {
         path: '**',
         loadComponent: () =>

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

@@ -28,6 +28,20 @@ export const NAV_ITEMS: NavItem[] = [
     icon: 'my-projects',
     useExactMatch: true,
   },
+  {
+    path: '/registries',
+    label: 'navigation.registries',
+    icon: 'registries',
+    isCollapsible: true,
+    useExactMatch: false,
+    items: [
+      {
+        path: '/registries',
+        label: 'navigation.registriesSubRoutes.overview',
+        useExactMatch: false,
+      },
+    ],
+  },
   {
     path: '/preprints',
     label: 'navigation.preprints',

src/app/features/registries/components/index.ts

@@ -0,0 +1 @@
+export * from './registry-services/registry-services.component';

src/app/features/registries/components/registry-services/registry-services.component.html

@@ -0,0 +1,26 @@
+<section class="flex flex-column services-background-image gap-4 pt-5 pb-4 px-3 text-white md:pt-6 md:px-4">
+  <h2 class="text-2xl text-white">{{ 'registries.services.title' | translate }}</h2>
+  <p>
+    {{ 'registries.services.description' | translate }}
+  </p>
+
+  <section class="flex flex-wrap justify-content-center md:justify-content-between align-items-center gap-3">
+    @for (registryService of registryServices; track $index) {
+      <a
+        class="registry-service-item"
+        [routerLink]="[registryService.id]"
+        [style.background-image]="'url(' + registryService.src + ')'"
+        [title]="registryService.id"
+      ></a>
+    }
+  </section>
+
+  <div class="flex justify-content-center">
+    <p-button
+      class="contact-us-button w-full sm:w-auto"
+      styleClass="w-full sm:w-auto"
+      (click)="openEmail()"
+      [label]="'registries.services.contactUs' | translate"
+    ></p-button>
+  </div>
+</section>

src/app/features/registries/components/registry-services/registry-services.component.scss

@@ -0,0 +1,18 @@
+@use "assets/styles/mixins" as mix;
+@use "assets/styles/variables" as var;
+
+.services-background-image {
+  background: url("/assets/images/preprints/preprints-services-background.png") center;
+}
+
+.registry-service-item {
+  min-width: mix.rem(312px);
+  min-height: mix.rem(120px);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.contact-us-button {
+  --p-button-padding-x: 2rem;
+}

src/app/features/registries/components/registry-services/registry-services.component.spec.ts

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

src/app/features/registries/components/registry-services/registry-services.component.ts

@@ -0,0 +1,23 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+import { RegistryServiceIcons } from '@shared/constants';
+
+@Component({
+  selector: 'osf-registry-services',
+  imports: [TranslatePipe, RouterLink, Button],
+  templateUrl: './registry-services.component.html',
+  styleUrl: './registry-services.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RegistryServicesComponent {
+  protected registryServices = RegistryServiceIcons;
+
+  openEmail() {
+    window.location.href = 'mailto:contact@osf.io';
+  }
+}

src/app/features/registries/pages/index.ts

@@ -0,0 +1 @@
+export * from './registries-landing/registries-landing.component';

src/app/features/registries/pages/registries-landing/registries-landing.component.html

@@ -0,0 +1,49 @@
+<section class="subheader flex flex-column">
+  <div class="flex flex-column align-items-start gap-4">
+    <osf-sub-header
+      [title]="'registries.title' | translate"
+      [icon]="'registries'"
+      [description]="'registries.description' | translate"
+      [showButton]="true"
+      [buttonLabel]="'registries.addRegistration' | translate"
+    />
+
+    <osf-search-input
+      class="w-full py-4 px-4"
+      [control]="searchControl"
+      [placeholder]="'registries.searchPlaceholder' | translate"
+      (triggerSearch)="redirectToSearchPageWithValue()"
+    />
+  </div>
+
+  <osf-registry-services class="mt-4"></osf-registry-services>
+
+  <div class="flex flex-column gap-4 registries flex-1 py-6 px-4">
+    <div class="flex justify-content-between gap-4">
+      <h1>{{ 'registries.browse' | translate }}</h1>
+      <p-button
+        class="hidden sm:block sm:w-auto"
+        styleClass="hidden sm:block sm:w-auto"
+        [label]="'registries.seeMore' | translate"
+        severity="secondary"
+        (click)="redirectToSearchPageRegistrations()"
+      />
+    </div>
+
+    @if (!isRegistriesLoading()) {
+      @for (item of registries(); track item.id) {
+        <osf-resource-card [item]="item" />
+      }
+    } @else {
+      <osf-loading-spinner></osf-loading-spinner>
+    }
+
+    <p-button
+      class="block w-full sm:hidden"
+      styleClass="block w-full sm:hidden"
+      [label]="'registries.seeMore' | translate"
+      severity="secondary"
+      (click)="redirectToSearchPageRegistrations()"
+    />
+  </div>
+</section>

src/app/features/registries/pages/registries-landing/registries-landing.component.scss

@@ -0,0 +1,9 @@
+@use "assets/styles/variables" as var;
+
+.subheader {
+  color: var.$dark-blue-1;
+}
+
+.registries {
+  background: var.$white;
+}

src/app/features/registries/pages/registries-landing/registries-landing.component.spec.ts

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

src/app/features/registries/pages/registries-landing/registries-landing.component.ts

@@ -0,0 +1,65 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+
+import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Router } from '@angular/router';
+
+import { RegistryServicesComponent } from '@osf/features/registries/components';
+import { GetRegistries, RegistriesSelectors } from '@osf/features/registries/store';
+import {
+  LoadingSpinnerComponent,
+  ResourceCardComponent,
+  SearchInputComponent,
+  SubHeaderComponent,
+} from '@shared/components';
+import { ResourceTab } from '@shared/enums';
+
+@Component({
+  selector: 'osf-registries-landing',
+  imports: [
+    Button,
+    TranslatePipe,
+    SearchInputComponent,
+    RegistryServicesComponent,
+    ResourceCardComponent,
+    LoadingSpinnerComponent,
+    SubHeaderComponent,
+  ],
+  templateUrl: './registries-landing.component.html',
+  styleUrl: './registries-landing.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RegistriesLandingComponent implements OnInit {
+  private router = inject(Router);
+
+  protected searchControl = new FormControl<string>('');
+
+  private readonly actions = createDispatchMap({
+    getRegistries: GetRegistries,
+  });
+
+  protected registries = select(RegistriesSelectors.getRegistries);
+  protected isRegistriesLoading = select(RegistriesSelectors.isRegistriesLoading);
+
+  ngOnInit(): void {
+    this.actions.getRegistries();
+  }
+
+  redirectToSearchPageWithValue(): void {
+    const searchValue = this.searchControl.value;
+
+    this.router.navigate(['/search'], {
+      queryParams: { search: searchValue, resourceTab: ResourceTab.Registrations },
+    });
+  }
+
+  redirectToSearchPageRegistrations(): void {
+    this.router.navigate(['/search'], {
+      queryParams: { resourceTab: ResourceTab.Registrations },
+    });
+  }
+}

src/app/features/registries/registries.component.html

@@ -0,0 +1,3 @@
+<div class="xl:flex xl:flex-column xl:mt-6">
+  <router-outlet />
+</div>

src/app/features/registries/registries.component.spec.ts

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

src/app/features/registries/registries.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'osf-registries',
+  imports: [RouterOutlet],
+  templateUrl: './registries.component.html',
+  styleUrl: './registries.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RegistriesComponent {}

src/app/features/registries/registries.routes.ts

@@ -0,0 +1,25 @@
+import { provideStates } from '@ngxs/store';
+
+import { Routes } from '@angular/router';
+
+import { RegistriesComponent } from '@osf/features/registries/registries.component';
+import { RegistriesState } from '@osf/features/registries/store';
+
+export const registriesRoutes: Routes = [
+  {
+    path: '',
+    component: RegistriesComponent,
+    providers: [provideStates([RegistriesState])],
+    children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'overview',
+      },
+      {
+        path: 'overview',
+        loadComponent: () => import('@osf/features/registries/pages').then((c) => c.RegistriesLandingComponent),
+      },
+    ],
+  },
+];

src/app/features/registries/store/index.ts

@@ -0,0 +1,4 @@
+export * from './registries.actions';
+export * from './registries.model';
+export * from './registries.selectors';
+export * from './registries.state';

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

@@ -0,0 +1,3 @@
+export class GetRegistries {
+  static readonly type = '[Registries] Get Registries';
+}

src/app/features/registries/store/registries.model.ts

@@ -0,0 +1,5 @@
+import { AsyncStateModel, Resource } from '@shared/models';
+
+export interface RegistriesStateModel {
+  registries: AsyncStateModel<Resource[]>;
+}

src/app/features/registries/store/registries.selectors.ts

@@ -0,0 +1,17 @@
+import { Selector } from '@ngxs/store';
+
+import { RegistriesStateModel } from '@osf/features/registries/store/registries.model';
+import { RegistriesState } from '@osf/features/registries/store/registries.state';
+import { Resource } from '@shared/models';
+
+export class RegistriesSelectors {
+  @Selector([RegistriesState])
+  static getRegistries(state: RegistriesStateModel): Resource[] {
+    return state.registries.data;
+  }
+
+  @Selector([RegistriesState])
+  static isRegistriesLoading(state: RegistriesStateModel): boolean {
+    return state.registries.isLoading;
+  }
+}