inprove betweenDate searchType select box

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

@@ -11,12 +11,9 @@ import { Criterion, BetweenCriterion } from 'src/app/instance/store/models';
 export class BetweenDateComponent extends AbstractSearchTypeComponent {
     constructor() {
         super();
-        // dateRange is desabled when the user select null or not null
-       if(! this.nullOrNotNull){
         this.form = new FormGroup({
             dateRange: new FormControl('', [Validators.required]),
         });
-       }
     }
 
     setCriterion(criterion: Criterion) {
@@ -61,6 +58,7 @@ export class BetweenDateComponent extends AbstractSearchTypeComponent {
             this.nullOrNotNull = value;
             this.form.controls.dateRange.disable();
         } else {
+            this.nullOrNotNull = '';
             this.form.controls.dateRange.enable();
         }
     }

client/src/app/instance/search/components/criteria/search-type/between.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">
-            <div class="operator_readonly">Min</div>
+            <select class="custom-select" (change)="labelOnChange($event.target.value)">
+                <option [value]="">Min/Max</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 mb-1 mb-sm-0">
             <input type="text" class="form-control" [placeholder]="getPlaceholderMin()" formControlName="min" autocomplete="off" />
         </div>
         <div class="w-100 d-block d-lg-none"></div>
-        <div class="col col-sm-3 col-lg-auto pr-sm-1 mb-1">
-            <div class="operator_readonly">Max</div>
-        </div>
+        
         <div class="w-100 d-block d-sm-none"></div>
         <div class="col pl-sm-1">
             <input type="text" class="form-control" [placeholder]="getPlaceholderMax()" formControlName="max" autocomplete="off" />

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

@@ -42,6 +42,21 @@ export class BetweenComponent extends AbstractSearchTypeComponent {
             return this.attribute.placeholder_min;
         }
     }
+    labelOnChange(value: string) {
+        if (value === 'nl' || value === 'nnl') {
+            this.nullOrNotNull = value;
+            this.form.controls.min.disable();
+            this.form.controls.max.disable();
+        } else {
+           
+            if(!(this.form.controls.min.value || this.form.controls.max.value)){
+               
+                this.nullOrNotNull = '';
+            }
+            this.form.controls.max.enable();
+            this.form.controls.min.enable();
+        }
+    }
 
     /**
      * Returns placeholder for the maximum value.
@@ -59,7 +74,5 @@ export class BetweenComponent extends AbstractSearchTypeComponent {
     isValid() {
         return this.form.controls.min.value || this.form.controls.max.value;
     }
-    compareFn(c1: string|number, c2: string|number): boolean {
-        return c1 === c2;
-    }
+  
 }