library: add can deactivate guard

A confirmation message is displayed if the user leaves the form without saving it. * Closes rero/rero-ils#2104. Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>
rero · Jun 19, 2023 · 888f25f · 888f25f
1 parent e563c53
commit 888f25f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/projects/admin/src/app/record/custom-editor/libraries/library.component.ts b/projects/admin/src/app/record/custom-editor/libraries/library.component.ts
@@ -22,7 +22,7 @@ import { UntypedFormArray, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CountryCodeTranslatePipe } from '@app/admin/pipe/country-code-translate.pipe';
 import { TranslateService } from '@ngx-translate/core';
-import { ApiService, cleanDictKeys, RecordService, removeEmptyValues, UniqueValidator } from '@rero/ng-core';
+import { AbstractCanDeactivateComponent, ApiService, CanDeactivateComponent, RecordService, UniqueValidator, cleanDictKeys, removeEmptyValues } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
 import { ToastrService } from 'ngx-toastr';
 import { Subscription } from 'rxjs';
@@ -35,7 +35,7 @@ import { LibraryFormService } from './library-form.service';
   templateUrl: './library.component.html',
   styleUrls: ['./library.component.scss']
 })
-export class LibraryComponent implements OnInit, OnDestroy {
+export class LibraryComponent extends AbstractCanDeactivateComponent implements OnInit, OnDestroy, CanDeactivateComponent {
 
   // COMPONENT ATTRIBUTES =====================================================
   /** The current library. */
@@ -52,6 +52,9 @@ export class LibraryComponent implements OnInit, OnDestroy {
   availableCommunicationLanguagesOptions = [];
   countryIsoCodesOptions = [];
 
+  /** Can deactivate guard */
+  public canDeactivate: boolean = false;
+
   /** Form build event subscription to release the memory. */
   private eventForm: Subscription;
 
@@ -102,7 +105,9 @@ export class LibraryComponent implements OnInit, OnDestroy {
     private translateService: TranslateService,
     private location: Location,
     private countryCodeTranslatePipe: CountryCodeTranslatePipe
-  ) { }
+  ) {
+    super();
+  }
 
   /** NgOnInit hook. */
   ngOnInit() {
@@ -150,6 +155,7 @@ export class LibraryComponent implements OnInit, OnDestroy {
 
   /** Form submission. */
   onSubmit() {
+    this.canDeactivate = true;
     this._cleanFormValues(this.libraryForm.getValues());
     this.library.update(this.libraryForm.getValues());
     if (this.library.pid) {
@@ -186,6 +192,7 @@ export class LibraryComponent implements OnInit, OnDestroy {
 
   /** Cancel the edition. */
   onCancel(event) {
+    this.canDeactivate = true;
     event.preventDefault();
     this.location.back();
     this.libraryForm.build();

diff --git a/projects/admin/src/app/routes/libraries-route.ts b/projects/admin/src/app/routes/libraries-route.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { DetailComponent, RecordSearchPageComponent, RouteInterface } from '@rero/ng-core';
+import { ComponentCanDeactivateGuard, DetailComponent, RecordSearchPageComponent, RouteInterface } from '@rero/ng-core';
 import { PERMISSIONS, PERMISSION_OPERATOR } from '@rero/shared';
 import { of } from 'rxjs';
 import { CanAccessGuard, CAN_ACCESS_ACTIONS } from '../guard/can-access.guard';
@@ -43,8 +43,8 @@ export class LibrariesRoute extends BaseRoute implements RouteInterface {
       children: [
         { path: '', component: RecordSearchPageComponent, canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.LIB_ACCESS, PERMISSIONS.LIB_SEARCH ], operator: PERMISSION_OPERATOR.AND } },
         { path: 'detail/:pid', component: DetailComponent, canActivate: [ CanAccessGuard ], data: { action: CAN_ACCESS_ACTIONS.READ } },
-        { path: 'edit/:pid', component: LibraryComponent, canActivate: [ CanAccessGuard ], data: { action: CAN_ACCESS_ACTIONS.UPDATE } },
-        { path: 'new', component: LibraryComponent, canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.LIB_CREATE ] } }
+        { path: 'edit/:pid', component: LibraryComponent, canActivate: [ CanAccessGuard ], canDeactivate: [ ComponentCanDeactivateGuard], data: { action: CAN_ACCESS_ACTIONS.UPDATE } },
+        { path: 'new', component: LibraryComponent, canActivate: [ PermissionGuard ], canDeactivate: [ ComponentCanDeactivateGuard], data: { permissions: [ PERMISSIONS.LIB_CREATE ] } }
       ],
       data: {
         types: [