From 9294fbef4a400bac6a8304a8bf69a4c7c44c238f Mon Sep 17 00:00:00 2001
From: Etienne LOUPIAS <eloupias@grandlyon.com>
Date: Fri, 16 Feb 2024 08:21:53 +0000
Subject: [PATCH] feat(orientation): update mediation-beneficiary-info to v3
design
---
.../mediation-beneficiary-info.component.html | 163 +++++++-----------
.../mediation-beneficiary-info.component.scss | 8 +-
.../mediation-beneficiary-info.component.ts | 7 +-
.../components/input/input.component.html | 2 +-
src/app/utils/orientationUtils.ts | 6 +-
src/styles.scss | 4 +
6 files changed, 75 insertions(+), 115 deletions(-)
diff --git a/src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-beneficiary-info/mediation-beneficiary-info.component.html b/src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-beneficiary-info/mediation-beneficiary-info.component.html
index f53825dba..4f13f13e1 100644
--- a/src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-beneficiary-info/mediation-beneficiary-info.component.html
+++ b/src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-beneficiary-info/mediation-beneficiary-info.component.html
@@ -1,103 +1,64 @@
-<div class="orientationForm">
- <h2 *ngIf="currentType !== 'RDV Conseiller Numérique'">Quelles sont les informations de la personne ?</h2>
- <h2 *ngIf="currentType === 'RDV Conseiller Numérique'">Quelles sont les coordonnées de la personne ?</h2>
- <form [formGroup]="form">
- <div class="form-group" fxLayout="column">
- <label for="name">Prénom</label>
- <div fxLayout="row" fxLayoutGap="13px">
- <input
- type="text"
- autocomplete="on"
- formControlName="name"
- class="form-input"
- (input)="updatedForm('name', $event.target)"
- />
- <app-svg-icon *ngIf="form.get('name').valid" [iconClass]="'validation'" [folder]="'form'" [icon]="'validate'" />
- <app-svg-icon
- *ngIf="form.get('name').value && !form.get('name').valid"
- [iconClass]="'validation'"
- [folder]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
- <div class="form-group" fxLayout="column">
- <label for="surname">Nom</label>
- <div fxLayout="row" fxLayoutGap="13px">
- <input
- type="text"
- autocomplete="on"
- formControlName="surname"
- class="form-input"
- (input)="updatedForm('surname', $event.target)"
- />
- <app-svg-icon
- *ngIf="form.get('surname').valid"
- [iconClass]="'validation'"
- [folder]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="form.get('surname').value && !form.get('surname').valid"
- [iconClass]="'validation'"
- [folder]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
+<form class="orientationForm" [formGroup]="form">
+ <div *ngIf="isOrientationRdv" class="title">
+ <h2>Quelles sont les coordonnées de la personne que vous orientez ?</h2>
+ </div>
+ <div *ngIf="!isOrientationRdv" class="title">
+ <h2>Quel est le nom de la personne que vous orientez ?</h2>
+ <p>Ces informations apparaîtront sur une fiche d’orientation à imprimer et à transmettre à la personne</p>
+ </div>
- <div *ngIf="isEmail()" class="form-group" fxLayout="column">
- <label for="email">Email <sup *ngIf="isOrientationRdv" class="footnote-nb">1</sup></label>
- <div fxLayout="row" fxLayoutGap="13px">
- <input
- type="text"
- autocomplete="on"
- formControlName="email"
- class="form-input"
- (input)="updatedForm('email', $event.target)"
- />
- <app-svg-icon
- *ngIf="form.get('email').value && form.get('email').valid"
- [iconClass]="'validation'"
- [folder]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="form.get('email').value && !form.get('email').valid"
- [iconClass]="'validation'"
- [folder]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
+ <div class="formGroup">
+ <app-input
+ id="name"
+ label="Prénom"
+ autocomplete="on"
+ size="large"
+ [status]="form.get('name').value ? (form.get('name').invalid ? 'error' : 'success') : null"
+ [value]="form.get('name').value"
+ (valueChange)="updatedForm('name', $event)"
+ />
- <div *ngIf="isPhone()" class="form-group" fxLayout="column">
- <label for="phone">Téléphone<sup *ngIf="isOrientationRdv" class="footnote-nb">1</sup></label>
- <div fxLayout="row" fxLayoutGap="13px">
- <input
- type="phone"
- autocomplete="on"
- formControlName="phone"
- class="form-input"
- (input)="updatedForm('phone', $event.target)"
- />
- <app-svg-icon
- *ngIf="form.get('phone').valid"
- [iconClass]="'validation'"
- [folder]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="form.get('phone').value && !form.get('phone').valid"
- [iconClass]="'validation'"
- [folder]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
- <p *ngIf="isOrientationRdv && isPhone() && isEmail()" class="footnote">
- <sup class="footnote-nb">1</sup> Un moyen de communication (email et/ou téléphone) est obligatoire pour valider
- cette étape
- </p>
- </form>
-</div>
+ <app-input
+ id="surname"
+ label="Nom"
+ autocomplete="on"
+ size="large"
+ [status]="form.get('surname').value ? (form.get('surname').invalid ? 'error' : 'success') : null"
+ [value]="form.get('surname').value"
+ (valueChange)="updatedForm('surname', $event)"
+ />
+
+ <app-input
+ *ngIf="isEmail()"
+ id="email"
+ label="Email<sup class='sup-input'>1</sup>"
+ autocomplete="on"
+ size="large"
+ [status]="form.get('email').value ? (form.get('email').invalid ? 'error' : 'success') : null"
+ [statusText]="form.get('email').value ? (form.get('email').invalid ? 'Email invalide' : 'Email valide') : null"
+ [value]="form.get('email').value"
+ (valueChange)="updatedForm('email', $event)"
+ />
+
+ <app-input
+ *ngIf="isPhone()"
+ id="phone"
+ label="Téléphone<sup class='sup-input'>1</sup>"
+ autocomplete="on"
+ size="large"
+ [status]="form.get('phone').value ? (form.get('phone').invalid ? 'error' : 'success') : null"
+ [statusText]="
+ form.get('phone').value ? (form.get('phone').invalid ? 'Téléphone invalide' : 'Téléphone valide') : null
+ "
+ [value]="form.get('phone').value"
+ (valueChange)="updatedForm('phone', $event)"
+ />
+ </div>
+
+ <p *ngIf="isOrientationRdv && isPhone() && isEmail()">
+ <sup class="sup-input">1</sup
+ ><span class="footnote">
+ Un moyen de communication (email et/ou téléphone) est obligatoire pour valider cette étape</span
+ >
+ </p>
+</form>
diff --git a/src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-beneficiary-info/mediation-beneficiary-info.component.scss b/src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-beneficiary-info/mediation-beneficiary-info.component.scss
index 9059e80a0..b378d0179 100644
--- a/src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-beneficiary-info/mediation-beneficiary-info.component.scss
+++ b/src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-beneficiary-info/mediation-beneficiary-info.component.scss
@@ -1,11 +1,5 @@
-@import 'color';
@import 'typography';
-sup {
- color: red;
- font-size: $font-size-xxsmall;
-}
.footnote {
- margin-top: 2em;
- font-size: $font-size-xmsmall;
+ font-size: $font-size-xxsmall;
}
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..c69a97cea 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
@@ -1,7 +1,6 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { Utils } from '../../../../../utils/utils';
-import { MediationType } from '../../../types/orientation.types';
@Component({
selector: 'app-mediation-beneficiary-info',
@@ -11,7 +10,6 @@ import { MediationType } from '../../../types/orientation.types';
export class MediationBeneficiaryInfoComponent implements OnInit {
@Input() form: UntypedFormGroup;
@Output() checkValidation = new EventEmitter<any>();
- @Input() currentType: MediationType;
@Input() public isOrientationRdv = false;
public utils = new Utils();
@@ -26,10 +24,9 @@ export class MediationBeneficiaryInfoComponent implements OnInit {
return Boolean(this.form.get('email'));
}
- public updatedForm(field: string, target: EventTarget): void {
- const value = (target as HTMLInputElement).value;
+ public updatedForm(field: string, value: string): void {
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/shared/components/input/input.component.html b/src/app/shared/components/input/input.component.html
index 9159e8e9a..fbc9390e3 100644
--- a/src/app/shared/components/input/input.component.html
+++ b/src/app/shared/components/input/input.component.html
@@ -1,6 +1,6 @@
<div class="container" [ngClass]="{ disabled: disabled, wide: wide }">
<div class="label">
- <label [ngClass]="status" [htmlFor]="id">{{ label }}</label>
+ <label [ngClass]="status" [htmlFor]="id" [innerHtml]="label"></label>
<span *ngIf="description" class="description" [ngClass]="{ disabled: disabled }">{{ description }}</span>
</div>
diff --git a/src/app/utils/orientationUtils.ts b/src/app/utils/orientationUtils.ts
index f46437089..5c0ea9283 100644
--- a/src/app/utils/orientationUtils.ts
+++ b/src/app/utils/orientationUtils.ts
@@ -208,7 +208,11 @@ export class OrientationUtils {
};
pagesValidation[AppointmentSteps.mediationBeneficiaryInfo] = {
valid:
- form.get('name').valid && form.get('surname').valid && (form.get('phone').valid || form.get('email').valid),
+ form.get('name').valid &&
+ form.get('surname').valid &&
+ (form.get('phone').valid || form.get('email').valid) &&
+ (!form.get('phone').value || form.get('phone').valid) &&
+ (!form.get('email').value || form.get('email').valid),
};
pagesValidation[AppointmentSteps.rdvEnd] = {
valid: true,
diff --git a/src/styles.scss b/src/styles.scss
index a2faeb1f2..87d49d5e9 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -458,6 +458,10 @@ p {
sup {
color: $red;
}
+.sup-input {
+ font-size: $font-size-xxxxsmall;
+ color: unset;
+}
.formGroup {
display: flex;
--
GitLab