From 63413f9c2d5a076e50ba10597800a32165656bad Mon Sep 17 00:00:00 2001
From: cmoinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Fri, 17 Jan 2025 18:15:49 +0100
Subject: [PATCH] feat: display error message when record not loaded

---
 .../gn-record-view.component.html             | 139 +++++++++---------
 .../gn-record-view.component.ts               |   2 +
 .../src/app/webcomponents.module.ts           |   2 +
 3 files changed, 77 insertions(+), 66 deletions(-)

diff --git a/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.html b/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.html
index 0779a07f0..044195f41 100644
--- a/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.html
+++ b/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.html
@@ -1,13 +1,14 @@
 <ng-container *ngrxLet="record$ as record">
-  <gn-ui-content-ghost
-    ghostClass="w-full h-full"
-    [showContent]="!!record?.title"
-  >
-    <div class="font-title text-[28px] line-clamp-3 mb-4">
-      {{ record.title }}
-    </div>
+  <ng-container *ngIf="record; else loadingOrError">
+    <gn-ui-content-ghost
+      ghostClass="w-full h-full"
+      [showContent]="!!record?.title"
+    >
+      <div class="font-title text-[28px] line-clamp-3 mb-4">
+        {{ record.title }}
+      </div>
 
-    <gn-ui-metadata-info [metadata]="record"></gn-ui-metadata-info>
+      <gn-ui-metadata-info [metadata]="record"></gn-ui-metadata-info>
     <div class="grid grid-cols-2 items-center mt-5">
       <gn-ui-image-overlay-preview
         class="block h-[185px] mb-5 mr-2"
@@ -16,73 +17,79 @@
       >
       </gn-ui-image-overlay-preview>
 
-      <gn-ui-metadata-contact
-        class="pl-2"
+      <gn-ui-metadata-contactclass="pl-2"
         [metadata]="record"
       ></gn-ui-metadata-contact>
     </div>
-    <div *ngIf="getDownloads(record?.onlineResources)?.length > 0">
-      <div
-        class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center"
-      >
-        <span translate>record.metadata.download</span>
-        <gn-ui-previous-next-buttons
-          *ngIf="downloads?.pagesCount > 1"
-          [listComponent]="downloads"
-        ></gn-ui-previous-next-buttons>
+      <div *ngIf="getDownloads(record?.onlineResources)?.length > 0">
+        <div
+          class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center"
+        >
+          <span translate>record.metadata.download</span>
+          <gn-ui-previous-next-buttons
+            *ngIf="downloads?.pagesCount > 1"
+            [listComponent]="downloads"
+          ></gn-ui-previous-next-buttons>
+        </div>
+        <gn-ui-block-list
+          [pageSize]="4"
+          containerClass="gap-4 pt-3 pb-6"
+          #downloads
+        >
+          <gn-ui-download-item
+            *ngFor="let otherLink of getDownloads(record?.onlineResources)"
+            [link]="otherLink"
+          ></gn-ui-download-item>
+        </gn-ui-block-list>
       </div>
-      <gn-ui-block-list
-        [pageSize]="4"
-        containerClass="gap-4 pt-3 pb-6"
-        #downloads
-      >
-        <gn-ui-download-item
-          *ngFor="let otherLink of getDownloads(record?.onlineResources)"
-          [link]="otherLink"
-        ></gn-ui-download-item>
-      </gn-ui-block-list>
-    </div>
 
-    <div *ngIf="getLinks(record?.onlineResources)?.length > 0">
-      <div
-        class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center"
-      >
-        <span translate>record.metadata.links</span>
-        <gn-ui-previous-next-buttons
-          *ngIf="links?.pagesCount > 1"
-          [listComponent]="links"
-        ></gn-ui-previous-next-buttons>
+      <div *ngIf="getLinks(record?.onlineResources)?.length > 0">
+        <div
+          class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center"
+        >
+          <span translate>record.metadata.links</span>
+          <gn-ui-previous-next-buttons
+            *ngIf="links?.pagesCount > 1"
+            [listComponent]="links"
+          ></gn-ui-previous-next-buttons>
+        </div>
+        <gn-ui-block-list
+          [pageSize]="4"
+          containerClass="gap-4 pt-3 pb-6"
+          #links
+        >
+          <gn-ui-link-card
+            *ngFor="let otherLink of getLinks(record?.onlineResources)"
+            [link]="otherLink"
+            [compact]="true"
+          ></gn-ui-link-card>
+        </gn-ui-block-list>
       </div>
