From e2c9e4ab879298f368423a09af9352cb35a7d179 Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Thu, 15 Feb 2024 16:33:57 +0100
Subject: [PATCH 1/3] feat(contact): V3
---
src/app/contact/contact.component.html | 152 ++++++++-----------------
src/app/contact/contact.component.scss | 53 +++------
src/app/contact/contact.component.ts | 3 -
3 files changed, 60 insertions(+), 148 deletions(-)
diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html
index 1dc13668e..a94e7aa3c 100644
--- a/src/app/contact/contact.component.html
+++ b/src/app/contact/contact.component.html
@@ -1,115 +1,53 @@
-<div class="section-container">
+<div class="contactForm">
<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
- <div class="formFields">
- <h2>Nous contacter</h2>
- <div class="form-group">
- <label for="name">Prénom et Nom</label>
- <div fxLayout="row" fxLayoutGap="15px">
- <input type="text" autocomplete="on" formControlName="name" class="form-input" />
- <app-svg-icon
- *ngIf="contactForm.get('name').valid"
- [iconClass]="'validation'"
- [folder]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="contactForm.get('name').value && !contactForm.get('name').valid"
- [iconClass]="'validation'"
- [folder]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
+ <h2>Nous contacter</h2>
- <div class="form-group">
- <label for="email">Adresse mail</label>
- <div fxLayout="row" fxLayoutGap="15px">
- <input type="text" autocomplete="on" formControlName="email" class="form-input" />
- <app-svg-icon
- *ngIf="contactForm.get('email').valid"
- [iconClass]="'validation'"
- [folder]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="contactForm.get('email').value && !contactForm.get('email').valid"
- [iconClass]="'validation'"
- [folder]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
+ <app-input
+ id="name"
+ label="Nom"
+ size="large"
+ [status]="contactForm.get('name').invalid ? null : 'success'"
+ [value]="contactForm.get('name').value"
+ (valueChange)="contactForm.get('name').setValue($event)"
+ />
- <div class="form-group">
- <label for="phone">N° de téléphone</label>
- <p class="notRequired">facultatif</p>
- <div fxLayout="row" fxLayoutGap="15px">
- <input
- type="text"
- autocomplete="on"
- formControlName="phone"
- class="form-input phone"
- (input)="utils.modifyPhoneInput(contactForm, 'phone', $event.target)"
- />
- <app-svg-icon
- *ngIf="contactForm.get('phone').value && contactForm.get('phone').valid"
- [iconClass]="'validation'"
- [folder]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="contactForm.get('phone').value && !contactForm.get('phone').valid"
- [iconClass]="'validation'"
- [folder]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
+ <app-input
+ id="email"
+ label="Adresse mail"
+ autocomplete="on"
+ size="large"
+ [status]="contactForm.get('email').value ? (contactForm.get('email').invalid ? 'error' : 'success') : null"
+ [statusText]="contactForm.get('email').hasError('alreadyExist') ? 'Cet email est déjà utilisé' : null"
+ [value]="contactForm.get('email').value"
+ (valueChange)="contactForm.get('email').setValue($event)"
+ />
- <div class="form-group">
- <label for="subject">Objet du message</label>
- <div fxLayout="row" fxLayoutGap="15px">
- <input type="text" maxlength="100" formControlName="subject" class="form-input subject" />
- <app-svg-icon
- *ngIf="contactForm.get('subject').valid"
- [iconClass]="'validation'"
- [folder]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="contactForm.get('subject').value && !contactForm.get('subject').valid"
- [iconClass]="'validation'"
- [folder]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
+ <app-input
+ id="phone"
+ label="Téléphone"
+ size="large"
+ [status]="contactForm.get('phone').value ? (contactForm.get('phone').invalid ? 'error' : 'success') : null"
+ [value]="contactForm.get('phone').value"
+ (valueChange)="contactForm.get('phone').setValue($event); utils.modifyPhoneInput(contactForm, 'phone', $event)"
+ />
+
+ <app-input
+ id="subject"
+ label="Objet du message"
+ size="large"
+ [status]="contactForm.get('subject').invalid ? null : 'success'"
+ [value]="contactForm.get('subject').value"
+ (valueChange)="contactForm.get('subject').setValue($event)"
+ />
+
+ <app-textarea
+ id="message"
+ label="Message"
+ placeholder="Exemple : J'aimerais avoir de l'aide sur Rés'in."
+ [value]="contactForm.get('message').value || ''"
+ (valueChange)="contactForm.get('message').setValue($event)"
+ />
- <div class="form-group">
- <label for="message">Message</label>
- <div class="textareaBlock" fxLayout="row" fxLayoutGap="15px">
- <textarea
- rows="8"
- placeholder="Exemple : J'aimerais avoir de l'aide sur Rés'in."
- maxlength="500"
- formControlName="message"
- ></textarea>
- <app-svg-icon
- *ngIf="contactForm.get('message').valid"
- [iconClass]="'validation'"
- [folder]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="contactForm.get('message').value && !contactForm.get('message').valid"
- [iconClass]="'validation'"
- [folder]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- <p>{{ contactForm.get('message').value ? contactForm.get('message').value.length : 0 }}/500</p>
- </div>
- </div>
<div class="buttons">
<app-button [variant]="'secondary'" [label]="'Annuler'" [routerLink]="'/home'" />
<app-button
diff --git a/src/app/contact/contact.component.scss b/src/app/contact/contact.component.scss
index ad393715e..2523422c2 100644
--- a/src/app/contact/contact.component.scss
+++ b/src/app/contact/contact.component.scss
@@ -5,44 +5,21 @@
@import 'shapes';
@import 'z-index';
-.formFields {
- max-width: 960px;
- padding: 40px;
- background: $white;
- border-radius: 8px;
- border: 1px solid $grey-6;
-}
-.phone {
- width: 200px;
-}
-.subject {
- width: 600px;
-}
-.textareaBlock {
- flex-direction: column;
- box-sizing: border-box;
- display: flex;
- textarea {
- width: 94%;
- margin-top: 4px;
- &:focus {
- border: 1px solid $blue;
- outline: none !important;
- }
+.contactForm {
+ max-width: 600px;
+ padding: 1rem 0;
+ margin: auto;
+
+ form {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
}
-}
-.buttons {
- display: flex;
- justify-content: center;
- max-width: 960px;
- padding-top: 1rem;
- gap: 1rem;
-}
-p {
- text-align: right;
- width: 96%;
- &.notRequired {
- text-align: left;
- margin: 0;
+
+ .buttons {
+ display: flex;
+ justify-content: center;
+ max-width: 600px;
+ gap: 1rem;
}
}
diff --git a/src/app/contact/contact.component.ts b/src/app/contact/contact.component.ts
index c631d5c96..1e1231ad3 100644
--- a/src/app/contact/contact.component.ts
+++ b/src/app/contact/contact.component.ts
@@ -58,9 +58,6 @@ export class ContactComponent implements OnInit {
}
public onSubmit(): void {
- if (!this.contactForm.valid) {
- return;
- }
this.loading = true;
const contactMessage: ContactMessage = this.contactForm.value;
--
GitLab
From 806ad054e54e0f8fb6ca009b5106cf0623945527 Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Thu, 15 Feb 2024 16:35:38 +0100
Subject: [PATCH 2/3] V3remove : cleanup utils & temporarily modify orientation
screens that are not yet in V3
---
.../structure-orientator/structure-orientator.component.ts | 2 +-
.../mediation-beneficiary-info.component.ts | 2 +-
src/app/utils/utils.ts | 6 +-----
3 files changed, 3 insertions(+), 7 deletions(-)
diff --git a/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.ts b/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.ts
index 56bc78f49..78ea1b2c9 100644
--- a/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.ts
+++ b/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.ts
@@ -52,7 +52,7 @@ export class StructureOrientatorComponent implements OnInit {
public updatedForm(field: string, target: EventTarget): void {
const value = (target as HTMLInputElement).value;
if (field === 'phone') {
- this.utils.modifyPhoneInput(this.form, 'phone', target);
+ this.utils.modifyPhoneInput(this.form, 'phone', value);
} else this.form.get(field).patchValue(value);
this.validatePage.emit(this.form.valid);
diff --git a/src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-beneficiary-info/mediation-beneficiary-info.component.ts b/src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-beneficiary-info/mediation-beneficiary-info.component.ts
index 9b8ac7ac6..5e4bd369b 100644
--- a/src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-beneficiary-info/mediation-beneficiary-info.component.ts
+++ b/src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-beneficiary-info/mediation-beneficiary-info.component.ts
@@ -29,7 +29,7 @@ export class MediationBeneficiaryInfoComponent implements OnInit {
public updatedForm(field: string, target: EventTarget): void {
const value = (target as HTMLInputElement).value;
if (field === 'phone') {
- this.utils.modifyPhoneInput(this.form, 'phone', target);
+ this.utils.modifyPhoneInput(this.form, 'phone', value);
} else this.form.get(field).patchValue(value);
this.checkValidation.emit();
diff --git a/src/app/utils/utils.ts b/src/app/utils/utils.ts
index 1ee5d7061..5f7aabf8c 100644
--- a/src/app/utils/utils.ts
+++ b/src/app/utils/utils.ts
@@ -16,12 +16,8 @@ import { PersonalOffer } from './../models/personalOffer.model';
providedIn: 'root',
})
export class Utils {
- // V3REMOVE : supprimer le cas EventTarget
- public modifyPhoneInput(form: UntypedFormGroup, controlName: string, target: EventTarget | string): void {
- if (target['value']) target = (target as HTMLInputElement).value;
- const phoneNumber = target as string;
+ public modifyPhoneInput(form: UntypedFormGroup, controlName: string, phoneNumber: string): void {
form.get(controlName).setValue(phoneNumber);
-
// Take length of phone number without spaces.
const phoneNoSpace = phoneNumber.replace(/\s/g, '');
// Check to refresh every 2 number.
--
GitLab
From ed54304bee1694f772064b11c1d6ced9c806a250 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Fri, 16 Feb 2024 10:36:38 +0100
Subject: [PATCH 3/3] remove wrapping div
---
src/app/contact/contact.component.html | 108 ++++++++++++-------------
src/app/contact/contact.component.scss | 8 +-
2 files changed, 56 insertions(+), 60 deletions(-)
diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html
index a94e7aa3c..d54ac4bfb 100644
--- a/src/app/contact/contact.component.html
+++ b/src/app/contact/contact.component.html
@@ -1,61 +1,59 @@
-<div class="contactForm">
- <form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
- <h2>Nous contacter</h2>
+<form class="contactForm" [formGroup]="contactForm" (ngSubmit)="onSubmit()">
+ <h2>Nous contacter</h2>
- <app-input
- id="name"
- label="Nom"
- size="large"
- [status]="contactForm.get('name').invalid ? null : 'success'"
- [value]="contactForm.get('name').value"
- (valueChange)="contactForm.get('name').setValue($event)"
- />
+ <app-input
+ id="name"
+ label="Nom"
+ size="large"
+ [status]="contactForm.get('name').invalid ? null : 'success'"
+ [value]="contactForm.get('name').value"
+ (valueChange)="contactForm.get('name').setValue($event)"
+ />
- <app-input
- id="email"
- label="Adresse mail"
- autocomplete="on"
- size="large"
- [status]="contactForm.get('email').value ? (contactForm.get('email').invalid ? 'error' : 'success') : null"
- [statusText]="contactForm.get('email').hasError('alreadyExist') ? 'Cet email est déjà utilisé' : null"
- [value]="contactForm.get('email').value"
- (valueChange)="contactForm.get('email').setValue($event)"
- />
+ <app-input
+ id="email"
+ label="Adresse mail"
+ autocomplete="on"
+ size="large"
+ [status]="contactForm.get('email').value ? (contactForm.get('email').invalid ? 'error' : 'success') : null"
+ [statusText]="contactForm.get('email').hasError('alreadyExist') ? 'Cet email est déjà utilisé' : null"
+ [value]="contactForm.get('email').value"
+ (valueChange)="contactForm.get('email').setValue($event)"
+ />
- <app-input
- id="phone"
- label="Téléphone"
- size="large"
- [status]="contactForm.get('phone').value ? (contactForm.get('phone').invalid ? 'error' : 'success') : null"
- [value]="contactForm.get('phone').value"
- (valueChange)="contactForm.get('phone').setValue($event); utils.modifyPhoneInput(contactForm, 'phone', $event)"
- />
+ <app-input
+ id="phone"
+ label="Téléphone"
+ size="large"
+ [status]="contactForm.get('phone').value ? (contactForm.get('phone').invalid ? 'error' : 'success') : null"
+ [value]="contactForm.get('phone').value"
+ (valueChange)="contactForm.get('phone').setValue($event); utils.modifyPhoneInput(contactForm, 'phone', $event)"
+ />
- <app-input
- id="subject"
- label="Objet du message"
- size="large"
- [status]="contactForm.get('subject').invalid ? null : 'success'"
- [value]="contactForm.get('subject').value"
- (valueChange)="contactForm.get('subject').setValue($event)"
- />
+ <app-input
+ id="subject"
+ label="Objet du message"
+ size="large"
+ [status]="contactForm.get('subject').invalid ? null : 'success'"
+ [value]="contactForm.get('subject').value"
+ (valueChange)="contactForm.get('subject').setValue($event)"
+ />
- <app-textarea
- id="message"
- label="Message"
- placeholder="Exemple : J'aimerais avoir de l'aide sur Rés'in."
- [value]="contactForm.get('message').value || ''"
- (valueChange)="contactForm.get('message').setValue($event)"
- />
+ <app-textarea
+ id="message"
+ label="Message"
+ placeholder="Exemple : J'aimerais avoir de l'aide sur Rés'in."
+ [value]="contactForm.get('message').value || ''"
+ (valueChange)="contactForm.get('message').setValue($event)"
+ />
- <div class="buttons">
- <app-button [variant]="'secondary'" [label]="'Annuler'" [routerLink]="'/home'" />
- <app-button
- [type]="'submit'"
- [variant]="'primary'"
- [label]="'Envoyer'"
- [disabled]="!contactForm.valid || loading"
- />
- </div>
- </form>
-</div>
+ <div class="buttons">
+ <app-button [variant]="'secondary'" [label]="'Annuler'" [routerLink]="'/home'" />
+ <app-button
+ [type]="'submit'"
+ [variant]="'primary'"
+ [label]="'Envoyer'"
+ [disabled]="!contactForm.valid || loading"
+ />
+ </div>
+</form>
diff --git a/src/app/contact/contact.component.scss b/src/app/contact/contact.component.scss
index 2523422c2..7799d1448 100644
--- a/src/app/contact/contact.component.scss
+++ b/src/app/contact/contact.component.scss
@@ -10,11 +10,9 @@
padding: 1rem 0;
margin: auto;
- form {
- display: flex;
- flex-direction: column;
- gap: 1rem;
- }
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
.buttons {
display: flex;
--
GitLab