Merge pull request #38 from cbartel/develop

feat: expedition delete confirm dialog

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],

webapp/src/app/components/confirm-dialog/confirm-dialog.component.html

@@ -0,0 +1,6 @@
+<h1 mat-dialog-title>{{data.title}}</h1>
+<div mat-dialog-content>{{data.content}}</div>
+<div mat-dialog-actions>
+  <button mat-raised-button (click)='abort()'>{{data.abortLabel}}</button>
+  <button mat-raised-button color='warn' (click)='confirm()'>{{data.confirmLabel}}</button>
+</div>

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<ConfirmDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConfirmDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<ConfirmDialogComponent>
+  ) {}
+
+  abort() {
+    const result: ConfirmDialogResult = {
+      confirmed: false
+    };
+    this.dialogRef.close(result);
+  }
+
+  confirm() {
+    const result: ConfirmDialogResult = {
+      confirmed: true
+    };
+    this.dialogRef.close(result);
+  }
+}

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 {}

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<ConfirmDialogResult> {
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, { data });
+    return dialogRef.afterClosed();
+  }
+}

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<boolean> {