-      <gn-ui-block-list [pageSize]="4" containerClass="gap-4 pt-3 pb-6" #links>
-        <gn-ui-link-card
-          *ngFor="let otherLink of getLinks(record?.onlineResources)"
-          [link]="otherLink"
-          [compact]="true"
-        ></gn-ui-link-card>
-      </gn-ui-block-list>
-    </div>
 
-    <div *ngIf="getAPIs(record?.onlineResources)?.length > 0">
-      <div
-        class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center"
-      >
-        <span translate>record.metadata.api</span>
-        <gn-ui-previous-next-buttons
-          *ngIf="apis?.pagesCount > 1"
-          [listComponent]="apis"
-        ></gn-ui-previous-next-buttons>
+      <div *ngIf="getAPIs(record?.onlineResources)?.length > 0">
+        <div
+          class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center"
+        >
+          <span translate>record.metadata.api</span>
+          <gn-ui-previous-next-buttons
+            *ngIf="apis?.pagesCount > 1"
+            [listComponent]="apis"
+          ></gn-ui-previous-next-buttons>
+        </div>
+        <gn-ui-block-list [pageSize]="4" containerClass="gap-4 pt-3 pb-6" #apis>
+          <gn-ui-api-card
+            *ngFor="let otherLink of getAPIs(record?.onlineResources)"
+            [link]="otherLink"[currentLink]="otherLink"
+          ></gn-ui-api-card>
+        </gn-ui-block-list>
       </div>
-      <gn-ui-block-list [pageSize]="4" containerClass="gap-4 pt-3 pb-6" #apis>
-        <gn-ui-api-card
-          *ngFor="let otherLink of getAPIs(record?.onlineResources)"
-          [link]="otherLink"
-          [currentLink]="otherLink"
-        ></gn-ui-api-card>
-      </gn-ui-block-list>
-    </div>
-  </gn-ui-content-ghost>
+    </gn-ui-content-ghost>
+  </ng-container>
 </ng-container>
 
 <ng-template #loadingOrError>
-  <p *ngIf="(record$ | async) === null">No record found for the provided ID.</p>
+  <gn-ui-error
+    [type]="errorTypes.RECORD_NOT_FOUND"
+    [recordId]="recordId"
+  ></gn-ui-error>
 </ng-template>
diff --git a/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.ts b/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.ts
index 97981556a..c59219922 100644
--- a/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.ts
+++ b/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.ts
@@ -13,6 +13,7 @@ import {
   CatalogRecord,
   OnlineResource,
 } from '@geonetwork-ui/common/domain/model/record'
+import { ErrorType } from '@geonetwork-ui/ui/elements'
 
 // TODO in this component:
 // - Support metadata quality option
@@ -32,6 +33,7 @@ export class GnRecordViewComponent extends BaseComponent implements OnInit {
   downloads$: Observable<OnlineResource[]>
   links$: Observable<OnlineResource[]>
   apis$: Observable<OnlineResource[]>
+  errorType = ErrorType
 
   constructor(injector: Injector) {
     super(injector)
diff --git a/apps/webcomponents/src/app/webcomponents.module.ts b/apps/webcomponents/src/app/webcomponents.module.ts
index 5a0a8b342..31643415b 100644
--- a/apps/webcomponents/src/app/webcomponents.module.ts
+++ b/apps/webcomponents/src/app/webcomponents.module.ts
@@ -16,6 +16,7 @@ import {
   ContentGhostComponent,
   DownloadItemComponent,
   DownloadsListComponent,
+  ErrorComponent,
   ImageOverlayPreviewComponent,
   LinkCardComponent,
   MetadataContactComponent,
@@ -130,6 +131,7 @@ const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [
     ApiCardComponent,
     DownloadItemComponent,
     PreviousNextButtonsComponent,
+    ErrorComponent,
   ],
   providers: [
     provideGn4(),