Feat/215 registry overview

src/app/features/project/overview/components/fork-dialog/fork-dialog.component.html

@@ -1,5 +1,9 @@
 <p>
-  {{ 'project.overview.dialog.fork.message' | translate }}
+  @if (config.data.resource.resourceType === ResourceType.Project) {
+    {{ 'project.overview.dialog.fork.messageProject' | translate }}
+  } @else if (config.data.resource.resourceType === ResourceType.Registration) {
+    {{ 'project.overview.dialog.fork.messageRegistry' | translate }}
+  }
 </p>
 
 <div class="flex mt-6 gap-3 justify-content-between">

src/app/features/project/overview/components/fork-dialog/fork-dialog.component.ts

@@ -5,10 +5,13 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { Button } from 'primeng/button';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
+import { finalize } from 'rxjs';
+
 import { ChangeDetectionStrategy, Component, DestroyRef, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import { ForkResource, ProjectOverviewSelectors } from '@osf/features/project/overview/store';
+import { ResourceType } from '@shared/enums';
 import { ToolbarResource } from '@shared/models';
 import { ToastService } from '@shared/services';
 
@@ -33,12 +36,15 @@ export class ForkDialogComponent {
 
     this.store
       .dispatch(new ForkResource(resource.id, resource.resourceType))
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe({
-        next: () => {
+      .pipe(
+        takeUntilDestroyed(this.destroyRef),
+        finalize(() => {
           this.dialogRef.close();
           this.toastService.showSuccess('project.overview.dialog.toast.fork.success');
-        },
-      });
+        })
+      )
+      .subscribe();
   }
+
+  protected readonly ResourceType = ResourceType;
 }

src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.ts

