feat: display error message when record not loaded (#27)

Author: cmoinier

apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.html

@@ -1,88 +1,97 @@
 <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>
-    <div class="grid grid-cols-2 items-center mt-5">
-      <gn-ui-image-overlay-preview
-        class="block h-[185px] mb-5 mr-2"
-        *ngIf="record?.overviews?.length > 0"
-        [imageUrl]="record?.overviews?.[0]?.url"
-      >
-      </gn-ui-image-overlay-preview>
+      <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"
+          *ngIf="record?.overviews?.length > 0"
+          [imageUrl]="record?.overviews?.[0]?.url"
+        >
+        </gn-ui-image-overlay-preview>
 
-      <gn-ui-metadata-contact
-        class="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>
+        <gn-ui-metadata-contact
+          class="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>
+        <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>

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)

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(),