Skip to content
Snippets Groups Projects
Commit 9294fbef authored by Etienne LOUPIAS's avatar Etienne LOUPIAS
Browse files

feat(orientation): update mediation-beneficiary-info to v3 design

parent cc2fd629
No related branches found
No related tags found
3 merge requests!783V3.0.0,!741making onboarding-infos-covid-2 up to date,!711feat(orientation): update mediation-beneficiary-info to v3 design
Hide whitespace changes
Inline Side-by-side
Showing
with 75 additions and 115 deletions
src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-beneficiary-info/mediation-beneficiary-info.component.html
+ 62
− 101
View file @ 9294fbef
<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&nbsp;?</h2>
</div>
<div *ngIf="!isOrientationRdv" class="title">
<h2>Quel est le nom de la personne que vous orientez&nbsp;?</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>
src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-beneficiary-info/mediation-beneficiary-info.component.scss
+ 1
− 7
View file @ 9294fbef
@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;
}
src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-beneficiary-info/mediation-beneficiary-info.component.ts
+ 2
− 5
View file @ 9294fbef
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();
......
src/app/shared/components/input/input.component.html
+ 1
− 1
View file @ 9294fbef
<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>
......
src/app/utils/orientationUtils.ts
+ 5
− 1
View file @ 9294fbef
......@@ -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,
......
src/styles.scss
+ 4
− 0
View file @ 9294fbef
......@@ -458,6 +458,10 @@ p {
sup {
color: $red;
}
.sup-input {
font-size: $font-size-xxxxsmall;
color: unset;
}
.formGroup {
display: flex;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment