diff --git a/src/frontend/app/notes/note-editor.component.html b/src/frontend/app/notes/note-editor.component.html index e3aa307c0247b20bf25add25bf63fd88b3b68e7d..f5ac2107555b688a68424e2c6675c85c2ca6bd84 100644 --- a/src/frontend/app/notes/note-editor.component.html +++ b/src/frontend/app/notes/note-editor.component.html @@ -30,10 +30,18 @@ style="z-index:1;position: sticky;top: 0px;text-align: center;font-size: 10px;color: white;background: #135F7F;padding: 5px;font-weight: bold;"> {{lang.entities}} </div> - <button mat-menu-item *ngFor="let entity of entities" [disabled]="entity.selected" [title]="entity.entity_label" - (click)="$event.stopPropagation();selectEntity(entity)"> - <span>{{entity.entity_label}}</span> - </button> + <ng-template matMenuContent> + <mat-form-field floatLabel="never" appearance="outline" class="smallInput" (click)="$event.stopPropagation();" style="margin-bottom: -15px;"> + <input matInput id="searchTerm" placeholder="{{lang.searchEntities}}" [formControl]="searchTerm" + autocomplete="off" (click)="$event.stopPropagation();" (keydown)="$event.stopPropagation()"> + </mat-form-field> + <ng-container> + <button mat-menu-item *ngFor="let entity of entitiesList" class="labelFolder" [disabled]="entity.selected" + (click)="$event.stopPropagation();selectEntity(entity)" [title]="entity.entity_label"> + {{entity.entity_label}} + </button> + </ng-container> + </ng-template> </mat-menu> <button *ngIf="addMode" color="primary" matSuffix mat-icon-button title="{{lang.add}}" (click)="addNote()" diff --git a/src/frontend/app/notes/note-editor.component.scss b/src/frontend/app/notes/note-editor.component.scss index 29a4938ce502a74f3b61dcc22c8375056e09f233..4b717d12a7a7a9f637a771f7efbc83c2f1312c7c 100644 --- a/src/frontend/app/notes/note-editor.component.scss +++ b/src/frontend/app/notes/note-editor.component.scss @@ -39,4 +39,20 @@ display: inline-block; margin: 5px !important; cursor: pointer; +} + +.labelFolder { + color: rgb(102, 102, 102); + font-size: 12px; + font-weight: bold; +} + +.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/notes/note-editor.component.ts b/src/frontend/app/notes/note-editor.component.ts index 491916810674f5879714658b45354c726fd09448..532ea4dd4941ceddc8202ea1ba1d8470ababf873 100644 --- a/src/frontend/app/notes/note-editor.component.ts +++ b/src/frontend/app/notes/note-editor.component.ts @@ -2,10 +2,11 @@ import { Component, Input, EventEmitter, Output, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { LANG } from '../translate.component'; import { NotificationService } from '../notification.service'; -import { catchError, tap } from 'rxjs/operators'; +import { catchError, tap, debounceTime, filter } from 'rxjs/operators'; import { HeaderService } from '../../service/header.service'; import { of } from 'rxjs'; import { FunctionsService } from '../../service/functions.service'; +import { FormControl } from '@angular/forms'; @Component({ selector: 'app-note-editor', @@ -34,6 +35,9 @@ export class NoteEditorComponent implements OnInit { @Input('defaultRestriction') defaultRestriction: boolean; @Output('refreshNotes') refreshNotes = new EventEmitter<string>(); + searchTerm: FormControl = new FormControl(); + entitiesList: any[] = []; + constructor( public http: HttpClient, private notify: NotificationService, @@ -51,6 +55,26 @@ export class NoteEditorComponent implements OnInit { this.content = this.noteContent; this.entitiesRestriction = this.entitiesNoteRestriction; } + + this.entitiesList = this.entities; + + this.searchTerm.valueChanges.pipe( + debounceTime(300), + //distinctUntilChanged(), + tap((data: any) => { + if (data.length > 0) { + this.entitiesList = this.entities.filter( (it: any) => { + return (it.entity_label.toLowerCase().includes(data) || it.entity_id.toLowerCase().includes(data)); + }); + } else { + this.entitiesList = this.entities; + } + }), + catchError((err) => { + this.notify.handleErrors(err); + return of(false); + }) + ).subscribe(); } setDefaultRestriction() {