fix(select-input): Fix work typeahead and add async loading #81

Author: EndyKaufman

libs/web/src/base/base-resources-grid/base-resource-select-input/base-resource-select-input.component.ts

@@ -51,6 +51,8 @@ export class BaseResourceSelectInputComponent extends BaseResourcesListComponent
 
   config: BaseResourceSelectInputConfig;
 
+  prevValue: string;
+
   get value() {
     return this.model;
   }
@@ -123,4 +125,19 @@ export class BaseResourceSelectInputComponent extends BaseResourcesListComponent
       this.search();
     }
   }
+  changeInputValue(value: string) {
+    const filter: any = {};
+    if (this.cachedResourcesService && this.prevValue !== value) {
+      this.cachedResourcesService.ignoreCache = true;
+      this.cachedResourcesService.loadAll(value, filter);
+    }
+    this.prevValue = value;
+  }
+  focusInput(value: string) {
+    const filter: any = {};
+    if (this.cachedResourcesService) {
+      this.cachedResourcesService.ignoreCache = true;
+      this.cachedResourcesService.loadAll(value, filter);
+    }
+  }
 }

libs/web/src/controls/select-input/select-input.component.html

@@ -6,7 +6,8 @@
         [typeaheadOptionsInScrollableView]="5" [typeaheadMinLength]="0" [attr.placeholder]="placeholder" (typeaheadOnSelect)="value = $event.item"
         (typeaheadNoResults)="onTypeaheadNoResults($event)" [ngClass]="inputClass" [disabled]="readonly && inputReadonly" [attr.id]="'input'+name"
         [attr.name]="'input'+name" [tooltip]="tooltipText" tooltipPlacement="{{tooltipPlacement}}" tooltipTrigger="{{tooltipTriggers}}"
-        [isDisabled]="!tooltipEnable" (onShown)="showTooltip()" #tooltip="bs-tooltip" #inputElement/>
+        [isDisabled]="!tooltipEnable" (onShown)="showTooltip()" #tooltip="bs-tooltip" (focus)="inputFocus(textValue)" (typeaheadLoading)="loading($event)"
+        autocomplete="off" #typeahead="bs-typeahead" #inputElement/>
     </div>
     <span class="help-block" *ngIf="!tooltipEnable && (errorMessage || infoMessage)" [innerHtml]="(errorMessage || infoMessage) | safeHtml"></span>
   </div>
@@ -16,7 +17,8 @@
         [typeaheadOptionsInScrollableView]="5" [typeaheadMinLength]="0" [attr.placeholder]="placeholder" (typeaheadOnSelect)="value = $event.item"
         (typeaheadNoResults)="onTypeaheadNoResults($event)" [ngClass]="inputClass" [disabled]="readonly && inputReadonly" [attr.id]="'input'+name"
         [attr.name]="'input'+name" [tooltip]="tooltipText" tooltipPlacement="{{tooltipPlacement}}" tooltipTrigger="{{tooltipTriggers}}"
-        [isDisabled]="!tooltipEnable" (onShown)="showTooltip()" #tooltip="bs-tooltip" #inputElement/>
+        [isDisabled]="!tooltipEnable" (onShown)="showTooltip()" #tooltip="bs-tooltip" (focus)="inputFocus(textValue)" (typeaheadLoading)="loading($event)"
+        autocomplete="off" #typeahead="bs-typeahead" #inputElement/>
     </div>
   </div>
 </div>

libs/web/src/controls/select-input/select-input.component.ts

