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

autocomplete changes

This commit is contained in:
Diamantis Tziotzios 2024-01-29 14:39:20 +02:00
parent 8fb3556acb
commit 4542189a26
5 changed files with 119 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dmp-backend/core/src/main/java/eu/eudat/model/builder/referencesearch/FieldSearchBuilder.java
View File

@ -68,7 +68,7 @@ public class FieldSearchBuilder extends BaseBuilder<Field, Map<String, String>>
}
private List<ReferenceTypeField> getPropertiesFields(ReferenceType referenceType){
switch (referenceType){
switch (referenceType) {
case Taxonomies: return properties.getTaxonomy().get("fields");
case Licenses: return properties.getLicence().get("fields");
case Publications: return properties.getPublication().get("fields");
@ -80,6 +80,7 @@ public class FieldSearchBuilder extends BaseBuilder<Field, Map<String, String>>
case Organizations: return properties.getOrganisation().get("fields");
case Datasets: return properties.getDataset().get("fields");
case Funder: return properties.getFunder().get("fields");
case Grants: return properties.getGrant().get("fields");
case Project: return properties.getProject().get("fields");
case Researcher: return properties.getResearcher().get("fields");
default: return null;

1
dmp-frontend/src/app/core/services/reference/reference.service.ts
View File

@ -138,6 +138,7 @@ export class ReferenceService {
titleFn: (item: Reference) => item.label,
subtitleFn: (item: Reference) => item?.sourceType === ReferenceSourceType.External ? this.language.instant('REFERENCE-FIELD-COMPONENT.EXTERNAL-SOURCE') + ': ' + item.source : this.language.instant('REFERENCE-FIELD-COMPONENT.INTERNAL-SOURCE'),
valueAssign: (item: Reference) => item,
uniqueAssign: (item: Reference) => item.source + '_' + item.reference,
};
}

4
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts
View File

@ -13,7 +13,7 @@ export interface MultipleAutoCompleteConfiguration {
// Static or initial items.
initialItems?: (excludedItems: any[], data?: any) => Observable<any[]>;
// Data retrieval function
filterFn?: (searchQuery: string, excludedItems: any[]) => Observable<any[]>;
filterFn?: (searchQuery: string, excludedItems: any[], extraData?: any) => Observable<any[]>;
// Get selected items. Used when valueAssign is used so the full object can be retrieved for presentation.
getSelectedItems?: (selectedItems: any[]) => Observable<any[]>;
// Property formating for input
@ -28,6 +28,8 @@ export interface MultipleAutoCompleteConfiguration {
extraData?: any;
// Callback to intercept value assignment based on item selection
valueAssign?: (selectedItem: any) => any;
// Callback to intercept value assignment based on item selection
uniqueAssign?: (selectedItem: any) => any;
// Property formating template
optionTemplate?: TemplateRef<any>;
// Property formatting component

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

@ -1,30 +1,11 @@
<div class="row multiple-auto-complete" ngForm>
<!-- <mat-chip-grid #chipList ngDefaultControl style="width: 100% !important;">
<ng-container *ngIf="value as values">
<mat-chip *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable" [ngClass]="computeClass(value)">
<ng-container *ngIf="_selectedItems.get(stringify(value)) as selectedItem">
<ng-template #cellTemplate *ngIf="_selectedValueTemplate(selectedItem)" [ngTemplateOutlet]="_selectedValueTemplate(selectedItem)" [ngTemplateOutletContext]="{ item: selectedItem }"></ng-template>
<div class="row">
<div *ngIf="!_selectedValueTemplate(selectedItem)">{{_displayFn(selectedItem)}}</div>
<mat-icon matChipRemove *ngIf="!disabled && removable" (click)="_removeSelectedItem(_selectedItems.get(stringify(value)), $event)">cancel</mat-icon>
</div>
</ng-container>
</mat-chip>
</ng-container>
<input matInput #autocompleteInput class="col" style="width: calc(100% - 8px) !important;" [class.hide-placeholder]="hidePlaceholder" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="_addItem($event)" [matAutocompleteConnectedTo]="origin">
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>
<div style="height: 0 !important; width: 100% !important; visibility: hidden !important;" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div>
</mat-chip-grid> -->
<div class="row multiple-auto-complete" ng-form>
<mat-chip-grid #chipList ngDefaultControl class="chip-list">
<ng-container *ngIf="value as values;">
<mat-chip-row *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable" [ngClass]="computeClass(value)">
<ng-container *ngIf="_selectedItems.get(stringify(value)) as selectedItem;">
<ng-container *ngIf="getSelectedItem(value) as selectedItem;">
<ng-template #cellTemplate *ngIf="_selectedValueTemplate(selectedItem)" [ngTemplateOutlet]="_selectedValueTemplate(selectedItem)" [ngTemplateOutletContext]="{
item: selectedItem
}" />
<span *ngIf="!_selectedValueTemplate(selectedItem)" class="chip-text" [title]="_displayFn(selectedItem)">{{_displayFn(selectedItem)}}</span>
</ng-container>
<button matChipRemove *ngIf="!disabled && removable" (click)="_removeSelectedItem(_selectedItems.get(stringify(value)), $event)">
@ -33,17 +14,17 @@
</mat-chip-row>
</ng-container>
</mat-chip-grid>
<input matInput #autocompleteInput class="col" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)" [matAutocompleteConnectedTo]="origin">
<input matInput #autocompleteInput class="col" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>
<div style="height: 0 !important; width: 100% !important; visibility: hidden !important;" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div>
<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
<span *ngIf="_groupedItems">
<mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title">
<mat-option *ngFor="let item of group.items" [value]="item" (mousedown)="selected = true;" (mouseup)="selected = false;" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)">
<mat-option *ngFor="let item of group.items" [value]="item" class="option" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item) && !_optionComponent(item)">
<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
<ng-template #cellTemplate *ngIf="_optionTemplate(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
<ng-container *ngIf="_optionComponent(item)">
<ng-container *ngComponentOutlet="_optionComponent(item); inputs: { item };" />
</ng-container>
<ng-template #cellTemplate *ngIf="_optionTemplate(item) && !_optionComponent(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
item: item
}"></ng-template>
<div *ngIf="!_optionTemplate(item)" class="d-flex">
@ -90,38 +71,6 @@
<ng-template #loading>
<mat-option disabled="true">loading...</mat-option>
</ng-template>
<!-- <ng-container *ngIf="_items | async as autocompleteItems; else loading">
<ng-container *ngIf="autocompleteItems.length">
<mat-option *ngFor="let item of autocompleteItems" [value]="item" (mousedown)="selected = true;" (mouseup)="selected = false;" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)">
<ng-template #cellTemplate *ngIf="_optionTemplate(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
item: item
}"></ng-template>
<div *ngIf="!_optionTemplate(item)" class="d-flex">
<div class="title-subtitle-fn">
<div class="title-fn">
<div class="title-fn-inner">
<span *ngIf="!_optionTemplate(item)">{{_titleFn(item)}}</span>
</div>
</div>
<div *ngIf="_subtitleFn(item)" class="subtitle-fn">
<div class="subtitle-fn-inner">
<small [innerHTML]="_subtitleFn(item)"></small>
</div>
</div>
</div>
<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
</div>
</mat-option>
</ng-container>
<ng-container *ngIf="!autocompleteItems.length && showNoResultsLabel && (queryValue == inputValue)">
<mat-option disabled="true">No results found!</mat-option>
</ng-container>
</ng-container>
<ng-template #loading>
<mat-option disabled="true">loading...</mat-option>
</ng-template> -->
</span>
</mat-autocomplete>
</div>

