Merge pull request #147 from netgrif/NAE-1760

machacjozef · web-flow · commit b990c707edda · 2022-11-21T13:56:20.000+01:00
[NAE-1760] Enumeration autocomplete constantly sending value
diff --git a/projects/netgrif-components-core/src/lib/data-fields/enumeration-field/enumeration-autocomplete-select-field/abstract-enumeration-autocomplete-select-field.component.ts b/projects/netgrif-components-core/src/lib/data-fields/enumeration-field/enumeration-autocomplete-select-field/abstract-enumeration-autocomplete-select-field.component.ts
@@ -1,12 +1,11 @@
-import {Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
-import {FormControl, NgModel} from '@angular/forms';
+import {Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {FormControl} from '@angular/forms';
 import {Observable, of} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 import {EnumerationField, EnumerationFieldValidation, EnumerationFieldValue} from '../models/enumeration-field';
 import {WrappedBoolean} from '../../data-field-template/models/wrapped-boolean';
 import {TranslateService} from '@ngx-translate/core';
-import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
-import {EnumerationAutocompleteFilterProperty} from './enumeration-autocomplete-filter-property';
+import {EnumerationAutocompleteFilterProperty} from "./enumeration-autocomplete-filter-property";
 
 @Component({
     selector: 'ncc-abstract-enumeration-autocomplete-field',
@@ -17,49 +16,24 @@ export abstract class AbstractEnumerationAutocompleteSelectFieldComponent implem
     @Input() enumerationField: EnumerationField;
     @Input() formControlRef: FormControl;
     @Input() showLargeLayout: WrappedBoolean;
-    @ViewChild('input') text: NgModel;
-    public tmpValue: string;
+    @ViewChild('input') text: ElementRef;
 
     filteredOptions: Observable<Array<EnumerationFieldValue>>;
 
     constructor(protected _translate: TranslateService) {
     }
 
     ngOnInit() {
-        this.tmpValue = this.formControlRef.value ?? '';
         this.filteredOptions = this.formControlRef.valueChanges.pipe(
             startWith(''),
             map(value => this._filter(value))
         );
-        this.enumerationField.touch$.subscribe(touch => {
-            if (touch) {
-                this.text.control.markAsTouched();
-            }
-        });
-        this.formControlRef.valueChanges.subscribe(it => {
-            this.tmpValue = it ?? '';
-        });
     }
 
     ngOnDestroy(): void {
         this.filteredOptions = undefined;
     }
 
-    change() {
-        if (this.text.value !== undefined) {
-            this.filteredOptions = of(this._filter(this.text.value));
-        }
-    }
-
-    select(event: MatAutocompleteSelectedEvent) {
-        this.formControlRef.setValue(event.option.value);
-    }
-
-
-    isInvalid(): boolean {
-        return !this.formControlRef.disabled && !this.formControlRef.valid && this.text.control.touched;
-    }
-
     protected checkPropertyInComponent(property: string): boolean {
         return !!this.enumerationField.component && !!this.enumerationField.component.properties && property in this.enumerationField.component.properties;
     }
@@ -104,6 +78,12 @@ export abstract class AbstractEnumerationAutocompleteSelectFieldComponent implem
             .replace(/[\u0300-\u036f]/g, '').indexOf(filterValue) === 0);
     }
 
+    change() {
+        if (this.text.nativeElement.value !== undefined) {
+            this.filteredOptions = of(this._filter(this.text.nativeElement.value));
+        }
+    }
+
     public renderSelection = (key) => {
         if (key !== undefined && key !== '' && key !== null) {
             if (this.enumerationField.choices.find(choice => choice.key === key)) {
diff --git a/projects/netgrif-components-core/src/lib/data-fields/enumeration-field/models/enumeration-field.ts b/projects/netgrif-components-core/src/lib/data-fields/enumeration-field/models/enumeration-field.ts
@@ -5,6 +5,8 @@ import {AbstractControl, ValidationErrors, ValidatorFn, Validators} from '@angul
 import {FieldTypeResource} from '../../../task-content/model/field-type-resource';
 import {Component} from '../../models/component';
 import {Validation} from '../../models/validation';
+import {Observable} from "rxjs";
+import {debounceTime} from "rxjs/operators";
 
 export interface EnumerationFieldValue {
     key: string;
@@ -17,6 +19,7 @@ export enum EnumerationFieldValidation {
 }
 
 export class EnumerationField extends DataField<string> {
+    protected REQUEST_DEBOUNCE_TIME = 600;
 
     constructor(stringId: string, title: string, value: string,
                 protected _choices: Array<EnumerationFieldValue>, behavior: Behavior, placeholder?: string, description?: string,
@@ -26,7 +29,7 @@ export class EnumerationField extends DataField<string> {
     }
 
     set choices(choices: Array<EnumerationFieldValue>) {
-         this._choices = choices;
+        this._choices = choices;
     }
 
     get choices(): Array<EnumerationFieldValue> {
@@ -37,6 +40,10 @@ export class EnumerationField extends DataField<string> {
         return this._fieldType;
     }
 
+    public valueChanges(): Observable<string> {
+        return this._value.pipe(debounceTime(this.REQUEST_DEBOUNCE_TIME));
+    }
+
     protected resolveFormControlValidators(): Array<ValidatorFn> {
         const result = [];
 
diff --git a/projects/netgrif-components-core/src/lib/task/services/task-data.service.ts b/projects/netgrif-components-core/src/lib/task/services/task-data.service.ts
@@ -31,10 +31,10 @@ import {UserComparatorService} from '../../user/services/user-comparator.service
 import {TaskSetDataRequestContext} from '../models/task-set-data-request-context';
 import {EventOutcomeMessageResource} from '../../resources/interface/message-resource';
 import {EventService} from '../../event/services/event.service';
-import {EventOutcome} from '../../resources/interface/event-outcome';
 import {ChangedFieldsService} from '../../changed-fields/services/changed-fields.service';
 import {ChangedFieldsMap} from '../../event/services/interfaces/changed-fields-map';
 import {TaskFields} from '../../task-content/model/task-fields';
+import {EnumerationField} from "../../data-fields/enumeration-field/models/enumeration-field";
 
 /**
  * Handles the loading and updating of data fields and behaviour of
@@ -149,7 +149,7 @@ export class TaskDataService extends TaskHandlingService implements OnDestroy {
 
     /**
      * Processes a successful outcome of a `getData` request
-     * @param gottenTaskId the Id of the task whose data was requested
+     * @param gottenTaskId the ID of the task whose data was requested
      * @param dataGroups the returned data groups of the task
      * @param afterAction the action that should be performed after the request is processed
      * @param nextEvent indicates to the event queue that the next event can be processed
@@ -233,7 +233,7 @@ export class TaskDataService extends TaskHandlingService implements OnDestroy {
 
     /**
      * Processes an erroneous outcome of a `getData` request
-     * @param gottenTaskId the Id of the task whose data was requested
+     * @param gottenTaskId the ID of the task whose data was requested
      * @param error the returned error
      * @param afterAction the action that should be performed after the request is processed
      * @param nextEvent indicates to the event queue that the next event can be processed
@@ -348,12 +348,16 @@ export class TaskDataService extends TaskHandlingService implements OnDestroy {
         field.changed = false;
     }
 
+    protected isAutocompleteEnumException(field: DataField<unknown>): boolean{
+        return (field instanceof EnumerationField) && (field.getComponentType() === 'autocomplete') && !field.valid;
+    }
+
     /**
      * @param field the checked field
      * @returns whether the field was updated on frontend and thus the backend should be notified
      */
     protected wasFieldUpdated(field: DataField<unknown>): boolean {
-        return field.initialized && field.changed && (field.valid || field.sendInvalidValues);
+        return field.initialized && field.changed && (field.valid || field.sendInvalidValues) && (!this.isAutocompleteEnumException(field));
     }
 
     /**
@@ -397,7 +401,7 @@ export class TaskDataService extends TaskHandlingService implements OnDestroy {
 
     /**
      * Performs a `setData` request on the task currently stored in the `taskContent` service
-     * @param setTaskId id of the task
+     * @param setTaskId ID of the task
      * @param body content of the `setData` request
      * @param afterAction the action that should be performed after the request is processed
      * @param nextEvent indicates to the event queue that the next event can be processed
@@ -434,18 +438,18 @@ export class TaskDataService extends TaskHandlingService implements OnDestroy {
     }
 
     /**
-     * Processes a unsuccessful outcome of a `setData` request
-     * @param setTaskId the Id of the task whose data was set
+     * Processes an unsuccessful outcome of a `setData` request
+     * @param setTaskId the ID of the task whose data was set
      * @param response the resulting Event outcome of the set data request
      * @param afterAction the action that should be performed after the request is processed
      * @param nextEvent indicates to the event queue that the next event can be processed
      * @param body hold the data that was sent in request
      */
     protected processUnsuccessfulSetDataRequest(setTaskId: string,
-                                              response: EventOutcomeMessageResource,
-                                              afterAction: AfterAction,
-                                              nextEvent: AfterAction,
-                                              body: TaskSetDataRequestBody) {
+                                                response: EventOutcomeMessageResource,
+                                                afterAction: AfterAction,
+                                                nextEvent: AfterAction,
+                                                body: TaskSetDataRequestBody) {
         if (response.error !== '') {
             this._snackBar.openErrorSnackBar(this._translate.instant(response.error));
         } else {
@@ -468,7 +472,7 @@ export class TaskDataService extends TaskHandlingService implements OnDestroy {
 
     /**
      * Processes a successful outcome of a `setData` request
-     * @param setTaskId the Id of the task whose data was set
+     * @param setTaskId the ID of the task whose data was set
      * @param response the resulting Event outcome of the set data request
      * @param afterAction the action that should be performed after the request is processed
      * @param nextEvent indicates to the event queue that the next event can be processed
@@ -493,7 +497,7 @@ export class TaskDataService extends TaskHandlingService implements OnDestroy {
 
     /**
      * Processes an erroneous outcome of a `setData` request
-     * @param setTaskId the Id of the task whose data was set
+     * @param setTaskId the ID of the task whose data was set
      * @param error the returned error
      * @param afterAction the action that should be performed after the request is processed
      * @param nextEvent indicates to the event queue that the next event can be processed
@@ -586,7 +590,7 @@ export class TaskDataService extends TaskHandlingService implements OnDestroy {
      *
      * @param afterAction the call chain steam of the update data method
      * @param result result of the update data request
-     * @param setTaskId the Id of the {@link Task}, who's state should be updated
+     * @param setTaskId the ID of the {@link Task}, who's state should be updated
      */
     protected updateStateInfo(afterAction: AfterAction, result: boolean, setTaskId: string): void {
         this._taskState.stopLoading(setTaskId);
diff --git a/projects/netgrif-components/src/lib/data-fields/enumeration-field/enumeration-autocomplete-select-field/enumeration-autocomplete-select-field.component.html b/projects/netgrif-components/src/lib/data-fields/enumeration-field/enumeration-autocomplete-select-field/enumeration-autocomplete-select-field.component.html
@@ -3,20 +3,19 @@
     <input type="text"
            aria-label="Autocomplete"
            matInput
-           #input="ngModel"
+           #input
            [placeholder]="enumerationField.placeholder"
+           [formControl]="formControlRef"
            [matAutocomplete]="auto"
-           [(ngModel)]="tmpValue"
            [required]="enumerationField.behavior.required"
-           [disabled]="formControlRef.disabled"
            (focus)="change()"
            (keyup)="change()">
-    <mat-autocomplete [displayWith]="renderSelection" autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="select($event)">
+    <mat-autocomplete [displayWith]="renderSelection" autoActiveFirstOption #auto="matAutocomplete">
         <mat-option [value]="null">---</mat-option>
         <mat-option *ngFor="let option of filteredOptions | async" [value]="option.key" (click)="change()">
             {{option.value}}
         </mat-option>
     </mat-autocomplete>
     <mat-hint>{{enumerationField.description}}</mat-hint>
-    <mat-error *ngIf="isInvalid() !== undefined">{{buildErrorMessage()}}</mat-error>
+    <mat-error *ngIf="enumerationField.isInvalid(formControlRef)">{{buildErrorMessage()}}</mat-error>
 </mat-form-field>
