From cdb9a92b09dd80a5f65237bad708e3b9ac96ac77 Mon Sep 17 00:00:00 2001
From: Pierre Ecarlat <pecarlat@grandlyon.com>
Date: Tue, 12 Mar 2024 13:31:00 +0000
Subject: [PATCH] fix(Mon Compte): Update cancel button when editing profile
---
src/app/profile/edit/edit.component.html | 37 +++++++++-----
src/app/profile/edit/edit.component.scss | 12 -----
src/app/profile/edit/edit.component.ts | 63 +++++++++++++++++-------
3 files changed, 71 insertions(+), 41 deletions(-)
diff --git a/src/app/profile/edit/edit.component.html b/src/app/profile/edit/edit.component.html
index 84e666e86..1c1f7284e 100644
--- a/src/app/profile/edit/edit.component.html
+++ b/src/app/profile/edit/edit.component.html
@@ -1,6 +1,6 @@
<div *ngIf="userProfile" class="content-container full-screen">
<div class="edit-profile">
- <app-go-back (action)="goBack()" />
+ <app-go-back (action)="showPendingChangesModal()" />
<div class="header">
<div class="title">
@@ -180,16 +180,6 @@
/>
</div>
- <app-modal
- [title]="'ATTENTION'"
- [opened]="showConfirmationModal"
- [validateLabel]="'OK'"
- (closed)="closeExitModal()"
- >
- Veuillez indiquer si vous souhaitez proposer la fonctionnalité 'être rappelé' dans l'onglet 'Employeur et
- fonction'.
- </app-modal>
-
<div *ngIf="currentTab === tabsEnum.description" class="descriptionTab">
<app-textarea
[id]="'description'"
@@ -202,11 +192,34 @@
<!-- Footer -->
<div *ngIf="currentTab !== tabsEnum.credentials" class="footer">
- <app-button *ngIf="profileChanged()" [variant]="'secondary'" [label]="'Annuler'" (action)="cancel()" />
+ <app-button [variant]="'secondary'" [label]="'Annuler'" (action)="showPendingChangesModal()" />
<app-button [variant]="'primary'" [label]="'Valider'" [disabled]="!isPageValid()" (action)="confirm()" />
</div>
</div>
+ <!-- No information on appointment option, should pick one -->
+ <app-modal
+ [title]="'Attention !'"
+ [opened]="showConfirmationModal"
+ [validateLabel]="'OK'"
+ (closed)="closeExitModal()"
+ >
+ <p class="modalContent emphasized">
+ Veuillez indiquer si vous souhaitez proposer la fonctionnalité 'être rappelé' dans l'onglet 'Employeur et
+ fonction'.
+ </p>
+ </app-modal>
+
+ <!-- Some modifications are pending, confirm leaving -->
+ <app-modal
+ [title]="'Attention !'"
+ [opened]="pendingChangesModal"
+ [validateLabel]="'Continuer'"
+ (closed)="$event ? goBack() : closePendingChangesModal()"
+ >
+ <p class="modalContent emphasized">Des changements ne sont pas enregistrés, souhaitez-vous continuer ?</p>
+ </app-modal>
+
<!-- Modal: Email change -->
<app-modal
[title]="'Modifier mon email'"
diff --git a/src/app/profile/edit/edit.component.scss b/src/app/profile/edit/edit.component.scss
index a3c1bd35e..160aeb4b8 100644
--- a/src/app/profile/edit/edit.component.scss
+++ b/src/app/profile/edit/edit.component.scss
@@ -150,18 +150,6 @@
}
}
-p {
- margin: 10px 0;
- &.passwordInfo {
- @include font-regular-14;
- text-align: left;
- padding: 0 10px;
- &.warn {
- color: $orange-warning;
- }
- }
-}
-
.modal-content {
display: flex;
flex-direction: column;
diff --git a/src/app/profile/edit/edit.component.ts b/src/app/profile/edit/edit.component.ts
index 3f9c18914..bcbc77338 100644
--- a/src/app/profile/edit/edit.component.ts
+++ b/src/app/profile/edit/edit.component.ts
@@ -1,7 +1,6 @@
import { HttpErrorResponse } from '@angular/common/http';
import { ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
-import * as _ from 'lodash';
import { lastValueFrom } from 'rxjs';
import { Employer } from '../../models/employer.model';
import { Job } from '../../models/job.model';
@@ -39,9 +38,6 @@ export class EditComponent implements OnInit {
@Input() userProfile: User;
public initialUserProfile: User;
- public emailModal = false;
- public passwordModal = false;
- public deleteAccountModal = false;
public newEmail = '';
public newEmailConfirm = '';
public oldPassword = '';
@@ -65,6 +61,10 @@ export class EditComponent implements OnInit {
public hasPersonalOffer = false;
// Modal canExit var
+ public emailModal = false;
+ public passwordModal = false;
+ public deleteAccountModal = false;
+ public pendingChangesModal = false;
public showConfirmationModal = false;
@ViewChild('newJobInput') newJobInput: ElementRef;
@@ -201,10 +201,6 @@ export class EditComponent implements OnInit {
this.userProfile = { ...this.initialUserProfile };
}
- public profileChanged(): boolean {
- return !_.isEqual(this.userProfile, this.initialUserProfile);
- }
-
public showEmailModal(): void {
this.emailModal = true;
}
@@ -228,7 +224,7 @@ export class EditComponent implements OnInit {
public isPageValid(): boolean {
if (this.currentTab === tabsEnum.details) {
- return this.profileChanged() && this.phoneValid() && this.nameValid() && this.surnameValid();
+ return this.coordsHaveChanged() && this.phoneValid() && this.nameValid() && this.surnameValid();
} else if (this.currentTab === tabsEnum.credentials) {
if (this.emailModal) {
return this.emailValid(this.newEmail) && this.newEmail === this.newEmailConfirm;
@@ -241,16 +237,12 @@ export class EditComponent implements OnInit {
return false;
}
return true;
- } else if (
- this.selectedEmployer?.name !== this.userProfile.employer?.name ||
- (this.selectedJob?.name !== this.userProfile.job?.name && !this.hasPersonalOffer) ||
- (this.hasPersonalOffer && this.selectedRdvChoice !== null)
- ) {
+ } else if (this.jobHasChanged()) {
return true;
}
return false;
- } else if (this.currentTab === tabsEnum.description) {
- return this.descriptionValid() && this.initialUserProfile.description !== this.userProfile.description;
+ } else if (this.descriptionHasChanged()) {
+ return this.descriptionValid();
}
}
@@ -345,7 +337,7 @@ export class EditComponent implements OnInit {
}
public confirmNewPassword(): void {
- if (this.passwordValid(this.newPassword) && this.newPassword == this.newPasswordConfirm) {
+ if (this.passwordValid(this.newPassword) && this.newPassword === this.newPasswordConfirm) {
this.profileService.changePassword(this.newPassword, this.oldPassword).subscribe({
next: () => {
this.notificationService.showSuccess('Votre mot de passe a bien été modifié');
@@ -435,6 +427,43 @@ export class EditComponent implements OnInit {
}
}
+ private coordsHaveChanged(): boolean {
+ return (
+ this.userProfile.name !== this.initialUserProfile.name ||
+ this.userProfile.surname !== this.initialUserProfile.surname ||
+ this.userProfile.phone !== this.initialUserProfile.phone
+ );
+ }
+
+ private jobHasChanged(): boolean {
+ return (
+ this.selectedEmployer?.name !== this.initialUserProfile.employer?.name ||
+ this.selectedJob?.name !== this.initialUserProfile.job?.name ||
+ (this.hasPersonalOffer && this.selectedRdvChoice !== this.initialUserProfile.withAppointment) ||
+ this.isUnexistingJob()
+ );
+ }
+
+ private descriptionHasChanged(): boolean {
+ return this.userProfile.description !== (this.initialUserProfile.description ?? '');
+ }
+
+ public hasPendingChanges(): boolean {
+ return this.coordsHaveChanged() || this.jobHasChanged() || this.descriptionHasChanged();
+ }
+
+ public showPendingChangesModal(): void {
+ if (this.hasPendingChanges()) {
+ this.pendingChangesModal = true;
+ } else {
+ this.goBack();
+ }
+ }
+
+ public closePendingChangesModal(): void {
+ this.pendingChangesModal = false;
+ }
+
private showModal(): void {
this.showConfirmationModal = true;
}
--
GitLab