TSK-1490: Fix autocomplete in workplace workbasket search

web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.html

@@ -5,10 +5,26 @@
         <span class="material-icons md-20 green-blue">add_circle_outline</span>
       </button>
     </div>
+
+    <!-- SEARCH INPUT -->
     <div [ngClass]="{'col-xs-8': !searched, 'col-xs-5': searched}">
-      <input [(ngModel)]="resultName" *ngIf="searchSelected === search.byWorkbasket" [typeahead]="workbasketNames"
-        class="form-control" (typeaheadOnSelect)="searchBasket()" (typeaheadNoResults)="workbasketSelected = false"
-        placeholder="Search for Workbasket ..." />
+
+      <!-- SEARCH FOR WORKBASKET -->
+      <mat-form-field *ngIf="searchSelected === search.byWorkbasket" class="task-list-toolbar__search-workbasket">
+        <input matInput
+               type="text"
+               placeholder="Search for workbasket ..."
+               [(ngModel)]="resultName"
+               (ngModelChange)="filterWorkbasketNames()"
+               [matAutocomplete]="auto">
+        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="searchBasket()">
+          <mat-option *ngFor="let workbasketName of filteredWorkbasketNames" [value]="workbasketName">
+            {{workbasketName}}
+          </mat-option>
+        </mat-autocomplete>
+      </mat-form-field>
+
+      <!-- SEARCH FOR TYPE AND VALUE-->
       <div class="input-group" *ngIf="searchSelected === search.byTypeAndValue">
         <input [(ngModel)]="resultType" class="form-control" (keyup.enter)="searchBasket()" placeholder="Search by type ..." />
         <span _ngcontent-c10="" class="input-group-btn">
@@ -20,6 +36,8 @@
       <input [(ngModel)]="resultValue" *ngIf="searchSelected === search.byTypeAndValue" class="form-control" (keyup.enter)="searchBasket()"
         placeholder="Search by value ..." />
     </div>
+
+
     <div *ngIf="searched" class="pull-right margin-right btn-group">
       <taskana-shared-sort class="btn-group" [sortingFields]="sortingFields" [defaultSortBy]="taskDefaultSortBy"
                            (performSorting)="sorting($event)"> </taskana-shared-sort>

web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.scss

@@ -1,5 +1,9 @@
 @import '../../../../theme/colors';
 
+.task-list-toolbar__search-workbasket {
+  margin-left: 16px;
+}
+
 .list-group-item {
   padding: 5px 0px 2px 1px;
   border: none;

web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.ts

@@ -31,6 +31,7 @@ export class TaskListToolbarComponent implements OnInit {
 
   tasks: Task[] = [];
   workbasketNames: string[] = [];
+  filteredWorkbasketNames: string[] = this.workbasketNames;
   resultName = '';
   resultId = '';
   workbaskets: Workbasket[];
@@ -77,6 +78,12 @@ export class TaskListToolbarComponent implements OnInit {
     }
   }
 
+  filterWorkbasketNames() {
+    this.filteredWorkbasketNames = this.workbasketNames.filter((value) =>
+      value.toLowerCase().includes(this.resultName.toLowerCase())
+    );
+  }
+
   searchBasket() {
     this.toolbarState = false;
     this.workbasketSelected = true;

web/src/app/workplace/workplace.module.ts

@@ -23,6 +23,9 @@ import { TaskListComponent } from './components/task-list/task-list.component';
 import { TaskService } from './services/task.service';
 import { TokenInterceptor } from './services/token-interceptor.service';
 import { WorkplaceService } from './services/workplace.service';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatInputModule } from '@angular/material/input';
 
 const MODULES = [
   TypeaheadModule.forRoot(),
@@ -34,7 +37,10 @@ const MODULES = [
   AngularSvgIconModule,
   WorkplaceRoutingModule,
   AlertModule,
-  SharedModule
+  SharedModule,
+  MatFormFieldModule,
+  MatAutocompleteModule,
+  MatInputModule
 ];
 
 const DECLARATIONS = [
@@ -51,7 +57,7 @@ const DECLARATIONS = [
 
 @NgModule({
   declarations: DECLARATIONS,
-  imports: MODULES,
+  imports: [MODULES],
   providers: [
     TaskService,
     ClassificationCategoriesService,