245
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
View File

@ -28,8 +28,8 @@ import {
} from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
import { BaseComponent } from '@common/base/base.component';
import { isNullOrUndefined } from '@swimlane/ngx-datatable';
import { BehaviorSubject, Observable, Subject, Subscription, combineLatest, of as observableOf } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, startWith, switchMap, takeUntil, tap } from 'rxjs/operators';
import { BehaviorSubject, Observable, Subject, Subscription, combineLatest, interval, of as observableOf, of } from 'rxjs';
import { catchError, debounceTime, delayWhen, distinctUntilChanged, map, mergeMap, startWith, switchMap, take, takeUntil, tap } from 'rxjs/operators';
export class CustomComponentBase extends BaseComponent {
constructor(
@ -84,7 +84,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
valueOnBlur = new BehaviorSubject<any>(null);
onSelectAutoCompleteValue = new BehaviorSubject<any>(null);
valueAssignSubscription: Subscription;
// valueAssignSubscription: Subscription;
queryValue: string = "";
@ -170,9 +170,23 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
) {
super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl, new Subject<void>());
fm.monitor(elRef.nativeElement, true).pipe(takeUntil(this._destroyed)).subscribe((origin) => {
fm.monitor(elRef.nativeElement, true)
.pipe(
distinctUntilChanged(),
switchMap(
(origin) => of(origin).pipe(
delayWhen((origin) => interval(!!origin ? 0 : 200).pipe(take(1))), // delay focusout (user may have made a selection) then close options if open
)
),
takeUntil(this._destroyed)
)
.subscribe((origin) => {
this.focused = !!origin;
this.stateChanges.next();
if (!this.focused) {
this.autocompleteTrigger?.closePanel();
}
});
if (this.ngControl != null) {
@ -182,36 +196,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
}
}
ngOnInit() {
this.valueAssignSubscription = combineLatest(this.valueOnBlur.asObservable(), this.onSelectAutoCompleteValue.asObservable())
.pipe(debounceTime(100))
.subscribe(latest => {
const fromBlur = latest[0];
const fromAutoComplete = latest[1];
if (isNullOrUndefined(fromBlur) && isNullOrUndefined(fromAutoComplete)) {
return;
}
//higher precedence
if (!isNullOrUndefined(fromAutoComplete)) {
this.optionSelectedInternal(fromAutoComplete);
// consumed and flush
this.onSelectAutoCompleteValue.next(null);
this.valueOnBlur.next(null);
return;
}
if (!isNullOrUndefined(fromBlur)) {
this.optionSelectedInternal(fromBlur);
// consumed and flush
this.onSelectAutoCompleteValue.next(null);
this.valueOnBlur.next(null);
return;
}
});
}
ngOnInit() { }
ngDoCheck(): void {
if (this.ngControl) {
@ -220,37 +205,50 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
}
ngOnChanges(changes: SimpleChanges) {
if (changes['configuration'] && changes['configuration'].isFirstChange) {
this.getSelectedItems(this.value);
}
}
private gettingSelectedItem$ = new Subject<void>();
getSelectedItems(value: any) {
if (value != null && Array.isArray(value) && this.configuration) {
const newSelections = value.filter(x => !this._selectedItems.has(this.stringify(x)));
const newSelections = value.filter(x => !this._selectedItems.has(JSON.stringify(x)));
if (newSelections.length > 0 && this.configuration.getSelectedItems != null) {
this.configuration.getSelectedItems(newSelections).pipe(takeUntil(this._destroyed)).subscribe(x => {
this.gettingSelectedItem$.next();
this.configuration.getSelectedItems(newSelections).pipe(takeUntil(this._destroyed), takeUntil(this.gettingSelectedItem$)).subscribe(x => {
x.forEach(element => {
this._selectedItems.set(this.stringify(this.configuration.valueAssign != null ? this.configuration.valueAssign(element) : element), element);
this._selectedItems.set(JSON.stringify(
this.configuration.uniqueAssign != null ? this.configuration.uniqueAssign(element) :
this.configuration.valueAssign != null ? this.configuration.valueAssign(element) : element
), element);
});
this.value = value;
});
} else {
newSelections.forEach(element => {
this._selectedItems.set(this.stringify(this.configuration.valueAssign != null ? this.configuration.valueAssign(element) : element), element);
this._selectedItems.set(JSON.stringify(
this.configuration.uniqueAssign != null ? this.configuration.uniqueAssign(element) :
this.configuration.valueAssign != null ? this.configuration.valueAssign(element) : element
), element);
});
}
}
}
getSelectedItem(value: any) {
return this._selectedItems.get(JSON.stringify(this.configuration.uniqueAssign != null ? this.configuration.uniqueAssign(value) : value));
}
filter(query: string): Observable<any[]> {
// If loadDataOnStart is enabled and query is empty we return the initial items.
if (this.isNullOrEmpty(query) && this.loadDataOnStart) {
return this.configuration.initialItems(this.configuration.extraData) || observableOf([]);
return this.configuration.initialItems(this.value || [], this.configuration.extraData) || observableOf([]);
} else if (query && query.length >= this.minFilteringChars) {
if (this.configuration.filterFn) {
return this.configuration.filterFn(query, this.configuration.extraData);
return this.configuration.filterFn(query, this.value || [], this.configuration.extraData);
} else {
return this.configuration.initialItems(this.configuration.extraData) || observableOf([]);
return this.configuration.initialItems(this.value || [], this.configuration.extraData) || observableOf([]);
}
} else {
return observableOf([]);
@ -258,7 +256,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
}
stringify(value: any): string {
return typeof (value) == 'string' ? value : JSON.stringify(value);
return JSON.stringify(value);
}
isNullOrEmpty(query: string): boolean {
@ -266,16 +264,16 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
}
_optionSelected(event: MatAutocompleteSelectedEvent) {
// this.optionSelectedInternal(event.option.value);
this.onSelectAutoCompleteValue.next(event.option.value);
this.optionSelectedInternal(event.option.value);
this.autocompleteInput.nativeElement.value = '';
this._items = null; // refresh excluding previous item selected
}
private optionSelectedInternal(item: any) {
const newValue = this._valueToAssign(item);
//Update selected items
this._selectedItems.set(this.stringify(newValue), item);
this._selectedItems.set(JSON.stringify(this.configuration.uniqueAssign != null ? this.configuration.uniqueAssign(newValue) : newValue), item);
const newValueArray = (Array.isArray(this.value) ? this.value : []);
newValueArray.push(newValue);
@ -289,18 +287,14 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
this.inputValue = event.target.value;
// prevent filtering results if arrow were pressed
if (event.keyCode !== ENTER && (event.keyCode < 37 || event.keyCode > 40)) {
if (!this._items) { // possibly from an error request here
this._onInputFocus();
}
this._inputSubject.next(this.inputValue);
}
// if (event.keyCode !== ENTER && (event.keyCode < 37 || event.keyCode > 40) && event.keyCode !== COMMA) {
// this._inputSubject.next(this.inputValue);
// }
}
public onKeyDown(event) {
if (event.keyCode === BACKSPACE && event.target.value.length === 0 && this._selectedItems.size > 0) {
this._removeSelectedItem(Array.from(this._selectedItems.values()).pop(), event);
}
}
private _setValue(value: any) {
@ -316,68 +310,45 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
debounceTime(this.requestDelay),
distinctUntilChanged(),
distinctUntilChanged(),
tap(query => this.queryValue = query),
switchMap(query => (!this.minLength || (query && query.length >= this.minLength)) ? this.filter(query) : observableOf([])));
mergeMap(query => this.filter(query)),
catchError(error => {
this._items = null;
console.error(error);
return of([])
})
if (this.configuration.groupingFn) {
this._groupedItems = this._items.pipe(map(items => this.configuration.groupingFn(items)));
}
);
if (this.configuration.groupingFn) { this._groupedItems = this._items.pipe(map(items => this.configuration.groupingFn(items))); }
}
}
public onBlur($event: FocusEvent) {
if (!this.selected) {
if (this.inputValue && this.inputValue.length > 1 && this.autocomplete.options && this.autocomplete.options.length > 0 && this.autoSelectFirstOptionOnBlur) {
// this.optionSelectedInternal(this.autocomplete.options.first.value);
this.valueOnBlur.next(this.autocomplete.options.first.value);
} else if (this.inputValue && this.inputValue.length > 1 && this.autoSelectFirstOptionOnBlur) {
this.valueOnBlur.next(this.inputValue);
}
}
// Clear text if not an option
if (this.inputValue && this.inputValue.length > 1) {
this.inputValue = '';
document.getElementById((<HTMLInputElement>$event.target).id).focus();
public onBlur($event: MouseEvent) {
if (this.inputValue.length > 1 && this.autocomplete.options && this.autocomplete.options.length > 0 && this.autoSelectFirstOptionOnBlur) {
this.optionSelectedInternal(this.autocomplete.options.first.value);
}
}
onChange = (_: any) => {
};
private _onTouched = () => {
};
onChange = (_: any) => { };
private _onTouched = () => { };
writeValue(value: any): void {
this.value = Array.isArray(value) ? value : null;
// Update chips observable
this.getSelectedItems(value);
}
pushChanges(value: any) {
this.onChange(value);
}
registerOnChange(fn: (_: any) => {}): void {
this.onChange = fn;
}
registerOnTouched(fn: () => {}): void {
this._onTouched = fn;
}
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
}
setDescribedByIds(ids: string[]) {
this.describedBy = ids.join(' ');
this._items = null;
this.getSelectedItems(this.value);
}
pushChanges(value: any) { this.onChange(value); }
registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
registerOnTouched(fn: () => {}): void { this._onTouched = fn; }
setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; }
setDescribedByIds(ids: string[]) { this.describedBy = ids.join(' '); }
onContainerClick(event: MouseEvent) {
event.stopPropagation();
if (this.disabled) {
return;
if (this.disabled) { return; }
if (this.autocompleteInput) {
this.fm.focusVia(this.autocompleteInput.nativeElement, 'program');
}
this._onInputFocus();
if (!this.autocomplete.isOpen) {
@ -388,25 +359,18 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
ngOnDestroy() {
this.stateChanges.complete();
this.fm.stopMonitoring(this.elRef.nativeElement);
if (this.valueAssignSubscription) {
this.valueAssignSubscription.unsubscribe();
this.valueAssignSubscription = null;
}
this.gettingSelectedItem$.complete();
}
//Configuration getters
_displayFn(item: any): string {
// console.log('_displayFn' + item);
if (this.configuration.displayFn && item) {
return this.configuration.displayFn(item);
}
if (this.configuration.displayFn && item) { return this.configuration.displayFn(item); }
return item;
}
_titleFn(item: any): string {
if (this.configuration.titleFn && item) {
return this.configuration.titleFn(item);
}
if (this.configuration.titleFn && item) { return this.configuration.titleFn(item); }
return item;
}
@ -421,28 +385,22 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
}
_selectedValueTemplate(item: any): TemplateRef<any> {
if (this.configuration.selectedValueTemplate && item) {
return this.configuration.selectedValueTemplate;
}
if (this.configuration.selectedValueTemplate && item) { return this.configuration.selectedValueTemplate; }
return null;
}
_subtitleFn(item: any): string {
if (this.configuration.subtitleFn && item) {
return this.configuration.subtitleFn(item);
}
if (this.configuration.subtitleFn && item) { return this.configuration.subtitleFn(item); }
return null;
}
_valueToAssign(item: any): any {
if (this.configuration.valueAssign && item) {
return this.configuration.valueAssign(item);
}
if (this.configuration.valueAssign && item) { return this.configuration.valueAssign(item); }
return item;
}
get requestDelay(): number {
return this.configuration.requestDelay != null ? this.configuration.requestDelay : 600;
return this.configuration.requestDelay != null ? this.configuration.requestDelay : 200;
}
get minFilteringChars(): number {
@ -457,40 +415,35 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
return this.configuration.autoSelectFirstOptionOnBlur != null ? this.configuration.autoSelectFirstOptionOnBlur : false;
}
get popupItemActionIcon(): string {
return this.configuration.popupItemActionIcon != null ? this.configuration.popupItemActionIcon : '';
}
get appendClassToItem(): { class: string, applyFunc: (item: any) => boolean }[] {
return this.configuration.appendClassToItem !== null ? this.configuration.appendClassToItem : null;
}
//Chip Functions
_addItem(event: MatChipInputEvent): void {
const input = event.input;
const value = event.value;
// Add our fruit
if (value.trim()) {
// this.optionSelectedInternal(value);
this.valueOnBlur.next(value);
}
// if ((value || '').trim()) {
// this.selectedItems.push(value.trim());
// }
// Reset the input value
if (input) {
this.inputValue = '';
}
//this.inputFormControl.setValue(null);
}
public reset(): void {
this._inputSubject.unsubscribe();
this._inputSubject = new Subject<string>();
this._items = null;
}
_removeSelectedItem(item: any, event: MouseEvent): void {
if (event != null) {
event.stopPropagation();
}
if (event != null) { event.stopPropagation(); }
const valueToDelete = this._valueToAssign(item);
this.value = this.value.filter(x => this.stringify(x) !== this.stringify(valueToDelete)); //TODO, maybe we need to implement equality here differently.
this.value = this.value.filter(x => JSON.stringify(x) !== JSON.stringify(valueToDelete)); //TODO, maybe we need to implement equality here differently.
this.optionRemoved.emit(item);
this._items = null; // refresh query with excluded items
//Update chips
this._selectedItems.delete(this.stringify(valueToDelete));
this._selectedItems.delete(JSON.stringify(valueToDelete));
this.autocompleteInput.nativeElement.focus();
this.pushChanges(this.value);
@ -503,9 +456,15 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
this.optionActionClicked.emit(item);
}
get popupItemActionIcon(): string {
return this.configuration.popupItemActionIcon != null ? this.configuration.popupItemActionIcon : '';
}
get appendClassToItem(): { class: string, applyFunc: (item: any) => boolean }[] {
return this.configuration.appendClassToItem !== null ? this.configuration.appendClassToItem : null;
}
private readonly empyObj = {};
computeClass(value: any) {
if (!(this.appendClassToItem && this.appendClassToItem.length)) {
return this.empyObj;