From 6a85df720854087e12ffc6163e895dbb4afe6800 Mon Sep 17 00:00:00 2001
From: Max Ehrlicher-Schmidt <maxes2000@t-online.de>
Date: Thu, 17 Dec 2020 22:45:32 +0100
Subject: [PATCH] Add error messages to page and table

---
 src/app/components/data-page/data-page.component.html | 4 ++--
 src/app/components/data-page/data-page.component.scss | 4 ++++
 src/app/components/table/table.component.html         | 9 +++++++--
 src/app/components/table/table.component.scss         | 4 ++++
 src/app/components/table/table.component.ts           | 9 +++++++--
 5 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/app/components/data-page/data-page.component.html b/src/app/components/data-page/data-page.component.html
index 4fadaf9..0005344 100644
--- a/src/app/components/data-page/data-page.component.html
+++ b/src/app/components/data-page/data-page.component.html
@@ -3,7 +3,7 @@
   [diameter]="32"
   class="page-loading-spinner"
 ></mat-spinner>
-<div class="page-wrapper" *ngIf="!isLoading && !data">
+<div class="loading-error-message" *ngIf="!isLoading && !data">
   <h1>Seite konnte nicht gefunden werden :(</h1>
 </div>
 
@@ -128,7 +128,7 @@
     *ngIf="!data?.isLockedByMe && !data?.isLocked"
     class="floating-fab-button"
     color="primary"
-    [disabled]="isSavingOrLocking || isLoading"
+    [disabled]="isSavingOrLocking || isLoading || !data"
   >
     <mat-icon>edit</mat-icon>
   </button>
diff --git a/src/app/components/data-page/data-page.component.scss b/src/app/components/data-page/data-page.component.scss
index 34de403..3c9db5d 100644
--- a/src/app/components/data-page/data-page.component.scss
+++ b/src/app/components/data-page/data-page.component.scss
@@ -1,3 +1,7 @@
+.loading-error-message {
+  margin: 1em;
+}
+
 .page-loading-spinner {
   margin: 0 auto;
 }
diff --git a/src/app/components/table/table.component.html b/src/app/components/table/table.component.html
index ce9aedf..51bc0e4 100644
--- a/src/app/components/table/table.component.html
+++ b/src/app/components/table/table.component.html
@@ -1,7 +1,9 @@
 <div class="table-page-wrapper">
   <h1 class="headline" *ngIf="headline">
     {{ headline }}
-    <mat-icon id="table-icon" (click)="$event.target.classList.add('drive')">{{ headlineIconName }}</mat-icon>
+    <mat-icon id="table-icon" (click)="$event.target.classList.add('drive')">{{
+      headlineIconName
+    }}</mat-icon>
   </h1>
   <div class="table-control">
     <!--<button
@@ -26,7 +28,7 @@
       mat-raised-button
       class="table-control-button"
       (click)="addNewObject()"
-      [disabled]="reloadingTable"
+      [disabled]="reloadingTable || !isLoaded || loadingErrorOccurred"
     >
       <mat-icon class="spin">add</mat-icon>
     </button>
@@ -376,6 +378,9 @@
       ></tr>
     </table>
   </div>
+  <span class="loading-error-message" *ngIf="isLoaded && !isProcessing && loadingErrorOccurred"
+    >Die Daten konnten leider nicht geladen werden :(</span
+  >
   <mat-spinner
     class="idle-spinner"
     *ngIf="!isLoaded || isProcessing"
diff --git a/src/app/components/table/table.component.scss b/src/app/components/table/table.component.scss
index fe70132..00ad061 100644
--- a/src/app/components/table/table.component.scss
+++ b/src/app/components/table/table.component.scss
@@ -79,6 +79,10 @@
       }
     }
   }
+  .loading-error-message {
+    margin: 3em auto;
+    font-size: large;
+  }
 }
 
 .drive {
diff --git a/src/app/components/table/table.component.ts b/src/app/components/table/table.component.ts
index ce8dafa..c323a5b 100644
--- a/src/app/components/table/table.component.ts
+++ b/src/app/components/table/table.component.ts
@@ -97,6 +97,7 @@ export class TableComponent implements AfterViewInit {
 
   isLoaded = false;
   isProcessing = false;
+  loadingErrorOccurred = false;
 
   @Output() createEvent = new EventEmitter();
   @Output() lockEvent = new EventEmitter();
@@ -163,11 +164,14 @@ export class TableComponent implements AfterViewInit {
 
     this.dataService.tableData.subscribe((newTableDataSource) => {
       const tempDataSource = [];
+      this.isLoaded = true;
+      this.reloadingTable = false;
+      this.loadingErrorOccurred = false;
       if (newTableDataSource == null) {
+        this.data.data = [];
+        this.loadingErrorOccurred = true;
         return;
       }
-      this.reloadingTable = false;
-      this.isLoaded = true;
       for (const row of newTableDataSource) {
         if (row.newObject) {
           // its a copied object
@@ -201,6 +205,7 @@ export class TableComponent implements AfterViewInit {
       });
     });
     this.dataService.loadTableData();
+    this.isLoaded = false;
 
     this.relockingInterval = setInterval(() => {
       for (const row of this.data.data) {