Refactor search_types => done

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

@@ -6,7 +6,14 @@
         <ng-template searchType></ng-template>
     </div>
     <div class="col-2 text-center align-self-center">
-        <button class="btn btn-outline-success" *ngIf="!criterion" [hidden]="!searchTypeComponent.isValid()" (click)="emitAdd()">
+        <select [disabled]="criterion != null" class="form-control" [(ngModel)]="nullOrNotNull" (change)="onChangeNull()">
+            <option></option>
+            <option value="nl">Null</option>
+            <option value="nnl">Not null</option>
+        </select>
+    </div>
+    <div class="col-2 text-center align-self-center">
+        <button class="btn btn-outline-success" *ngIf="!criterion" [hidden]="!searchTypeComponent.isValid() && !nullOrNotNull" (click)="emitAdd()">
             <span class="fas fa-plus fa-fw"></span>
         </button>
         <button class="btn btn-outline-danger" *ngIf="criterion" (click)="deleteCriterion.emit(attribute.id)">

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

@@ -10,7 +10,7 @@
 import { Component, Input, Output, EventEmitter, ViewChild, SimpleChanges, OnInit, OnChanges } from '@angular/core';
 
 import { Attribute } from 'src/app/metamodel/models';
-import { Criterion } from 'src/app/instance/store/models';
+import { Criterion, FieldCriterion } from 'src/app/instance/store/models';
 import { SearchTypeLoaderDirective, AbstractSearchTypeComponent, getSearchTypeComponent } from './search-type';
 
 @Component({
@@ -27,6 +27,7 @@ export class CriterionComponent implements OnInit, OnChanges {
     @ViewChild(SearchTypeLoaderDirective, {static: true}) SearchTypeLoaderDirective!: SearchTypeLoaderDirective;
 
     public searchTypeComponent: AbstractSearchTypeComponent;
+    public nullOrNotNull: string;
 
     ngOnInit() {
         const viewContainerRef = this.SearchTypeLoaderDirective.viewContainerRef;
@@ -42,6 +43,9 @@ export class CriterionComponent implements OnInit, OnChanges {
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.criterion && !changes.criterion.firstChange) {
             this.searchTypeComponent.setCriterion(changes.criterion.currentValue);
+            if (!changes.criterion.currentValue) {
+                this.nullOrNotNull = '';
+            }
         }
 
         if (changes.criteriaList && !changes.criteriaList.firstChange) {
@@ -49,12 +53,30 @@ export class CriterionComponent implements OnInit, OnChanges {
         }
     }
 
+    onChangeNull() {
+        if (this.nullOrNotNull) {
+            this.searchTypeComponent.disable();
+        } else {
+            this.searchTypeComponent.enable();
+        }
+    }
+
     /**
      * Emits event to add criterion to the criteria list.
      *
      * @fires EventEmitter<Criterion>
      */
     emitAdd(): void {
-        this.addCriterion.emit(this.searchTypeComponent.getCriterion());
+        let criterion: Criterion;
+        if (this.nullOrNotNull) {
+            criterion = {
+                id: this.attribute.id,
+                type: 'field',
+                operator: this.nullOrNotNull
+            } as FieldCriterion;
+        } else {
+            criterion = this.searchTypeComponent.getCriterion();
+        }
+        this.addCriterion.emit(criterion);
     }
 }

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

@@ -39,6 +39,14 @@ export abstract class AbstractSearchTypeComponent {
         return this.form.valid;
     }
 
+    disable() {
+        this.form.disable();
+    }
+
+    enable() {
+        this.form.enable();
+    }
+
     /**
      * Return field type.
      *

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

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
         <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-sm-0">
-            <select class="custom-select" formControlName="operator" (change)="operatorOnChange()">
+            <select class="custom-select" formControlName="operator">
                 <option *ngFor="let o of operators" [ngValue]="o.value">{{ o.label }}</option>
             </select>
         </div>

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

@@ -24,7 +24,6 @@ export class DatalistComponent extends AbstractSearchTypeComponent {
             if (!this.attribute.dynamic_operator) {
                 this.form.controls.operator.disable();
             }
-            this.operatorOnChange();
         }
     }
     
@@ -45,14 +44,10 @@ export class DatalistComponent extends AbstractSearchTypeComponent {
         return this.form.valid || this.form.controls.operator.value === 'nl' || this.form.controls.operator.value === 'nnl';
     }
 
-    /**
-     * Modifies operator with the given one.
-     */
-    operatorOnChange(): void {
-        if (this.form.controls.operator.value == 'nl' || this.form.controls.operator.value == 'nnl') {
-            this.form.controls.value.disable();
-        } else {
-            this.form.controls.value.enable();
+    enable() {
+        super.enable();
+        if (!this.attribute.dynamic_operator) {
+            this.form.controls.operator.disable();
         }
     }
 

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

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
         <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-sm-0">
-            <select class="custom-select" formControlName="operator" (change)="operatorOnChange()">
+            <select class="custom-select" formControlName="operator">
                 <option *ngFor="let o of operators" [ngValue]="o.value">{{ o.label }}</option>
             </select>
         </div>

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

@@ -26,7 +26,6 @@ export class DateComponent extends AbstractSearchTypeComponent {
             if (!this.attribute.dynamic_operator) {
                 this.form.controls.operator.disable();
             }
-            this.operatorOnChange();
         }
     }
     
@@ -53,14 +52,10 @@ export class DateComponent extends AbstractSearchTypeComponent {
         return this.form.valid || this.form.controls.operator.value === 'nl' || this.form.controls.operator.value === 'nnl';
     }
 
-    /**
-     * Modifies operator with the given one.
-     */
-    operatorOnChange(): void {
-        if (this.form.controls.operator.value == 'nl' || this.form.controls.operator.value == 'nnl') {
-            this.form.controls.date.disable();
-        } else {
-            this.form.controls.date.enable();
+    enable() {
+        super.enable();
+        if (!this.attribute.dynamic_operator) {
+            this.form.controls.operator.disable();
         }
     }
 

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

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
         <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-lg-0">
-            <select class="custom-select" formControlName="operator" (change)="operatorOnChange()">
+            <select class="custom-select" formControlName="operator">
                 <option *ngFor="let o of operators" [ngValue]="o.value">{{ o.label }}</option>
             </select>
         </div>

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

@@ -38,7 +38,6 @@ export class DateTimeComponent extends AbstractSearchTypeComponent {
             if (!this.attribute.dynamic_operator) {
                 this.form.controls.operator.disable();
             }
-            this.operatorOnChange();
         }
     }
     
@@ -67,18 +66,10 @@ export class DateTimeComponent extends AbstractSearchTypeComponent {
         return this.form.valid || this.form.controls.operator.value === 'nl' || this.form.controls.operator.value === 'nnl';
     }
 
-    /**
-     * Modifies operator with the given one.
-     */
-    operatorOnChange(): void {
-        if (this.form.controls.operator.value == 'nl' || this.form.controls.operator.value == 'nnl') {
-            this.form.controls.date.disable();
-            this.form.controls.hh.disable();
-            this.form.controls.mm.disable();
-        } else {
-            this.form.controls.date.enable();
-            this.form.controls.hh.enable();
-            this.form.controls.mm.enable();
+    enable() {
+        super.enable();
+        if (!this.attribute.dynamic_operator) {
+            this.form.controls.operator.disable();
         }
     }
 

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

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
         <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-sm-0">
-            <select class="custom-select" formControlName="operator" (change)="operatorOnChange()">
+            <select class="custom-select" formControlName="operator">
                 <option *ngFor="let o of operators" [ngValue]="o.value">{{ o.label }}</option>
             </select>
         </div>

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

@@ -24,7 +24,6 @@ export class FieldComponent extends AbstractSearchTypeComponent {
             if (!this.attribute.dynamic_operator) {
                 this.form.controls.operator.disable();
             }
-            this.operatorOnChange();
         }
     }
     
@@ -45,14 +44,10 @@ export class FieldComponent extends AbstractSearchTypeComponent {
         return this.form.valid || this.form.controls.operator.value === 'nl' || this.form.controls.operator.value === 'nnl';
     }
 
-    /**
-     * Modifies operator with the given one.
-     */
-    operatorOnChange(): void {
-        if (this.form.controls.operator.value == 'nl' || this.form.controls.operator.value == 'nnl') {
-            this.form.controls.value.disable();
-        } else {
-            this.form.controls.value.enable();
+    enable() {
+        super.enable();
+        if (!this.attribute.dynamic_operator) {
+            this.form.controls.operator.disable();
         }
     }
 

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

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
         <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-sm-0">
-            <select class="custom-select" formControlName="operator" (change)="operatorOnChange()">
+            <select class="custom-select" formControlName="operator">
                 <option *ngFor="let o of operators" [ngValue]="o.value">{{ o.label }}</option>
             </select>
         </div>

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

@@ -26,7 +26,6 @@ export class RadioComponent extends AbstractSearchTypeComponent {
             if (!this.attribute.dynamic_operator) {
                 this.form.controls.operator.disable();
             }
-            this.operatorOnChange();
         }
     }
     
@@ -54,14 +53,10 @@ export class RadioComponent extends AbstractSearchTypeComponent {
         return this.form.valid || this.form.controls.operator.value === 'nl' || this.form.controls.operator.value === 'nnl';
     }
 
-    /**
-     * Modifies operator with the given one.
-     */
-    operatorOnChange(): void {
-        if (this.form.controls.operator.value == 'nl' || this.form.controls.operator.value == 'nnl') {
-            this.form.controls.radio.disable();
-        } else {
-            this.form.controls.radio.enable();
+    enable() {
+        super.enable();
+        if (!this.attribute.dynamic_operator) {
+            this.form.controls.operator.disable();
         }
     }
 }

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

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
         <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-sm-0">
-            <select class="custom-select" formControlName="operator" (change)="operatorOnChange()">
+            <select class="custom-select" formControlName="operator">
                 <option *ngFor="let o of operators" [ngValue]="o.value">{{ o.label }}</option>
             </select>
         </div>

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

@@ -26,7 +26,6 @@ export class SelectComponent extends AbstractSearchTypeComponent {
             if (!this.attribute.dynamic_operator) {
                 this.form.controls.operator.disable();
             }
-            this.operatorOnChange();
         }
     }
 
@@ -53,14 +52,10 @@ export class SelectComponent extends AbstractSearchTypeComponent {
         return this.form.valid || this.form.controls.operator.value === 'nl' || this.form.controls.operator.value === 'nnl';
     }
 
-    /**
-     * Modifies operator with the given one.
-     */
-    operatorOnChange(): void {
-        if (this.form.controls.operator.value == 'nl' || this.form.controls.operator.value == 'nnl') {
-            this.form.controls.select.disable();
-        } else {
-            this.form.controls.select.enable();
+    enable() {
+        super.enable();
+        if (!this.attribute.dynamic_operator) {
+            this.form.controls.operator.disable();
         }
     }
 }

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

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
         <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-lg-0">
-            <select class="custom-select" formControlName="operator" (change)="operatorOnChange()">
+            <select class="custom-select" formControlName="operator">
                 <option *ngFor="let o of operators" [ngValue]="o.value">{{ o.label }}</option>
             </select>
         </div>

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

@@ -35,7 +35,6 @@ export class TimeComponent extends AbstractSearchTypeComponent {
             if (!this.attribute.dynamic_operator) {
                 this.form.controls.operator.disable();
             }
-            this.operatorOnChange();
         }
     }
     
@@ -62,16 +61,10 @@ export class TimeComponent extends AbstractSearchTypeComponent {
         return this.form.valid || this.form.controls.operator.value === 'nl' || this.form.controls.operator.value === 'nnl';
     }
 
-    /**
-     * Modifies operator with the given one.
-     */
-    operatorOnChange(): void {
-        if (this.form.controls.operator.value == 'nl' || this.form.controls.operator.value == 'nnl') {
-            this.form.controls.hh.disable();
-            this.form.controls.mm.disable();
-        } else {
-            this.form.controls.hh.enable();
-            this.form.controls.mm.enable();
+    enable() {
+        super.enable();
+        if (!this.attribute.dynamic_operator) {
+            this.form.controls.operator.disable();
         }
     }
 
@@ -90,5 +83,4 @@ export class TimeComponent extends AbstractSearchTypeComponent {
         }
         return array;
     }
-
 }

client/src/app/shared/utils.ts

@@ -49,7 +49,5 @@ export const searchTypeOperators: SearchTypeOperator[] = [
     { value: 'lk', label: 'like' },
     { value: 'nlk', label: 'not like' },
     { value: 'in', label: 'in' },
-    { value: 'nin', label: 'not in' },
-    { value: 'nl', label: 'is null' },
-    { value: 'nnl', label: 'is not null' },
+    { value: 'nin', label: 'not in' }
 ];