Skip to content
Snippets Groups Projects
Commit 126c32dc authored by Jérémie BRISON's avatar Jérémie BRISON
Browse files

fix(form) : add new page (address + structure name) + export logic of input outside

parent b7aa7e93
Branches
Tags
3 merge requests!68Recette,!67Dev,!66Fix/form design create structure
Hide whitespace changes
Inline Side-by-side
src/app/form/form.component.html
+ 39
− 6
View file @ 126c32dc
......@@ -316,14 +316,14 @@
<div class="form-group" fxLayout="column">
<label for="surname">Nom</label>
<div fxLayout="row" fxLayoutGap="13px">
<input type="text" (input)="setValidationsForm()" formControlName="surname" class="form-control" />
<input type="text" (input)="setValidationsForm()" formControlName="surname" class="form-input" />
<img *ngIf="accountForm.get('surname').valid" src="../../assets/form/checked.svg" alt="logo checked" />
</div>
</div>
<div class="form-group" fxLayout="column">
<label for="name">Prénom</label>
<div fxLayout="row" fxLayoutGap="13px">
<input type="text" (input)="setValidationsForm()" formControlName="name" class="form-control" />
<input type="text" (input)="setValidationsForm()" formControlName="name" class="form-input" />
<img *ngIf="accountForm.get('name').valid" src="../../assets/form/checked.svg" alt="logo checked" />
</div>
</div>
......@@ -333,7 +333,7 @@
<input
type="text"
formControlName="phone"
class="form-control phone"
class="form-input phone"
(input)="modifyPhoneInput(accountForm, 'phone', $event.target.value)"
/>
<img *ngIf="accountForm.get('phone').valid" src="../../assets/form/checked.svg" alt="logo checked" />
......@@ -345,7 +345,7 @@
<div class="form-group" fxLayout="column">
<label for="email">Courriel personnel</label>
<div fxLayout="row" fxLayoutGap="13px">
<input type="text" (input)="setValidationsForm()" formControlName="email" class="form-control" />
<input type="text" (input)="setValidationsForm()" formControlName="email" class="form-input" />
<img *ngIf="accountForm.get('email').valid" src="../../assets/form/checked.svg" alt="logo checked" />
</div>
</div>
......@@ -355,7 +355,7 @@
<input
[type]="isShowPassword ? 'text' : 'password'"
formControlName="password"
class="form-control password"
class="form-input password"
(input)="setValidationsForm()"
autocomplete="on"
/>
......@@ -374,7 +374,7 @@
<input
[type]="isShowConfirmPassword ? 'text' : 'password'"
formControlName="confirmPassword"
class="form-control password"
class="form-input password"
(input)="setValidationsForm()"
autocomplete="on"
/>
......@@ -393,6 +393,39 @@
</div>
</div>
</form>
<form [formGroup]="structureForm" *ngIf="structureForm">
<div *ngIf="currentPage == 4" class="page">
<h3>Quelle structure voulez-vous réferencer ?</h3>
<div class="form-group" fxLayout="column">
<label for="structureName">Nom de la structure</label>
<div fxLayout="row" fxLayoutGap="13px">
<input
type="text"
(input)="setValidationsForm()"
formControlName="structureName"
class="form-input structureName"
/>
<img
*ngIf="structureForm.get('structureName').valid"
src="../../assets/form/checked.svg"
alt="logo checked"
/>
</div>
</div>
<div class="form-group" fxLayout="column">
<label for="address">Adresse de la structure</label>
<div fxLayout="row" fxLayoutGap="13px">
<app-address-autocomplete
[address]="structureForm.get('address').valid ? structureForm.get('address').value : null"
(inputAddress)="setAddressStructure()"
(selectedAddress)="setAddressStructure($event)"
></app-address-autocomplete>
<img *ngIf="structureForm.get('address').valid" src="../../assets/form/checked.svg" alt="logo checked" />
</div>
</div>
</div>
</form>
</div>
<div
*ngIf="currentPage != 0 && currentPage != nbPagesForm"
......
src/app/form/form.component.scss
+ 4
− 8
View file @ 126c32dc
......@@ -58,6 +58,7 @@
margin-bottom: 0;
}
h3 {
margin-bottom: 16px;
@include cn-bold-22;
}
.page {
......@@ -178,20 +179,15 @@
}
input {
margin-top: 4px;
background: $grey-6;
padding: 8px;
height: 40px;
border: 1px solid $grey-4;
box-sizing: border-box;
border-radius: 4px;
width: 296px;
@include cn-regular-14;
&.phone {
width: 205px;
}
&.password {
width: 256px;
}
&.structureName {
width: 250px;
}
}
img {
&.eyePassword {
......
src/app/form/form.component.ts
+ 15
− 0
View file @ 126c32dc
......@@ -14,6 +14,7 @@ import { FonctionContactEnum } from '../shared/enum/fonctionContact.enum';
import { ProfileService } from '../profile/services/profile.service';
import { User } from '../models/user.model';
import { MustMatch } from '../shared/validator/form';
import { Address } from '../models/address.model';
@Component({
selector: 'app-structureForm',
......@@ -318,6 +319,9 @@ export class FormComponent implements OnInit {
this.accountForm.get('password').valid &&
this.accountForm.get('confirmPassword').valid,
};
this.pagesValidation[4] = {
valid: this.structureForm.get('structureName').valid && this.structureForm.get('address').valid,
};
this.updatePageValid();
}
......@@ -340,4 +344,15 @@ export class FormComponent implements OnInit {
public showConfirmPassword(): void {
this.isShowConfirmPassword = !this.isShowConfirmPassword;
}
public setAddressStructure(address?: Address): void {
if (address) {
this.getAddressControl('numero').setValue(address.numero);
this.getAddressControl('street').setValue(address.street);
this.getAddressControl('commune').setValue(address.commune);
} else {
this.structureForm.get('address').reset();
}
this.setValidationsForm();
}
}
src/app/shared/components/address-autocomplete/address-autocomplete.component.ts
+ 19
− 4
View file @ 126c32dc
import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { Address } from '../../../models/address.model';
import { AddressService } from '../../service/address.service';
@Component({
......@@ -6,28 +7,42 @@ import { AddressService } from '../../service/address.service';
templateUrl: './address-autocomplete.component.html',
styleUrls: ['./address-autocomplete.component.scss'],
})
export class AddressAutocompleteComponent {
export class AddressAutocompleteComponent implements OnInit {
public readonly AUTOCOMPLETE_NBR = 5;
public data = [];
@ViewChild('searchAddress', { static: true }) searchAddress: ElementRef;
@Output() selectedAddress: EventEmitter<string> = new EventEmitter<string>();
@Output() selectedAddress: EventEmitter<Address> = new EventEmitter<Address>();
@Output() inputAddress: EventEmitter<any> = new EventEmitter<any>();
@Input() private address?: Address;
constructor(private addressService: AddressService) {}
ngOnInit(): void {
if (this.address) {
const address_str = this.address.numero + ' ' + this.address.street + ' ' + this.address.commune;
this.searchAddress.nativeElement.value = address_str;
}
}
public onSearchChange(searchString: string) {
this.inputAddress.emit();
this.addressService.searchAddress(searchString).subscribe((data) => {
this.data = data.hits.hits.slice(0, this.AUTOCOMPLETE_NBR);
});
}
public selectedResult(hit: any): void {
const address = new Address();
address.numero = hit._source['data-fr'].properties.numero_str;
address.street = hit._source['data-fr'].properties.voie_str;
address.commune = hit._source['data-fr'].properties.commune_str;
const value = this.parseHitToAddress(hit);
// Set input value
this.searchAddress.nativeElement.value = value;
// Reset autocomplete
this.data = [];
// Emit choosen value
this.selectedAddress.emit(value);
this.selectedAddress.emit(address);
}
public parseHitToAddress(hit: any): string {
......
src/assets/scss/_inputs.scss
+ 4
− 1
View file @ 126c32dc
@import './color';
@import './shapes';
@import './typography';
@mixin input-search {
width: 100%;
......@@ -12,12 +13,14 @@
}
.form-input {
min-width: 290px;
width: 296px;
background: $grey-6;
border: 1px solid $grey-4;
box-sizing: border-box;
border-radius: $input-radius;
height: 40px;
padding: 8px;
@include cn-regular-14;
}
.form-input:focus {
border: 1px solid $blue;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment