WIP Bikepage

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

@@ -6,16 +6,18 @@
     [disabled]="!editable"
     [ngModel]="value"
     (ngModelChange)="change($event)"
-  ></mat-checkbox>
+  ><span *ngIf="label">{{label}}</span></mat-checkbox>
 </div>
 
 <div #enumInputType *ngIf="htmlInputType === 'enum'">
-  <mat-form-field *ngIf="editable; else nonEditableText">
+  <mat-form-field *ngIf="editable || label; else nonEditableText">
+    <mat-label *ngIf="label">{{label}}</mat-label>
     <mat-select
       [(ngModel)]="value"
       (ngModelChange)="change($event)"
       #input="ngModel"
       [required]="required"
+      [disabled]="!editable"
     >
       <mat-option *ngFor="let option of enumValues" [value]="option">
         {{ option }}
@@ -31,11 +33,13 @@
   #otherInputType
   *ngIf="htmlInputType === 'number' || htmlInputType === 'text'"
 >
-  <mat-form-field *ngIf="editable; else nonEditableText">
+  <mat-form-field *ngIf="editable || label; else nonEditableText">
+    <mat-label *ngIf="label">{{label}}</mat-label>
     <input
       #input="ngModel"
       matInput
       [type]="htmlInputType"
+      [disabled]="!editable"
       [ngModel]="value"
       (ngModelChange)="change($event)"
       [required]="required"

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

@@ -32,6 +32,8 @@ export class CellComponent {
   required: boolean = false;
   @Input()
   link: string = null;
+  @Input()
+  label: string = null;
   @Output() validityChange = new EventEmitter<boolean>();
   isValid: boolean = true;
 

src/app/pages/dataPages/bike/bike.component.html

@@ -11,8 +11,9 @@
 
   <div *ngFor="let prop of propertiesInfo">
     <app-cell
-      [editable]="!prop.readonly && data.isLockedByMe"
+      [editable]="data.isLockedByMe && !prop.readonly"
       [(value)]="data[prop.name]"
+      [label]="prop.translation || prop.name"
       [inputType]="prop.type"
     ></app-cell>
   </div>

src/app/pages/dataPages/bike/bike.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { flatten } from 'src/app/helperFunctions/flattenObject';
 import { BikesService } from 'src/app/services/bikes.service';
 import { SchemaService } from 'src/app/services/schema.service';
 
@@ -117,14 +118,13 @@ export class BikeComponent implements OnInit {
     private schemaService: SchemaService
   ) {
     this.addPropertiesFromGQLSchemaToPropertiesInfo();
-    console.log(this.propertiesInfo);
   }
 
   ngOnInit(): void {
     this.id = this.route.snapshot.paramMap.get('id');
     this.bikesService.loadCargoBike({ id: this.id });
     this.bikesService.bike.subscribe((data) => {
-      this.data = data;
+      this.data = flatten(data);
     });
     this.bikesService.loadingBike.subscribe(
       (isLoading) => (this.isLoading = isLoading)

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

@@ -10,10 +10,7 @@ import { logArrayInColumnInfoForm } from 'src/app/helperFunctions/logArrayInColu
 import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import {
-  MatDialog,
-  MatDialogRef,
-} from '@angular/material/dialog';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-bikes',
@@ -32,7 +29,14 @@ export class BikesComponent {
     type?: string;
     link?: (row: any) => string;
   }[] = [
-    { name: 'name', header: 'Name', sticky: true, link: (row: any) => {return "/bike/" + row.id}},
+    {
+      name: 'name',
+      header: 'Name',
+      sticky: true,
+      link: (row: any) => {
+        return '/bike/' + row.id;
+      },
+    },
     { name: 'id', header: 'ID', readonly: true },
     { name: 'group', header: 'Gruppe' },
     { name: 'modelName', header: 'Modell' },
@@ -140,9 +144,7 @@ export class BikesComponent {
     private bikesService: BikesService,
     private schemaService: SchemaService,
     public dialog: MatDialog
-  ) {
-    console.log(this.columnInfo[0].link({id: 66}));
-  }
+  ) {}
 
   ngAfterViewInit() {
     this.addColumnPropertiesFromGQLSchemaToColumnInfo();
@@ -285,7 +287,7 @@ export class BikesComponent {
 
   addNewObject() {
     this.paginator.firstPage();
-    this.setFilter({...this.filter, includesString: ""});
+    this.setFilter({ ...this.filter, includesString: '' });
     this.resetSorting();
     this.data.data = [
       { newObject: true, id: this.getNewId() },
@@ -383,7 +385,7 @@ export class BikesComponent {
 
   showOnlyUnsavedElements(value: boolean) {
     this.filter.onlyUnsaved = value;
-    this.filter.includesString = "";
+    this.filter.includesString = '';
     this.applyFilter();
   }
 

src/app/services/bikes.service.ts

@@ -96,7 +96,6 @@ export class BikesService {
   }
 
   createBike(variables: CreateCargoBikeMutationVariables) {
-    console.log(variables);
     this.createCargoBikeGQL
       .mutate(variables)
       .subscribe((result) => {