fix(table): Progress Spinner and Error Messages (#674)

* spinner is working * error * no Columns error * fix(interceptor): throw error on failed requests * fix(progress-spinner): feedvback from pr - add retry button - remove unused css - fix table column error not displayed because table is visible - remove extra loading property * trans(table): update translations * noColumns message not displayed when error * Update Phonebook.Frontend/src/app/modules/table/components/table/table.component.ts Co-authored-by: Daniel Habenicht <daniel-habenicht@outlook.de>
T-Systems-MMS · May 22, 2020 · 736a583 · 736a583
1 parent c9c8c63
commit 736a583
Show file tree

Hide file tree

Showing 10 changed files with 378 additions and 45 deletions.
diff --git a/Phonebook.Frontend/src/app/modules/table/PersonsDataSource.ts b/Phonebook.Frontend/src/app/modules/table/PersonsDataSource.ts
@@ -15,7 +15,7 @@ export class PersonsDataSource extends MatTableDataSource<Person> {
     return this.PAGE_SIZE;
   }
 
-  private loadingSubject = new BehaviorSubject<boolean>(false);
+  public loadingSubject = new BehaviorSubject<boolean>(true);
   public loading$ = this.loadingSubject.asObservable();
 
   private ALL_DATA: Person[] = this.dataSource;

diff --git a/Phonebook.Frontend/src/app/modules/table/components/table/table.component.html b/Phonebook.Frontend/src/app/modules/table/components/table/table.component.html
@@ -1,6 +1,6 @@
 <div
   class="pb-w-100 pb-overflow-auto"
-  [ngClass]="dataSource.data.length > 0 ? '' : 'pb-no-display'"
+  [ngClass]="dataSource.data.length > 0 && displayedColumns.length > 0 ? '' : 'pb-no-display'"
   infinite-scroll
   [infiniteScrollDistance]="2"
   [infiniteScrollThrottle]="100"
@@ -9,9 +9,6 @@
   [scrollWindow]="false"
   (scroll)="scrolling($event)"
 >
-  <div class="spinner-container" *ngIf="dataSource.loading$ | async">
-    <mat-spinner></mat-spinner>
-  </div>
   <app-user-detail
     [previewView]="true"
     [person]="previewPerson"
@@ -276,16 +273,52 @@
     <!-- <mat-row *matRowDef="let row; columns: displayedColumns;" mat-ripple>HI</mat-row> -->
   </mat-table>
 </div>
-<mat-card *ngIf="!dataSource.data.length" class="notfound-container">
+<mat-card
+  *ngIf="!dataSource.data.length || displayedColumns.length === 0"
+  class="notfound-container"
+>
+  <ng-container *ngIf="(dataSource.loading$ | async) && !this.inErrorState">
+    <mat-spinner diameter="30"></mat-spinner
+    ><span i18n="General|General Message if somthing currently loads@@GeneralInfoMessageLoading"
+      >Loading</span
+    ></ng-container
+  >
   <ng-container
+    *ngIf="
+      !(dataSource.loading$ | async) && this.inErrorState === false && displayedColumns.length !== 0
+    "
     i18n="
       TableComponent|Sentence displayed if search did not return any
       results@@TableComponentSearchNoResult"
   >
     Your search returned no results.
   </ng-container>
+  <ng-container *ngIf="this.inErrorState"
+    ><p
+      i18n="
+        TableComponent|Sentence displayed if data service was not
+        reached@@TableComponentDataServiceError"
+      >We couldn't reach the data service. Are you connected to the internet?</p
+    >
+    <button
+      mat-button
+      (click)="loadPersonData(true)"
+      (enter)="loadPersonData(true)"
+      i18n="
+        General|General Retry Button for trying something that has previously
+        failed@@GeneralRetryButton"
+      >Retry</button
+    ></ng-container
+  >
+  <ng-container
+    *ngIf="displayedColumns.length === 0 && !this.inErrorState"
+    i18n="
+      TableComponent|Sentence displayed if no Columns are
+      displayed@@TableComponentDisplayedColumnsError"
+    >There are currently no Columns being displayed. Update your displayed Columns in the Table
+    Settings.</ng-container
+  >
 </mat-card>
-
 <button
   mat-fab
   color="primary"

diff --git a/Phonebook.Frontend/src/app/modules/table/components/table/table.component.scss b/Phonebook.Frontend/src/app/modules/table/components/table/table.component.scss
@@ -40,18 +40,6 @@
   right: 25px;
 }
 
