From 0180322e41a51b792f0e08f1e28cd9bcace51199 Mon Sep 17 00:00:00 2001
From: Max Ehrlicher-Schmidt <maxes2000@t-online.de>
Date: Wed, 11 Nov 2020 23:09:35 +0100
Subject: [PATCH] Refactored loading state and animation

---
 .../pages/tables/bikes/bikes.component.html   |  28 ++---
 src/app/pages/tables/bikes/bikes.component.ts |  50 ++++----
 src/app/services/bikes.service.ts             | 109 ++++++++++++------
 3 files changed, 109 insertions(+), 78 deletions(-)

diff --git a/src/app/pages/tables/bikes/bikes.component.html b/src/app/pages/tables/bikes/bikes.component.html
index aeb5d48..ad8f4f9 100644
--- a/src/app/pages/tables/bikes/bikes.component.html
+++ b/src/app/pages/tables/bikes/bikes.component.html
@@ -48,10 +48,14 @@
       </ng-container>
 
       <!-- Other Columns -->
-      <ng-container *ngFor="let column of dataColumns;" [matColumnDef]="column" [sticky]=isStickyColumn(column)>
+      <ng-container
+        *ngFor="let column of dataColumns"
+        [matColumnDef]="column"
+        [sticky]="isStickyColumn(column)"
+      >
         <!-- add cdkDrag to make columns draggable-->
         <th mat-header-cell *matHeaderCellDef mat-sort-header>
-          {{getHeader(column)}}
+          {{ getHeader(column) }}
         </th>
         <td mat-cell *matCellDef="let element">
           <app-cell
@@ -73,10 +77,8 @@
               (click)="edit(element)"
               *ngIf="
                 !element.isLockedByMe &&
-                !element.waitingForEditPermissions &&
                 !element.isLocked &&
-                !element.saving &&
-                !element.unlocking
+                !isLoading(element.id)
               "
             >
               <mat-icon>edit</mat-icon>
@@ -85,10 +87,8 @@
               mat-icon-button
               *ngIf="
                 !element.isLockedByMe &&
-                !element.waitingForEditPermissions &&
-                !element.isLocked &&
-                !element.saving &&
-                !element.unlocking
+                !isLoading(element.id) &&
+                !element.isLocked
               "
             >
               <mat-icon>delete</mat-icon>
@@ -96,17 +96,13 @@
 
             <mat-spinner
               [diameter]="32"
-              *ngIf="
-                element.waitingForEditPermissions ||
-                element.saving ||
-                element.unlocking
-              "
+              *ngIf="isLoading(element.id)"
             ></mat-spinner>
 
             <button
               mat-icon-button
               *ngIf="
-                element.isLockedByMe && !element.unlocking && !element.saving
+                element.isLockedByMe && !isLoading(element.id)
               "
               (click)="save(element)"
             >
@@ -116,7 +112,7 @@
               mat-icon-button
               matTooltip="Alle ungespeicherten Änderungen verwerfen."
               *ngIf="
-                element.isLockedByMe && !element.unlocking && !element.saving
+                element.isLockedByMe && !isLoading(element.id)
               "
               (click)="cancel(element)"
             >
diff --git a/src/app/pages/tables/bikes/bikes.component.ts b/src/app/pages/tables/bikes/bikes.component.ts
index 91c5707..fb95936 100644
--- a/src/app/pages/tables/bikes/bikes.component.ts
+++ b/src/app/pages/tables/bikes/bikes.component.ts
@@ -9,12 +9,6 @@ import {
   CargoBikeUpdateInput,
 } from 'src/generated/graphql';
 
