Skip to content
Snippets Groups Projects
Commit bc362157 authored by Alex ORLUC's avatar Alex ORLUC
Browse files

FIX #17934 TIME 2 add autocomplete postcode front

parent c6805919
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/frontend/app/administration/contact/page/form/contacts-form.component.html
+ 21
− 1
View file @ bc362157
......@@ -104,7 +104,7 @@
*ngIf="(field.unit === unit.id && unit.id !== 'address') || (field.unit === unit.id && unit.id === 'address' && !addressBANMode)">
<p mat-line class="contact-content" *ngIf="field.display">
<ng-container
*ngIf="field.type === 'string' && field.id !== 'communicationMeans' && field.id !== 'externalId_m2m' && field.id != 'addressCountry'">
*ngIf="field.type === 'string' && field.id !== 'communicationMeans' && field.id !== 'externalId_m2m' && field.id != 'addressCountry' && field.id != 'addressPostcode' && field.id != 'addressTown'">
<mat-form-field>
<input matInput [formControl]="field.control" [placeholder]="field.label"
(blur)="checkCompany(field);checkFilling();" (ngModelChange)="toUpperCase(field, $event)" [required]="field.required">
......@@ -265,6 +265,26 @@
</mat-autocomplete>
</mat-form-field>
</ng-container>
<ng-container *ngIf="field.id === 'addressPostcode'">
<mat-form-field>
<input matInput #autoCompleteInput [formControl]="field.control" [placeholder]="field.label" [matAutocomplete]="matAutocompletePostCode">
<mat-autocomplete #matAutocompletePostCode="matAutocomplete" (optionSelected)="selectPostCode($event)">
<mat-option *ngFor="let postcode of postcodesFilteredResult | async" [value]="postcode">
{{postcode.postcode}} - {{postcode.town}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</ng-container>
<ng-container *ngIf="field.id === 'addressTown'">
<mat-form-field>
<input matInput #autoCompleteInput [formControl]="field.control" [placeholder]="field.label" [matAutocomplete]="matAutocompletePostCodeTown">
<mat-autocomplete #matAutocompletePostCodeTown="matAutocomplete" (optionSelected)="selectPostCode($event)">
<mat-option *ngFor="let postcode of postcodesFilteredResult | async" [value]="postcode">
{{postcode.postcode}} - {{postcode.town}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</ng-container>
<ng-container *ngIf="field.id === 'correspondentsGroups'">
<app-input-correspondent-group #appInputCorrespondentGroup [id]="contactId" [type]="'contact'" style="display: block;" (afterCorrespondentsGroupsLoaded)="handleCorrespondentsGroupsField($event,field)"></app-input-correspondent-group>
</ng-container>
......
src/frontend/app/administration/contact/page/form/contacts-form.component.ts
+ 41
− 7
View file @ bc362157
......@@ -53,6 +53,7 @@ export class ContactsFormComponent implements OnInit {
countries: any = [];
countriesFilteredResult: Observable<string[]>;
postcodesFilteredResult: Observable<string[]>;
countryControl = new FormControl();
loading: boolean = false;
......@@ -260,7 +261,7 @@ export class ContactsFormComponent implements OnInit {
unit: 'address',
label: this.translate.instant('lang.contactsParameters_sector'),
type: 'string',
control: new FormControl({value: '', disabled: true}),
control: new FormControl({ value: '', disabled: true }),
required: false,
display: false,
filling: false,
......@@ -379,7 +380,7 @@ export class ContactsFormComponent implements OnInit {
this.initAutocompleteCommunicationMeans();
this.initAutocompleteExternalIdM2M();
this.getCountries();
this.initAutocompleteCountries();
this.initAutocompleteCountriesAndPostcodes();
}),
finalize(() => this.loading = false),
catchError((err: any) => {
......@@ -411,7 +412,7 @@ export class ContactsFormComponent implements OnInit {
this.initAutocompleteCommunicationMeans();
this.initAutocompleteExternalIdM2M();
this.getCountries();
this.initAutocompleteCountries();
this.initAutocompleteCountriesAndPostcodes();
}),
exhaustMap(() => this.http.get('../rest/contacts/' + this.contactId)),
map((data: any) => {
......@@ -504,7 +505,7 @@ export class ContactsFormComponent implements OnInit {
).subscribe();
}
initAutocompleteCountries() {
initAutocompleteCountriesAndPostcodes() {
this.contactForm.map((field: any) => {
if (field.id === 'addressCountry') {
this.countriesFilteredResult = field.control.valueChanges
......@@ -513,9 +514,26 @@ export class ContactsFormComponent implements OnInit {
map((value: any) => this._filter(value))
);
}
if (field.id === 'addressPostcode') {
this.postcodesFilteredResult = field.control.valueChanges
.pipe(
startWith(''),
exhaustMap((value: string) => this.http.get('../rest/postcode?search=' + value)),
map((data: any) => data.postcodes),
);
}
});
}
selectPostcode(ev: any) {
this.contactForm.find(contact => contact.id === 'addressPostcode')?.control.setValue(ev.option.value.id);
this.contactForm.find(contact => contact.id === 'addressTown')?.control.setValue(ev.option.value.label);
// for test
this.contactForm.find(contact => contact.id === 'addressPostcode')?.control.setValue(92000);
this.contactForm.find(contact => contact.id === 'addressTown')?.control.setValue('NANTERRE');
}
selectCountry(ev: any) {
const indexFieldAddressCountry = this.contactForm.map(field => field.id).indexOf('addressCountry');
this.contactForm[indexFieldAddressCountry].control.setValue(ev.option.value);
......@@ -812,7 +830,7 @@ export class ContactsFormComponent implements OnInit {
}
});
this.checkFilling();
this.http.get('../rest/contacts/sector', {params: {'addressNumber': contact['addressNumber'], 'addressStreet': contact['addressStreet'], 'addressPostcode': contact['addressPostcode'], 'addressTown': contact['addressTown']}}).pipe(
this.http.get('../rest/contacts/sector', { params: { 'addressNumber': contact['addressNumber'], 'addressStreet': contact['addressStreet'], 'addressPostcode': contact['addressPostcode'], 'addressTown': contact['addressTown'] } }).pipe(
tap((data: any) => {
const sectorIndex = this.contactForm.findIndex(element => element.id === 'sector');
if (data.sector !== null) {
......@@ -1015,6 +1033,22 @@ export class ContactsFormComponent implements OnInit {
).subscribe();
}
initAutocompletePostcode() {
// this.addressBANInfo = this.translate.instant('lang.autocompleteInfo');
// this.addressBANResult = [];
this.contactForm.filter(contact => contact.id === 'addressPostcode')[0].control.valueChanges
.pipe(
debounceTime(300),
filter((value: string) => value.length > 2),
distinctUntilChanged(),
// tap(() => this.addressBANLoading = true),
// switchMap((data: any) => this.http.get('../rest/autocomplete/banAddresses', { params: { 'address': data, 'department': this.addressBANCurrentDepartment } })),
tap((data: any) => {
console.log('coucou');
})
).subscribe();
}
resetAutocompleteAddressBan() {
this.addressBANResult = [];
this.addressBANInfo = this.translate.instant('lang.autocompleteInfo');
......@@ -1024,7 +1058,7 @@ export class ContactsFormComponent implements OnInit {
const contact = {
addressNumber: ev.option.value.number,
addressStreet: ev.option.value.afnorName,
addressPostcode: ev.option.value.postalCode,
addressPostcode: ev.option.value.postcode,
addressTown: ev.option.value.city,
addressCountry: 'FRANCE'
};
......@@ -1130,7 +1164,7 @@ export class ContactsFormComponent implements OnInit {
for (let i = 0; i < splitStr.length; i++) {
splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);
}
target.control.setValue( splitStr.join('-'));
target.control.setValue(splitStr.join('-'));
}
}, 100);
}
......
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