FEAT #14005 TIME 0:20 add country autocomplete issuing list

src/frontend/app/administration/registered-mail/issuing-site/issuing-site.component.html

@@ -38,17 +38,19 @@
                                 </div>
                                 <mat-form-field appearance='outline' class="smallInput">
                                     <button mat-button matSuffix [matMenuTriggerFor]="menuDep"
-                                        (click)="$event.stopPropagation();" [title]="this.translate.instant('lang.targetDepartment')">
+                                        (click)="$event.stopPropagation();"
+                                        [title]="this.translate.instant('lang.targetDepartment')">
                                         {{addressBANCurrentDepartment}}&nbsp;<i class="fa fa-chevron-down"></i>
                                     </button>
                                     <mat-menu #menuDep="matMenu">
                                         <button mat-menu-item *ngFor="let dep of departmentList"
                                             (click)="addressBANCurrentDepartment = dep">{{dep}}</button>
                                     </mat-menu>
-                                    <mat-icon color="primary" class="fa fa-search" matPrefix
-                                        style="font-size: 15px;"></mat-icon>
-                                    <input type="text" #autoCompleteInput [placeholder]="this.translate.instant('lang.searchAddressBan')"
-                                        matInput [formControl]="addressBANControl" [matAutocomplete]="auto"
+                                    <mat-icon color="primary" class="fa fa-search" matPrefix style="font-size: 15px;">
+                                    </mat-icon>
+                                    <input type="text" #autoCompleteInput
+                                        [placeholder]="this.translate.instant('lang.searchAddressBan')" matInput
+                                        [formControl]="addressBANControl" [matAutocomplete]="auto"
                                         (click)="$event.stopPropagation()" (focus)="resetAutocompleteAddressBan()"
                                         maxlength="128">
                                     <mat-autocomplete #auto="matAutocomplete"
@@ -95,12 +97,21 @@
                                 </mat-form-field>
                                 <mat-form-field>
                                     <mat-label>{{'lang.contactsParameters_addressCountry' | translate}}</mat-label>
-                                    <input matInput formControlName="addressCountry">
+                                    <input matInput #autoCompleteInput [matAutocomplete]="matAutocompleteCountries"
+                                        formControlName="addressCountry">
+                                    <mat-autocomplete #matAutocompleteCountries="matAutocomplete"
+                                        (optionSelected)="adminFormGroup.controls['addressCountry'].setValue($event.option.value)" [isOpen]="true">
+                                        <mat-option *ngFor="let country of countriesFilteredResult | async"
+                                            [value]="country">
+                                            {{country}}
+                                        </mat-option>
+                                    </mat-autocomplete>
                                 </mat-form-field>
                             </div>
                         </div>
                         <div style="text-align:center;">
-                            <button mat-raised-button color="primary" type="submit" [disabled]="!adminFormGroup.valid">{{'lang.save' | translate}}</button>
+                            <button mat-raised-button color="primary" type="submit"
+                                [disabled]="!adminFormGroup.valid">{{'lang.save' | translate}}</button>
                         </div>
                     </form>
                 </mat-card>
@@ -108,12 +119,12 @@
         </div>
     </mat-sidenav-content>
     <mat-sidenav #snav2 [mode]="appService.getViewMode() ? 'over' : 'side'" [fixedInViewport]="appService.getViewMode()"
-    fixedTopGap="56" position='end' [opened]="!appService.getViewMode()" style="overflow-x:hidden;width:400px;">
-    <mat-list>
-        <h3 mat-subheader>{{'lang.chooseEntityAssociationModel' | translate}}</h3>
-        <div style="padding:10px;">
-            <app-maarch-flat-tree #maarchTree></app-maarch-flat-tree>
-        </div>
-    </mat-list>
-</mat-sidenav>
-</mat-sidenav-container>
+        fixedTopGap="56" position='end' [opened]="!appService.getViewMode()" style="overflow-x:hidden;width:400px;">
+        <mat-list>
+            <h3 mat-subheader>{{'lang.chooseEntityAssociationModel' | translate}}</h3>
+            <div style="padding:10px;">
+                <app-maarch-flat-tree #maarchTree></app-maarch-flat-tree>
+            </div>
+        </mat-list>
+    </mat-sidenav>
+</mat-sidenav-container>
\ No newline at end of file

src/frontend/app/administration/registered-mail/issuing-site/issuing-site.component.ts

@@ -7,9 +7,10 @@ import { NotificationService } from '../../../../service/notification/notificati
 import { HeaderService } from '../../../../service/header.service';
 import { AppService } from '../../../../service/app.service';
 import { MaarchFlatTreeComponent } from '../../../../plugins/tree/maarch-flat-tree.component';
-import { map, tap, catchError, debounceTime, filter, distinctUntilChanged, switchMap } from 'rxjs/operators';
+import { map, tap, catchError, debounceTime, filter, distinctUntilChanged, switchMap, startWith } from 'rxjs/operators';
 import { of } from 'rxjs/internal/observable/of';
 import { Observable } from 'rxjs/internal/Observable';
+import { LatinisePipe } from 'ngx-pipes';
 
 @Component({
     selector: 'app-issuing-site',
@@ -23,6 +24,10 @@ export class IssuingSiteComponent implements OnInit {
 
     adminFormGroup: FormGroup;
     entities: any = [];
+
+    countries: any = [];
+    countriesFilteredResult: Observable<string[]>;
+
     id: number = null;
 
     addressBANInfo: string = '';
@@ -45,6 +50,7 @@ export class IssuingSiteComponent implements OnInit {
         private headerService: HeaderService,
         public appService: AppService,
         private _formBuilder: FormBuilder,
+        private latinisePipe: LatinisePipe,
     ) { }
 
     ngOnInit(): void {
@@ -68,6 +74,8 @@ export class IssuingSiteComponent implements OnInit {
                     addressTown: [''],
                     addressCountry: ['']
                 });
+                this.getCountries();
+                this.initAutocompleteCountries();
                 this.loading = false;
 
                 await this.getEntities();
@@ -81,6 +89,9 @@ export class IssuingSiteComponent implements OnInit {
 
                 await this.getEntities();
                 await this.getData();
+
+                this.getCountries();
+                this.initAutocompleteCountries();
                 this.maarchTree.initData(this.entities);
             }
         });
@@ -139,6 +150,20 @@ export class IssuingSiteComponent implements OnInit {
             })
         ).subscribe();
     }
+    initAutocompleteCountries() {
+        this.countriesFilteredResult = this.adminFormGroup.controls['addressCountry'].valueChanges
+        .pipe(
+            startWith(''),
+            map(value => this._filter(value))
+        );
+    }
+
+    private _filter(value: string): string[] {
+        const filterValue = value.toLowerCase();
+        console.log(this.countries);
+        
+        return this.countries.filter(option => option.toLowerCase().includes(filterValue));
+      }
 
     initAutocompleteAddressBan() {
         this.addressBANInfo = this.translate.instant('lang.autocompleteInfo');
@@ -206,6 +231,19 @@ export class IssuingSiteComponent implements OnInit {
         });
     }
 
+    getCountries() {
+        this.http.get(`../rest/registeredMail/countries`).pipe(
+            tap((data: any) => {
+                this.countries = data.countries.map(
+                    (item: any) => this.latinisePipe.transform(item.toUpperCase()));
+            }),
+            catchError((err: any) => {
+                this.notify.handleSoftErrors(err);
+                return of(false);
+            })
+        ).subscribe();
+    }
+
     onSubmit() {
         const objToSubmit = {};
         Object.keys(this.adminFormGroup.controls).forEach(key => {