portalicious: add registrations breadcrumb and handle not found

AB#30165 AB#30395 I combined these two tasks because I found one relying on the other, and figured that they wouldn't be a large set of changes even when combined. The design of the "registration not found" deviates from what is in Figma based on a convo with Tal. I also took the liberty of adding a "project not found" error.
global-121 · Oct 3, 2024 · 295542a · 295542a
1 parent fe06916
commit 295542a
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 44 deletions.
diff --git a/interfaces/Portalicious/eslint.config.js b/interfaces/Portalicious/eslint.config.js
@@ -128,6 +128,7 @@ module.exports = tseslint.config(
             'p-table[stateKey]',
             'p-table[stateStorage]',
             'styleClass',
+            'severity',
             'th[pSortableColumn]',
             'app-colored-chip[variant]',
             'app-metric-tile[chipIcon]',

diff --git a/interfaces/Portalicious/src/app/components/data-list/data-list.component.html b/interfaces/Portalicious/src/app/components/data-list/data-list.component.html
@@ -7,7 +7,9 @@
   @for (item of data(); track $index) {
     <p class="trim space-x-1 border-b border-grey-300 py-3">
       @if (item.loading) {
-        <app-skeleton-inline />
+        <div class="py-1">
+          <p-skeleton [width]="skeletonWidth()" />
+        </div>
       } @else {
         <strong> {{ item.label | translatableString }}:</strong>
         @if (item.tooltip) {

diff --git a/interfaces/Portalicious/src/app/components/data-list/data-list.component.ts b/interfaces/Portalicious/src/app/components/data-list/data-list.component.ts
@@ -1,7 +1,10 @@
 import { CurrencyPipe, DatePipe, DecimalPipe, NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
+import { SkeletonModule } from 'primeng/skeleton';
+
 import { LocalizedString } from '@121-service/src/shared/types/localized-string.type';
+import { getRandomInt } from '@121-service/src/utils/getRandomValue.helper';
 
 import {
   ChipVariant,
@@ -50,6 +53,7 @@ export type DataListItem = {
     CurrencyPipe,
     DatePipe,
     DecimalPipe,
+    SkeletonModule,
     SkeletonInlineComponent,
     ColoredChipComponent,
     TranslatableStringPipe,
@@ -62,4 +66,8 @@ export type DataListItem = {
 export class DataListComponent {
   data = input.required<DataListItem[]>();
   hideBottomBorder = input<boolean>();
+
+  skeletonWidth() {
+    return `${getRandomInt(42, 98).toString()}%`;
+  }
 }
diff --git a/...out/components/page-layout-title-and-actions/page-layout-title-and-actions.component.html b/...out/components/page-layout-title-and-actions/page-layout-title-and-actions.component.html
@@ -0,0 +1,7 @@
+<div class="flex items-start justify-between pb-9 pt-1">
+  <h1 class="min-w-48">
+    <ng-content select="[page-layout-title]"></ng-content>
+  </h1>
+
+  <ng-content select="[page-layout-actions]"></ng-content>
+</div>
diff --git a/...ayout/components/page-layout-title-and-actions/page-layout-title-and-actions.component.ts b/...ayout/components/page-layout-title-and-actions/page-layout-title-and-actions.component.ts
@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-layout-title-and-actions',
+  standalone: true,
+  imports: [],
+  templateUrl: './page-layout-title-and-actions.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageLayoutTitleAndActionsComponent {}
diff --git a/.../components/page-layout/components/registration-header/registration-header.component.html b/.../components/page-layout/components/registration-header/registration-header.component.html
@@ -1,8 +1,24 @@
-<p-card
-  styleClass="[&_.p-card-content]:flex-end group relative h-full [&_.p-card-title]:flex-grow"
->
-  <div class="flex">
-    <h2>{{ registration.data()?.name }}</h2>
+<app-page-layout-title-and-actions>
+  <ng-container page-layout-title>
+    @if (registration.isPending()) {
+      <p-skeleton
+        width="24rem"
+        height="1.6rem"
+      />
+    } @else {
+      <a
+        i18n
+        [routerLink]="allRegistrationsLink()"
+        class="font-normal hover:text-purple-700"
+        >All Registrations</a
+      >
+      <i class="pi pi-chevron-right mx-2"></i>
+      <ng-container i18n>Reg. #</ng-container
+      >{{ registration.data()?.registrationProgramId }} -
+      {{ registration.data()?.name }}
+    }
+  </ng-container>
+  <ng-container page-layout-actions>
     @if (canUpdatePersonalData() && !registration.isError()) {
       <p-button
         label="Add note"
@@ -23,18 +39,26 @@ <h2>{{ registration.data()?.name }}</h2>
         />
       }
     }
-  </div>
+  </ng-container>
+</app-page-layout-title-and-actions>
+
+<p-card
+  styleClass="[&_.p-card-content]:flex-end group relative h-full [&_.p-card-title]:flex-grow"
+>
   <app-data-list [data]="registrationData()" />
   <div class="mt-4 text-end">
     <span class="text-grey-700 txt-system-s">
       @if (registration.isPending()) {
         <app-skeleton-inline width="8rem" />
-      }
-      <ng-container i18n>Registered: </ng-container>
-      @if (registration.data()?.registrationCreatedDate) {
-        {{ registration.data()?.registrationCreatedDate | date: 'dd-MM-yyyy' }}
       } @else {
-        —
+        <ng-container i18n>Registered: </ng-container>
+        @if (registration.data()?.registrationCreatedDate) {
+          {{
+            registration.data()?.registrationCreatedDate | date: 'dd-MM-yyyy'
+          }}
+        } @else {
+          —
+        }
       }
     </span>
   </div>

diff --git a/...pp/components/page-layout/components/registration-header/registration-header.component.ts b/...pp/components/page-layout/components/registration-header/registration-header.component.ts
@@ -11,15 +11,18 @@ import {
 import { injectQuery } from '@tanstack/angular-query-experimental';
 import { ButtonModule } from 'primeng/button';
 import { CardModule } from 'primeng/card';
+import { SkeletonModule } from 'primeng/skeleton';
 import { TabMenuModule } from 'primeng/tabmenu';
 
 import { PermissionEnum } from '@121-service/src/user/enum/permission.enum';
 
+import { AppRoutes } from '~/app.routes';
 import { getChipDataByRegistrationStatus } from '~/components/colored-chip/colored-chip.helper';
 import {
   DataListComponent,
   DataListItem,
 } from '~/components/data-list/data-list.component';
+import { PageLayoutTitleAndActionsComponent } from '~/components/page-layout/components/page-layout-title-and-actions/page-layout-title-and-actions.component';
 import { AddNoteFormComponent } from '~/components/page-layout/components/registration-header/add-note-form/add-note-form.component';
 import { SkeletonInlineComponent } from '~/components/skeleton-inline/skeleton-inline.component';
 import { ProjectApiService } from '~/domains/project/project.api.service';
@@ -36,7 +39,9 @@ import { AuthService } from '~/services/auth.service';
     ButtonModule,
     DatePipe,
     SkeletonInlineComponent,
+    SkeletonModule,
     AddNoteFormComponent,
+    PageLayoutTitleAndActionsComponent,
   ],
   templateUrl: './registration-header.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -96,6 +101,10 @@ export class RegistrationHeaderComponent {
     }));
   });
 
+  allRegistrationsLink = computed(() => [
+    `/${AppRoutes.project}/${this.projectId().toString()}/${AppRoutes.projectRegistrations}`,
+  ]);
+
   addNoteFormVisible = signal(false);
 
   private getPaymentCountString(

diff --git a/interfaces/Portalicious/src/app/components/page-layout/page-layout.component.html b/interfaces/Portalicious/src/app/components/page-layout/page-layout.component.html
@@ -1,37 +1,57 @@
 <div class="flex min-h-screen flex-col">
   <app-header [projectId]="projectId()" />
-  <div class="flex-1">
-    @if (projectId()) {
-      <app-project-menu [projectId]="projectId()!" />
-    }
-    @if (registrationId()) {
-      <div class="mt-2 px-6 pb-8 pt-4 lg:px-24">
-        <app-registration-header
-          [projectId]="projectId()!"
-          [registrationId]="registrationId()!"
+  <div class="flex flex-1 flex-col">
+    @if (project.isError()) {
+      <div class="flex-1 px-6 py-8 lg:px-24">
+        <p-message
+          severity="warn"
+          styleClass="w-full"
+          text="Project not found. Please check the URL and try again."
+          i18n-text
         />
-        <p-card styleClass="mt-6">
-          <app-registration-menu
-            [projectId]="projectId()!"
-            [registrationId]="registrationId()!"
-          />
-          <ng-content select="[registration-page]"></ng-content>
-        </p-card>
       </div>
     } @else {
-      <div class="px-6 py-8 lg:px-24">
-        @if (pageTitle()) {
-          <div class="flex items-start justify-between pb-9 pt-1">
-            <h1 class="my-0 min-w-48">
-              {{ pageTitle() }}
-            </h1>
+      @if (projectId()) {
+        <app-project-menu [projectId]="projectId()!" />
+      }
+      <div class="flex-1 px-6 py-8 lg:px-24">
+        @if (registration.isError()) {
+          <p-message
+            severity="warn"
+            styleClass="w-full"
+            text="Registration not found. Please check the URL and try again."
+            i18n-text
+          />
+        } @else {
+          @if (registrationId()) {
+            <app-registration-header
+              [projectId]="projectId()!"
+              [registrationId]="registrationId()!"
+            />
+            <p-card styleClass="mt-6">
+              <app-registration-menu
+                [projectId]="projectId()!"
+                [registrationId]="registrationId()!"
+              />
+              <ng-content select="[registration-page]"></ng-content>
+            </p-card>
+          } @else {
+            @if (pageTitle()) {
+              <app-page-layout-title-and-actions>
+                <ng-container page-layout-title>
+                  {{ pageTitle() }}
+                </ng-container>
+                <ng-container page-layout-actions>
+                  <ng-content select="[header-actions]"></ng-content>
+                </ng-container>
+              </app-page-layout-title-and-actions>
+            }
 
-            <ng-content select="[header-actions]"></ng-content>
-          </div>
+            <ng-content></ng-content>
+          }
         }
-        <ng-content></ng-content>
       </div>
     }
+    <app-footer />
   </div>
-  <app-footer />
 </div>
diff --git a/interfaces/Portalicious/src/app/components/page-layout/page-layout.component.ts b/interfaces/Portalicious/src/app/components/page-layout/page-layout.component.ts
@@ -1,12 +1,22 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  input,
+} from '@angular/core';
 
+import { injectQuery } from '@tanstack/angular-query-experimental';
 import { CardModule } from 'primeng/card';
+import { MessageModule } from 'primeng/message';
 
 import { FooterComponent } from '~/components/page-layout/components/footer/footer.component';
 import { HeaderComponent } from '~/components/page-layout/components/header/header.component';
+import { PageLayoutTitleAndActionsComponent } from '~/components/page-layout/components/page-layout-title-and-actions/page-layout-title-and-actions.component';
 import { ProjectMenuComponent } from '~/components/page-layout/components/project-menu/project-menu.component';
 import { RegistrationHeaderComponent } from '~/components/page-layout/components/registration-header/registration-header.component';
 import { RegistrationMenuComponent } from '~/components/page-layout/components/registration-menu/registration-menu.component';
+import { ProjectApiService } from '~/domains/project/project.api.service';
+import { RegistrationApiService } from '~/domains/registration/registration.api.service';
 
 @Component({
   selector: 'app-page-layout',
@@ -18,13 +28,27 @@ import { RegistrationMenuComponent } from '~/components/page-layout/components/r
     RegistrationHeaderComponent,
     RegistrationMenuComponent,
     CardModule,
+    PageLayoutTitleAndActionsComponent,
+    MessageModule,
   ],
   templateUrl: './page-layout.component.html',
   styles: ``,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PageLayoutComponent {
+  readonly registrationApiService = inject(RegistrationApiService);
+  readonly projectApiService = inject(ProjectApiService);
+
   pageTitle = input<string>();
   projectId = input<number>();
   registrationId = input<number>();
+
+  project = injectQuery(this.projectApiService.getProject(this.projectId));
+
+  registration = injectQuery(
+    this.registrationApiService.getRegistrationById(
+      this.projectId,
+      this.registrationId,
+    ),
+  );
 }
diff --git a/interfaces/Portalicious/src/app/domains/registration/registration.api.service.ts b/interfaces/Portalicious/src/app/domains/registration/registration.api.service.ts
@@ -54,11 +54,12 @@ export class RegistrationApiService extends DomainApiService {
   }
 
   getRegistrationById(
-    projectId: Signal<number>,
-    registrationId: Signal<number>,
+    projectId: Signal<number | undefined>,
+    registrationId: Signal<number | undefined>,
   ) {
     return this.generateQueryOptions<Registration>({
-      path: [...BASE_ENDPOINT(projectId), registrationId],
+      path: [...BASE_ENDPOINT(projectId as Signal<number>), registrationId],
+      enabled: () => !!projectId() && !!registrationId(),
     });
   }
 

diff --git a/interfaces/Portalicious/src/locale/messages.nl.xlf b/interfaces/Portalicious/src/locale/messages.nl.xlf
@@ -857,4 +857,4 @@
       </trans-unit>
     </body>
   </file>
-</xliff>
+</xliff>
diff --git a/interfaces/Portalicious/src/locale/messages.xlf b/interfaces/Portalicious/src/locale/messages.xlf
@@ -646,4 +646,4 @@
       </trans-unit>
     </body>
   </file>
-</xliff>
+</xliff>