Merge pull request #42 from bci-oss/fix/#40-41

Improve Schematic Table remote data loading functionality

Author: atextor

src/ng-generate/components/card/generators/components/card/files/__name@dasherize__.component.ts.template

@@ -106,6 +106,7 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit<% i
 
     dataToShow: Array<<%= options.aspectModelTypeName %>> = [];
     totalItems: number = 0;
+    dataLoadError = false;
 
     <% if (options.enableRemoteDataHandling) { %>
         rqlString: string = '';
@@ -115,6 +116,7 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit<% i
 
     <% if (options.hasSearchBar || options.enableRemoteDataHandling) { %>
         private readonly destroy$ = new Subject<void>();
+        private requestSubscription: Subscription;
     <% } %>
 
     <% if (options.enableRemoteDataHandling) { %>

src/ng-generate/components/shared/methods/remote-handling/requestData.ts.template

@@ -73,9 +73,14 @@ private requestData() {
 
     this.rqlString = rqlStringTemp;
 
-    this.<%= camelize((options.customRemoteService ? 'custom' : '') + '-' + options.name) %>Service.requestData(this.remoteAPI, {query: rqlStringTemp})
+    if (this.requestSubscription && !this.requestSubscription.closed) {
+        this.requestSubscription.unsubscribe();
+    }
+
+    this.requestSubscription = this.<%= camelize((options.customRemoteService ? 'custom' : '') + '-' + options.name) %>Service.requestData(this.remoteAPI, {query: rqlStringTemp})
         .pipe(
             tap((movementResponse: <%= classify(options.aspectModel.name) %>Response) => {
+                this.dataLoadError = false;
                 this.totalItems =
                     movementResponse.totalItems !== null && movementResponse.totalItems !== undefined
                         ? movementResponse.totalItems
@@ -95,7 +100,14 @@ private requestData() {
                 this.dataSource.paginator = this.paginator;
             }),
         catchError((error: any) => {
-            throw new Error(error.message);
+            this.dataLoadError = true;
+            <% if (options.componentType === 'card') { %>
+                this.dataToShow = [];
+                this.dataSource.data = [];
+            <% } else { %>
+                const dataToShow = [];
+                this.dataSource.setData([]);
+            <% } %>
         }),
         finalize(() => this.<% if (options.componentType === 'card') { %>card<% } else { %>table<% } %>UpdateFinishedEvent.emit()))
     .subscribe();

src/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.html.template

@@ -50,7 +50,10 @@
         <!-- Row shown when there is no matching data that will be provided to the wrapper table. -->
         <tr data-test="no-data-table-row" class="mat-row" *matNoDataRow>
           <td data-test="no-data-table-cell" class="mat-cell" [colSpan]="displayedColumns.length" *ngIf="!dataSource.data.length">
-            <span data-test="no-data-message">{{noDataMessage || 'No data'}}</span>
+            <span *ngIf="!dataLoadError" data-test="no-data-message">{{ noDataMessage || 'No data' }}</span>
+            <span *ngIf="dataLoadError"
+                  data-test="no-data-message">{{ dataLoadErrorMessage || 'Unable to load data' }}</span>
+
           </td>
         </tr>
 

src/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.ts.template

@@ -126,6 +126,7 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
     @Input() highlightColor = 'rgba(127, 198, 231, 0.3)';
     @Input() isMultipleSelectionEnabled = true;
     @Input() noDataMessage: string = '';
+    @Input() dataLoadErrorMessage: string = '';
     @Input() visibleRowActionsIcons: number = 3;
     @Input() headerTooltipsOff: boolean = false;
     @Input() setStickRowActions: boolean = true;
@@ -207,6 +208,7 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
     closeColumnMenu: boolean = false;
     rqlString: string = '';
     searchFocused: boolean = false;
+    dataLoadError = false;
 
     <% if (options.hasSearchBar) { %>
         highlightString: string[] = [];
@@ -220,6 +222,7 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
 
     <% if (options.hasSearchBar || options.enableRemoteDataHandling) { %>
         private readonly ngUnsubscribe = new Subject<void>();
+        private requestSubscription: Subscription;
     <% } %>
 
     <% if (options.enableRemoteDataHandling) { %>