Add cell component

src/app/app.module.ts

@@ -31,6 +31,7 @@ import { GraphQLModule } from './graphql.module';
 import { ParticipantsComponent } from './pages/tables/participants/participants.component';
 import { LendingStationsComponent } from './pages/tables/lending-stations/lending-stations.component';
 import { TableOverviewComponent } from './pages/table-overview/table-overview.component';
+import { StringCellComponent } from './components/tableComponents/string-cell/string-cell.component';
 
 
 
@@ -41,7 +42,8 @@ import { TableOverviewComponent } from './pages/table-overview/table-overview.co
     BikesComponent,
     ParticipantsComponent,
     LendingStationsComponent,
-    TableOverviewComponent
+    TableOverviewComponent,
+    StringCellComponent
   ],
   imports: [
     BrowserModule,

src/app/components/tableComponents/string-cell/string-cell.component.html

@@ -0,0 +1,6 @@
+<mat-form-field *ngIf="editable; else nonEditableText">
+  <input matInput [type]="inputType" [ngModel]="value" (ngModelChange)="change($event)"/>
+</mat-form-field>
+<ng-template #nonEditableText>
+  {{ value }}
+</ng-template>

src/app/components/tableComponents/string-cell/string-cell.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-string-cell',
+  templateUrl: './string-cell.component.html',
+  styleUrls: ['./string-cell.component.scss'],
+})
+export class StringCellComponent {
+  @Input()
+  value: number | string;
+  @Output() valueChange = new EventEmitter<number | string>();
+  @Input()
+  editable = false;
+  @Input()
+  inputType = 'text';
+
+  change(newValue) {
+    this.value = newValue;
+    this.valueChange.emit(newValue);
+  }
+}

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

@@ -38,13 +38,11 @@
       <!-- Name Column -->
       <ng-container matColumnDef="name" sticky>
         <th mat-header-cell *matHeaderCellDef>Name</th>
-        <td
-          mat-cell
-          *matCellDef="let element"
-          contenteditable
-          (input)="onTableInput(element)"
-        >
-          {{ element.name }}
+        <td mat-cell *matCellDef="let element">
+          <app-string-cell
+            [editable]="element.isGettingEdited"
+            [(value)]="element.name"
+          ></app-string-cell>
         </td>
       </ng-container>
 
@@ -58,10 +56,10 @@
       <ng-container matColumnDef="frameNumber">
         <th mat-header-cell cdkDrag *matHeaderCellDef>Fahrgestellnummer</th>
         <td mat-cell *matCellDef="let element">
-          <!--<mat-form-field>
-        <input matInput color="warn" [value]="element.security.frameNumber"/>
-      </mat-form-field>-->
-          {{ element.security.frameNumber }}
+          <app-string-cell
+            [editable]="element.isGettingEdited"
+            [(value)]="element.security.frameNumber"
+          ></app-string-cell>
         </td>
       </ng-container>
 
@@ -69,7 +67,11 @@
       <ng-container matColumnDef="numberOfChildren">
         <th mat-header-cell cdkDrag *matHeaderCellDef>Anzahl Kinder</th>
         <td mat-cell *matCellDef="let element">
-          {{ element.numberOfChildren }}
+          <app-string-cell
+            [editable]="element.isGettingEdited"
+            [(value)]="element.numberOfChildren"
+            inputType="number"
+          ></app-string-cell>
         </td>
       </ng-container>
 
@@ -78,13 +80,45 @@
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element">
           <div class="button-wrapper">
-            <button mat-icon-button (click)="edit(element)" [hidden]="isGettingEdited || waitingForEditPermissions">
+            <button
+              mat-icon-button
+              (click)="edit(element)"
+              *ngIf="
+                !element.isGettingEdited &&
+                !element.waitingForEditPermissions &&
+                !element.locked
+              "
+            >
               <mat-icon>edit</mat-icon>
             </button>
-            <mat-spinner [diameter]="32" *ngIf="waitingForEditPermissions"></mat-spinner>
-            <button mat-icon-button>
+            <button
+              mat-icon-button
+              *ngIf="
+                !element.isGettingEdited &&
+                !element.waitingForEditPermissions &&
+                !element.locked
+              "
+            >
               <mat-icon>delete</mat-icon>
             </button>
+
+            <mat-spinner
+              [diameter]="32"
+              *ngIf="element.waitingForEditPermissions"
+            ></mat-spinner>
+
+            <button
+              mat-icon-button
+              *ngIf="element.isGettingEdited"
+              (click)="save(element)"
+            >
+              <mat-icon>save</mat-icon>
+            </button>
+            <button mat-icon-button *ngIf="element.isGettingEdited">
+              <mat-icon>cancel</mat-icon>
+            </button>
+
+            <mat-icon *ngIf="element.locked">locked</mat-icon>
           </div>
         </td>
       </ng-container>

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

