Refactored loading state and animation

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 &&
+                !isLoading(element.id)
-                !element.unlocking
               "
             >
               <mat-icon>edit</mat-icon>
@@ -85,10 +87,8 @@
               mat-icon-button
               *ngIf="
                 !element.isLockedByMe &&
-                !element.waitingForEditPermissions &&
+                !isLoading(element.id) &&
-                !element.isLocked &&
+                !element.isLocked
-                !element.saving &&
-                !element.unlocking
               "
             >
               <mat-icon>delete</mat-icon>
@@ -96,17 +96,13 @@
 
             <mat-spinner
               [diameter]="32"
-              *ngIf="
+              *ngIf="isLoading(element.id)"
-                element.waitingForEditPermissions ||
-                element.saving ||
-                element.unlocking
-              "
             ></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)"
             >

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), {
+      this.bikes = bikes;
-          waitingForEditPermissions: false,
-          saving: false,
-          unlocking: false,
-        });
-      });
       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 ||
+      this.columnInfo.find((column) => column.name === propertyName)
-      false
+        ?.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) {
+  edit(row: CargoBikeResult) {
-    row.waitingForEditPermissions = true;
     this.bikesService.lockBike({ id: row.id });
   }
 
-  save(row: CargoBikeDataRow) {
+  save(row: CargoBikeResult) {
-    row.saving = true;
     const bike: CargoBikeUpdateInput = filter(
       CargoBikeFieldsMutableFragmentDoc,
       row
@@ -173,8 +172,7 @@ export class BikesComponent {
     this.bikesService.updateBike({ bike });
   }
 
-  cancel(row: CargoBikeDataRow) {
+  cancel(row: CargoBikeResult) {
-    row.unlocking = true;
     this.bikesService.unlockBike({ id: row.id });
   }
 

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,40 +33,67 @@ 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) => {
+    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) {
+  updateBike(variables: UpdateCargoBikeMutationVariables) {
-    this.updateCargoBikeGQL.mutate(variableValues).subscribe((result) => {
+    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) => {
+    this.addLoadingRowId(variables.id);
+    this.lockCargoBikeGQL
+      .mutate(variables)
+      .subscribe((result) => {
         const lockedBike = result.data.lockCargoBike;
         this.bikes.next(
           this.bikes.value.map((bike) =>
@@ -73,10 +101,16 @@ export class BikesService {
           )
         );
       })
+      .add(() => {
+        this.removeLoadingRowId(variables.id);
+      });
   }
 
   unlockBike(variables: UnlockCargoBikeMutationVariables) {
-    this.unlockCargoBikeGQL.mutate(variables).subscribe((result) => {
+    this.addLoadingRowId(variables.id);
+    this.unlockCargoBikeGQL
+      .mutate(variables)
+      .subscribe((result) => {
         const unlockedBike = result.data.unlockCargoBike;
         this.bikes.next(
           this.bikes.value.map((bike) =>
@@ -84,6 +118,9 @@ export class BikesService {
           )
         );
       })
+      .add(() => {
+        this.removeLoadingRowId(variables.id);
+      });
   }
 
   relockBike(variables: LockCargoBikeMutationVariables) {