@@ -132,15 +132,21 @@ export class OverviewToolbarComponent {
 
   private handleForkResource(): void {
     const resource = this.currentResource();
+    const headerTranslation =
+      resource?.resourceType === ResourceType.Project
+        ? 'project.overview.dialog.fork.headerProject'
+        : resource?.resourceType === ResourceType.Registration
+          ? 'project.overview.dialog.fork.headerRegistry'
+          : '';
     if (resource) {
       this.dialogService.open(ForkDialogComponent, {
         focusOnShow: false,
-        header: this.translateService.instant('project.overview.dialog.fork.header'),
+        header: this.translateService.instant(headerTranslation),
         closeOnEscape: true,
         modal: true,
         closable: true,
         data: {
-          resourceId: resource,
+          resource: resource,
         },
       });
     }

src/app/features/project/overview/services/project-overview.service.ts

@@ -59,7 +59,7 @@ export class ProjectOverviewService {
   forkResource(projectId: string, resourceType: string): Observable<void> {
     const payload = {
       data: {
-        type: resourceType,
+        type: 'nodes',
       },
     };
 

src/app/features/project/overview/store/project-overview.actions.ts

@@ -19,7 +19,7 @@ export class ForkResource {
   static readonly type = '[Project Overview] Fork Resource';
 
   constructor(
-    public projectId: string,
+    public resourceId: string,
     public resourceType: ResourceType
   ) {}
 }

src/app/features/project/overview/store/project-overview.state.ts

@@ -127,12 +127,9 @@ export class ProjectOverviewState {
       case ResourceType.Registration:
         resourceType = 'registrations';
         break;
-      case ResourceType.Preprint:
-        resourceType = 'preprints';
-        break;
     }
 
-    return this.projectOverviewService.forkResource(action.projectId, resourceType).pipe(
+    return this.projectOverviewService.forkResource(action.resourceId, resourceType).pipe(
       tap(() => {
         ctx.patchState({
           project: {

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

@@ -1,5 +1,5 @@
 <section class="subheader flex flex-column">
-  <div class="flex flex-column align-items-start gap-4">
+  <div class="flex flex-column align-items-start">
     <osf-sub-header
       [title]="'registries.title' | translate"
       [icon]="'registries'"

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

@@ -0,0 +1,3 @@
+export * from './registry-revisions/registry-revisions.component';
+export * from './registry-statuses/registry-statuses.component';
+export * from './withdraw-dialog/withdraw-dialog.component';

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

@@ -0,0 +1,50 @@
+<p-accordion class="accordion-border p-4 py-4 no-padding w-full">
+  <p-accordion-panel value="0">
+    <p-accordion-header class="flex flex-row column-gap-3 align-items-center">
+      {{ 'registry.overview.updates' | translate }}
+    </p-accordion-header>
+    <p-accordion-content>
+      <div class="flex flex-column gap-2 pt-4 align-items-center justify-content-center">
+        @if (registry() && registry()!.schemaResponses.length > 0) {
+          <p-button
+            severity="info"
+            class="w-full"
+            [class.current-revision]="true"
+            styleClass="w-full"
+            [label]="'registry.overview.original' | translate"
+            (click)="emitOpenRevision(0)"
+          />
+          @for (revision of registry()!.schemaResponses.slice(1); track $index; let last = $last) {
+            @if (last) {
+              <p-button
+                severity="info"
+                class="w-full"
+                [class.current-revision]="selectedRevisionIndex() === $index"
+                styleClass="w-full"
+                [label]="'registry.overview.latest' | translate"
+                (click)="emitOpenRevision($index)"
+              />
+            } @else {
+              <p-button
+                severity="info"
+                class="w-full"
+                [class.current-revision]="selectedRevisionIndex() === $index"
+                styleClass="w-full"
+                [label]="('common.buttons.update' | translate) + ($index + 1)"
+                (click)="emitOpenRevision($index)"
+              />
+            }
+          }
+
+          <!--          [KP] TODO: add links to update pages-->
+          @if (registry()?.revisionStatus === RevisionReviewStates.Approved) {
+            <p-button class="w-full" styleClass="w-full" [label]="'common.buttons.update' | translate" />
+          }
+          @if (registry()?.revisionStatus === RevisionReviewStates.RevisionInProgress) {
+            <p-button class="w-full" styleClass="w-full" [label]="'common.buttons.continueUpdate' | translate" />
+          }
+        }
+      </div>
+    </p-accordion-content>
+  </p-accordion-panel>
+</p-accordion>

src/app/features/registry/components/registry-revisions/registry-revisions.component.scss

@@ -0,0 +1,18 @@
+@use "/assets/styles/variables" as var;
+@use "assets/styles/mixins" as mix;
+
+.accordion-border {
+  border: 1px solid var.$grey-2;
+  border-radius: mix.rem(12px);
+  height: max-content !important;
+}
+
+.no-padding {
+  --p-accordion-header-padding: 0;
+}
+
+.current-revision {
+  --p-button-info-background: var(--bg-blue-3);
+  --p-button-info-hover-background: var(--bg-blue-2);
+  --p-button-info-hover-border-color: transparent;
+}

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

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

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

@@ -0,0 +1,29 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from 'primeng/accordion';
+import { Button } from 'primeng/button';
+
+import { ChangeDetectionStrategy, Component, HostBinding, input, output } from '@angular/core';
+
+import { RegistryOverview } from '@osf/features/registry/models';
+import { RevisionReviewStates } from '@shared/enums';
+
+@Component({
+  selector: 'osf-registry-revisions',
+  imports: [Accordion, AccordionPanel, AccordionHeader, AccordionContent, Button, TranslatePipe],
+  templateUrl: './registry-revisions.component.html',
+  styleUrl: './registry-revisions.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RegistryRevisionsComponent {
+  @HostBinding('class') classes = 'flex-1 flex';
+  registry = input.required<RegistryOverview | null>();
+  selectedRevisionIndex = input.required<number>();
+  openRevision = output<number>();
+
+  emitOpenRevision(index: number) {
+    this.openRevision.emit(index);
+  }
+
+  protected readonly RevisionReviewStates = RevisionReviewStates;
+}

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

@@ -0,0 +1,28 @@
+<p-accordion class="accordion-border px-4 py-4 flex-1 no-padding">
+  <p-accordion-panel value="0">
+    <p-accordion-header class="flex flex-row column-gap-3 align-items-center">
+      <p class="font-bold">{{ 'registry.overview.statuses.' + registry()?.status + '.text' | translate }}</p>
+    </p-accordion-header>
+    <p-accordion-content>
+      <div class="flex flex-column pt-4 gap-2">
+        <h2 class="font-normal">{{ 'registry.overview.statuses.' + registry()?.status + '.short' | translate }}</h2>
+        <p>{{ 'registry.overview.statuses.' + registry()?.status + '.long' | translate }}</p>
+        @if (registry()?.status === RegistryStatus.InProgress && registry()?.status === RegistryStatus.Accepted) {
+          <p-button
+            (click)="openWithdrawDialog()"
+            [label]="'registry.overview.withdrawRegistration' | translate"
+            severity="danger"
+            class="ml-auto"
+          ></p-button>
+        }
+        @if (registry()?.status === RegistryStatus.Embargo) {
+          <p-button
+            (click)="openMakePublicDialog()"
+            [label]="'common.labels.makePublic' | translate"
+            class="ml-auto"
+          ></p-button>
+        }
+      </div>
+    </p-accordion-content>
+  </p-accordion-panel>
+</p-accordion>

src/app/features/registry/components/registry-statuses/registry-statuses.component.scss

@@ -0,0 +1,12 @@
+@use "/assets/styles/variables" as var;
+@use "assets/styles/mixins" as mix;
+
+.accordion-border {
+  border: 1px solid var.$grey-2;
+  border-radius: mix.rem(12px);
+  height: max-content !important;
+}
+
+.no-padding {
+  --p-accordion-header-padding: 0;
+}

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

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

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

@@ -0,0 +1,64 @@
+import { createDispatchMap, Store } from '@ngxs/store';
+
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+
+import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from 'primeng/accordion';
+import { Button } from 'primeng/button';
+import { DialogService } from 'primeng/dynamicdialog';
+
+import { ChangeDetectionStrategy, Component, HostBinding, inject, input } from '@angular/core';
+
+import { WithdrawDialogComponent } from '@osf/features/registry/components';
+import { RegistryOverview } from '@osf/features/registry/models';
+import { MakePublic } from '@osf/features/registry/store/registry-overview';
+import { RegistryStatus } from '@shared/enums';
+import { CustomConfirmationService } from '@shared/services';
+
+@Component({
+  selector: 'osf-registry-statuses',
+  imports: [Accordion, AccordionContent, AccordionHeader, AccordionPanel, TranslatePipe, Button],
+  templateUrl: './registry-statuses.component.html',
+  styleUrl: './registry-statuses.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RegistryStatusesComponent {
+  @HostBinding('class') classes = 'flex-1 flex';
+  private readonly store = inject(Store);
+  registry = input.required<RegistryOverview | null>();
+  private readonly dialogService = inject(DialogService);
+  private readonly translateService = inject(TranslateService);
+  protected readonly RegistryStatus = RegistryStatus;
+  protected readonly customConfirmationService = inject(CustomConfirmationService);
+  protected readonly actions = createDispatchMap({
+    makePublic: MakePublic,
+  });
+
+  openWithdrawDialog(): void {
+    const registry = this.registry();
+    if (registry) {
+      this.dialogService.open(WithdrawDialogComponent, {
+        width: '552px',
+        focusOnShow: false,
+        header: this.translateService.instant('registry.overview.withdrawRegistration'),
+        closeOnEscape: true,
+        modal: true,
+        closable: true,
+        data: {
+          registryId: registry.id,
+        },
+      });
+    }
+  }
+
+  openMakePublicDialog(): void {
+    const registry = this.registry();
+    if (registry) {
+      this.customConfirmationService.confirmAccept({
+        headerKey: 'common.labels.makePublic',
+        messageKey: 'registry.overview.makePublicMessage',
+        acceptLabelKey: 'common.labels.makePublic',
+        onConfirm: () => this.actions.makePublic(registry.id),
+      });
+    }
+  }
+}

src/app/features/registry/components/withdraw-dialog/withdraw-dialog.component.html

@@ -0,0 +1,19 @@
+<div class="flex flex-column gap-4">
+  <p>{{ 'registry.overview.withdrawDescription' | translate }}</p>
+
+  <osf-text-input
+    [control]="form.controls['text']"
+    [label]="'registry.overview.withdrawJustificationLabel' | translate"
+    [placeholder]="'common.labels.optional' | translate"
+  >
+  </osf-text-input>
+
+  <div class="flex justify-content-end gap-2">
+    <p-button [label]="'common.buttons.cancel' | translate" severity="info" (click)="dialogRef.close()"></p-button>
+    <p-button
+      [label]="'common.buttons.withdraw' | translate"
+      severity="danger"
+      (click)="withdrawRegistration()"
+    ></p-button>
+  </div>
+</div>