feat: display error message when record not loaded

camptocamp · Jan 17, 2025 · c8c086b · c8c086b
1 parent 8f69734
commit c8c086b
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 79 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
@@ -1,78 +1,93 @@
 <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>
 
-    <gn-ui-image-overlay-preview
-      class="block h-[185px] mb-5"
-      *ngIf="record?.overviews?.length > 0"
-      [imageUrl]="record?.overviews?.[0]?.url"
-    >
-    </gn-ui-image-overlay-preview>
+      <gn-ui-image-overlay-preview
+        class="block h-[185px] mb-5"
+        *ngIf="record?.overviews?.length > 0"
+        [imageUrl]="record?.overviews?.[0]?.url"
+      >
+      </gn-ui-image-overlay-preview>
 
-    <gn-ui-metadata-contact [metadata]="record"></gn-ui-metadata-contact>
+      <gn-ui-metadata-contact [metadata]="record"></gn-ui-metadata-contact>
 
-    <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"
+          ></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"
-        ></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
@@ -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
@@ -26,42 +27,42 @@ import {
   encapsulation: ViewEncapsulation.ShadowDom,
   providers: [SearchFacade],
 })
-
 export class GnRecordViewComponent extends BaseComponent implements OnInit {
-  @Input() recordId!: string;
-  record$: Observable<CatalogRecord | null>;
-  downloads$: Observable<OnlineResource[]>;
-  links$: Observable<OnlineResource[]>;
-  apis$: Observable<OnlineResource[]>;
+  @Input() recordId!: string
+  record$: Observable<CatalogRecord | null>
+  downloads$: Observable<OnlineResource[]>
+  links$: Observable<OnlineResource[]>
+  apis$: Observable<OnlineResource[]>
+  errorType = ErrorType
 
   constructor(injector: Injector) {
-    super(injector);
+    super(injector)
   }
 
   ngOnInit() {
-    super.ngOnInit();
-    this.record$ = this.recordsRepository.getRecord(this.recordId);
+    super.ngOnInit()
+    this.record$ = this.recordsRepository.getRecord(this.recordId)
 
     this.downloads$ = this.record$.pipe(
       map((record) => this.getDownloads(record?.onlineResources || []))
-    );
+    )
     this.links$ = this.record$.pipe(
       map((record) => this.getLinks(record?.onlineResources || []))
-    );
+    )
     this.apis$ = this.record$.pipe(
       map((record) => this.getAPIs(record?.onlineResources || []))
-    );
+    )
   }
 
   getDownloads(onlineResources: OnlineResource[]): OnlineResource[] {
-    return onlineResources.filter((resource) => resource.type === 'download');
+    return onlineResources.filter((resource) => resource.type === 'download')
   }
 
   getLinks(onlineResources: OnlineResource[]): OnlineResource[] {
-    return onlineResources.filter((resource) => resource.type === 'link');
+    return onlineResources.filter((resource) => resource.type === 'link')
   }
 
   getAPIs(onlineResources: OnlineResource[]): OnlineResource[] {
-    return onlineResources.filter((resource) => resource.type === 'service');
+    return onlineResources.filter((resource) => resource.type === 'service')
   }
 }
diff --git 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(),