save dialog

src/app/modules/songs/song/edit/edit-song.guard.spec.ts

@@ -0,0 +1,16 @@
+import {TestBed} from '@angular/core/testing';
+
+import {EditSongGuard} from './edit-song.guard';
+
+describe('EditSongGuard', () => {
+  let guard: EditSongGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(EditSongGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

src/app/modules/songs/song/edit/edit-song.guard.ts

@@ -0,0 +1,19 @@
+import {Injectable} from '@angular/core';
+import {ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot, UrlTree} from '@angular/router';
+import {Observable} from 'rxjs';
+import {EditComponent} from './edit.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EditSongGuard implements CanDeactivate<unknown> {
+  canDeactivate(
+    component: EditComponent,
+    currentRoute: ActivatedRouteSnapshot,
+    currentState: RouterStateSnapshot,
+    nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+
+    return component.editSongComponent.askForSave(nextState);
+  }
+
+}

src/app/modules/songs/song/edit/edit-song/edit-song.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {Song} from '../../../services/song';
 import {FormGroup} from '@angular/forms';
-import {ActivatedRoute, Router} from '@angular/router';
+import {ActivatedRoute, Router, RouterStateSnapshot} from '@angular/router';
 import {SongService} from '../../../services/song.service';
 import {EditService} from '../edit.service';
 import {first, map, switchMap} from 'rxjs/operators';
@@ -11,6 +11,8 @@ import {MatChipInputEvent} from '@angular/material/chips';
 import {faTimesCircle} from '@fortawesome/free-solid-svg-icons/faTimesCircle';
 import {faSave} from '@fortawesome/free-solid-svg-icons/faSave';
 import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons/faExternalLinkAlt';
+import {MatDialog} from '@angular/material/dialog';
+import {SaveDialogComponent} from './save-dialog/save-dialog.component';
 
 @Component({
   selector: 'app-edit-song',
@@ -35,7 +37,8 @@ export class EditSongComponent implements OnInit {
     private activatedRoute: ActivatedRoute,
     private songService: SongService,
     private editService: EditService,
-    private router: Router
+    private router: Router,
+    public dialog: MatDialog
   ) {
   }
 
@@ -84,4 +87,29 @@ export class EditSongComponent implements OnInit {
 
     this.flags = flagArray.split(';').filter(_ => !!_);
   }
+
+  public askForSave(nextState?: RouterStateSnapshot): boolean {
+    if (!this.form.dirty) return true;
+
+    const dialogRef = this.dialog.open(SaveDialogComponent, {
+      width: '350px'
+    });
+
+    dialogRef.afterClosed().subscribe((save: boolean) => {
+      this.onSaveDialogAfterClosed(save, nextState.url).then();
+    });
+
+    return false;
+  }
+
+  private async onSaveDialogAfterClosed(save: boolean, url: string) {
+    if (save) {
+      const data = this.form.value;
+      await this.songService.update$(this.song.id, data);
+    }
+
+    this.form.markAsPristine();
+    await this.router.navigateByUrl(url);
+  }
+
 }

src/app/modules/songs/song/edit/edit-song/save-dialog/save-dialog.component.html

@@ -0,0 +1,8 @@
+<h1 mat-dialog-title>Änderungen erkant</h1>
+<div mat-dialog-content>
+  <p>An dem Lied wurden Änderungen vorgenommen.</p>
+</div>
+<div mat-dialog-actions>
+  <button [mat-dialog-close]="false" mat-button>Änderungen verwerfen</button>
+  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>Speichern</button>
+</div>

src/app/modules/songs/song/edit/edit-song/save-dialog/save-dialog.component.less

@@ -0,0 +1,3 @@
+.mat-dialog-actions {
+  justify-content: center;
+}

src/app/modules/songs/song/edit/edit-song/save-dialog/save-dialog.component.spec.ts

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

src/app/modules/songs/song/edit/edit-song/save-dialog/save-dialog.component.ts

@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-save-dialog',
+  templateUrl: './save-dialog.component.html',
+  styleUrls: ['./save-dialog.component.less']
+})
+export class SaveDialogComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/modules/songs/song/edit/edit.component.ts

@@ -1,4 +1,5 @@
-import {Component} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
+import {EditSongComponent} from './edit-song/edit-song.component';
 
 @Component({
   selector: 'app-edit',
@@ -6,5 +7,5 @@ import {Component} from '@angular/core';
   styleUrls: ['./edit.component.less']
 })
 export class EditComponent {
-
+  @ViewChild(EditSongComponent) public editSongComponent: EditSongComponent;
 }

src/app/modules/songs/song/edit/edit.module.ts

@@ -22,11 +22,14 @@ import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {StatusTranslaterModule} from '../../../../widget-modules/pipes/status-translater/status-translater.module';
 import {ButtonModule} from '../../../../widget-modules/components/button/button.module';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {SaveDialogComponent} from './edit-song/save-dialog/save-dialog.component';
+import {MatDialogModule} from '@angular/material/dialog';
 
 
 @NgModule({
-  declarations: [EditComponent, EditSongComponent, EditFileComponent, FileComponent],
+  declarations: [EditComponent, EditSongComponent, EditFileComponent, FileComponent, SaveDialogComponent],
   exports: [EditComponent],
+  bootstrap: [SaveDialogComponent],
   imports: [
     CommonModule,
     CardModule,
@@ -49,6 +52,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
     StatusTranslaterModule,
     ButtonModule,
     MatTooltipModule,
+    MatDialogModule,
 
   ]
 })

src/app/modules/songs/songs-routing.module.ts

@@ -4,6 +4,7 @@ import {SongComponent} from './song/song.component';
 import {SongListComponent} from './song-list/song-list.component';
 import {EditComponent} from './song/edit/edit.component';
 import {NewComponent} from './song/new/new.component';
+import {EditSongGuard} from './song/edit/edit-song.guard';
 
 
 const routes: Routes = [
@@ -18,7 +19,8 @@ const routes: Routes = [
   },
   {
     path: ':songId/edit',
-    component: EditComponent
+    component: EditComponent,
+    canDeactivate: [EditSongGuard]
   },
   {
     path: ':songId',