fix(registries): added add new button

Author: nsemets

src/app/features/registries/components/registry-provider-hero/registry-provider-hero.component.html

@@ -1,5 +1,5 @@
 <section class="registries-hero-container py-5 px-3 flex flex-column gap-4 md:py-6 md:px-4">
-  <div class="flex flex-column align-items-start gap-4 md:flex-row">
+  <div class="flex flex-column align-items-start justify-content-between gap-4 md:flex-row">
     <div class="flex align-items-center gap-2">
       @if (isProviderLoading()) {
         <p-skeleton width="3rem" height="1.5rem" />
@@ -13,6 +13,8 @@
         />
       }
     </div>
+
+    <p-button [label]="'registries.addRegistration' | translate" (onClick)="navigateToCreatePage()"></p-button>
   </div>
 
   <div class="provider-description">

src/app/features/registries/components/registry-provider-hero/registry-provider-hero.component.ts

@@ -1,11 +1,13 @@
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
+import { Button } from 'primeng/button';
 import { DialogService } from 'primeng/dynamicdialog';
 import { Skeleton } from 'primeng/skeleton';
 
 import { TitleCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, effect, inject, input, output } from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { Router } from '@angular/router';
 
 import { PreprintsHelpDialogComponent } from '@osf/features/preprints/components';
 import { RegistryProviderDetails } from '@osf/features/registries/models/registry-provider.model';
@@ -16,14 +18,15 @@ import { HeaderStyleHelper } from '@shared/utils';
 
 @Component({
   selector: 'osf-registry-provider-hero',
-  imports: [DecodeHtmlPipe, SearchInputComponent, Skeleton, TitleCasePipe, TranslatePipe],
+  imports: [DecodeHtmlPipe, SearchInputComponent, Skeleton, TitleCasePipe, TranslatePipe, Button],
   templateUrl: './registry-provider-hero.component.html',
   styleUrl: './registry-provider-hero.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RegistryProviderHeroComponent {
-  protected translateService = inject(TranslateService);
-  protected dialogService = inject(DialogService);
+  private readonly router = inject(Router);
+  private readonly translateService = inject(TranslateService);
+  private readonly dialogService = inject(DialogService);
 
   searchControl = input<FormControl>(new FormControl());
   provider = input.required<RegistryProviderDetails | null>();
@@ -58,4 +61,14 @@ export class RegistryProviderHeroComponent {
       closable: true,
     });
   }
+
+  navigateToCreatePage() {
+    const providerId = this.provider()?.id;
+
+    if (!providerId) {
+      return;
+    }
+
+    this.router.navigate([`/registries/${providerId}/new`]);
+  }
 }