diff --git a/src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.html b/src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.html index d5e4ba591c630b26f1b928ce7d5eeb2271fe21fb..111fdfa38342561119b4c24d7cad0dde1f66d0c2 100644 --- a/src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.html +++ b/src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.html @@ -1,12 +1,20 @@ <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> diff --git a/src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.scss b/src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.scss index 7fd5088505cde5204afadd8adcfda3301e1fa6ba..f79d1fc8143dfbd0b169fae2ff41cca063f20bbd 100644 --- a/src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.scss +++ b/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