From 27db0d243b0baeddf98225489690c975a0737d91 Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Wed, 11 Sep 2019 19:36:44 +0200
Subject: [PATCH] FIX #11642 TIME 1:30 fix filter folder menu
---
.../folder-menu/folder-menu.component.html | 28 ++++++++----
.../folder-menu/folder-menu.component.scss | 10 +++++
.../folder-menu/folder-menu.component.ts | 43 ++++++++++++++++---
src/frontend/plugins/filterList.pipe.ts | 12 ------
4 files changed, 68 insertions(+), 25 deletions(-)
diff --git a/src/frontend/app/folder/folder-menu/folder-menu.component.html b/src/frontend/app/folder/folder-menu/folder-menu.component.html
index abdd402abd8..98a521ae3e6 100644
--- a/src/frontend/app/folder/folder-menu/folder-menu.component.html
+++ b/src/frontend/app/folder/folder-menu/folder-menu.component.html
@@ -1,18 +1,30 @@
-<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
diff --git a/src/frontend/app/folder/folder-menu/folder-menu.component.scss b/src/frontend/app/folder/folder-menu/folder-menu.component.scss
index 5ec433d5b41..5221d62bc8a 100644
--- a/src/frontend/app/folder/folder-menu/folder-menu.component.scss
+++ b/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
diff --git a/src/frontend/app/folder/folder-menu/folder-menu.component.ts b/src/frontend/app/folder/folder-menu/folder-menu.component.ts
index fb73fce318f..d8e34382c5d 100644
--- a/src/frontend/app/folder/folder-menu/folder-menu.component.ts
+++ b/src/frontend/app/folder/folder-menu/folder-menu.component.ts
@@ -1,11 +1,12 @@
-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(
diff --git a/src/frontend/plugins/filterList.pipe.ts b/src/frontend/plugins/filterList.pipe.ts
index 603fd95f089..87cbbae6623 100755
--- a/src/frontend/plugins/filterList.pipe.ts
+++ b/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;
- }
-}*/
--
GitLab