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

Merge branch 'feat/orientation/beneficiary-info-v3' into 'dev' 

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

See merge request !711
parents c2685e4f 9294fbef
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 @ fbd6744f
<div class="orientationForm"> <form class="orientationForm" [formGroup]="form">
<h2 *ngIf="currentType !== 'RDV Conseiller Numérique'">Quelles sont les informations de la personne ?</h2> <div *ngIf="isOrientationRdv" class="title">
<h2 *ngIf="currentType === 'RDV Conseiller Numérique'">Quelles sont les coordonnées de la personne ?</h2> <h2>Quelles sont les coordonnées de la personne que vous orientez&nbsp;?</h2>
<form [formGroup]="form"> </div>
<div class="form-group" fxLayout="column"> <div *ngIf="!isOrientationRdv" class="title">
<label for="name">Prénom</label> <h2>Quel est le nom de la personne que vous orientez&nbsp;?</h2>
<div fxLayout="row" fxLayoutGap="13px"> <p>Ces informations apparaîtront sur une fiche d’orientation à imprimer et à transmettre à la personne</p>
<input </div>
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>
<div *ngIf="isEmail()" class="form-group" fxLayout="column"> <div class="formGroup">
<label for="email">Email <sup *ngIf="isOrientationRdv" class="footnote-nb">1</sup></label> <app-input
<div fxLayout="row" fxLayoutGap="13px"> id="name"
<input label="Prénom"
type="text" autocomplete="on"
autocomplete="on" size="large"
formControlName="email" [status]="form.get('name').value ? (form.get('name').invalid ? 'error' : 'success') : null"
class="form-input" [value]="form.get('name').value"
(input)="updatedForm('email', $event.target)" (valueChange)="updatedForm('name', $event)"
/> />
<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 *ngIf="isPhone()" class="form-group" fxLayout="column"> <app-input
<label for="phone">Téléphone<sup *ngIf="isOrientationRdv" class="footnote-nb">1</sup></label> id="surname"
<div fxLayout="row" fxLayoutGap="13px"> label="Nom"
<input autocomplete="on"
type="phone" size="large"
autocomplete="on" [status]="form.get('surname').value ? (form.get('surname').invalid ? 'error' : 'success') : null"
formControlName="phone" [value]="form.get('surname').value"
class="form-input" (valueChange)="updatedForm('surname', $event)"
(input)="updatedForm('phone', $event.target)" />
/>
<app-svg-icon <app-input
*ngIf="form.get('phone').valid" *ngIf="isEmail()"
[iconClass]="'validation'" id="email"
[folder]="'form'" label="Email<sup class='sup-input'>1</sup>"
[icon]="'validate'" autocomplete="on"
/> size="large"
<app-svg-icon [status]="form.get('email').value ? (form.get('email').invalid ? 'error' : 'success') : null"
*ngIf="form.get('phone').value && !form.get('phone').valid" [statusText]="form.get('email').value ? (form.get('email').invalid ? 'Email invalide' : 'Email valide') : null"
[iconClass]="'validation'" [value]="form.get('email').value"
[folder]="'form'" (valueChange)="updatedForm('email', $event)"
[icon]="'notValidate'" />
/>
</div> <app-input
</div> *ngIf="isPhone()"
<p *ngIf="isOrientationRdv && isPhone() && isEmail()" class="footnote"> id="phone"
<sup class="footnote-nb">1</sup> Un moyen de communication (email et/ou téléphone) est obligatoire pour valider label="Téléphone<sup class='sup-input'>1</sup>"
cette étape autocomplete="on"
</p> size="large"
</form> [status]="form.get('phone').value ? (form.get('phone').invalid ? 'error' : 'success') : null"
</div> [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 @ fbd6744f
@import 'color';
@import 'typography'; @import 'typography';
sup {
color: red;
font-size: $font-size-xxsmall;
}
.footnote { .footnote {
margin-top: 2em; font-size: $font-size-xxsmall;
font-size: $font-size-xmsmall;
} }
src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-beneficiary-info/mediation-beneficiary-info.component.ts
+ 2
− 5
View file @ fbd6744f
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms'; import { UntypedFormGroup } from '@angular/forms';
import { Utils } from '../../../../../utils/utils'; import { Utils } from '../../../../../utils/utils';
import { MediationType } from '../../../types/orientation.types';
@Component({ @Component({
selector: 'app-mediation-beneficiary-info', selector: 'app-mediation-beneficiary-info',
...@@ -11,7 +10,6 @@ import { MediationType } from '../../../types/orientation.types'; ...@@ -11,7 +10,6 @@ import { MediationType } from '../../../types/orientation.types';
export class MediationBeneficiaryInfoComponent implements OnInit { export class MediationBeneficiaryInfoComponent implements OnInit {
@Input() form: UntypedFormGroup; @Input() form: UntypedFormGroup;
@Output() checkValidation = new EventEmitter<any>(); @Output() checkValidation = new EventEmitter<any>();
@Input() currentType: MediationType;
@Input() public isOrientationRdv = false; @Input() public isOrientationRdv = false;
public utils = new Utils(); public utils = new Utils();
...@@ -26,10 +24,9 @@ export class MediationBeneficiaryInfoComponent implements OnInit { ...@@ -26,10 +24,9 @@ export class MediationBeneficiaryInfoComponent implements OnInit {
return Boolean(this.form.get('email')); return Boolean(this.form.get('email'));
} }
public updatedForm(field: string, target: EventTarget): void { public updatedForm(field: string, value: string): void {
const value = (target as HTMLInputElement).value;
if (field === 'phone') { if (field === 'phone') {
this.utils.modifyPhoneInput(this.form, 'phone', target); this.utils.modifyPhoneInput(this.form, 'phone', value);
} else this.form.get(field).patchValue(value); } else this.form.get(field).patchValue(value);
this.checkValidation.emit(); this.checkValidation.emit();
......
src/app/shared/components/input/input.component.html
+ 1
− 1
View file @ fbd6744f
<div class="container" [ngClass]="{ disabled: disabled, wide: wide }"> <div class="container" [ngClass]="{ disabled: disabled, wide: wide }">
<div class="label"> <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> <span *ngIf="description" class="description" [ngClass]="{ disabled: disabled }">{{ description }}</span>
</div> </div>
......
src/app/utils/orientationUtils.ts
+ 5
− 1
View file @ fbd6744f
...@@ -208,7 +208,11 @@ export class OrientationUtils { ...@@ -208,7 +208,11 @@ export class OrientationUtils {
}; };
pagesValidation[AppointmentSteps.mediationBeneficiaryInfo] = { pagesValidation[AppointmentSteps.mediationBeneficiaryInfo] = {
valid: 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] = { pagesValidation[AppointmentSteps.rdvEnd] = {
valid: true, valid: true,
......
src/styles.scss
+ 4
− 0
View file @ fbd6744f
...@@ -458,6 +458,10 @@ p { ...@@ -458,6 +458,10 @@ p {
sup { sup {
color: $red; color: $red;
} }
.sup-input {
font-size: $font-size-xxxxsmall;
color: unset;
}
.formGroup { .formGroup {
display: flex; 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