feat(data-table): add error handling

incase reader encounters an issue
geonetwork · Feb 24, 2025 · dfc8637 · dfc8637
1 parent 596f118
commit dfc8637
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 5 deletions.
diff --git a/libs/ui/dataviz/src/lib/data-table/data-table.component.html b/libs/ui/dataviz/src/lib/data-table/data-table.component.html
@@ -40,6 +40,14 @@
       class="sticky inset-0"
       [message]="'table.loading.data' | translate"
     ></gn-ui-loading-mask>
+    <gn-ui-popup-alert
+      *ngIf="error"
+      type="warning"
+      icon="matErrorOutlineOutline"
+      class="absolute m-2 inset-0 z-[100]"
+    >
+      <span translate>{{ error }}</span>
+    </gn-ui-popup-alert>
   </div>
   <div class="flex justify-between items-center overflow-hidden">
     <div class="text-gray-900 px-4 py-2 text-sm">

diff --git a/libs/ui/dataviz/src/lib/data-table/data-table.component.ts b/libs/ui/dataviz/src/lib/data-table/data-table.component.ts
@@ -14,9 +14,9 @@ import {
 } from '@angular/core'
 import { MatSort, MatSortModule } from '@angular/material/sort'
 import { MatTableModule } from '@angular/material/table'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { DataTableDataSource } from './data-table.data.source'
-import { BaseReader } from '@geonetwork-ui/data-fetcher'
+import { BaseReader, FetchError } from '@geonetwork-ui/data-fetcher'
 import {
   MatPaginator,
   MatPaginatorIntl,
@@ -25,7 +25,10 @@ import {
 import { CustomMatPaginatorIntl } from './custom.mat.paginator.intl'
 import { CommonModule } from '@angular/common'
 import { BehaviorSubject, filter, firstValueFrom } from 'rxjs'
-import { LoadingMaskComponent } from '@geonetwork-ui/ui/widgets'
+import {
+  LoadingMaskComponent,
+  PopupAlertComponent,
+} from '@geonetwork-ui/ui/widgets'
 import { LetDirective } from '@ngrx/component'
 
 const rowIdPrefix = 'table-item-'
@@ -48,6 +51,7 @@ export interface TableItemModel {
     TranslateModule,
     CommonModule,
     LoadingMaskComponent,
+    PopupAlertComponent,
     LetDirective,
   ],
   providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }],
@@ -78,10 +82,12 @@ export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
   headerHeight: number
   count: number
   loading$ = new BehaviorSubject<boolean>(false)
+  error = null
 
   constructor(
     private eltRef: ElementRef,
-    private cdr: ChangeDetectorRef
+    private cdr: ChangeDetectorRef,
+    private translateService: TranslateService
   ) {}
 
   ngOnInit() {
@@ -129,7 +135,12 @@ export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
       (p) => !p.toLowerCase().startsWith('geom')
     )
     this.dataset_.select(...propsWithoutGeom)
-    await this.dataSource.showData(this.dataset_.read())
+    try {
+      await this.dataSource.showData(this.dataset_.read())
+      this.error = null
+    } catch (error) {
+      this.handleError(error as FetchError | Error | string)
+    }
     this.loading$.next(false)
   }
 
@@ -143,4 +154,23 @@ export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
   public getRowEltId(id: TableItemId): string {
     return rowIdPrefix + id
   }
+
+  handleError(error: FetchError | Error | string) {
+    this.dataSource.clearData()
+    if (error instanceof FetchError) {
+      this.error = this.translateService.instant(
+        `dataset.error.${error.type}`,
+        {
+          info: error.info,
+        }
+      )
+      console.warn(error.message)
+    } else if (error instanceof Error) {
+      this.error = this.translateService.instant(error.message)
+      console.warn(error.stack || error)
+    } else {
+      this.error = this.translateService.instant(error)
+      console.warn(error)
+    }
+  }
 }
diff --git a/libs/ui/dataviz/src/lib/data-table/data-table.data.source.ts b/libs/ui/dataviz/src/lib/data-table/data-table.data.source.ts
@@ -26,4 +26,8 @@ export class DataTableDataSource implements DataSource<TableItemModel> {
     const items = await itemsPromise
     this.dataItems$.next(items)
   }
+
+  clearData() {
+    this.dataItems$.next([])
+  }
 }