diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html index 0c507ad9e81c72eda660118908b4fbf7dad4dc16..c97aeec804d4e6601158b6e5007d3198a1936011 100644 --- a/src/app/form/form.component.html +++ b/src/app/form/form.component.html @@ -311,8 +311,10 @@ </div> <form [formGroup]="accountForm" *ngIf="accountForm"> <div *ngIf="currentPage == 2" class="page"> - <h3>Qui êtes-vous ?</h3> - <p>Ces informations ne seront pas visibles sur la plateforme</p> + <div class="title"> + <h3>Qui êtes-vous ?</h3> + <p>Ces informations ne seront pas visibles sur la plateforme</p> + </div> <div class="form-group" fxLayout="column"> <label for="surname">Nom</label> <div fxLayout="row" fxLayoutGap="13px"> @@ -341,7 +343,9 @@ </div> </div> <div *ngIf="currentPage == 3" class="page"> - <h3>Quels identifiants utiliserez-vous pour vous connecter ?</h3> + <div class="title"> + <h3>Quels identifiants utiliserez-vous pour vous connecter ?</h3> + </div> <div class="form-group" fxLayout="column"> <label for="email">Courriel personnel</label> <div fxLayout="row" fxLayoutGap="13px"> @@ -395,7 +399,9 @@ </form> <form [formGroup]="structureForm" *ngIf="structureForm"> <div *ngIf="currentPage == 4" class="page"> - <h3>Quelle structure voulez-vous réferencer ?</h3> + <div class="title"> + <h3>Quelle structure voulez-vous réferencer ?</h3> + </div> <div class="form-group" fxLayout="column"> <label for="structureName">Nom de la structure</label> <div fxLayout="row" fxLayoutGap="13px"> @@ -425,6 +431,18 @@ </div> </div> </div> + <div *ngIf="currentPage == 5" class="page" fxLayout="column"> + <div class="title"> + <h3>Quel type de structure ?</h3> + <p>1 seul choix possible</p> + </div> + <div class="type-picker"> + <app-structure-type-picker + [pickedChoice]="structureForm.get('structureType').valid ? structureForm.get('structureType').value : null" + (selectedType)="setTypeStructure($event)" + ></app-structure-type-picker> + </div> + </div> </form> </div> <div diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss index 11f6eabe4756df417ce6fd06121331e95dc04fb1..f3b0feea55f1cff6c7ddfc31a3c6ffe0104a83ba 100644 --- a/src/app/form/form.component.scss +++ b/src/app/form/form.component.scss @@ -3,6 +3,8 @@ @import '../../assets/scss/color'; @import '../../assets/scss/typography'; +$progressBar-height: 50px; + .form { position: fixed; background: white; @@ -58,10 +60,18 @@ margin-bottom: 0; } h3 { - margin-bottom: 16px; + margin: 0; @include cn-bold-22; } .page { + @media #{$tablet} { + height: calc( + 100vh - #{$header-height-phone} - #{$progressBar-height} - #{$footer-height-phone} - 1px + ); // -1px because of header border + } + height: calc( + 100vh - #{$header-height} - #{$progressBar-height} - #{$footer-height} - #{$footer-height-phone} + ); // -1px because of header border color: $grey-1; &.home { height: 100%; @@ -86,13 +96,20 @@ } } } + .title { + margin-bottom: 26px; + } + .type-picker { + height: 100%; + } } .titleDesc { @include cn-bold-20; margin-bottom: 20px; } p { - margin-top: 10; + margin-top: 10px; + margin-bottom: 0; @include cn-regular-18; } } @@ -155,7 +172,7 @@ } } .progressBar { - height: 50px; + height: #{$progressBar-height}; progress { width: 100%; height: 6px; diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts index 82be7f1dff1f861c4e3ec8ca25eff1e6fc2787ab..80f3e5e92d11dd55a498dc144ba74b3b492ed7e1 100644 --- a/src/app/form/form.component.ts +++ b/src/app/form/form.component.ts @@ -124,7 +124,7 @@ export class FormComponent implements OnInit { this.structureForm = new FormGroup({ _id: new FormControl(structure._id), coord: new FormControl(structure.coord), - structureType: this.loadArrayForCheckbox(structure.structureType, true), + structureType: new FormControl(structure.structureType, Validators.required), structureName: new FormControl(structure.structureName, Validators.required), structureRepresentation: new FormControl(structure.structureRepresentation, Validators.required), description: new FormControl(structure.description, Validators.required), @@ -322,6 +322,7 @@ export class FormComponent implements OnInit { this.pagesValidation[4] = { valid: this.structureForm.get('structureName').valid && this.structureForm.get('address').valid, }; + this.pagesValidation[5] = { valid: this.structureForm.get('structureType').valid }; this.updatePageValid(); } @@ -355,4 +356,8 @@ export class FormComponent implements OnInit { } this.setValidationsForm(); } + public setTypeStructure(type?: string): void { + this.structureForm.get('structureType').setValue(type); + this.setValidationsForm(); + } }