From 189f35430a7eaf9e08e55550856ad511843952b8 Mon Sep 17 00:00:00 2001 From: Christopher Bartel Date: Sat, 4 Dec 2021 12:25:16 +0100 Subject: [PATCH] feat: expedition delete confirm dialog --- webapp/src/app/app.module.ts | 4 ++- .../confirm-dialog.component.css | 0 .../confirm-dialog.component.html | 6 ++++ .../confirm-dialog.component.spec.ts | 25 ++++++++++++++ .../confirm-dialog.component.ts | 29 ++++++++++++++++ .../confirm-dialog/confirm-dialog.module.ts | 13 +++++++ .../confirm-dialog/confirm-dialog.service.ts | 27 +++++++++++++++ .../expedition-table.component.ts | 34 +++++++++++++++++-- 8 files changed, 134 insertions(+), 4 deletions(-) create mode 100644 webapp/src/app/components/confirm-dialog/confirm-dialog.component.css create mode 100644 webapp/src/app/components/confirm-dialog/confirm-dialog.component.html create mode 100644 webapp/src/app/components/confirm-dialog/confirm-dialog.component.spec.ts create mode 100644 webapp/src/app/components/confirm-dialog/confirm-dialog.component.ts create mode 100644 webapp/src/app/components/confirm-dialog/confirm-dialog.module.ts create mode 100644 webapp/src/app/components/confirm-dialog/confirm-dialog.service.ts diff --git a/webapp/src/app/app.module.ts b/webapp/src/app/app.module.ts index 5b008a0..8886a0c 100644 --- a/webapp/src/app/app.module.ts +++ b/webapp/src/app/app.module.ts @@ -29,6 +29,7 @@ import { SnackbarModule } from './services/snackbar/snackbar.module'; import { HeaderModule } from './components/header/header.module'; import { FooterModule } from './components/footer/footer.module'; import { EventService } from './services/event/event.service'; +import { ConfirmDialogModule } from './components/confirm-dialog/confirm-dialog.module'; const cookieConfig: NgcCookieConsentConfig = { cookie: { @@ -85,7 +86,8 @@ FullCalendarModule.registerPlugins([dayGridPlugin, timeGridPlugin, interactionPl UserModule, // Global Components HeaderModule, - FooterModule + FooterModule, + ConfirmDialogModule ], providers: [{ provide: LOCALE_ID, useValue: 'en-GB' }, AppComponent, LoginGuard, AdminGuard], bootstrap: [AppComponent], diff --git a/webapp/src/app/components/confirm-dialog/confirm-dialog.component.css b/webapp/src/app/components/confirm-dialog/confirm-dialog.component.css new file mode 100644 index 0000000..e69de29 diff --git a/webapp/src/app/components/confirm-dialog/confirm-dialog.component.html b/webapp/src/app/components/confirm-dialog/confirm-dialog.component.html new file mode 100644 index 0000000..b3991e7 --- /dev/null +++ b/webapp/src/app/components/confirm-dialog/confirm-dialog.component.html @@ -0,0 +1,6 @@ +

{{data.title}}

+
{{data.content}}
+
+ + +
diff --git a/webapp/src/app/components/confirm-dialog/confirm-dialog.component.spec.ts b/webapp/src/app/components/confirm-dialog/confirm-dialog.component.spec.ts new file mode 100644 index 0000000..fe08dc5 --- /dev/null +++ b/webapp/src/app/components/confirm-dialog/confirm-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ConfirmDialogComponent } from './confirm-dialog.component'; + +describe('ConfirmDialogComponent', () => { + let component: ConfirmDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ConfirmDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ConfirmDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/webapp/src/app/components/confirm-dialog/confirm-dialog.component.ts b/webapp/src/app/components/confirm-dialog/confirm-dialog.component.ts new file mode 100644 index 0000000..58b91c5 --- /dev/null +++ b/webapp/src/app/components/confirm-dialog/confirm-dialog.component.ts @@ -0,0 +1,29 @@ +import { Component, Inject } from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { ConfirmDialogData, ConfirmDialogResult } from './confirm-dialog.service'; + +@Component({ + selector: 'app-confirm-dialog', + templateUrl: './confirm-dialog.component.html', + styleUrls: ['./confirm-dialog.component.css'] +}) +export class ConfirmDialogComponent { + constructor( + @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData, + private dialogRef: MatDialogRef + ) {} + + abort() { + const result: ConfirmDialogResult = { + confirmed: false + }; + this.dialogRef.close(result); + } + + confirm() { + const result: ConfirmDialogResult = { + confirmed: true + }; + this.dialogRef.close(result); + } +} diff --git a/webapp/src/app/components/confirm-dialog/confirm-dialog.module.ts b/webapp/src/app/components/confirm-dialog/confirm-dialog.module.ts new file mode 100644 index 0000000..ac9ad87 --- /dev/null +++ b/webapp/src/app/components/confirm-dialog/confirm-dialog.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { ConfirmDialog } from './confirm-dialog.service'; +import { ConfirmDialogComponent } from './confirm-dialog.component'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatButtonModule } from '@angular/material/button'; + +@NgModule({ + imports: [MatDialogModule, MatButtonModule], + declarations: [ConfirmDialogComponent], + providers: [ConfirmDialog], + exports: [] +}) +export class ConfirmDialogModule {} diff --git a/webapp/src/app/components/confirm-dialog/confirm-dialog.service.ts b/webapp/src/app/components/confirm-dialog/confirm-dialog.service.ts new file mode 100644 index 0000000..036a147 --- /dev/null +++ b/webapp/src/app/components/confirm-dialog/confirm-dialog.service.ts @@ -0,0 +1,27 @@ +import { Injectable } from '@angular/core'; +import { MatDialog } from '@angular/material/dialog'; +import { Observable } from 'rxjs'; +import { ConfirmDialogComponent } from './confirm-dialog.component'; + +export type ConfirmDialogData = { + title: string; + content: string; + confirmLabel: string; + abortLabel: string; +}; + +export type ConfirmDialogResult = { + confirmed: boolean; +}; + +@Injectable({ + providedIn: 'root' +}) +export class ConfirmDialog { + constructor(private dialog: MatDialog) {} + + open(data: ConfirmDialogData): Observable { + const dialogRef = this.dialog.open(ConfirmDialogComponent, { data }); + return dialogRef.afterClosed(); + } +} diff --git a/webapp/src/app/pages/expedition/components/expedition-table/expedition-table.component.ts b/webapp/src/app/pages/expedition/components/expedition-table/expedition-table.component.ts index eba3392..233156d 100644 --- a/webapp/src/app/pages/expedition/components/expedition-table/expedition-table.component.ts +++ b/webapp/src/app/pages/expedition/components/expedition-table/expedition-table.component.ts @@ -12,9 +12,11 @@ import { } from '../../../../components/character-detail/character-detail.component'; import { UserService } from '../../../../services/user/user.service'; import { Observable, of } from 'rxjs'; -import { first, map } from 'rxjs/operators'; +import { first, map, mergeMap } from 'rxjs/operators'; import { ExpeditionJoinComponent, ExpeditionJoinDialogData } from '../expedition-join/expedition-join.component'; import { SnackbarService } from '../../../../services/snackbar/snackbar.service'; +import { ConfirmDialog } from '../../../../components/confirm-dialog/confirm-dialog.service'; +import { TranslateService } from '@ngx-translate/core'; export type Slot = { open: boolean; @@ -37,7 +39,9 @@ export class ExpeditionTableComponent implements OnInit, AfterViewInit { private expeditionService: ExpeditionService, private dialog: MatDialog, private userService: UserService, - private snackbarService: SnackbarService + private snackbarService: SnackbarService, + private confirmDialog: ConfirmDialog, + private translateService: TranslateService ) {} ngOnInit(): void { @@ -59,6 +63,13 @@ export class ExpeditionTableComponent implements OnInit, AfterViewInit { return moment.utc(date).local().format('YYYY-MM-DDTHH:mm:00'); } + formatDateLocal(date: string): string { + return moment + .utc(date) + .local() + .format(`${moment.localeData().longDateFormat('LL')} ${moment.localeData().longDateFormat('LT')}`); + } + countTuningOrbs(expedition: Expedition): number { return expedition.participants.reduce( (previousValue, currentValue) => previousValue + +currentValue.hasTuningOrb, @@ -167,7 +178,24 @@ export class ExpeditionTableComponent implements OnInit, AfterViewInit { } delete(expedition: Expedition) { - this.expeditionService.deleteExpedition(expedition.id); + this.translateService + .get(`EXPEDITION.${expedition.name}`) + .pipe( + mergeMap((name) => { + return this.confirmDialog.open({ + title: 'Delete Expedition', + content: `${name} - ${expedition.owner.characterName} - ${this.formatDateLocal(expedition.beginDateTime)}`, + abortLabel: 'Abort', + confirmLabel: 'Delete' + }); + }) + ) + + .subscribe((result) => { + if (result.confirmed) { + this.expeditionService.deleteExpedition(expedition.id); + } + }); } isOwner(expedition: Expedition): Observable {