@@ -1,12 +1,13 @@
 import { SelectionModel } from '@angular/cdk/collections';
-import { Component, ChangeDetectorRef } from '@angular/core';
+import { Component } 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';
+import { deepCopy } from 'src/app/services/deepCopy';
 
 type CargoBikeDataRow = CargoBikeResult & {
   waitingForEditPermissions: boolean;
   isGettingEdited: boolean;
+  locked: boolean;
 };
 
 @Component({
@@ -24,36 +25,42 @@ export class BikesComponent {
     'buttons',
   ];
 
-  bikes = new MatTableDataSource(<Array<CargoBikeDataRow>>[]);
+  bikes = <Array<any>>[];
   selection = new SelectionModel<CargoBikeDataRow>(true, []);
 
-  constructor(
-    private bikesService: BikesService,
-    private changeDetectorRefs: ChangeDetectorRef
-  ) {
+  constructor(private bikesService: BikesService) {
     bikesService.bikes.subscribe((bikes) => {
-      this.bikes = new MatTableDataSource(
-        bikes.map((bike) => {
-          return Object.assign({}, bike, {
+      this.bikes = bikes.map((bike) => {
+        return <any>Object.assign({}, deepCopy(bike), {
           waitingForEditPermissions: false,
           isGettingEdited: false,
+          locked: false,
         });
-        })
-      );
+      });
+      if (this.bikes.length > 6) {
+        this.bikes[5].locked = true;
+        this.bikes[2].locked = true;
+      }
     });
     bikesService.loadBikes();
   }
 
   edit(row: CargoBikeDataRow) {
-    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);
+    }, 800);
+  }
+
+  save(row: CargoBikeDataRow) {
+    console.log(row);
+  }
+
+  cancel(row: CargoBikeDataRow) {
+    //fetch it again
+    //TODO: remove lock
+    this.bikesService.reloadBike({id: row.id});
   }
 
   drop(event: CdkDragDrop<string[]>) {
@@ -67,7 +74,7 @@ export class BikesComponent {
   /** Whether the number of selected elements matches the total number of rows. */
   isAllSelected() {
     const numSelected = this.selection.selected.length;
-    const numRows = this.bikes.data.length;
+    const numRows = this.bikes.length;
     return numSelected === numRows;
   }
 
@@ -75,6 +82,6 @@ export class BikesComponent {
   masterToggle() {
     this.isAllSelected()
       ? this.selection.clear()
-      : this.bikes.data.forEach((row) => this.selection.select(row));
+      : this.bikes.forEach((row) => this.selection.select(row));
   }
 }

src/app/services/bikes.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { GetCargoBikesGQL, GetCargoBikesQuery } from 'src/generated/graphql';
+import { GetCargoBikesGQL, GetCargoBikesQuery, GetCargoBikeByIdGQL, GetCargoBikeByIdQuery, GetCargoBikeByIdQueryVariables } from 'src/generated/graphql';
 import { DeepExtractTypeSkipArrays } from 'ts-deep-extract-types';
 
 export type CargoBikeResult = DeepExtractTypeSkipArrays<GetCargoBikesQuery, ["cargoBikes"]>;
@@ -11,11 +11,18 @@ export type CargoBikeResult = DeepExtractTypeSkipArrays<GetCargoBikesQuery, ["ca
 export class BikesService {
   bikes: BehaviorSubject<CargoBikeResult[]> = new BehaviorSubject([]);
 
-  constructor(private bikesGQL: GetCargoBikesGQL) { }
+  constructor(private getCargoBikesGQL: GetCargoBikesGQL, private getCargoBikeByIdGQL: GetCargoBikeByIdGQL) { }
 
   loadBikes() {
-    this.bikesGQL.watch().valueChanges.subscribe((result) => {
+    this.getCargoBikesGQL.watch().valueChanges.subscribe((result) => {
       this.bikes.next(result.data.cargoBikes);
     });
   }
+
+  reloadBike(parameter: GetCargoBikeByIdQueryVariables) {
+    this.getCargoBikeByIdGQL.watch().valueChanges.subscribe((result) => {
+      const newBike = result.data.cargoBikeById;
+      this.bikes.next(this.bikes.value.map(bike => (newBike.id === bike.id) ? newBike : bike));
+    });
+  }
 }

tsconfig.base.json

@@ -9,7 +9,7 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2016",
     "module": "es2020",
     "lib": [
       "es2018",