FIX #11642 TIME 1:30 fix filter folder menu

src/frontend/app/folder/folder-menu/folder-menu.component.html

-<button mat-menu-item [matMenuTriggerFor]="currentFolders" *ngIf="currentFoldersList !== undefined && currentFoldersList.length > 0" class="folderAction">
+<button mat-menu-item [matMenuTriggerFor]="currentFolders"
+    *ngIf="currentFoldersList !== undefined && currentFoldersList.length > 0" class="folderAction">
     <mat-icon color="warn" class="fa fa-folder-minus fa-2x"></mat-icon>
     <span>{{lang.removeFromFolder}}...</span>
 </button>
 <mat-menu #currentFolders="matMenu" [class]="'folderListMenu'">
-    <button mat-menu-item *ngFor="let currentfolder of currentFoldersList | sortBy : 'label'" class="labelFolder" (click)="unclassifyDocuments(currentfolder)" [title]="currentfolder.label"><i class="fa fa-users private" *ngIf="currentfolder.public" title="{{lang.sharedFolder}}"></i> {{currentfolder.label}}</button>
+    <button mat-menu-item *ngFor="let currentfolder of currentFoldersList | sortBy : 'label'" class="labelFolder"
+        (click)="unclassifyDocuments(currentfolder)" [title]="currentfolder.label"><i class="fa fa-users private"
+            *ngIf="currentfolder.public" title="{{lang.sharedFolder}}"></i> {{currentfolder.label}}</button>
 </mat-menu>
-<button mat-menu-item [matMenuTriggerFor]="folders" class="folderAction" (menuOpened)="getFolders()" [disabled]="resIds.length === 0">
+<button mat-menu-item [matMenuTriggerFor]="folders" class="folderAction" (menuOpened)="initFolderMenu()"
+    [disabled]="resIds.length === 0">
     <mat-icon color="primary" class="fa fa-folder-open fa-2x"></mat-icon>
     <span>{{lang.classifyIn}}</span>
 </button>
-<mat-menu #folders="matMenu" [class]="'folderListMenu'">
-        <plugin-autocomplete [labelPlaceholder]="lang.searchFolder" [size]="'small'"
+<mat-menu #folders="matMenu" [class]="'folderListMenu'" restoreFocus="false">
+    <ng-template matMenuContent>
+        <mat-form-field floatLabel="never" appearance="outline" class="smallInput"  (click)="$event.stopPropagation();">
+            <input matInput id="searchTerm" placeholder="{{lang.searchFolder}}" [formControl]="searchTerm" autocomplete="off" (click)="$event.stopPropagation();" (keydown)="$event.stopPropagation()">
+        </mat-form-field>
+        <!--<plugin-autocomplete [labelPlaceholder]="lang.searchFolder" [size]="'small'"
         [routeDatas]="['/rest/autocomplete/folders']" [targetSearchKey]="'idToDisplay'"
-        (triggerEvent)="classifyDocuments($event)"></plugin-autocomplete>
-    <button *ngIf="foldersList.length === 0" mat-menu-item class="noFolder" disabled>{{lang.noAvailableFolder}}</button>
-    <button mat-menu-item *ngFor="let folder of foldersList | sortBy : 'label'" class="labelFolder" (click)="classifyDocuments(folder)" [title]="folder.label"><i class="fa fa-users private" *ngIf="folder.public" title="{{lang.sharedFolder}}"></i> {{folder.label}}</button>
+        (triggerEvent)="classifyDocuments($event)"></plugin-autocomplete>-->
+        <button *ngIf="foldersList.length === 0" mat-menu-item class="noFolder"
+            disabled>{{lang.noAvailableFolder}}</button>
+        <button mat-menu-item *ngFor="let folder of foldersList | sortBy : 'label'" class="labelFolder"
+            (click)="classifyDocuments(folder)" [title]="folder.label"><i class="fa fa-users private"
+                *ngIf="folder.public" title="{{lang.sharedFolder}}"></i> {{folder.label}}</button>
+    </ng-template>
 </mat-menu>
\ No newline at end of file

src/frontend/app/folder/folder-menu/folder-menu.component.scss

@@ -27,4 +27,14 @@
     color: rgb(102, 102, 102);
     text-align: center;
     font-style: italic;
+}
+
+.smallInput {
+    font-size: 11px;
+    padding-left: 20px;
+    padding-right: 20px;
+    ::ng-deep.mat-form-field-infix {
+        padding : 0px;
+        padding-bottom: 5px;
+    }
 }
\ No newline at end of file

src/frontend/app/folder/folder-menu/folder-menu.component.ts

-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, Renderer2 } from '@angular/core';
 import { LANG } from '../../translate.component';
 import { HttpClient } from '@angular/common/http';
-import { map, tap, catchError, filter, exhaustMap } from 'rxjs/operators';
+import { map, tap, catchError, filter, exhaustMap, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 import { of } from 'rxjs';
 import { NotificationService } from '../../notification.service';
 import { ConfirmComponent } from '../../../plugins/modal/confirm.component';
 import { MatDialogRef, MatDialog } from '@angular/material/dialog';
+import { FormControl } from '@angular/forms';
 
 @Component({
     selector: 'folder-menu',
@@ -24,15 +25,47 @@ export class FolderMenuComponent implements OnInit {
     @Output('refreshFolders') refreshFolders = new EventEmitter<string>();
     @Output('refreshList') refreshList = new EventEmitter<string>();
 
+    searchTerm: FormControl = new FormControl();
+
     dialogRef: MatDialogRef<any>;
-    
+
     constructor(
         public http: HttpClient,
         private notify: NotificationService,
-        public dialog: MatDialog
+        public dialog: MatDialog,
+        private renderer: Renderer2
     ) { }
 
-    ngOnInit(): void { }
+    ngOnInit(): void {
+        this.searchTerm.valueChanges.pipe(
+            debounceTime(300),
+            tap((value: any) => {
+                if (value.length === 0) {
+                    this.getFolders();
+                }
+            }),
+            filter(value => value.length > 2),
+            distinctUntilChanged(),
+            switchMap(data => this.http.get('../../rest/autocomplete/folders', { params: { "search": data } })),
+            tap((data: any) => {
+                this.foldersList = data.map(
+                    (info: any) => {
+                        return {
+                            id: info.id,
+                            label: info.idToDisplay
+                        }
+                    }
+                );
+            })
+        ).subscribe();
+    }
+
+    initFolderMenu() {
+        this.searchTerm.setValue('');
+        setTimeout(() => {
+            this.renderer.selectRootElement('#searchTerm').focus();
+        }, 200);
+    }
 
     getFolders() {
         this.http.get("../../rest/folders").pipe(

src/frontend/plugins/filterList.pipe.ts

@@ -19,18 +19,6 @@ export class FilterListPipe implements PipeTransform {
 			console.log('Init filter failed for values : ');
 			console.log(value);
 		}
-		
 	}
 }
 
-/*@Pipe({
-	name: 'filterShortcut'
-})
-export class FilterShortcutPipe implements PipeTransform {
-
-	transform(value: any, args: string): any {
-
-		let filter = args.toLocaleLowerCase();
-		return filter ? value.filter((shortcut:any) => shortcut.label.toLocaleLowerCase().indexOf(filter) != -1) : value;
-	}
-}*/