From c8d439f0197615324f2596640cda3b9a7cc0f6db Mon Sep 17 00:00:00 2001
From: Cathy Hu <cathy.hu@fau.de>
Date: Tue, 1 Sep 2020 16:15:24 +0200
Subject: [PATCH] [frontend] Add warning dialog to telegram delete
---
.../telegram-settings.component.ts | 23 ++++++++++++++----
.../src/app/shared/shared.module.ts | 3 ++-
.../yes-no-dialog.component.html | 8 +++++++
.../yes-no-dialog.component.scss | 0
.../yes-no-dialog.component.spec.ts | 24 +++++++++++++++++++
.../yes-no-dialog/yes-no-dialog.component.ts | 13 ++++++++++
6 files changed, 65 insertions(+), 6 deletions(-)
create mode 100644 kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.html
create mode 100644 kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.scss
create mode 100644 kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.spec.ts
create mode 100644 kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.ts
diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.ts b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.ts
index 2b8ba1b..f806d1f 100644
--- a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.ts
+++ b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.ts
@@ -4,6 +4,7 @@ import { Observer, Observable } from 'rxjs';
import { TelegramInfoDialogComponent } from '../telegram-info-dialog/telegram-info-dialog.component';
import { MatDialog } from '@angular/material/dialog';
import { TelegramDialogComponent } from '../telegram-dialog/telegram-dialog.component';
+import { YesNoDialogComponent } from 'src/app/shared/yes-no-dialog/yes-no-dialog.component';
@Component({
selector: 'app-telegram-settings',
@@ -32,11 +33,23 @@ export class TelegramSettingsComponent implements OnInit {
}
onDelete(telegramId) {
- this.telegramService
- .deleteTelegram(telegramId, this.hoodId)
- .subscribe(() => {
- this.reload();
- });
+ const dialogRef = this.dialog.open(YesNoDialogComponent, {
+ data: {
+ title: 'Warning',
+ content:
+ 'This will also delete the list of subscribers of the telegram bot.',
+ },
+ });
+
+ dialogRef.afterClosed().subscribe((response) => {
+ if (response) {
+ this.telegramService
+ .deleteTelegram(telegramId, this.hoodId)
+ .subscribe(() => {
+ this.reload();
+ });
+ }
+ });
}
onCreate() {
diff --git a/kibicara-frontend/src/app/shared/shared.module.ts b/kibicara-frontend/src/app/shared/shared.module.ts
index b1c4786..5ea0155 100644
--- a/kibicara-frontend/src/app/shared/shared.module.ts
+++ b/kibicara-frontend/src/app/shared/shared.module.ts
@@ -6,9 +6,10 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
+import { YesNoDialogComponent } from './yes-no-dialog/yes-no-dialog.component';
@NgModule({
- declarations: [ToolbarComponent, NotFoundComponent],
+ declarations: [ToolbarComponent, NotFoundComponent, YesNoDialogComponent],
imports: [
MaterialModule,
ReactiveFormsModule,
diff --git a/kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.html b/kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.html
new file mode 100644
index 0000000..0cec175
--- /dev/null
+++ b/kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.html
@@ -0,0 +1,8 @@
+<h2 mat-dialog-title>{{ data.title }}</h2>
+<mat-dialog-content>{{ data.content }}</mat-dialog-content>
+<mat-dialog-actions align="end">
+ <button mat-button mat-dialog-close>Back</button>
+ <button mat-button [mat-dialog-close]="true" cdkFocusInitial>
+ I understand, delete
+ </button>
+</mat-dialog-actions>
diff --git a/kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.scss b/kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.spec.ts b/kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.spec.ts
new file mode 100644
index 0000000..a6722e2
--- /dev/null
+++ b/kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { YesNoDialogComponent } from './yes-no-dialog.component';
+
+describe('YesNoDialogComponent', () => {
+ let component: YesNoDialogComponent;
+ let fixture: ComponentFixture<YesNoDialogComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [YesNoDialogComponent],
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(YesNoDialogComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.ts b/kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.ts
new file mode 100644
index 0000000..18e9513
--- /dev/null
+++ b/kibicara-frontend/src/app/shared/yes-no-dialog/yes-no-dialog.component.ts
@@ -0,0 +1,13 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+ selector: 'app-yes-no-dialog',
+ templateUrl: './yes-no-dialog.component.html',
+ styleUrls: ['./yes-no-dialog.component.scss'],
+})
+export class YesNoDialogComponent implements OnInit {
+ constructor(@Inject(MAT_DIALOG_DATA) public data) {}
+
+ ngOnInit(): void {}
+}