-type CargoBikeDataRow = CargoBikeResult & {
-  waitingForEditPermissions: boolean;
-  saving: boolean;
-  unlocking: boolean;
-};
-
 @Component({
   selector: 'app-bikes',
   templateUrl: './bikes.component.html',
@@ -40,8 +34,10 @@ export class BikesComponent {
   additionalColumnsBack: string[] = ['buttons'];
   displayedColumns: string[] = [];
 
+  loadingRowIds: string[] = [];
+
   bikes = <Array<any>>[];
-  selection = new SelectionModel<CargoBikeDataRow>(true, []);
+  selection = new SelectionModel<CargoBikeResult>(true, []);
 
   reloadingTable = false;
 
@@ -58,15 +54,14 @@ export class BikesComponent {
       ).enumValues = groupEnum;
     });
 
+    bikesService.loadingRowIds.subscribe(rowIds => {
+      this.loadingRowIds = rowIds;
+    })
+
     bikesService.bikes.subscribe((bikes) => {
       this.reloadingTable = false;
-      this.bikes = bikes.map((bike) => {
-        return <any>Object.assign({}, deepCopy(bike), {
-          waitingForEditPermissions: false,
-          saving: false,
-          unlocking: false,
-        });
-      });
+    
+      this.bikes = bikes;
       if (bikes[0]) {
         this.displayedColumns = [];
         this.dataColumns = [];
@@ -109,9 +104,7 @@ export class BikesComponent {
   addColumnsFromObject(prefix: string, object: Object) {
     for (const prop in object) {
       let propName = prefix + prop;
-      console.log(typeof object[prop]);
       if (typeof object[prop] === 'object') {
-        console.log(object);
         this.addColumnsFromObject(prefix + prop + '.', object[prop]);
       } else if (!this.blacklistedColumns.includes(propName)) {
         this.dataColumns.push(propName);
@@ -119,6 +112,10 @@ export class BikesComponent {
     }
   }
 
+  flatten(object: Object) {
+    return object;
+  }
+
   getHeader(propertyName: string) {
     return (
       this.columnInfo.find((column) => column.name === propertyName)?.header ||
@@ -135,8 +132,8 @@ export class BikesComponent {
 
   isReadonly(propertyName: string) {
     return (
-      this.columnInfo.find((column) => column.name === propertyName)?.readonly ||
-      false
+      this.columnInfo.find((column) => column.name === propertyName)
+        ?.readonly || false
     );
   }
 
@@ -149,23 +146,25 @@ export class BikesComponent {
 
   getEnumValues(propertyName: string) {
     return (
-      this.columnInfo.find((column) => column.name === propertyName)?.enumValues ||
-      []
+      this.columnInfo.find((column) => column.name === propertyName)
+        ?.enumValues || []
     );
   }
 
+  isLoading(id: string) {
+    return this.loadingRowIds.includes(id);
+  }
+
   reloadTable() {
     this.reloadingTable = true;
     this.bikesService.loadBikes();
   }
 
-  edit(row: CargoBikeDataRow) {
-    row.waitingForEditPermissions = true;
+  edit(row: CargoBikeResult) {
     this.bikesService.lockBike({ id: row.id });
   }
 
-  save(row: CargoBikeDataRow) {
-    row.saving = true;
+  save(row: CargoBikeResult) {
     const bike: CargoBikeUpdateInput = filter(
       CargoBikeFieldsMutableFragmentDoc,
       row
@@ -173,8 +172,7 @@ export class BikesComponent {
     this.bikesService.updateBike({ bike });
   }
 
-  cancel(row: CargoBikeDataRow) {
-    row.unlocking = true;
+  cancel(row: CargoBikeResult) {
     this.bikesService.unlockBike({ id: row.id });
   }
 
diff --git a/src/app/services/bikes.service.ts b/src/app/services/bikes.service.ts
index 659f972..f4e378b 100644
--- a/src/app/services/bikes.service.ts
+++ b/src/app/services/bikes.service.ts
@@ -10,7 +10,7 @@ import {
   LockCargoBikeGQL,
   LockCargoBikeMutationVariables,
   UnlockCargoBikeGQL,
-  UnlockCargoBikeMutationVariables
+  UnlockCargoBikeMutationVariables,
 } from 'src/generated/graphql';
 import { DeepExtractTypeSkipArrays } from 'ts-deep-extract-types';
 
@@ -24,6 +24,7 @@ export type CargoBikeResult = DeepExtractTypeSkipArrays<
 })
 export class BikesService {
   bikes: BehaviorSubject<CargoBikeResult[]> = new BehaviorSubject([]);
+  loadingRowIds: BehaviorSubject<string[]> = new BehaviorSubject([]);
   groupEnum: BehaviorSubject<string[]> = new BehaviorSubject<string[]>([]);
 
   constructor(
@@ -32,58 +33,94 @@ export class BikesService {
     private updateCargoBikeGQL: UpdateCargoBikeGQL,
     private lockCargoBikeGQL: LockCargoBikeGQL,
     private unlockCargoBikeGQL: UnlockCargoBikeGQL
-  ) { }
+  ) {}
+
+  addLoadingRowId(id: string) {
+    this.loadingRowIds.next([...this.loadingRowIds.value, id]);
+  }
+
+  removeLoadingRowId(id: string) {
+    this.loadingRowIds.value.forEach((item, index) => {
+      if (item === id) {
+        this.loadingRowIds.value.splice(index, 1);
+      }
+    });
+  }
 
   loadBikes() {
     this.getCargoBikesGQL.fetch().subscribe((result) => {
       this.bikes.next(result.data.cargoBikes);
-      let enumValues = result.data.__type.enumValues.map(value => value.name);
+      let enumValues = result.data.__type.enumValues.map((value) => value.name);
       this.groupEnum.next(enumValues);
     });
   }
 
   reloadBike(variables: GetCargoBikeByIdQueryVariables) {
-    this.getCargoBikeByIdGQL.fetch(variables).subscribe((result) => {
-      const newBike = result.data.cargoBikeById;
-      this.bikes.next(
-        this.bikes.value.map((bike) =>
-          newBike.id === bike.id ? newBike : bike
-        )
-      );
-    });
+    this.addLoadingRowId(variables.id);
+    this.getCargoBikeByIdGQL
+      .fetch(variables)
+      .subscribe((result) => {
+        const newBike = result.data.cargoBikeById;
+        this.bikes.next(
+          this.bikes.value.map((bike) =>
+            newBike.id === bike.id ? newBike : bike
+          )
+        );
+      })
+      .add(() => {
+        this.removeLoadingRowId(variables.id);
+      });
   }
 
-  updateBike(variableValues: UpdateCargoBikeMutationVariables) {
-    this.updateCargoBikeGQL.mutate(variableValues).subscribe((result) => {
-      const newBike = result.data.updateCargoBike;
-      this.bikes.next(
-        this.bikes.value.map((bike) =>
-          newBike.id === bike.id ? newBike : bike
-        )
-      );
-    });
+  updateBike(variables: UpdateCargoBikeMutationVariables) {
+    this.addLoadingRowId(variables.bike.id);
+    this.updateCargoBikeGQL
+      .mutate(variables)
+      .subscribe((result) => {
+        const newBike = result.data.updateCargoBike;
+        this.bikes.next(
+          this.bikes.value.map((bike) =>
+            newBike.id === bike.id ? newBike : bike
+          )
+        );
+      })
+      .add(() => {
+        this.removeLoadingRowId(variables.bike.id);
+      });
   }
 
   lockBike(variables: LockCargoBikeMutationVariables) {
-    this.lockCargoBikeGQL.mutate(variables).subscribe((result) => {
-      const lockedBike = result.data.lockCargoBike;
-      this.bikes.next(
-        this.bikes.value.map((bike) =>
-        lockedBike.id === bike.id ? lockedBike : bike
-        )
-      );
-    })
+    this.addLoadingRowId(variables.id);
+    this.lockCargoBikeGQL
+      .mutate(variables)
+      .subscribe((result) => {
+        const lockedBike = result.data.lockCargoBike;
+        this.bikes.next(
+          this.bikes.value.map((bike) =>
+            lockedBike.id === bike.id ? lockedBike : bike
+          )
+        );
+      })
+      .add(() => {
+        this.removeLoadingRowId(variables.id);
+      });
   }
 
   unlockBike(variables: UnlockCargoBikeMutationVariables) {
-    this.unlockCargoBikeGQL.mutate(variables).subscribe((result) => {
-      const unlockedBike = result.data.unlockCargoBike;
-      this.bikes.next(
-        this.bikes.value.map((bike) =>
-        unlockedBike.id === bike.id ? unlockedBike : bike
-        )
-      );
-    })
+    this.addLoadingRowId(variables.id);
+    this.unlockCargoBikeGQL
+      .mutate(variables)
+      .subscribe((result) => {
+        const unlockedBike = result.data.unlockCargoBike;
+        this.bikes.next(
+          this.bikes.value.map((bike) =>
+            unlockedBike.id === bike.id ? unlockedBike : bike
+          )
+        );
+      })
+      .add(() => {
+        this.removeLoadingRowId(variables.id);
+      });
   }
 
   relockBike(variables: LockCargoBikeMutationVariables) {