@@ -1,9 +1,11 @@
-import { Component, ElementRef, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { Injector } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
 import { TooltipDirective } from 'ngx-bootstrap/tooltip';
+import { TypeaheadDirective } from 'ngx-bootstrap/typeahead';
 import { debounceTime } from 'rxjs/operators';
 import { Subject } from 'rxjs/Subject';
+import { setTimeout } from 'timers';
 
 import { BaseComponent } from './../../base/base-component/base-component.component';
 import { SelectInputConfig } from './select-input.config';
@@ -17,13 +19,17 @@ export class SelectInputComponent extends BaseComponent {
 
   @ViewChild('tooltip')
   tooltip: TooltipDirective;
+  @ViewChild('typeahead')
+  typeahead: TypeaheadDirective;
   @ViewChild('inputElement')
   inputElement: ElementRef;
 
   @Input()
   debounceTime?: number;
   @Output()
   onChangeInputValue: EventEmitter<string> = new EventEmitter<string>();
+  @Output()
+  onInputFocus: EventEmitter<string> = new EventEmitter<string>();
   @Input()
   labelClass?= 'control-label';
   @Input()
@@ -55,10 +61,16 @@ export class SelectInputComponent extends BaseComponent {
   @Input()
   width: string = null;
   @Input()
-  set items(items: any[]) {
+  dataSource: Subject<any[]>;
+  @Input()
+  set items(items: any) {
     this._items = items;
+    this.resizeList();
   }
-  get items() {
+  get items(): any {
+    if (this.dataSource) {
+      return this.dataSource;
+    }
     return this._items;
   }
   @Input()
@@ -67,6 +79,7 @@ export class SelectInputComponent extends BaseComponent {
     if (this._textValue === '') {
       this.value = null;
     }
+    this.debouncer$.next(this.textValue);
   }
   get textValue() {
     return this._textValue;
@@ -80,7 +93,8 @@ export class SelectInputComponent extends BaseComponent {
   private _showMe = false;
 
   constructor(
-    public injector: Injector
+    public injector: Injector,
+    public changeDetectorRef: ChangeDetectorRef
   ) {
     super(injector);
     this.debouncer$ = new Subject<string>();
@@ -105,6 +119,9 @@ export class SelectInputComponent extends BaseComponent {
     this.debouncer$.pipe(debounceTime(this.debounceTime))
       .subscribe((value: string) => this.onChangeInputValue.emit(value));
   }
+  inputFocus(value: string) {
+    this.onInputFocus.emit(value);
+  }
   get inputReadonly() {
     return this.onChangeInputValue.observers && this.onChangeInputValue.observers.length === 0;
   }
@@ -123,7 +140,6 @@ export class SelectInputComponent extends BaseComponent {
       // this.textValue = '';
       this.model = null;
     }
-    this.debouncer$.next(this.textValue);
     this.modelChange.emit(this.model);
   }
   onTypeaheadNoResults(typeaheadNoResults: boolean) {
@@ -135,8 +151,10 @@ export class SelectInputComponent extends BaseComponent {
     if (this.hardValue) {
       this.value = this.hardValue;
     }
-    this.value = this.value;
     super.init();
+    if (!this.textValue) {
+      this.value = this.value;
+    }
   }
   getTitle(item: any): SafeHtml | string {
     if (item && item[this.titleField]) {
@@ -160,4 +178,26 @@ export class SelectInputComponent extends BaseComponent {
     }
     return '';
   }
+  loading(status: boolean) {
+    if (!status) {
+      this.resizeList();
+    }
+  }
+  resizeList() {
+    setTimeout(() => {
+      if (this.changeDetectorRef) {
+        this.changeDetectorRef.detectChanges();
+        if (this.typeahead && this.typeahead._container) {
+          if (this.typeahead._container.element.nativeElement.children[0]) {
+            const list: any = this.typeahead._container.element.nativeElement.children[0];
+            if (this.width === null) {
+              list.style.width = this.inputElement.nativeElement.offsetWidth + 'px';
+            } else {
+              list.style.width = this.width;
+            }
+          }
+        }
+      }
+    }, 1);
+  }
 }

libs/web/src/grids/content-types-grid/content-type-select-input/content-type-select-input.component.html

@@ -2,16 +2,19 @@
   <label *ngIf="title" [ngClass]="labelClass" [attr.for]="'input'+name">{{title | translate}}</label>
   <div [ngClass]="{'input-group':!readonly && !select}" class="{{inputFrameClass}}" [tooltip]="tooltipText" placement="{{tooltipPlacement}}"
     triggers="{{tooltipTriggers}}" [isDisabled]="!tooltipEnable" (onShown)="showTooltip()" #tooltip="bs-tooltip">
-    <input *ngIf="statusListMessage || (select && !items.length)" value="{{statusListMessage | translate}}" [ngClass]="inputClass" disabled/>
-    <input *ngIf="!statusListMessage && !select" [(ngModel)]="value && value.asString" [ngClass]="inputClass" #inputElement disabled/>
-    <select-input *ngIf="!statusListMessage && select && items && items.length>0" [(model)]="value" [title]="title" titleField="asSelectOptionHtml" inputTitleField="asString"
-      [readonly]="readonly" [items]="items" [inFormGroup]="false" [width]="width" #inputElement></select-input>
+    <input *ngIf="statusListMessage" value="{{statusListMessage | translate}}" [ngClass]="inputClass" readonly/>
+    <input *ngIf="!statusListMessage && !select" [(ngModel)]="value && value.asString" [ngClass]="inputClass" #inputElement readonly/>
+    <select-input *ngIf="!statusListMessage && select" [(model)]="value" [title]="title" titleField="asSelectOptionHtml" inputTitleField="asString"
+      [readonly]="readonly" (onChangeInputValue)="changeInputValue($event)" [dataSource]="cachedResourcesService.items$" (onInputFocus)="focusInput($event)"
+      [inFormGroup]="false" [width]="width" #inputElement></select-input>
     <span class="input-group-btn" *ngIf="!readonly && !select">
-      <button class="btn btn-success" type="button" (click)="onLookup()"
-              tooltip="{{lookupTooltip}}" placement="left"  container="body">
-          <span [ngClass]="[lookupIcon]"></span>
-    </button>
+      <button class="btn btn-default" type="button" (click)="value=null">
+        <span class="fa fa-times"></span>
+      </button>
+      <button class="btn btn-success" type="button" (click)="onLookup()" tooltip="{{lookupTooltip}}" placement="left" container="body">
+        <span [ngClass]="[lookupIcon]"></span>
+      </button>
     </span>
   </div>
   <span class="help-block" *ngIf="!tooltipEnable && (errorMessage || infoMessage)" [innerHtml]="(errorMessage || infoMessage) | safeHtml"></span>
-</div>
+</div>

libs/web/src/grids/content-types-grid/content-type-select-input/content-type-select-input.component.ts

@@ -28,6 +28,7 @@ export class ContentTypeSelectInputComponent extends BaseResourceSelectInputComp
   @Output()
   modelChange: EventEmitter<any | ContentType> = new EventEmitter<any | ContentType>();
 
+  loadAll = false;
   items: any[] | ContentType[];
   cachedResourcesService: ContentTypesService;
 
@@ -41,13 +42,6 @@ export class ContentTypeSelectInputComponent extends BaseResourceSelectInputComp
     this.contentTypesService = injector.get(ContentTypesService);
     this.cachedResourcesService = this.contentTypesService.createCache();
   }
-  changeInputValue(value: string) {
-    const filter: any = {};
-    if (this.cachedResourcesService) {
-      this.cachedResourcesService.ignoreCache = true;
-      this.cachedResourcesService.loadAll(value, filter);
-    }
-  }
   onLookup() {
     const itemModal: ContentTypesListModalComponent =
       this.app.modals(this.resolver).create(ContentTypesListModalComponent);
@@ -73,8 +67,3 @@ export class ContentTypeSelectInputComponent extends BaseResourceSelectInputComp
     return '';
   }
 }
-
-
-
-// WEBPACK FOOTER //
-// C:/Projects/open-sources/@rucken/core/libs/web/src/grids/content-types-grid/content-type-select-input/content-type-select-input.component.ts

libs/web/src/grids/permissions-grid/permission-modal/permission-modal.component.html

@@ -14,7 +14,7 @@ <h4 class="modal-title">{{title | translate}}</h4>
             [readonly]="readonly" [focused]="true" #focusElement></text-input>
           <text-input [errors]="errors" [info]="info" name="title" [(model)]="item.title" [title]="modelMeta.titles.title" [readonly]="readonly"></text-input>
           <content-type-select-input [errors]="errors" [info]="info" name="contentType" [(model)]="item.contentType"
-            [title]="modelMeta.titles.contentType" [select]="true" [readonly]="readonly"></content-type-select-input>
+            [title]="modelMeta.titles.contentType" [select]="item.pk" [readonly]="readonly"></content-type-select-input>
         </div>
         <div class="modal-footer">
           <footer-buttons (onClose)="close()" (onOk)="ok()" [readonly]="readonly" [okTitle]="okTitle" [okInProcess]="okInProcess"></footer-buttons>