From cc87f04b1571fa8b0f3d16f5876d6284032f9940 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marl=C3=A8ne=20SIMONDANT?= <msimondant@grandlyon.com>
Date: Mon, 19 Feb 2024 09:04:51 +0000
Subject: [PATCH] feat(contact): V3
---
src/app/contact/contact.component.html | 174 ++++++------------
src/app/contact/contact.component.scss | 49 ++---
src/app/contact/contact.component.ts | 3 -
.../structure-orientator.component.ts | 2 +-
src/app/utils/utils.ts | 6 +-
5 files changed, 69 insertions(+), 165 deletions(-)
diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html
index 1dc13668e..d54ac4bfb 100644
--- a/src/app/contact/contact.component.html
+++ b/src/app/contact/contact.component.html
@@ -1,123 +1,59 @@
-<div class="section-container">
- <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>
+<form class="contactForm" [formGroup]="contactForm" (ngSubmit)="onSubmit()">
+ <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)"
+ />
- <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
- [type]="'submit'"
- [variant]="'primary'"
- [label]="'Envoyer'"
- [disabled]="!contactForm.valid || loading"
- />
- </div>
- </form>
-</div>
+ <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="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 ad393715e..7799d1448 100644
--- a/src/app/contact/contact.component.scss
+++ b/src/app/contact/contact.component.scss
@@ -5,44 +5,19 @@
@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;
- }
- }
-}
-.buttons {
+.contactForm {
+ max-width: 600px;
+ padding: 1rem 0;
+ margin: auto;
+
display: flex;
- justify-content: center;
- max-width: 960px;
- padding-top: 1rem;
+ flex-direction: column;
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;
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/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