From bc3621578bf50224b0b809e2f3acfa0e6a71b6ac Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Thu, 9 Sep 2021 11:28:16 +0200
Subject: [PATCH] FIX #17934 TIME 2 add autocomplete postcode front
---
.../page/form/contacts-form.component.html | 22 ++++++++-
.../page/form/contacts-form.component.ts | 48 ++++++++++++++++---
2 files changed, 62 insertions(+), 8 deletions(-)
diff --git a/src/frontend/app/administration/contact/page/form/contacts-form.component.html b/src/frontend/app/administration/contact/page/form/contacts-form.component.html
index cd2d8dc962f..f3224bbb094 100644
--- a/src/frontend/app/administration/contact/page/form/contacts-form.component.html
+++ b/src/frontend/app/administration/contact/page/form/contacts-form.component.html
@@ -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>
diff --git a/src/frontend/app/administration/contact/page/form/contacts-form.component.ts b/src/frontend/app/administration/contact/page/form/contacts-form.component.ts
index 351259415a5..e79d9cb7d56 100644
--- a/src/frontend/app/administration/contact/page/form/contacts-form.component.ts
+++ b/src/frontend/app/administration/contact/page/form/contacts-form.component.ts
@@ -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);
}
--
GitLab