From 506f33336ad05ac137b39bc25688634f7292e162 Mon Sep 17 00:00:00 2001 From: Tobias Eidelpes Date: Mon, 3 May 2021 12:27:32 +0200 Subject: [PATCH] Add dialog for confirmation before save --- frontend/src/app/app.module.ts | 45 ++++++++++--------- .../app/component/dialog/dialog.component.css | 0 .../component/dialog/dialog.component.html | 8 ++++ .../component/dialog/dialog.component.spec.ts | 25 +++++++++++ .../app/component/dialog/dialog.component.ts | 24 ++++++++++ .../editieren/editieren.component.html | 2 +- .../editieren/editieren.component.ts | 30 +++++++++++-- 7 files changed, 109 insertions(+), 25 deletions(-) create mode 100644 frontend/src/app/component/dialog/dialog.component.css create mode 100644 frontend/src/app/component/dialog/dialog.component.html create mode 100644 frontend/src/app/component/dialog/dialog.component.spec.ts create mode 100644 frontend/src/app/component/dialog/dialog.component.ts diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 33d2221..e3e2fee 100644 --- a/frontend/src/app/app.module.ts +++ b/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, diff --git a/frontend/src/app/component/dialog/dialog.component.css b/frontend/src/app/component/dialog/dialog.component.css new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/app/component/dialog/dialog.component.html b/frontend/src/app/component/dialog/dialog.component.html new file mode 100644 index 0000000..713c72a --- /dev/null +++ b/frontend/src/app/component/dialog/dialog.component.html @@ -0,0 +1,8 @@ +

{{data.title}}

+ +

{{data.body}}

+ + + + + diff --git a/frontend/src/app/component/dialog/dialog.component.spec.ts b/frontend/src/app/component/dialog/dialog.component.spec.ts new file mode 100644 index 0000000..a6bce8d --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/component/dialog/dialog.component.ts b/frontend/src/app/component/dialog/dialog.component.ts new file mode 100644 index 0000000..63eafe7 --- /dev/null +++ b/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 { + } + +} diff --git a/frontend/src/app/component/einstellungen/editieren/editieren.component.html b/frontend/src/app/component/einstellungen/editieren/editieren.component.html index 031abca..50d1aa4 100644 --- a/frontend/src/app/component/einstellungen/editieren/editieren.component.html +++ b/frontend/src/app/component/einstellungen/editieren/editieren.component.html @@ -33,7 +33,7 @@
- diff --git a/frontend/src/app/component/einstellungen/editieren/editieren.component.ts b/frontend/src/app/component/einstellungen/editieren/editieren.component.ts index 919748a..8a5372c 100644 --- a/frontend/src/app/component/einstellungen/editieren/editieren.component.ts +++ b/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); + } + } + ); + } }