fix(form) : fix redirection to structure detail + deactivate

src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import { PanelComponent } from './admin/components/panel/panel.component';
 import { FormComponent } from './form/form.component';
 import { AdminGuard } from './guards/admin.guard';
 import { AuthGuard } from './guards/auth.guard';
+import { DeactivateGuard } from './guards/deactivate.guard';
 import { HomeComponent } from './home/home.component';
 import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
 import { ProfileComponent } from './profile/profile.component';
@@ -69,6 +70,7 @@ const routes: Routes = [
   {
     path: 'create-structure',
     component: FormComponent,
+    canDeactivate: [DeactivateGuard],
   },
   {
     path: '**',

src/app/app.module.ts

@@ -29,6 +29,7 @@ import { ResetEmailComponent } from './reset-email/reset-email.component';
 import { ResetPasswordComponent } from './reset-password/reset-password.component';
 import { AdminModule } from './admin/admin.module';
 import { AdminGuard } from './guards/admin.guard';
+import { DeactivateGuard } from './guards/deactivate.guard';
 
 @NgModule({
   declarations: [
@@ -57,6 +58,7 @@ import { AdminGuard } from './guards/admin.guard';
     CustomBreakPointsProvider,
     AuthGuard,
     AdminGuard,
+    DeactivateGuard,
   ],
   bootstrap: [AppComponent],
 })

src/app/form/form.component.html

 <div class="form" fxLayout="column">
-  <div *ngIf="showModalExit" class="modalExitContainer">
-    <div class="modal">
-      <div class="contentModal" fxLayout="column" fxLayoutAlign="space-around center">
-        <h3>ATTENTION</h3>
-        <p>Il vous faudra de nouveau remplir le formulaire si vous quittez</p>
-        <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center">
-          <button class="btn leave" (click)="leaveForm(showModalExit)">Quitter</button>
-          <button class="btn" (click)="leaveForm(null)">Annuler</button>
-        </div>
-      </div>
-    </div>
+  <div *ngIf="showConfirmationModal">
+    <app-modal-confirmation (closeModalEvent)="hasRedirectionAccepted($event)"></app-modal-confirmation>
   </div>
   <app-menu-phone *ngIf="showMenu" (closeEvent)="closeMenu($event)"></app-menu-phone>
   <div class="header">
@@ -1006,7 +997,7 @@
       *ngIf="currentPage == nbPagesForm && profile"
       class="btn unique"
       routerLink="/home"
-      [routerLinkActive]="'active'"
+      [state]="{ data: createdStructure }"
     >
       Voir ma structure
     </button>

src/app/form/form.component.scss

@@ -461,51 +461,6 @@ img {
   margin-right: 12px;
 }
 
-.modalExitContainer {
-  width: 100%;
-  height: 100%;
-  z-index: $modal-confirmation-z-index;
-  position: absolute;
-  content: '';
-  top: 0;
-  background: rgba(0, 0, 0, 0.65);
-  .modal {
-    .contentModal {
-      width: 100%;
-      background: rgba(255, 255, 255, 1);
-      padding: 35px 20px 18px 20px;
-      h3 {
-        @include cn-bold-18;
-        color: $orange-warning;
-      }
-      p {
-        @include cn-bold-16;
-        color: $grey-1;
-        text-align: center;
-      }
-      .footerModal {
-        width: 100%;
-        margin-top: 14px;
-        @include cn-bold-16;
-        .btn {
-          width: 149px;
-          &.leave {
-            background: none;
-            color: $grey-1;
-            text-decoration: underline;
-          }
-        }
-      }
-    }
-    width: 350px;
-    margin: auto;
-    border-radius: 6px;
-    @include background-hash;
-    border: 1px solid $grey-4;
-    margin-top: 50vh;
-    transform: translateY(-50%);
-  }
-}
 .asterisk {
   color: $secondary-color;
 }

src/app/form/form.component.ts

-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { AbstractControl, FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Structure } from '../models/structure.model';
 import { Time } from '../models/time.model';
@@ -27,6 +27,8 @@ export class FormComponent implements OnInit {
   public profile: User;
   public structureForm: FormGroup;
 
+  public createdStructure: Structure;
+
   public labelsQualifications: Category;
   public publics: Category;
   public accessModality: Category;
@@ -50,7 +52,6 @@ export class FormComponent implements OnInit {
   public userAcceptSavedDate = false;
 
   public showMenu = false;
-  public showModalExit: string = null;
   //collapse var
   public showWebsite: boolean;
   public showSocialNetwork: boolean;
@@ -534,27 +535,31 @@ export class FormComponent implements OnInit {
   }
 
   private createStructure(structure: Structure, user: User): void {
-    this.structureService.createStructure(structure, user).subscribe(() => {
+    this.structureService.createStructure(structure, user).subscribe((structure) => {
       this.currentPage++;
+      this.createdStructure = structure;
     });
   }
   public toggleMenu(): void {
     this.showMenu = !this.showMenu;
   }
 
-  public leaveForm(route: string): void {
-    if (route) {
-      this.router.navigateByUrl(route);
-    } else {
-      this.showModalExit = null;
-    }
+  public closeMenu(): void {
+    this.showMenu = false;
   }
 
-  public closeMenu(route: string): void {
-    if (route) {
-      this.showModalExit = route;
-    } else {
-      this.showMenu = false;
-    }
+  public canExit(): Promise<boolean> {
+    return new Promise((resolve) => this.showModal(resolve));
+  }
+  public showConfirmationModal = false;
+  private resolve: Function;
+
+  private showModal(resolve: Function): void {
+    this.showConfirmationModal = true;
+    this.resolve = resolve;
+  }
+  public hasRedirectionAccepted(hasAccept: boolean): void {
+    this.resolve(hasAccept);
+    this.showConfirmationModal = false;
   }
 }

src/app/guards/deactivate.guard.ts

+import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot } from '@angular/router';
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+
+export interface IDeactivateComponent {
+  canExit: () => Observable<boolean> | Promise<boolean> | boolean;
+}
+
+/**
+ * Guard to confirm we are leaving. Otherwise stay at current route.
+ */
+@Injectable()
+export class DeactivateGuard implements CanDeactivate<Object> {
+  component: Object;
+  route: ActivatedRouteSnapshot;
+
+  constructor() {}
+
+  canDeactivate(
+    component: IDeactivateComponent,
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot,
+    nextState: RouterStateSnapshot
+  ): Observable<boolean> | Promise<boolean> | boolean {
+    return component.canExit();
+  }
+}

src/app/home/home.component.ts

@@ -7,6 +7,7 @@ import { StructureService } from '../services/structure.service';
 import { Filter } from '../structure-list/models/filter.model';
 import { GeoJson } from '../map/models/geojson.model';
 import { GeojsonService } from '../services/geojson.service';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-home',
@@ -32,6 +33,9 @@ export class HomeComponent implements OnInit {
     } else {
       this.getStructures(null);
     }
+    if (history.state.data) {
+      this.currentStructure = new Structure(history.state.data);
+    }
   }
 
   public getStructures(filters: Filter[]): void {

src/app/menu-phone/menu-phone.component.html

 <div class="containerMenu" fxLayout="row">
-  <div class="outside" (click)="closeMenu(null)"></div>
+  <div class="outside" (click)="closeMenu()"></div>
   <div class="contentMenu" fxLayout="column" fxLayoutAlign="space-between">
     <div>
       <div class="titleFilter" fxLayout="row" fxLayoutAlign="space-between">
         <span>Menu</span>
-        <div (click)="closeMenu(null)" class="ico-close-details"></div>
+        <div (click)="closeMenu()" class="ico-close-details"></div>
       </div>
       <div fxLayout="column" class="right-header" fxLayoutGap="3vw">
-        <a (click)="closeMenu('home')" i18n>Les acteurs</a>
+        <a routerLink="/home" [routerLinkActive]="'active'" i18n>Les acteurs</a>
         <!-- <a routerLink="/resources" [routerLinkActive]="'active'" i18n>Ressources</a>
         <a routerLink="/projects" [routerLinkActive]="'active'" i18n>Projets</a> -->
-        <a (click)="closeMenu('about')" i18n>Qui sommes-nous ?</a>
+        <a routerLink="/about" [routerLinkActive]="'active'" i18n>Qui sommes-nous ?</a>
 
         <a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'">Administration</a>
         <!--<a routerLink="/login" [routerLinkActive]="'active'" i18n><span class="clickable ico-mglass purple"></span></a>

src/app/menu-phone/menu-phone.component.ts

@@ -10,11 +10,11 @@ import { AuthService } from '../services/auth.service';
 export class MenuPhoneComponent implements OnInit {
   constructor(private authService: AuthService, private profileService: ProfileService) {}
 
-  @Output() closeEvent = new EventEmitter<string>();
+  @Output() closeEvent = new EventEmitter<any>();
   ngOnInit(): void {}
 
-  closeMenu(route: string): void {
-    this.closeEvent.emit(route);
+  closeMenu(): void {
+    this.closeEvent.emit();
   }
 
   public get isLoggedIn(): boolean {

src/app/profile/services/profile.service.ts

@@ -15,8 +15,7 @@ export class ProfileService {
   constructor(private http: HttpClient, private authService: AuthService) {}
 
   public async getProfile(): Promise<User> {
-    // Get profil by API only on first time
-    if (this.authService.isLoggedIn()) {
+    if (this.authService.isLoggedIn() && !this.currentProfile) {
       const profile = await this.http.get<User>(`${this.baseUrl}/profile`).toPromise();
       this.currentProfile = profile;
     }

src/app/shared/components/index.ts

@@ -12,6 +12,7 @@ import { CheckboxFormComponent } from './checkbox-form/checkbox-form.component';
 import { HourPickerComponent } from './hour-picker/hour-picker.component';
 import { CopyPasteComponent } from './hour-picker/copy-paste/copy-paste.component';
 import { RadioFormComponent } from './radio-form/radio-form.component';
+import { ModalConfirmationComponent } from './modal-confirmation/modal-confirmation.component';
 
 // tslint:disable-next-line: max-line-length
 export {
@@ -29,6 +30,7 @@ export {
   HourPickerComponent,
   CopyPasteComponent,
   RadioFormComponent,
+  ModalConfirmationComponent,
 };
 
 // tslint:disable-next-line:variable-name
@@ -47,4 +49,5 @@ export const SharedComponents = [
   HourPickerComponent,
   CopyPasteComponent,
   RadioFormComponent,
+  ModalConfirmationComponent,
 ];

src/app/shared/components/modal-confirmation/modal-confirmation.component.html

+<div class="modalExitContainer">
+  <div class="modal">
+    <div class="contentModal" fxLayout="column" fxLayoutAlign="space-around center">
+      <h3>ATTENTION</h3>
+      <p>Il vous faudra de nouveau remplir le formulaire si vous quittez</p>
+      <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center">
+        <button class="btn leave" (click)="onConfirm()">Quitter</button>
+        <button class="btn" (click)="onDismiss()">Annuler</button>
+      </div>
+    </div>
+  </div>
+</div>

src/app/shared/components/modal-confirmation/modal-confirmation.component.scss

+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/shapes';
+@import '../../../../assets/scss/z-index';
+
+.modalExitContainer {
+  width: 100%;
+  height: 100%;
+  z-index: $modal-confirmation-z-index;
+  position: absolute;
+  content: '';
+  top: 0;
+  background: rgba(0, 0, 0, 0.65);
+  .modal {
+    .contentModal {
+      width: 100%;
+      background: rgba(255, 255, 255, 1);
+      padding: 35px 20px 18px 20px;
+      h3 {
+        @include cn-bold-18;
+        color: $orange-warning;
+      }
+      p {
+        @include cn-bold-16;
+        color: $grey-1;
+        text-align: center;
+      }
+      .footerModal {
+        width: 100%;
+        margin-top: 14px;
+        @include cn-bold-16;
+        .btn {
+          background: $secondary-color;
+          border-radius: 4px;
+          outline: none;
+          cursor: pointer;
+          border: 0;
+          color: $white;
+          height: 40px;
+          @include btn-bold;
+          width: 149px;
+          &.leave {
+            background: none;
+            color: $grey-1;
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+    width: 350px;
+    margin: auto;
+    border-radius: 6px;
+    @include background-hash;
+    border: 1px solid $grey-4;
+    margin-top: 50vh;
+    transform: translateY(-50%);
+  }
+}

src/app/shared/components/modal-confirmation/modal-confirmation.component.spec.ts

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

src/app/shared/components/modal-confirmation/modal-confirmation.component.ts

+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'app-modal-confirmation',
+  templateUrl: './modal-confirmation.component.html',
+  styleUrls: ['./modal-confirmation.component.scss'],
+})
+export class ModalConfirmationComponent implements OnInit {
+  constructor() {}
+
+  @Output() closeModalEvent = new EventEmitter<boolean>();
+  ngOnInit(): void {}
+
+  onDismiss() {
+    this.closeModalEvent.emit(false);
+  }
+
+  onConfirm() {
+    this.closeModalEvent.emit(true);
+  }
+}

src/app/user-verification/user-verification.component.html

@@ -20,7 +20,7 @@
       </div>
     </div>
     <div class="btnSection">
-      <button class="btn" routerLink="/home" [routerLinkActive]="'active'">Voir ma structure</button>
+      <button class="btn" routerLink="/home" [state]="{ data: structure }">Voir ma structure</button>
     </div>
   </div>
   <p *ngIf="verificationIssue">