datalist search type :move null and not null in operator select list, and...

datalist search type :move null and not null in operator select list, and manage no dynamic operator case

client/src/app/instance/search/components/criteria/search-type/checkbox.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">
-            <div class="operator_readonly">in</div>
+            <select class="custom-select" (change)="labelOnChange($event.target.value)">
+                <option [value]="">In</option>
+                <option [value]="'nl'">Null</option>
+                <option [value]="'nnl'">Not Null</option>
+            </select>
         </div>
         <div class="w-100 d-block d-sm-none"></div>
         <div class="col pl-sm-1" formArrayName="checkboxes">

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

@@ -77,4 +77,14 @@ export class CheckboxComponent extends AbstractSearchTypeComponent {
         // If one of the checkboxes is checked returns true else returns false
         return this.getCheckboxes().controls.filter(formControl => formControl.value).length > 0;
     }
+   
+    labelOnChange(value: string) {
+        if (value === 'nl' || value === 'nnl') {
+            this.nullOrNotNull = value;
+         
+        } else {
+           this.nullOrNotNull = '';
+          
+        }
+    }
 }

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">
+            <select class="custom-select" formControlName="operator" (change)="operatorOnChange()">
                 <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

@@ -3,6 +3,7 @@ import { FormGroup, FormControl, Validators } from '@angular/forms';
 
 import { AbstractSearchTypeComponent } from './abstract-search-type.component';
 import { Criterion, FieldCriterion } from 'src/app/instance/store/models';
+import { searchTypeOperators } from 'src/app/shared/utils';
 
 @Component({
     selector: 'app-datalist',
@@ -22,7 +23,9 @@ export class DatalistComponent extends AbstractSearchTypeComponent {
         if (!criterion) {
             this.form.controls.operator.setValue(this.attribute.operator);
             if (!this.attribute.dynamic_operator) {
-                this.form.controls.operator.disable();
+                this.operators = searchTypeOperators.filter(
+                    operator => [this.attribute.operator, 'nl', 'nnl'].includes(operator.value)
+                );
             }
         }
     }
@@ -72,4 +75,12 @@ export class DatalistComponent extends AbstractSearchTypeComponent {
     getDatalistId(): string {
         return `datalist_${this.attribute.id}`;
     }
+    operatorOnChange() {
+        if (this.form.controls.operator.value === 'nl' || this.form.controls.operator.value === 'nnl') {
+            this.form.controls.value.disable();
+        } else {
+            this.form.controls.value.enable();
+        }
+    }
+
 }