Add edit button

src/app/pages/tables/bikes/bikes.component.html

@@ -78,9 +78,10 @@
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element">
           <div class="button-wrapper">
-            <button mat-icon-button (click)="edit(element.id)">
+            <button mat-icon-button (click)="edit(element)" [hidden]="isGettingEdited || waitingForEditPermissions">
               <mat-icon>edit</mat-icon>
             </button>
+            <mat-spinner [diameter]="32" *ngIf="waitingForEditPermissions"></mat-spinner>
             <button mat-icon-button>
               <mat-icon>delete</mat-icon>
             </button>

src/app/pages/tables/bikes/bikes.component.scss

@@ -19,6 +19,7 @@
       .mat-cell {
         min-width: 80px;
         box-sizing: border-box;
+        padding-left: 0.5em;
       }
 
       .mat-table-sticky {

src/app/pages/tables/bikes/bikes.component.ts

@@ -1,7 +1,13 @@
 import { SelectionModel } from '@angular/cdk/collections';
-import { Component, OnInit } from '@angular/core';
+import { Component, ChangeDetectorRef } from '@angular/core';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { BikesService, CargoBikeResult } from 'src/app/services/bikes.service';
+import { MatTableDataSource } from '@angular/material/table';
+
+type CargoBikeDataRow = CargoBikeResult & {
+  waitingForEditPermissions: boolean;
+  isGettingEdited: boolean;
+};
 
 @Component({
   selector: 'app-bikes',
@@ -9,37 +15,66 @@ import { BikesService, CargoBikeResult } from 'src/app/services/bikes.service';
   styleUrls: ['./bikes.component.scss'],
 })
 export class BikesComponent {
-  displayedColumns: string[] = ['select', 'name', 'id', 'frameNumber', 'numberOfChildren', 'buttons'];
+  displayedColumns: string[] = [
-  
+    'select',
-  bikes: CargoBikeResult[];
+    'name',
-  selection = new SelectionModel<CargoBikeResult>(true, []);
+    'id',
+    'frameNumber',
+    'numberOfChildren',
+    'buttons',
+  ];
 
+  bikes = new MatTableDataSource(<Array<CargoBikeDataRow>>[]);
+  selection = new SelectionModel<CargoBikeDataRow>(true, []);
 
-  constructor(private bikesService: BikesService) {
+  constructor(
-    bikesService.bikes.subscribe(bikes => this.bikes = bikes);
+    private bikesService: BikesService,
-
+    private changeDetectorRefs: ChangeDetectorRef
+  ) {
+    bikesService.bikes.subscribe((bikes) => {
+      this.bikes = new MatTableDataSource(
+        bikes.map((bike) => {
+          return Object.assign({}, bike, {
+            waitingForEditPermissions: false,
+            isGettingEdited: false,
+          });
+        })
+      );
+    });
     bikesService.loadBikes();
   }
 
-  edit(id: string) {
+  edit(row: CargoBikeDataRow) {
-    console.log(id);
+    console.log('isGettingEdited: ' + row.isGettingEdited);
+    row.waitingForEditPermissions = true;
+    console.log('edit');
+    console.log(row.waitingForEditPermissions);
+    setTimeout(() => {
+      row.waitingForEditPermissions = false;
+      row.isGettingEdited = true;
+      console.log('gets edited');
+    }, 100);
   }
 
   drop(event: CdkDragDrop<string[]>) {
-    moveItemInArray(this.displayedColumns, event.previousIndex + 2, event.currentIndex + 2); // +2 because the first 2 (selection + name) columns are not dragable
+    moveItemInArray(
+      this.displayedColumns,
+      event.previousIndex + 2,
+      event.currentIndex + 2
+    ); // +2 because the first 2 (selection + name) columns are not dragable
   }
 
   /** Whether the number of selected elements matches the total number of rows. */
   isAllSelected() {
     const numSelected = this.selection.selected.length;
-    const numRows = this.bikes.length;
+    const numRows = this.bikes.data.length;
     return numSelected === numRows;
   }
 
   /** Selects all rows if they are not all selected; otherwise clear selection. */
   masterToggle() {
-    this.isAllSelected() ?
+    this.isAllSelected()
-        this.selection.clear() :
+      ? this.selection.clear()
-        this.bikes.forEach(row => this.selection.select(row));
+      : this.bikes.data.forEach((row) => this.selection.select(row));
   }
 }