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

Fix bug where on long click, blur value was added in the list of chips.

This commit is contained in:
Konstantinos Triantafyllou 2023-05-03 12:34:17 +03:00
parent 5d5ebe7a55
commit 0d9b6f9622
2 changed files with 164 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,6 @@
[placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue"
(keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()"
(blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur"
(matChipInputTokenEnd)="_addItem($event)"
[matAutocompleteConnectedTo]="origin">
<!-- The attribute autocomplete="nope", set by downshift, is ignored in Chrome 67 and Opera 54 (latest at the time of writing)
@ -29,7 +28,7 @@
<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" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)">
<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)">
<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
<ng-template #cellTemplate *ngIf="_optionTemplate(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
item: item
@ -55,7 +54,7 @@
<span *ngIf="!_groupedItems">
<ng-container *ngIf="_items | async as autocompleteItems; else loading">
<ng-container *ngIf="autocompleteItems.length">
<mat-option *ngFor="let item of autocompleteItems" [value]="item" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)">
<mat-option *ngFor="let item of autocompleteItems" [value]="item" (mousedown)="selected = true;" (mouseup)="selected = false;" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)">
<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
<ng-template #cellTemplate *ngIf="_optionTemplate(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
item: item

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

@ -1,16 +1,33 @@
import { FocusMonitor } from '@angular/cdk/a11y';
import { BACKSPACE, ENTER } from '@angular/cdk/keycodes';
import { Component, DoCheck, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Optional, Output, Self, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
import { MatChipInputEvent } from '@angular/material/chips';
import { ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
import { MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
import { MatFormFieldControl } from '@angular/material/form-field';
import { AutoCompleteGroup } from '@app/library/auto-complete/auto-complete-group';
import { MultipleAutoCompleteConfiguration } 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, combineLatest, Observable, of as observableOf, Subject, Subscription } from 'rxjs';
import {FocusMonitor} from '@angular/cdk/a11y';
import {BACKSPACE, ENTER} from '@angular/cdk/keycodes';
import {
Component,
DoCheck,
ElementRef,
EventEmitter,
Input,
OnChanges,
OnDestroy,
OnInit,
Optional,
Output,
Self,
SimpleChanges,
TemplateRef,
ViewChild
} from '@angular/core';
import {ControlValueAccessor, FormGroupDirective, NgControl, NgForm} from '@angular/forms';
import {MatChipInputEvent} from '@angular/material/chips';
import {ErrorStateMatcher, mixinErrorState} from '@angular/material/core';
import {MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger} from '@angular/material/autocomplete';
import {MatFormFieldControl} from '@angular/material/form-field';
import {AutoCompleteGroup} from '@app/library/auto-complete/auto-complete-group';
import {
MultipleAutoCompleteConfiguration
} 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, combineLatest, Observable, of as observableOf, Subject, Subscription} from 'rxjs';
import {debounceTime, distinctUntilChanged, map, startWith, takeUntil, switchMap, tap} from 'rxjs/operators';
export class CustomComponentBase extends BaseComponent {
@ -19,28 +36,35 @@ export class CustomComponentBase extends BaseComponent {
public _parentForm: NgForm,
public _parentFormGroup: FormGroupDirective,
public ngControl: NgControl
) { super(); }
) {
super();
}
}
export const _CustomComponentMixinBase = mixinErrorState(CustomComponentBase);
@Component({
selector: 'app-multiple-auto-complete',
templateUrl: './multiple-auto-complete.component.html',
styleUrls: ['./multiple-auto-complete.component.scss'],
providers: [{ provide: MatFormFieldControl, useExisting: MultipleAutoCompleteComponent }]
providers: [{provide: MatFormFieldControl, useExisting: MultipleAutoCompleteComponent}]
})
export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase implements OnInit, MatFormFieldControl<string>, ControlValueAccessor, OnDestroy, DoCheck, OnChanges {
static nextId = 0;
@ViewChild('autocomplete', { static: true }) autocomplete: MatAutocomplete;
@ViewChild('autocompleteTrigger', { static: true }) autocompleteTrigger: MatAutocompleteTrigger;
@ViewChild('autocompleteInput', { static: true }) autocompleteInput: ElementRef;
@ViewChild('autocomplete', {static: true}) autocomplete: MatAutocomplete;
@ViewChild('autocompleteTrigger', {static: true}) autocompleteTrigger: MatAutocompleteTrigger;
@ViewChild('autocompleteInput', {static: true}) autocompleteInput: ElementRef;
@Input()
get configuration(): MultipleAutoCompleteConfiguration { return this._configuration; }
get configuration(): MultipleAutoCompleteConfiguration {
return this._configuration;
}
set configuration(configuration: MultipleAutoCompleteConfiguration) {
this._configuration = configuration;
}
private _configuration: MultipleAutoCompleteConfiguration;
@Input()
@ -72,46 +96,66 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
_groupedItems: Observable<AutoCompleteGroup[]>;
selectable = false;
removable = true;
selected: boolean = false;
get empty() { return (!this.value || this.value.length === 0) && (!this.inputValue || this.inputValue.length === 0); }
get empty() {
return (!this.value || this.value.length === 0) && (!this.inputValue || this.inputValue.length === 0);
}
get shouldLabelFloat() { return this.focused || !this.empty; }
get shouldLabelFloat() {
return this.focused || !this.empty;
}
@Input() minLength: number = 0;
@Input() showNoResultsLabel: boolean = true;
@Input() hidePlaceholder: boolean = false;
@Input()
get placeholder() { return this._placeholder; }
get placeholder() {
return this._placeholder;
}
set placeholder(placeholder) {
this._placeholder = placeholder;
this.stateChanges.next();
}
private _placeholder: string;
@Input()
get required() { return this._required; }
get required() {
return this._required;
}
set required(req) {
this._required = !!(req);
this.stateChanges.next();
}
private _required = false;
@Input()
get disabled() { return this._disabled; }
get disabled() {
return this._disabled;
}
set disabled(dis) {
this._disabled = !!(dis);
this.stateChanges.next();
}
private _disabled = false;
@Input()
get value(): any | null {
return this._selectedValue;
}
set value(value: any | null) {
this._selectedValue = (value != null && value.length === 0) ? null : value;
this.stateChanges.next();
}
private _selectedValue;
constructor(
@ -138,33 +182,33 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
ngOnInit() {
this.valueAssignSubscription = combineLatest(this.valueOnBlur.asObservable(), this.onSelectAutoCompleteValue.asObservable())
.pipe(debounceTime(200))
.subscribe(latest => {
const fromBlur = latest[0];
const fromAutoComplete = latest[1];
.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);
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;
}
// consumed and flush
this.onSelectAutoCompleteValue.next(null);
this.valueOnBlur.next(null);
return;
}
if(!isNullOrUndefined(fromBlur)){
this.optionSelectedInternal(fromBlur);
this.autocompleteTrigger.closePanel();
// 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;
}
});
}
ngDoCheck(): void {
@ -273,14 +317,20 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
tap(query => this.queryValue = query),
switchMap(query => (!this.minLength || (query && query.length >= this.minLength)) ? this.filter(query) : observableOf([])));
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.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);
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
@ -291,22 +341,42 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
}
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(' '); }
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;
}
this._onInputFocus();
if (!this.autocomplete.isOpen) {
this.autocompleteTrigger.openPanel();
@ -316,7 +386,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
ngOnDestroy() {
this.stateChanges.complete();
this.fm.stopMonitoring(this.elRef.nativeElement);
if(this.valueAssignSubscription){
if (this.valueAssignSubscription) {
this.valueAssignSubscription.unsubscribe();
this.valueAssignSubscription = null;
}
@ -325,32 +395,44 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
//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;
}
_optionTemplate(item: any): TemplateRef<any> {
if (this.configuration.optionTemplate && item) { return this.configuration.optionTemplate; }
if (this.configuration.optionTemplate && item) {
return this.configuration.optionTemplate;
}
return null;
}
_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;
}
@ -373,7 +455,8 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
get popupItemActionIcon(): string {
return this.configuration.popupItemActionIcon != null ? this.configuration.popupItemActionIcon : '';
}
get appendClassToItem(): {class: string, applyFunc: (item: any) => boolean}[]{
get appendClassToItem(): { class: string, applyFunc: (item: any) => boolean }[] {
return this.configuration.appendClassToItem !== null ? this.configuration.appendClassToItem : null;
}
@ -394,7 +477,9 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
}
_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.optionRemoved.emit(item);
@ -407,22 +492,25 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
}
_optionActionClick(item: any, event: MouseEvent): void {
if (event != null) { event.stopPropagation(); }
if (event != null) {
event.stopPropagation();
}
this.optionActionClicked.emit(item);
}
private readonly empyObj = {};
computeClass(value: any){
if(!(this.appendClassToItem && this.appendClassToItem.length)){
computeClass(value: any) {
if (!(this.appendClassToItem && this.appendClassToItem.length)) {
return this.empyObj;
}
const classes = this.appendClassToItem.filter(e=> e.applyFunc(value));
const classes = this.appendClassToItem.filter(e => e.applyFunc(value));
return classes.reduce((r, current) => {
r[current.class] = true;
return r;
} , {});
}, {});
}
}