diff --git a/client/src/app/instance/search/components/criteria/search-type/checkbox.component.html b/client/src/app/instance/search/components/criteria/search-type/checkbox.component.html index 936cd8786ea93bf2d5c03df2b4c4f0158cfb743b..2a0fb789b9cff61ea1cc5b084ef41931a3a3920f 100644 --- a/client/src/app/instance/search/components/criteria/search-type/checkbox.component.html +++ b/client/src/app/instance/search/components/criteria/search-type/checkbox.component.html @@ -1,7 +1,11 @@ <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"> diff --git a/client/src/app/instance/search/components/criteria/search-type/checkbox.component.ts b/client/src/app/instance/search/components/criteria/search-type/checkbox.component.ts index 8d9b1b070290fb878fc4a34812982b8464711981..c94a23eb8b1f264a0dd36faeea0f36773fc0fa7f 100644 --- a/client/src/app/instance/search/components/criteria/search-type/checkbox.component.ts +++ b/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 = ''; + + } + } } diff --git a/client/src/app/instance/search/components/criteria/search-type/datalist.component.html b/client/src/app/instance/search/components/criteria/search-type/datalist.component.html index 0044b68c1fd4e5ed6290d839fa4dd8f3bf8d9873..e0f39d837b2c9ec00d6e42bec28f201d5565abfc 100644 --- a/client/src/app/instance/search/components/criteria/search-type/datalist.component.html +++ b/client/src/app/instance/search/components/criteria/search-type/datalist.component.html @@ -1,7 +1,7 @@ <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> diff --git a/client/src/app/instance/search/components/criteria/search-type/datalist.component.ts b/client/src/app/instance/search/components/criteria/search-type/datalist.component.ts index ccbc14a555367f1ed135ce9ab6102e9b87b17076..81e6a6731694be741c3329e59d8380cd05c1f18c 100644 --- a/client/src/app/instance/search/components/criteria/search-type/datalist.component.ts +++ b/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(); + } + } + }