Fix table editing

codegen.yml

@@ -1,6 +1,6 @@
 overwrite: true
 schema: "http://localhost:4000/graphql"
-documents: "src/app/graphqlOperations/**/*"
+documents: "src/app/graphqlOperations/**/*.graphql"
 generates:
   src/generated/graphql.ts:
     plugins:

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

@@ -1,4 +1,5 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { catchError } from 'rxjs/operators';
 
 @Component({
   selector: 'app-string-cell',
@@ -15,7 +16,7 @@ export class StringCellComponent {
   inputType = 'text';
 
   change(newValue) {
-    this.value = newValue;
-    this.valueChange.emit(newValue);
+    this.value = this.inputType === 'number' ? +newValue : newValue;
+    this.valueChange.emit(this.value);
   }
 }

src/app/graphql.module.ts

@@ -11,15 +11,8 @@ import { environment } from '../environments/environment';
 
 const uri = environment.apiUrl + '/graphql'; // <-- add the URL of the GraphQL server here
 
-const cleanTypeName = new ApolloLink((operation, forward) => {
-  if (operation.variables) {
-    const omitTypename = (key: string, value: any) =>
-      key === '__typename' ? undefined : value;
-    operation.variables = JSON.parse(
-      JSON.stringify(operation.variables),
-      omitTypename
-    );
-  }
+const authMiddleware = new ApolloLink((operation, forward) => {
+  //Add token here <-------------------------------------------------------
   return forward(operation).map((data) => {
     return data;
   });
@@ -27,7 +20,7 @@ const cleanTypeName = new ApolloLink((operation, forward) => {
 
 export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
   return {
-    link: concat(cleanTypeName, httpLink.create({ uri })),
+    link: concat(authMiddleware, httpLink.create({ uri })),
     cache: new InMemoryCache({}),
   };
 }

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

@@ -1,7 +1,6 @@
 <div class="table-page-wrapper">
   <div class="table-control">
-    <button mat-raised-button color="primary">Primary</button>
-    <button mat-raised-button color="accent">Accent</button>
+    <button mat-raised-button color="primary">Alle ausgewählten Fahrräder bearbeiten</button>
   </div>
   <div class="table-container">
     <table
@@ -86,7 +85,8 @@
               *ngIf="
                 !element.isGettingEdited &&
                 !element.waitingForEditPermissions &&
-                !element.locked
+                !element.locked &&
+                !element.saving
               "
             >
               <mat-icon>edit</mat-icon>
@@ -96,7 +96,8 @@
               *ngIf="
                 !element.isGettingEdited &&
                 !element.waitingForEditPermissions &&
-                !element.locked
+                !element.locked &&
+                !element.saving
               "
             >
               <mat-icon>delete</mat-icon>
@@ -104,7 +105,7 @@
 
             <mat-spinner
               [diameter]="32"
-              *ngIf="element.waitingForEditPermissions"
+              *ngIf="element.waitingForEditPermissions || element.saving"
             ></mat-spinner>
 
             <button

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

@@ -4,10 +4,11 @@ import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { BikesService, CargoBikeResult } from 'src/app/services/bikes.service';
 import { deepCopy } from 'src/app/helperFunctions/deepCopy';
 import { filter } from 'graphql-anywhere';
-import {CargoBikeFieldsMutableFragmentDoc} from 'src/generated/graphql';
+import {CargoBikeFieldsMutableFragmentDoc, CargoBikeUpdateInput} from 'src/generated/graphql';
 
 type CargoBikeDataRow = CargoBikeResult & {
   waitingForEditPermissions: boolean;
+  saving: boolean;
   isGettingEdited: boolean;
   locked: boolean;
 };
@@ -37,6 +38,7 @@ export class BikesComponent {
           waitingForEditPermissions: false,
           isGettingEdited: false,
           locked: false,
+          saving: false
         });
       });
       if (this.bikes.length > 6) {
@@ -56,15 +58,17 @@ export class BikesComponent {
   }
 
   save(row: CargoBikeDataRow) {
-    //remove lock
-    this.bikesService.updateBike({bike: filter(CargoBikeFieldsMutableFragmentDoc, row)})
+    //TODO: remove lock
+    row.saving = true;
+    row.isGettingEdited = false;
+    const bike: CargoBikeUpdateInput = filter(CargoBikeFieldsMutableFragmentDoc, row)
+    this.bikesService.updateBike({bike})
   }
 
   cancel(row: CargoBikeDataRow) {
     //fetch it again
     //TODO: remove lock
     this.bikesService.reloadBike({ id: row.id });
-    console.log('cancel');
   }
 
   drop(event: CdkDragDrop<string[]>) {