Add dialog for confirmation before save

frontend/src/app/app.module.ts

@@ -28,30 +28,33 @@ import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import { EditierenComponent } from './component/einstellungen/editieren/editieren.component';
 import {MaterialFileInputModule} from 'ngx-material-file-input';
+import { DialogComponent } from './component/dialog/dialog.component';
+import {MatDialogModule} from '@angular/material/dialog';
 
 @NgModule({
   declarations: [LandingComponent, LoginComponent, NavigationComponent,
-    TweetsComponent, EinstellungenComponent, EditierenComponent],
-    imports: [
-        ReactiveFormsModule,
-        BrowserModule,
-        BrowserAnimationsModule,
-        AppRoutingModule,
-        LoggerModule.forRoot({level: environment.log_level, serverLogLevel: NgxLoggerLevel.ERROR}),
-        HttpClientModule,
-        MatFormFieldModule,
-        FormsModule,
-        MatButtonModule,
-        MatInputModule,
-        MatSlideToggleModule,
-        MatSliderModule,
-        MatToolbarModule,
-        MatIconModule,
-        MatMenuModule,
-        MatSnackBarModule,
-        MatCheckboxModule,
-        MaterialFileInputModule
-    ],
+    TweetsComponent, EinstellungenComponent, EditierenComponent, DialogComponent],
+  imports: [
+    ReactiveFormsModule,
+    BrowserModule,
+    BrowserAnimationsModule,
+    AppRoutingModule,
+    LoggerModule.forRoot({level: environment.log_level, serverLogLevel: NgxLoggerLevel.ERROR}),
+    HttpClientModule,
+    MatFormFieldModule,
+    FormsModule,
+    MatButtonModule,
+    MatInputModule,
+    MatSlideToggleModule,
+    MatSliderModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatMenuModule,
+    MatSnackBarModule,
+    MatCheckboxModule,
+    MaterialFileInputModule,
+    MatDialogModule
+  ],
   // enables injecting
   providers: [
     AuthService,

frontend/src/app/component/dialog/dialog.component.html

@@ -0,0 +1,8 @@
+<h1 mat-dialog-title>{{data.title}}</h1>
+<mat-dialog-content class="mat-typography">
+  <p>{{data.body}}</p>
+</mat-dialog-content>
+<mat-dialog-actions mat-dialog-actions align="end">
+  <button mat-raised-button color="primary" [mat-dialog-close]="true">{{data.confirm}}</button>
+  <button *ngIf="data.hideAbort === false" mat-raised-button mat-dialog-close color="warn">{{data.abort}}</button>
+</mat-dialog-actions>

frontend/src/app/component/dialog/dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogComponent } from './dialog.component';
+
+describe('DialogComponent', () => {
+  let component: DialogComponent;
+  let fixture: ComponentFixture<DialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/component/dialog/dialog.component.ts

@@ -0,0 +1,24 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+
+export interface DialogData {
+  title: string;
+  body: string;
+  abort: string;
+  confirm: string;
+  hideAbort: boolean;
+}
+
+@Component({
+  selector: 'app-dialog',
+  templateUrl: './dialog.component.html',
+  styleUrls: ['./dialog.component.css']
+})
+export class DialogComponent implements OnInit {
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/component/einstellungen/editieren/editieren.component.html

@@ -33,7 +33,7 @@
       </div>
       <div class="input-row margin-auto einstellungen_buttons_wrapper">
         <button routerLink="/einstellungen" mat-raised-button>Abbrechen</button>
-        <button mat-raised-button (click)="saveFeed(feedForm.value)" [disabled]="feedForm.invalid">
+        <button mat-raised-button (click)="saveDialog(feedForm.value)" [disabled]="feedForm.invalid">
           <mat-icon>save</mat-icon>
           Speichern
         </button>

frontend/src/app/component/einstellungen/editieren/editieren.component.ts

@@ -8,6 +8,8 @@ import {throwError} from 'rxjs';
 import {NGXLogger} from 'ngx-logger';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {isElementScrolledOutsideView} from '@angular/cdk/overlay/position/scroll-clip';
+import {DialogComponent} from '../../dialog/dialog.component';
+import {MatDialog} from '@angular/material/dialog';
 
 @Component({
   selector: 'app-editieren',
@@ -31,7 +33,8 @@ export class EditierenComponent implements OnInit {
               private formBuilder: FormBuilder,
               private http: HttpClient,
               private _snackbar: MatSnackBar,
-              private _logger: NGXLogger) {
+              private _logger: NGXLogger,
+              private _dialog: MatDialog) {
     this.route.paramMap.subscribe(paramMap => {
       this.id = paramMap.get('id');
       if (this.id) {
@@ -50,7 +53,7 @@ export class EditierenComponent implements OnInit {
     });
   }
 
-  loadFeed(id) {
+  public loadFeed(id) {
     this.http.get('http://127.0.0.1:8000/feeds/' + id + '/').subscribe(
       (data: any) => {
         this._logger.debug('Data: ' + JSON.stringify(data));
@@ -71,7 +74,7 @@ export class EditierenComponent implements OnInit {
     );
   }
 
-  saveFeed(feedData) {
+  public saveFeed(feedData) {
     const form: FormData = new FormData();
     form.append('url', feedData.url);
     form.append('active', feedData.active);
@@ -105,4 +108,25 @@ export class EditierenComponent implements OnInit {
       );
     }
   }
+
+  public saveDialog(feedData) {
+    const dialogRef = this._dialog.open(DialogComponent, {
+      data: {
+        title: 'Neuen Feed erstellen',
+        body: 'Neuen Feed erstellen?',
+        abort: 'Abbrechen',
+        confirm: 'OK',
+        hideAbort: false
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(
+      data => {
+        if (data === true) {
+          // Confirm button was clicked
+          this.saveFeed(feedData);
+        }
+      }
+    );
+  }
 }