From 42a9ecd654fd65332c649abe4495559b5cfebc2c Mon Sep 17 00:00:00 2001
From: Angapay Divin <divin.angapay@lam.fr>
Date: Fri, 3 Jun 2022 09:34:48 +0200
Subject: [PATCH] inprove betweenDate searchType select box
---
.../search-type/between-date.component.ts | 4 +---
.../search-type/between.component.html | 10 ++++++----
.../criteria/search-type/between.component.ts | 19 ++++++++++++++++---
3 files changed, 23 insertions(+), 10 deletions(-)
diff --git a/client/src/app/instance/search/components/criteria/search-type/between-date.component.ts b/client/src/app/instance/search/components/criteria/search-type/between-date.component.ts
index 2c7d594f..f7f973bf 100644
--- a/client/src/app/instance/search/components/criteria/search-type/between-date.component.ts
+++ b/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();
}
}
diff --git a/client/src/app/instance/search/components/criteria/search-type/between.component.html b/client/src/app/instance/search/components/criteria/search-type/between.component.html
index d48fcb25..f1438d59 100644
--- a/client/src/app/instance/search/components/criteria/search-type/between.component.html
+++ b/client/src/app/instance/search/components/criteria/search-type/between.component.html
@@ -1,16 +1,18 @@
<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" />
diff --git a/client/src/app/instance/search/components/criteria/search-type/between.component.ts b/client/src/app/instance/search/components/criteria/search-type/between.component.ts
index f5deb740..bc0649a7 100644
--- a/client/src/app/instance/search/components/criteria/search-type/between.component.ts
+++ b/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;
- }
+
}
--
GitLab