Merge branch '567-fiche-structure-mis-a-jour-v2' into 'dev'

Resolve "[Fiche structure] - Mis à jour v2"

See merge request !860

src/app/app.component.ts

@@ -91,5 +91,10 @@ export class AppComponent implements OnInit {
 
   public onScroll(event): void {
     this.windowScrollService.scrollY.next(event.target.scrollTop);
+
+    // Check if scrolled to bottom: visible height + pixel scrolled >= total height
+    if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight) {
+      this.windowScrollService.scrolledToBottom = true;
+    }
   }
 }

src/app/profile/profile-routing.module.ts

@@ -50,6 +50,7 @@ const routes: Routes = [
     path: 'edition-structure/:permalink',
     component: StructureEditionSummaryComponent,
     canActivate: [RoleGuard],
+    canDeactivate: [DeactivateGuard],
     data: { allowedRoles: [RouteRole.structureAdmin] },
     resolve: {
       structure: StructureResolver,

src/app/profile/structure-edition-summary/structure-edition-summary.component.html

@@ -8,7 +8,11 @@
       <h2>
         {{ structure.structureName }}
       </h2>
-      <p *ngIf="isUpdateStructure">
+    </div>
+
+    <div *ngIf="isUpdateStructure" class="info">
+      <app-svg-icon [iconClass]="'icon-16'" [folder]="'form'" [icon]="'info'" />
+      <p>
         La dernière modification de votre structure remonte à plus de 6 mois, merci de vérifier les données et de les
         valider
       </p>
@@ -770,6 +774,7 @@
           [iconName]="'edit'"
           [size]="'small'"
           (action)="goToEdit(structureFormStep.structureConsent)"
+          (keydown)="onLastButtonKeydown($event)"
         />
         <app-icon-button
           ariaLabel="Modifier le partage de données sur data.grandlyon.com"
@@ -777,6 +782,7 @@
           [variant]="'secondary'"
           [iconName]="'edit'"
           (action)="goToEdit(structureFormStep.structureConsent)"
+          (keydown)="onLastButtonKeydown($event)"
         />
       </div>
       <div class="content">
@@ -785,24 +791,29 @@
     </section>
   </div>
   <div class="footer">
-    <ng-container *ngIf="isUpdateStructure">
-      <p *ngIf="!isFormValid()" class="warning">
-        Vous pourrez valider après avoir renseigné l’intégralité des champs obligatoires.
-      </p>
-      <div class="buttons">
-        <app-button [variant]="'secondary'" [label]="'Retour'" (action)="goBack()" />
-        <app-button
-          [variant]="'primary'"
-          [label]="'Valider'"
-          [disabled]="!isFormValid()"
-          (action)="updateStructureUpdateDate()"
-        />
-      </div>
-    </ng-container>
-    <ng-container *ngIf="!isUpdateStructure">
-      <div class="buttons">
-        <app-button [variant]="'secondary'" [label]="'Retour'" (action)="goBack()" />
-      </div>
-    </ng-container>
+    <div class="buttons">
+      <app-button [variant]="'secondary'" [label]="'Retour'" (action)="goBack()" />
+      <app-button
+        *ngIf="isUpdateStructure"
+        [variant]="'primary'"
+        [label]="'Valider'"
+        [disabled]="!isFormValid()"
+        (action)="updateStructureUpdateDate()"
+      />
+    </div>
   </div>
 </div>
+
+<!-- Structure update is pending, confirm leaving -->
+<app-modal
+  validateLabel="Vérifier"
+  cancelLabel="Plus tard"
+  [title]="'Mise à jour'"
+  [opened]="updateModal"
+  (closed)="hasRedirectionAccepted($event ? true : false)"
+>
+  <p class="modalContent emphasized">
+    Merci de vérifier l'ensemble des informations, puis de valider afin de réinitialiser la date de mise à jour de la
+    fiche
+  </p>
+</app-modal>

src/app/profile/structure-edition-summary/structure-edition-summary.component.scss

@@ -30,9 +30,11 @@
         @include font-bold-24;
         color: $red;
       }
-      p {
-        color: $grey-4-5-1;
-      }
+    }
+
+    .info {
+      display: flex;
+      gap: 4px;
     }
 
     section {
@@ -108,10 +110,6 @@
     margin: auto;
     max-width: 980px;
     width: 100%;
-    p.warning {
-      color: $orange-warning;
-      margin: 1rem;
-    }
     .buttons {
       display: flex;
       justify-content: center;

src/app/profile/structure-edition-summary/structure-edition-summary.component.ts

@@ -10,6 +10,7 @@ import { Structure } from '../../models/structure.model';
 import { NotificationService } from '../../services/notification.service';
 import { StructureService } from '../../services/structure.service';
 import { CategoryEnum } from '../../shared/enum/category.enum';
+import { WindowScrollService } from '../../shared/service/windowScroll.service';
 import { AccessModality } from '../../structure-list/enum/access-modality.enum';
 import { Equipment } from '../../structure-list/enum/equipment.enum';
 import { Category } from '../../structure-list/models/category.model';
@@ -47,6 +48,11 @@ export class StructureEditionSummaryComponent implements OnInit {
   public mailHref: string;
   // set to true when last updated date of a structure is > 6 months
   public isUpdateStructure = false;
+  private isGoToEdit = false;
+
+  /** Modal canExit var */
+  public updateModal = false;
+  private resolve: Function;
 
   constructor(
     public profileService: ProfileService,
@@ -54,6 +60,7 @@ export class StructureEditionSummaryComponent implements OnInit {
     private notificationService: NotificationService,
     private route: ActivatedRoute,
     private structureService: StructureService,
+    private windowScrollService: WindowScrollService,
     public utils: Utils,
     public router: Router,
   ) {}
@@ -61,6 +68,7 @@ export class StructureEditionSummaryComponent implements OnInit {
   // There is a non-blocking error in console when open edit mode that occurs only in development mode, please refer https://angular.io/errors/NG0100 for more info
 
   ngOnInit(): void {
+    this.windowScrollService.scrolledToBottom = false;
     this.route.data.subscribe((data) => {
       if (data.structure) {
         this.structure = new Structure(data.structure);
@@ -100,18 +108,50 @@ export class StructureEditionSummaryComponent implements OnInit {
   }
 
   public goToEdit(step: structureFormStep): void {
+    this.isGoToEdit = true;
     this.router.navigate(['/formulaire/structure', this.structure.permalink, structureFormStep[step]]);
   }
 
+  public canExit(): Promise<boolean> {
+    if (this.isUpdateStructure && !this.isGoToEdit) {
+      return new Promise((resolve) => this.showUpdateModal(resolve));
+    }
+  }
+  private showUpdateModal(resolve: Function): void {
+    this.updateModal = true;
+    this.resolve = resolve;
+  }
+
+  public hasRedirectionAccepted(hasAccept: boolean): void {
+    // !hasAccept to invert usual modal confirmation logic (here stay on page if user validates modal, and quit if user cancels)
+    this.resolve(!hasAccept);
+    this.updateModal = false;
+  }
+
   public isFormValid(): boolean {
     for (const field in this.structure) {
       if (!['_id', 'numero', 'createdAt', 'updatedAt'].includes(field)) {
         if (this.structureForm.get(field)?.valid === false) return false;
       }
     }
+    // For structure not updated for 6 months, validation button is disabled until user scrolls to bottom
+    if (this.isUpdateStructure && !this.windowScrollService.scrolledToBottom) {
+      return false;
+    }
     return true;
   }
 
+  public onLastButtonKeydown(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+      case 'Tab':
+        // For keyboard navigation, at the last button of the page, we consider the user reached the bottom of the page
+        this.windowScrollService.scrolledToBottom = true;
+        break;
+    }
+  }
+
   public updateStructureUpdateDate(): void {
     this.structureService.editStructure({}, this.structure._id).subscribe(() => {
       this.notificationService.showSuccess('La structure a bien été mise à jour.');
@@ -187,6 +227,7 @@ export class StructureEditionSummaryComponent implements OnInit {
   }
 
   public goToManageMembers(): void {
+    this.isGoToEdit = true;
     this.router.navigate([`/profil/gestion-membres/${this.structure.permalink}`]);
   }
 }

src/app/shared/service/windowScroll.service.ts

@@ -9,6 +9,7 @@ export class WindowScrollService {
   scrollY$ = this.scrollY.asObservable();
 
   scrollYToPreserve = new BehaviorSubject(null);
+  scrolledToBottom = false;
 
   public updateScrollY(value: Event): void {
     this.scrollY.next(value);