From ac6af032f2a2b56fd625788d39fe73c538643754 Mon Sep 17 00:00:00 2001 From: Max Ehrlicher-Schmidt Date: Wed, 23 Sep 2020 10:30:26 +0200 Subject: [PATCH] Add cell component --- src/app/app.module.ts | 4 +- .../string-cell/string-cell.component.html | 6 ++ .../string-cell/string-cell.component.scss | 0 .../string-cell/string-cell.component.ts | 21 ++++++ .../pages/tables/bikes/bikes.component.html | 64 ++++++++++++++----- src/app/pages/tables/bikes/bikes.component.ts | 51 ++++++++------- src/app/services/bikes.service.ts | 13 +++- tsconfig.base.json | 2 +- 8 files changed, 119 insertions(+), 42 deletions(-) create mode 100644 src/app/components/tableComponents/string-cell/string-cell.component.html create mode 100644 src/app/components/tableComponents/string-cell/string-cell.component.scss create mode 100644 src/app/components/tableComponents/string-cell/string-cell.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 82dd7d5..7d3d46b 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/components/tableComponents/string-cell/string-cell.component.html b/src/app/components/tableComponents/string-cell/string-cell.component.html new file mode 100644 index 0000000..72bde49 --- /dev/null +++ b/src/app/components/tableComponents/string-cell/string-cell.component.html @@ -0,0 +1,6 @@ + + + + + {{ value }} + diff --git a/src/app/components/tableComponents/string-cell/string-cell.component.scss b/src/app/components/tableComponents/string-cell/string-cell.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/tableComponents/string-cell/string-cell.component.ts b/src/app/components/tableComponents/string-cell/string-cell.component.ts new file mode 100644 index 0000000..6cab8a0 --- /dev/null +++ b/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(); + @Input() + editable = false; + @Input() + inputType = 'text'; + + change(newValue) { + this.value = newValue; + this.valueChange.emit(newValue); + } +} diff --git a/src/app/pages/tables/bikes/bikes.component.html b/src/app/pages/tables/bikes/bikes.component.html index f63b353..dce6c0f 100644 --- a/src/app/pages/tables/bikes/bikes.component.html +++ b/src/app/pages/tables/bikes/bikes.component.html @@ -38,13 +38,11 @@ Name - - {{ element.name }} + + @@ -58,10 +56,10 @@ Fahrgestellnummer - - {{ element.security.frameNumber }} + @@ -69,7 +67,11 @@ Anzahl Kinder - {{ element.numberOfChildren }} + @@ -78,13 +80,45 @@
- - - + + + + + + + locked
diff --git a/src/app/pages/tables/bikes/bikes.component.ts b/src/app/pages/tables/bikes/bikes.component.ts index 72337dd..5234a18 100644 --- a/src/app/pages/tables/bikes/bikes.component.ts +++ b/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(>[]); + bikes = >[]; selection = new SelectionModel(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, { - waitingForEditPermissions: false, - isGettingEdited: false, - }); - }) - ); + this.bikes = bikes.map((bike) => { + return 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) { @@ -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)); } } diff --git a/src/app/services/bikes.service.ts b/src/app/services/bikes.service.ts index 379ee9c..7dbc136 100644 --- a/src/app/services/bikes.service.ts +++ b/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; @@ -11,11 +11,18 @@ export type CargoBikeResult = DeepExtractTypeSkipArrays = 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)); + }); + } } diff --git a/tsconfig.base.json b/tsconfig.base.json index 3cc339d..afef69c 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -9,7 +9,7 @@ "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, - "target": "es2015", + "target": "es2016", "module": "es2020", "lib": [ "es2018",