Small fixes and improvements

Author: Gid733

eform-client/src/app/app.declarations.ts

@@ -1,6 +1,6 @@
 import {DatePipe, LocationStrategy, PathLocationStrategy} from '@angular/common';
 import {ToastrService} from 'ngx-toastr';
-import {AdminGuard, AuthGuard} from 'src/app/common/guards';
+import {AdminGuard, AuthGuard, CanDeactivateGuard} from 'src/app/common/guards';
 import {EventBrokerService} from 'src/app/common/helpers';
 import {
   EntitySearchService,
@@ -21,6 +21,7 @@ export let providers = [
   // Guards
   AuthGuard,
   AdminGuard,
+  CanDeactivateGuard,
   // Libs services
   ToastrService,
   // Services

eform-client/src/app/common/guards/can-deactivate.guard.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import {CanDeactivate} from '@angular/router';
+import { Observable } from 'rxjs';
+
+export interface CanComponentDeactivate {
+  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
+}
+
+@Injectable()
+export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
+
+  canDeactivate(component: CanComponentDeactivate) {
+    return component.canDeactivate ? component.canDeactivate() : true;
+  }
+
+}

eform-client/src/app/common/guards/index.ts

@@ -1,2 +1,3 @@
 export * from './auth.guard';
 export * from './admin.guard';
+export * from './can-deactivate.guard';

eform-client/src/app/modules/cases/cases.module.ts

@@ -15,6 +15,7 @@ import {
   CaseEditElementComponent,
   CaseEditSwitchComponent,
   CasesTableComponent,
+  CaseEditConfirmationComponent,
   ElementAudioComponent,
   ElementCheckboxComponent,
   ElementCommentComponent, ElementContainerComponent,
@@ -49,6 +50,7 @@ import {
     CaseEditComponent,
     CaseEditSwitchComponent,
     CaseEditElementComponent,
+    CaseEditConfirmationComponent,
     ElementTextComponent,
     ElementNumberComponent,
     ElementCheckboxComponent,

eform-client/src/app/modules/cases/cases.routing.ts

@@ -1,5 +1,6 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
+import {CanDeactivateGuard} from 'src/app/common/guards';
 import {CaseEditComponent, CasesTableComponent} from 'src/app/modules/cases/components';
 
 const routes: Routes = [
@@ -11,6 +12,7 @@ const routes: Routes = [
   {
     path: 'edit/:id/:templateId',
     component: CaseEditComponent,
+    canDeactivate: [CanDeactivateGuard]
   }
 ];
 

eform-client/src/app/modules/cases/components/case-edit-confirmation/case-edit-confirmation.component.html

@@ -0,0 +1,21 @@
+<div mdbModal class="modal fade" #frame="mdbModal">
+  <div class="modal-dialog modal-md">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h3>{{ 'Do you want to leave this page' | translate }}?</h3>
+      </div>
+      <div class="modal-body">
+        <h4>{{'If you leave before saving your changes will be lost'}}.</h4>
+      </div>
+      <div class="modal-footer d-flex justify-content-center">
+        <button class="btn btn-success" (click)="confirmationClicked(true)">
+          {{ 'Save & Leave' | translate }}
+        </button>
+        <button class="btn btn-danger" (click)="confirmationClicked(false)">
+          {{ 'Leave' | translate }}
+        </button>
+        <button class="btn btn-accent text-black-50" (click)="frame.hide()">{{'Cancel' | translate}}</button>
+      </div>
+    </div>
+  </div>
+</div>

eform-client/src/app/modules/cases/components/case-edit-confirmation/case-edit-confirmation.component.scss

@@ -0,0 +1,26 @@
+import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+
+@Component({
+  selector: 'app-case-edit-confirmation',
+  templateUrl: './case-edit-confirmation.component.html',
+  styleUrls: ['./case-edit-confirmation.component.scss']
+})
+export class CaseEditConfirmationComponent implements OnInit {
+  @ViewChild('frame') frame;
+  @Output() onConfirmationPressed: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  show() {
+    this.frame.show();
+  }
+
+  confirmationClicked(keepData: boolean) {
+    this.onConfirmationPressed.emit(keepData);
+    this.frame.hide();
+  }
+
+}

eform-client/src/app/modules/cases/components/case-edit-confirmation/case-edit-confirmation.component.ts

@@ -36,3 +36,5 @@
 </div>
 
 <eform-spinner [spinnerVisibility]="spinnerStatus"></eform-spinner>
+
+<app-case-edit-confirmation (onConfirmationPressed)="confirmExit($event)" #caseConfirmation></app-case-edit-confirmation>

eform-client/src/app/modules/cases/components/case-edit/case-edit.component.html

@@ -1,5 +1,7 @@
-import {Component, OnInit, QueryList, ViewChildren} from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
+import {Component, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import {ActivatedRoute, NavigationStart, Router} from '@angular/router';
+import {RouteConfigLoadEnd} from '@angular/router';
+import {Subscription} from 'rxjs';
 import {CaseEditRequest, ReplyElement, ReplyRequest} from 'src/app/common/models/cases';
 import {TemplateDto} from 'src/app/common/models/dto';
 import {CasesService} from 'src/app/common/services/cases';
@@ -11,8 +13,10 @@ import {CaseEditElementComponent} from '../case-edit-element/case-edit-element.c
   templateUrl: './case-edit.component.html',
   styleUrls: ['./case-edit.component.scss']
 })
-export class CaseEditComponent implements OnInit {
+export class CaseEditComponent implements OnInit, OnDestroy {
   @ViewChildren(CaseEditElementComponent) editElements: QueryList<CaseEditElementComponent>;
+  @ViewChild('caseConfirmation') caseConfirmation;
+  activatedRouteSub: Subscription;
   id: number;
   templateId: number;
   currentTemplate: TemplateDto = new TemplateDto;
@@ -21,13 +25,15 @@ export class CaseEditComponent implements OnInit {
   requestModels: Array<CaseEditRequest> = [];
   replyRequest: ReplyRequest = new ReplyRequest();
 
+  isNoSaveExitAllowed = false;
+
   spinnerStatus = false;
 
   constructor(private activateRoute: ActivatedRoute,
               private casesService: CasesService,
               private eFormService: EFormService,
               private router: Router) {
-    this.activateRoute.params.subscribe(params => {
+    const activatedRouteSub = this.activateRoute.params.subscribe(params => {
       this.id = +params['id'];
       this.templateId = +params['templateId'];
     });
@@ -38,6 +44,10 @@ export class CaseEditComponent implements OnInit {
     this.loadTemplateInfo();
   }
 
+  ngOnDestroy() {
+
+  }
+
   loadCase() {
     if (!this.id || this.id == 0) {
       return;
@@ -63,6 +73,7 @@ export class CaseEditComponent implements OnInit {
       if (operation && operation.success) {
         this.replyElement = new ReplyElement();
         this.spinnerStatus = false;
+        this.isNoSaveExitAllowed = true;
         this.router.navigate(['/cases/', this.currentTemplate.id]).then();
       } this.spinnerStatus = false;
     });
@@ -85,4 +96,19 @@ export class CaseEditComponent implements OnInit {
     });
   }
 
+  confirmExit(keepData: boolean) {
+    if (keepData) {
+      this.saveCase();
+    } else {
+      this.isNoSaveExitAllowed = true;
+      this.router.navigate(['/cases/', this.currentTemplate.id]).then();
+    }
+  }
+
+  canDeactivate() {
+    if (!this.isNoSaveExitAllowed) {
+      return this.caseConfirmation.show();
+    }
+    return true;
+  }
 }