-.spinner-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .notfound-container {
   position: relative;
   box-shadow: none !important;

diff --git a/Phonebook.Frontend/src/app/modules/table/components/table/table.component.ts b/Phonebook.Frontend/src/app/modules/table/components/table/table.component.ts
@@ -11,6 +11,7 @@ import { PersonService } from 'src/app/services/api/person.service';
 import { ColumnDefinitions } from 'src/app/shared/config/columnDefinitions';
 import { Person, PhonebookSortDirection, TableSort } from 'src/app/shared/models';
 import { SearchState, SetTableResultCount, TableState, UpdateUrl } from 'src/app/shared/states';
+import { HttpErrorResponse } from '@angular/common/http';
 
 @Component({
   selector: 'app-table',
@@ -43,6 +44,8 @@ export class TableComponent implements OnInit, OnDestroy {
   }
   public sortDirection: SortDirection = '';
   public sortActive: string = '';
+
+  public inErrorState: boolean = false;
   constructor(
     private route: ActivatedRoute,
     private router: Router,
@@ -52,25 +55,7 @@ export class TableComponent implements OnInit, OnDestroy {
   ) {}
 
   public ngOnInit() {
-    this.personService.getAll().subscribe((persons) => {
-      this.dataSource = new PersonsDataSource(persons);
-
-      // Defer until Data is loaded.
-      this.refreshTableSubscription = merge(
-        this.store.select(SearchState.searchTerm),
-        this.store.select(SearchState.searchFilters)
-      )
-        .pipe(
-          // Debounce Time is this low, as it just aims to bundle all Observables above, especially at first page load,
-          // where all three fire as they are initialized.
-          debounceTime(50)
-        )
-        .subscribe((val) => {
-          this.refreshTable();
-          this.dataSource.pageSize = this.initialPageSize;
-        });
-    });
-
+    this.loadPersonData();
     this.route.queryParamMap.pipe(untilComponentDestroyed(this)).subscribe((queryParams) => {
       // Table Sort
       const sortDirection = queryParams.get('sortDirection');
@@ -92,6 +77,33 @@ export class TableComponent implements OnInit, OnDestroy {
     });
   }
 
+  public loadPersonData(ignoreCache: boolean = false) {
+    this.inErrorState = false;
+    this.personService.getAll(ignoreCache).subscribe(
+      (persons) => {
+        this.dataSource = new PersonsDataSource(persons);
+
+        // Defer until Data is loaded.
+        this.refreshTableSubscription = merge(
+          this.store.select(SearchState.searchTerm),
+          this.store.select(SearchState.searchFilters)
+        )
+          .pipe(
+            // Debounce Time is this low, as it just aims to bundle all Observables above, especially at first page load,
+            // where all three fire as they are initialized.
+            debounceTime(50)
+          )
+          .subscribe((val) => {
+            this.refreshTable();
+            this.dataSource.pageSize = this.initialPageSize;
+          });
+      },
+      (err: HttpErrorResponse) => {
+        this.inErrorState = true;
+      }
+    );
+  }
+
   public refreshTable() {
     this.dataSource
       .refresh(
@@ -120,7 +132,9 @@ export class TableComponent implements OnInit, OnDestroy {
   }
 
   public ngOnDestroy() {
-    this.refreshTableSubscription.unsubscribe();
+    if (this.refreshTableSubscription) {
+      this.refreshTableSubscription.unsubscribe();
+    }
   }
 
   public ngAfterViewInit() {

diff --git a/Phonebook.Frontend/src/app/services/api/person.service.ts b/Phonebook.Frontend/src/app/services/api/person.service.ts
@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { ConnectableObservable, Observable } from 'rxjs';
-import { map, publishReplay } from 'rxjs/operators';
+import { map, publishReplay, publishLast, refCount, catchError, share, tap } from 'rxjs/operators';
 import { TableLogic } from 'src/app/modules/table/table-logic';
 import { ColumnDefinitions } from 'src/app/shared/config/columnDefinitions';
 import {
@@ -78,8 +78,8 @@ export class PersonService {
     });
   }
 
-  public getAll(): Observable<Person[]> {
-    if (this.allPersonObservable != null) {
+  public getAll(ignoreCache: boolean = false): Observable<Person[]> {
+    if (this.allPersonObservable != null && !ignoreCache) {
       return this.allPersonObservable;
     }
 

diff --git a/Phonebook.Frontend/src/app/shared/interceptors/HttpRedirectToLogin.ts b/Phonebook.Frontend/src/app/shared/interceptors/HttpRedirectToLogin.ts
@@ -9,7 +9,7 @@ import {
   HttpClient,
 } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable, empty } from 'rxjs';
+import { Observable, empty, throwError } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
 
 @Injectable({ providedIn: 'root' })
@@ -32,7 +32,7 @@ export class HttpRedirectToLogin implements HttpInterceptor {
           const location = err.headers.get('Location') as string;
           window.location.replace(location);
         }
-        return empty();
+        return throwError(err);
       })
     );
   }

diff --git a/Phonebook.Frontend/src/i18n/messages.de.xlf b/Phonebook.Frontend/src/i18n/messages.de.xlf
@@ -1152,13 +1152,36 @@ Link zu deinem Profil: </target>
         <source>Change sorting for column status</source><target state="translated">Sortierreihenfolge der Spalte Status ändern</target>
         <note priority="1" from="description">Label for sorting the column 'Status'</note>
         <note priority="1" from="meaning">TableComponent</note>
+      </trans-unit><trans-unit id="GeneralInfoMessageLoading" datatype="html">
+        <source>Loading</source>
+        <target state="new">Lädt</target>
+        <note priority="1" from="description">General Message if somthing currently loads</note>
+        <note priority="1" from="meaning">General</note>
       </trans-unit>
       <trans-unit id="TableComponentSearchNoResult" datatype="html">
         <source> Your search returned no results. </source>
         <target state="translated">Die Suche ergab keine Treffer.</target>
         <note priority="1" from="description">Sentence displayed if search did not return any
       results</note>
         <note priority="1" from="meaning">TableComponent</note>
+      </trans-unit><trans-unit id="TableComponentDataServiceError" datatype="html">
+        <source>We couldn't reach the data service. Are you connected to the internet?</source>
+        <target state="translated">Wir konnten den Daten Service nicht erreichen. Bist du mit dem Internet verbunden?</target>
+        <note priority="1" from="description">Sentence displayed if data service was not
+        reached</note>
+        <note priority="1" from="meaning">TableComponent</note>
+      </trans-unit><trans-unit id="GeneralRetryButton" datatype="html">
+        <source>Retry</source>
+        <target state="new">Nochmal versuchen</target>
+        <note priority="1" from="description">General Retry Button for trying something that has previously
+        failed</note>
+        <note priority="1" from="meaning">General</note>
+      </trans-unit><trans-unit id="TableComponentDisplayedColumnsError" datatype="html">
+        <source>There are currently no Columns being displayed. Update your displayed Columns in the Table Settings.</source>
+        <target state="translated">Es werden gerade keine Spalten dargestellt. Stelle in den Tabelleneinstellungen ein, welche Spalten angezeigt werden sollen.</target>
+        <note priority="1" from="description">Sentence displayed if no Columns are
+      displayed</note>
+        <note priority="1" from="meaning">TableComponent</note>
       </trans-unit>
       <trans-unit id="OrganigramNodeComponentCopiedFirstPart" datatype="html">
         <source>Link to</source>

diff --git a/Phonebook.Frontend/src/i18n/messages.en.xlf b/Phonebook.Frontend/src/i18n/messages.en.xlf
@@ -935,13 +935,36 @@ Please contact the HR Department to fix it.This is the Phonebook Link: </target>
         <source>Change sorting for column status</source><target state="final">Change sorting for column status</target>
         <note priority="1" from="description">Label for sorting the column 'Status'</note>
         <note priority="1" from="meaning">TableComponent</note>
+      </trans-unit><trans-unit id="GeneralInfoMessageLoading" datatype="html">
+        <source>Loading</source>
+        <target state="final">Loading</target>
+        <note priority="1" from="description">General Message if somthing currently loads</note>
+        <note priority="1" from="meaning">General</note>
       </trans-unit>
       <trans-unit id="TableComponentSearchNoResult" datatype="html">
         <source> Your search returned no results. </source>
         <target state="final"> Your search returned no results. </target>
         <note priority="1" from="description">Sentence displayed if search did not return any
       results</note>
         <note priority="1" from="meaning">TableComponent</note>
+      </trans-unit><trans-unit id="TableComponentDataServiceError" datatype="html">
+        <source>We couldn't reach the data service. Are you connected to the internet?</source>
+        <target state="final">We couldn't reach the data service. Are you connected to the internet?</target>
+        <note priority="1" from="description">Sentence displayed if data service was not
+        reached</note>
+        <note priority="1" from="meaning">TableComponent</note>
+      </trans-unit><trans-unit id="GeneralRetryButton" datatype="html">
+        <source>Retry</source>
+        <target state="final">Retry</target>
+        <note priority="1" from="description">General Retry Button for trying something that has previously
+        failed</note>
+        <note priority="1" from="meaning">General</note>
+      </trans-unit><trans-unit id="TableComponentDisplayedColumnsError" datatype="html">
+        <source>There are currently no Columns being displayed. Update your displayed Columns in the Table Settings.</source>
+        <target state="final">There are currently no Columns being displayed. Update your displayed Columns in the Table Settings.</target>
+        <note priority="1" from="description">Sentence displayed if no Columns are
+      displayed</note>
+        <note priority="1" from="meaning">TableComponent</note>
       </trans-unit>
       <trans-unit id="OrganigramNodeComponentCopiedFirstPart" datatype="html">
         <source>Link to</source>