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 {