MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

autocomplete disabled fixed

This commit is contained in:
Diamantis Tziotzios 2019-02-14 18:56:06 +02:00
parent d2b15a2885
commit 1a0728295b
3 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
View File

@ -1,10 +1,10 @@
<div class="row multiple-auto-complete"> <div class="row multiple-auto-complete">
<mat-chip-list #chipList ngDefaultControl class="col multi-chip-list"> <mat-chip-list #chipList ngDefaultControl class="col multi-chip-list" [disabled]="disabled">
<mat-chip *ngFor="let selectedItem of _chipItems()" [disabled]="disabled" [selectable]="selectable" [removable]="removable" (removed)="_removeSelectedItem(selectedItem)"> <mat-chip *ngFor="let selectedItem of _chipItems()" [disabled]="disabled" [selectable]="selectable" [removable]="removable" (removed)="_removeSelectedItem(selectedItem)">
{{this._displayFn(selectedItem)}} {{this._displayFn(selectedItem)}}
<mat-icon matChipRemove *ngIf="!disabled && removable">cancel</mat-icon> <mat-icon matChipRemove *ngIf="!disabled && removable">cancel</mat-icon>
</mat-chip> </mat-chip>
<input matInput #textInput autocomplete="off" (focus)="_onInputFocus()" [placeholder]="placeholder" [ngModel]="_inputValue" (ngModelChange)="_inputValueChange($event)" [matAutocomplete]="auto" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="_addItem($event)" (click)="_onInputClick($event)" /> <input matInput #textInput autocomplete="off" (focus)="_onInputFocus()" [disabled]="disabled" [placeholder]="placeholder" [ngModel]="_inputValue" (ngModelChange)="_inputValueChange($event)" [matAutocomplete]="auto" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="_addItem($event)" (click)="_onInputClick($event)" />
</mat-chip-list> </mat-chip-list>
<mat-progress-spinner mode="indeterminate" class="multi-loading-bar col-auto" [class.not-loading]="!loading" [diameter]="22"></mat-progress-spinner> <mat-progress-spinner mode="indeterminate" class="multi-loading-bar col-auto" [class.not-loading]="!loading" [diameter]="22"></mat-progress-spinner>
<mat-autocomplete #auto="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)"> <mat-autocomplete #auto="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">

11
dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.html
View File

@ -1,5 +1,14 @@
<div class="row auto-complete"> <div class="row auto-complete">
<input matInput class="col" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="auto" [ngModel]="_inputValue" (ngModelChange)="_inputValueChange($event)" [disabled]="disabled" (focus)="_onInputFocus()"> <mat-chip-list #chipList [disabled]="disabled">
<mat-chip *ngIf="value" [removable]="true" (removed)="chipRemove()">
{{_displayFn(value)}}
<mat-icon matChipRemove *ngIf="!disabled">cancel</mat-icon>
</mat-chip>
<input matInput class="col" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="auto" [ngModel]="_inputValue" (ngModelChange)="_inputValueChange($event)" [disabled]="disabled || (value !== null)" (focus)="_onInputFocus()" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true">
</mat-chip-list>
<mat-progress-spinner mode="indeterminate" [class.not-loading]="!loading" [diameter]="17"></mat-progress-spinner> <mat-progress-spinner mode="indeterminate" [class.not-loading]="!loading" [diameter]="17"></mat-progress-spinner>
<mat-autocomplete #auto="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)"> <mat-autocomplete #auto="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
<span *ngIf="_groupedItems"> <span *ngIf="_groupedItems">

9
dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts
View File

@ -1,4 +1,5 @@
import { FocusMonitor } from '@angular/cdk/a11y'; import { FocusMonitor } from '@angular/cdk/a11y';
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Optional, Output, Self } from '@angular/core'; import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Optional, Output, Self } from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms'; import { ControlValueAccessor, NgControl } from '@angular/forms';
import { MatAutocompleteSelectedEvent, MatFormFieldControl } from '@angular/material'; import { MatAutocompleteSelectedEvent, MatFormFieldControl } from '@angular/material';
@ -36,6 +37,7 @@ export class SingleAutoCompleteComponent implements OnInit, MatFormFieldControl<
private requestDelay = 200; //ms private requestDelay = 200; //ms
private minFilteringChars = 1; private minFilteringChars = 1;
private loadDataOnStart = true; private loadDataOnStart = true;
separatorKeysCodes: number[] = [ENTER, COMMA];
get empty() { get empty() {
return !this._inputValue || this._inputValue.length === 0; return !this._inputValue || this._inputValue.length === 0;
@ -73,7 +75,7 @@ export class SingleAutoCompleteComponent implements OnInit, MatFormFieldControl<
} }
set value(value: any | null) { set value(value: any | null) {
this._selectedValue = value; this._selectedValue = value;
this._inputValue = value; this._inputValue = " ";
this.stateChanges.next(); this.stateChanges.next();
} }
private _selectedValue; private _selectedValue;
@ -147,6 +149,7 @@ export class SingleAutoCompleteComponent implements OnInit, MatFormFieldControl<
_optionSelected(event: MatAutocompleteSelectedEvent) { _optionSelected(event: MatAutocompleteSelectedEvent) {
this._setValue(this.configuration.valueAssign ? this.configuration.valueAssign(event.option.value) : event.option.value); this._setValue(this.configuration.valueAssign ? this.configuration.valueAssign(event.option.value) : event.option.value);
this._inputValue = " ";;
this.stateChanges.next(); this.stateChanges.next();
this.optionSelected.emit(event.option.value); this.optionSelected.emit(event.option.value);
} }
@ -212,6 +215,10 @@ export class SingleAutoCompleteComponent implements OnInit, MatFormFieldControl<
} }
} }
chipRemove(): void {
this.value = null;
}
ngOnDestroy() { ngOnDestroy() {
this.stateChanges.complete(); this.stateChanges.complete();
this.fm.stopMonitoring(this.elRef.nativeElement); this.fm.stopMonitoring(this.elRef.nativeElement);