FEAT #12361 TIME 0:15 add department list

src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.html

 <form>
     <input type="hidden" [formControl]="controlAutocomplete">
-    <mat-form-field floatLabel="never" class="input-form" *ngIf="!controlAutocomplete.disabled">
-        <mat-icon color="primary" class="fa fa-search" matPrefix style="padding-left: 20px;font-size: 15px;"></mat-icon>
+    <mat-form-field floatLabel="never" class="input-form depList" *ngIf="!controlAutocomplete.disabled">
+        <button mat-button matPrefix [matMenuTriggerFor]="menu"(click)="$event.stopPropagation()">
+            {{addressBANCurrentDepartment}} <i class="fas fa-angle-down"></i>
+        </button>
+        <mat-menu #menu="matMenu">
+            <button mat-menu-item *ngFor="let dep of departmentList" (click)="addressBANCurrentDepartment = dep">
+                <span>{{dep}}</span>
+            </button>
+        </mat-menu>
         <input type="text" #autoCompleteInput [placeholder]="lang.searchAddressBan" matInput [formControl]="myControl"
             [matAutocomplete]="auto" (click)="$event.stopPropagation()" (focus)="resetAutocomplete()">
         <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectOpt($event)">
             <ng-container *ngIf="options.length > 0 && !loading">
-                <mat-option *ngFor="let option of filteredOptions | async | sortBy: key" [value]="option" [title]="option[key]">
+                <mat-option *ngFor="let option of filteredOptions | async | sortBy: key" [value]="option"
+                    [title]="option[key]">
                     <span color="primary">{{option[key]}}</span>
                 </mat-option>
             </ng-container>
@@ -19,10 +27,13 @@
         </mat-autocomplete>
     </mat-form-field>
     <div class="itemList">
-        <mat-chip-list *ngIf="controlAutocomplete.value.length > 0" class="mat-chip-list-stacked itemChip" color="default">
-            <mat-chip *ngFor="let item of controlAutocomplete.value;let i=index" class="activeListAutocomplete" style="height:auto;"
-                color="default" [removable]="!controlAutocomplete.disabled" (removed)="removeItem(i)">
-                <span style="display: flex;flex: 1;align-items: center;cursor: pointer;" [title]="this.valuesToDisplay[item.id]" (click)="goTo(item)">
+        <mat-chip-list *ngIf="controlAutocomplete.value.length > 0" class="mat-chip-list-stacked itemChip"
+            color="default">
+            <mat-chip *ngFor="let item of controlAutocomplete.value;let i=index" class="activeListAutocomplete"
+                style="height:auto;" color="default" [removable]="!controlAutocomplete.disabled"
+                (removed)="removeItem(i)">
+                <span style="display: flex;flex: 1;align-items: center;cursor: pointer;"
+                    [title]="this.valuesToDisplay[item.id]" (click)="goTo(item)">
                     {{this.valuesToDisplay[item.id]}}
                 </span>
                 <mat-icon matChipRemove class="fa fa-times" *ngIf="!controlAutocomplete.disabled"></mat-icon>

src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.scss

@@ -33,4 +33,8 @@
     padding-top: 10px;
     overflow-x: hidden;
     max-height: 165px;
+}
+
+.depList ::ng-deep.mat-form-field-infix {
+    margin-left: -20px;
 }
\ No newline at end of file