From bfa8a4f0ef63ab4ec88eb3bb905b945116ff84c8 Mon Sep 17 00:00:00 2001 From: Max Ehrlicher-Schmidt Date: Wed, 18 Nov 2020 19:34:54 +0100 Subject: [PATCH] Add delete functionallity --- src/app/app.module.ts | 8 ++- src/app/graphqlOperations/bike.graphql | 4 ++ .../pages/tables/bikes/bikes.component.html | 50 +++++++++++---- src/app/pages/tables/bikes/bikes.component.ts | 61 +++++++++++++++---- .../bikes/delete-confirmation-dialog.html | 7 +++ src/app/services/bikes.service.ts | 24 +++++--- src/generated/graphql.schema.json | 1 + src/generated/graphql.ts | 26 ++++++++ 8 files changed, 150 insertions(+), 31 deletions(-) create mode 100644 src/app/pages/tables/bikes/delete-confirmation-dialog.html diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b4d73f2..9231977 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -26,13 +26,15 @@ import {MatTooltipModule} from '@angular/material/tooltip'; import {MatSelectModule} from '@angular/material/select'; import { MatPaginatorModule } from '@angular/material/paginator'; import { MatSortModule } from '@angular/material/sort'; +import {MatDialogModule} from '@angular/material/dialog'; + import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { LoginComponent } from './pages/login/login.component'; -import { BikesComponent } from './pages/tables/bikes/bikes.component'; +import { BikesComponent, DeleteConfirmationDialog } from './pages/tables/bikes/bikes.component'; import { GraphQLModule } from './graphql.module'; import { ParticipantsComponent } from './pages/tables/participants/participants.component'; import { LendingStationsComponent } from './pages/tables/lending-stations/lending-stations.component'; @@ -52,6 +54,7 @@ import { TokenInterceptor } from './helper/token.interceptor' LendingStationsComponent, TableOverviewComponent, CellComponent, + DeleteConfirmationDialog ], imports: [ BrowserModule, @@ -81,7 +84,8 @@ import { TokenInterceptor } from './helper/token.interceptor' MatTooltipModule, MatSelectModule, MatPaginatorModule, - MatSortModule + MatSortModule, + MatDialogModule ], providers: [NavService, { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }], diff --git a/src/app/graphqlOperations/bike.graphql b/src/app/graphqlOperations/bike.graphql index acb29f0..99e1c23 100644 --- a/src/app/graphqlOperations/bike.graphql +++ b/src/app/graphqlOperations/bike.graphql @@ -27,3 +27,7 @@ mutation UnlockCargoBike($id: ID!) { ...CargoBikeFields } } + +mutation DeleteCargoBike($id: ID!) { + deleteCargoBike(id: $id) +} diff --git a/src/app/pages/tables/bikes/bikes.component.html b/src/app/pages/tables/bikes/bikes.component.html index cdbca50..67217a1 100644 --- a/src/app/pages/tables/bikes/bikes.component.html +++ b/src/app/pages/tables/bikes/bikes.component.html @@ -1,6 +1,12 @@
-
- - - + - +
+ + + + locked -
+
- +
diff --git a/src/app/pages/tables/bikes/bikes.component.ts b/src/app/pages/tables/bikes/bikes.component.ts index 89454a3..18248e9 100644 --- a/src/app/pages/tables/bikes/bikes.component.ts +++ b/src/app/pages/tables/bikes/bikes.component.ts @@ -1,5 +1,5 @@ import { SelectionModel } from '@angular/cdk/collections'; -import { Component, ViewChild } from '@angular/core'; +import { Component, Inject, ViewChild } from '@angular/core'; import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; import { BikesService, CargoBikeResult } from 'src/app/services/bikes.service'; import { flatten } from 'src/app/helperFunctions/flattenObject'; @@ -11,6 +11,11 @@ import { MatTableDataSource } from '@angular/material/table'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; import { BehaviorSubject } from 'rxjs'; +import { + MatDialog, + MatDialogRef, + MAT_DIALOG_DATA, +} from '@angular/material/dialog'; @Component({ selector: 'app-bikes', @@ -128,12 +133,13 @@ export class BikesComponent { relockingInterval = null; relockingDuration = 1000 * 60 * 1; - filterValue: string = ""; + filterValue: string = ''; isLoaded = false; constructor( private bikesService: BikesService, - private schemaService: SchemaService + private schemaService: SchemaService, + public dialog: MatDialog ) {} ngAfterViewInit() { @@ -143,9 +149,9 @@ export class BikesComponent { if (typeof item[columnName] === 'string') { return item[columnName].toLocaleLowerCase(); } - + return item[columnName]; - } + }; this.data.sort = this.sort; this.columnInfo.forEach((column) => @@ -177,7 +183,6 @@ export class BikesComponent { }); this.bikesService.loadBikes(); - this.relockingInterval = setInterval(() => { for (const row of this.data.data) { if (row.isLockedByMe) { @@ -265,19 +270,22 @@ export class BikesComponent { this.paginator.firstPage(); this.resetFilter(); this.resetSorting(); - this.data.data = [{ newObject: true, id: this.getNewId() }, ...this.data.data]; + this.data.data = [ + { newObject: true, id: this.getNewId() }, + ...this.data.data, + ]; } getNewId(): string { let id = -1; - while(this.getRowById(id.toString())) { + while (this.getRowById(id.toString())) { id--; } return id.toString(); } deleteNewObject(row: any) { - this.data.data = this.data.data.filter(element => row.id !== element.id); + this.data.data = this.data.data.filter((element) => row.id !== element.id); } create(row: any) { @@ -304,6 +312,22 @@ export class BikesComponent { this.bikesService.unlockBike({ id: row.id }); } + delete(row: any) { + this.bikesService.deleteBike({ id: row.id }); + } + + openDeleteConfirmationDialog(row: any) { + const dialogRef = this.dialog.open(DeleteConfirmationDialog, { + width: '250px', + }); + + dialogRef.afterClosed().subscribe((result) => { + if (result === true) { + this.delete(row); + } + }); + } + getRowById(id: string) { return this.data.data.find((row) => row.id === id); } @@ -335,11 +359,26 @@ export class BikesComponent { } resetFilter() { - this.filterValue = ""; + this.filterValue = ''; this.applyFilter(); } resetSorting() { - this.sort.sort({id: null, start: 'asc', disableClear: false }); + this.sort.sort({ id: null, start: 'asc', disableClear: false }); + } +} + +@Component({ + selector: 'delete-confirmation-dialog', + templateUrl: 'delete-confirmation-dialog.html', +}) +export class DeleteConfirmationDialog { + constructor(public dialogRef: MatDialogRef) {} + + onConfirmClick(): void { + this.dialogRef.close(true); + } + onNoClick(): void { + this.dialogRef.close(false); } } diff --git a/src/app/pages/tables/bikes/delete-confirmation-dialog.html b/src/app/pages/tables/bikes/delete-confirmation-dialog.html new file mode 100644 index 0000000..f51fd71 --- /dev/null +++ b/src/app/pages/tables/bikes/delete-confirmation-dialog.html @@ -0,0 +1,7 @@ +
+

Soll das Element wirklich gelöscht werden?

+
+
+ + +
\ No newline at end of file diff --git a/src/app/services/bikes.service.ts b/src/app/services/bikes.service.ts index 1684738..1494ba1 100644 --- a/src/app/services/bikes.service.ts +++ b/src/app/services/bikes.service.ts @@ -15,6 +15,8 @@ import { UnlockCargoBikeMutationVariables, CreateCargoBikeGQL, CreateCargoBikeMutationVariables, + DeleteCargoBikeGQL, + DeleteCargoBikeMutationVariables, } from 'src/generated/graphql'; import { DeepExtractTypeSkipArrays } from 'ts-deep-extract-types'; @@ -32,13 +34,13 @@ export class BikesService { groupEnum: BehaviorSubject = new BehaviorSubject([]); constructor( - private schemaService: SchemaService, private getCargoBikesGQL: GetCargoBikesGQL, private getCargoBikeByIdGQL: GetCargoBikeByIdGQL, private updateCargoBikeGQL: UpdateCargoBikeGQL, private lockCargoBikeGQL: LockCargoBikeGQL, private unlockCargoBikeGQL: UnlockCargoBikeGQL, private createCargoBikeGQL: CreateCargoBikeGQL, + private deleteCargoBikeGQL: DeleteCargoBikeGQL, ) {} addLoadingRowId(id: string) { @@ -55,12 +57,6 @@ export class BikesService { loadBikes() { this.getCargoBikesGQL.fetch().subscribe((result) => { - // comment in for performance testing - /*for (let i = 1; i <= 500; i++) { - const newBike = deepCopy(result.data.cargoBikes[0]); - newBike.id = (i + 100).toString(); - result.data.cargoBikes.push(newBike); - }*/ this.bikes.next(result.data.cargoBikes); }); @@ -146,6 +142,20 @@ export class BikesService { }); } + deleteBike(variables: DeleteCargoBikeMutationVariables) { + this.addLoadingRowId(variables.id); + this.deleteCargoBikeGQL + .mutate(variables) + .subscribe((result) => { + if(result.data.deleteCargoBike) { + this.bikes.next([...this.bikes.value].filter(bike => bike.id !== variables.id)); + } + }) + .add(() => { + this.removeLoadingRowId(variables.id); + }); + } + relockBike(variables: LockCargoBikeMutationVariables) { this.lockCargoBikeGQL.mutate(variables).subscribe(); } diff --git a/src/generated/graphql.schema.json b/src/generated/graphql.schema.json index 7da1a2e..b72fd3f 100644 --- a/src/generated/graphql.schema.json +++ b/src/generated/graphql.schema.json @@ -1,5 +1,6 @@ { "__schema": { + "description": null, "queryType": { "name": "Query" }, diff --git a/src/generated/graphql.ts b/src/generated/graphql.ts index c7fe1bc..82a8254 100644 --- a/src/generated/graphql.ts +++ b/src/generated/graphql.ts @@ -1764,6 +1764,16 @@ export type UnlockCargoBikeMutation = ( ) } ); +export type DeleteCargoBikeMutationVariables = Exact<{ + id: Scalars['ID']; +}>; + + +export type DeleteCargoBikeMutation = ( + { __typename?: 'Mutation' } + & Pick +); + export type GetCargoBikesQueryVariables = Exact<{ [key: string]: never; }>; @@ -2078,6 +2088,22 @@ export const UnlockCargoBikeDocument = gql` export class UnlockCargoBikeGQL extends Apollo.Mutation { document = UnlockCargoBikeDocument; + constructor(apollo: Apollo.Apollo) { + super(apollo); + } + } +export const DeleteCargoBikeDocument = gql` + mutation DeleteCargoBike($id: ID!) { + deleteCargoBike(id: $id) +} + `; + + @Injectable({ + providedIn: 'root' + }) + export class DeleteCargoBikeGQL extends Apollo.Mutation { + document = DeleteCargoBikeDocument; + constructor(apollo: Apollo.Apollo) { super(apollo); }