#82 => WIP

client/src/app/instance/search/components/criteria/criteria-by-family.component.html

@@ -4,6 +4,7 @@
         [criterion]="getCriterion(attribute.id)"
         [criteriaList]="criteriaList"
         (addCriterion)="emitAdd($event)"
+        (updateCriterion)="emitUpdate($event)"
         (deleteCriterion)="emitDelete($event)">
     </app-criterion>
 </div>

client/src/app/instance/search/components/criteria/criteria-by-family.component.ts

@@ -25,6 +25,7 @@ export class CriteriaByFamilyComponent {
     @Input() attributeList: Attribute[];
     @Input() criteriaList: Criterion[];
     @Output() addCriterion: EventEmitter<Criterion> = new EventEmitter();
+    @Output() updateCriterion: EventEmitter<Criterion> = new EventEmitter();
     @Output() deleteCriterion: EventEmitter<number> = new EventEmitter();
 
     /**
@@ -60,6 +61,17 @@ export class CriteriaByFamilyComponent {
         this.addCriterion.emit(criterion);
     }
 
+    /**
+     * Emits event to update the given criterion to the criteria list.
+     *
+     * @param  {Criterion} updatedCriterion - The updated criterion.
+     *
+     * @fires EventEmitter<Criterion>
+     */
+    emitUpdate(updatedCriterion: Criterion): void {
+        this.updateCriterion.emit(updatedCriterion);
+    }
+
     /**
      * Emits event to remove the given criterion ID from the criteria list.
      *

client/src/app/instance/search/components/criteria/criteria-tabs.component.html

@@ -17,6 +17,7 @@
                 [attributeList]="attributeList | attributeListByFamily:family.id" 
                 [criteriaList]="criteriaList"
                 (addCriterion)="emitAdd($event)" 
+                (updateCriterion)="emitUpdate($event)" 
                 (deleteCriterion)="emitDelete($event)">
             </app-criteria-by-family>
         </accordion-group>

client/src/app/instance/search/components/criteria/criteria-tabs.component.ts

@@ -26,6 +26,7 @@ export class CriteriaTabsComponent {
     @Input() criteriaFamilyList: CriteriaFamily[];
     @Input() criteriaList: Criterion[];
     @Output() addCriterion: EventEmitter<Criterion> = new EventEmitter();
+    @Output() updateCriterion: EventEmitter<Criterion> = new EventEmitter();
     @Output() deleteCriterion: EventEmitter<number> = new EventEmitter();
 
     /**
@@ -39,6 +40,17 @@ export class CriteriaTabsComponent {
         this.addCriterion.emit(criterion);
     }
 
+    /**
+     * Emits event to update the given criterion to the criteria list.
+     *
+     * @param  {Criterion} updatedCriterion - The updated criterion.
+     *
+     * @fires EventEmitter<Criterion>
+     */
+    emitUpdate(updatedCriterion: Criterion): void {
+        this.updateCriterion.emit(updatedCriterion);
+    }
+
     /**
      * Emits event to remove the given criterion ID to the criteria list.
      *

client/src/app/instance/search/components/criteria/criterion.component.ts

@@ -22,6 +22,7 @@ export class CriterionComponent implements OnInit, OnChanges {
     @Input() criterion: Criterion;
     @Input() criteriaList: Criterion[];
     @Output() addCriterion: EventEmitter<Criterion> = new EventEmitter();
+    @Output() updateCriterion: EventEmitter<Criterion> = new EventEmitter();
     @Output() deleteCriterion: EventEmitter<number> = new EventEmitter();
 
     @ViewChild(SearchTypeLoaderDirective, {static: true}) SearchTypeLoaderDirective!: SearchTypeLoaderDirective;
@@ -30,12 +31,14 @@ export class CriterionComponent implements OnInit, OnChanges {
 
     ngOnInit() {
         const viewContainerRef = this.SearchTypeLoaderDirective.viewContainerRef;
+        viewContainerRef.clear();
         const componentRef = viewContainerRef.createComponent<AbstractSearchTypeComponent>(
             getSearchTypeComponent(this.attribute.search_type)
         );
         componentRef.instance.setAttribute(this.attribute);
         componentRef.instance.setCriterion(this.criterion);
         componentRef.instance.setCriteriaList(this.criteriaList);
+        componentRef.instance.emitAdd.subscribe(() => this.emitAdd());
         this.searchTypeComponent = componentRef.instance;
     }
 
@@ -65,6 +68,10 @@ export class CriterionComponent implements OnInit, OnChanges {
         } else {
             criterion = this.searchTypeComponent.getCriterion();
         }
-        this.addCriterion.emit(criterion);
+        if (this.criteriaList.find(c => c.id === criterion.id)) {
+            this.updateCriterion.emit(criterion);
+        } else {
+            this.addCriterion.emit(criterion);
+        }
     }
 }

client/src/app/instance/search/components/criteria/search-type/abstract-search-type.component.ts

@@ -7,17 +7,19 @@
  * file that was distributed with this source code.
  */
 
-import { Directive } from '@angular/core';
+import { Directive, Output, EventEmitter, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 
 import { Attribute } from 'src/app/metamodel/models';
 import { Criterion } from 'src/app/instance/store/models';
 import { searchTypeOperators } from 'src/app/shared/utils';
+import { debounceTime, distinctUntilChanged } from 'rxjs';
 
 @Directive()
-export abstract class AbstractSearchTypeComponent {
+export abstract class AbstractSearchTypeComponent implements OnInit {
     attribute: Attribute;
     criteriaList: Criterion[];
+    emitAdd: EventEmitter<{}> = new EventEmitter<{}>(); 
 
     form: UntypedFormGroup;
     operators = searchTypeOperators;
@@ -25,6 +27,13 @@ export abstract class AbstractSearchTypeComponent {
 
     constructor() { }
 
+    ngOnInit() {
+        this.form.valueChanges.pipe(
+            debounceTime(1000)
+        )
+        .subscribe(() => (this.form.valid) ? this.emitAdd.emit() : null);
+    }
+
     setAttribute(attribute: Attribute) {
         this.attribute = attribute;
     }

client/src/app/instance/search/containers/criteria.component.html

@@ -34,6 +34,7 @@
             [criteriaFamilyList]="criteriaFamilyList | async"
             [criteriaList]="criteriaList | async"
             (addCriterion)="addCriterion($event)"
+            (updateCriterion)="updateCriterion($event)"
             (deleteCriterion)="deleteCriterion($event)">
         </app-criteria-tabs>
     </div>

client/src/app/instance/search/containers/criteria.component.ts

@@ -71,6 +71,15 @@ export class CriteriaComponent extends AbstractSearchComponent {
         this.store.dispatch(searchActions.addCriterion({ criterion }));
     }
 
+    /**
+     * Dispatches action to update the given criterion to the search.
+     *
+     * @param  {Criterion} updatedCriterion - The updated criterion.
+     */
+    updateCriterion(updatedCriterion: Criterion): void {
+        this.store.dispatch(searchActions.updateCriterion({ updatedCriterion }))
+    }
+
     /**
      * Dispatches action to remove the given criterion ID to the search.
      *

client/src/app/instance/store/actions/search.actions.ts

@@ -24,6 +24,7 @@ export const checkOutput = createAction('[Search] Check Output');
 export const checkResult = createAction('[Search] Check Result');
 export const updateCriteriaList = createAction('[Search] Update Criteria List', props<{ criteriaList: Criterion[] }>());
 export const addCriterion = createAction('[Search] Add Criterion', props<{ criterion: Criterion }>());
+export const updateCriterion = createAction('[Search] Update Criterion', props<{ updatedCriterion: Criterion }>());
 export const deleteCriterion = createAction('[Search] Delete Criterion', props<{ idCriterion: number }>());
 export const updateOutputList = createAction('[Search] Update Output List', props<{ outputList: number[] }>());
 export const retrieveDataLength = createAction('[Search] Retrieve Data Length');

client/src/app/instance/store/reducers/search.reducer.ts

@@ -93,6 +93,12 @@ export const searchReducer = createReducer(
         ...state,
         criteriaList: [...state.criteriaList, criterion]
     })),
+    on(searchActions.updateCriterion, (state, { updatedCriterion }) => ({
+        ...state,
+        criteriaList: state.criteriaList.map(
+            criterion => (criterion.id === updatedCriterion.id) ? updatedCriterion : criterion
+        )
+    })),
     on(searchActions.deleteCriterion, (state, { idCriterion }) => ({
         ...state,
         criteriaList: [...state.criteriaList.filter(c => c.id !== idCriterion)]