Refactor search_types => done

ba30a823 · François Agneray · 39e57118 · ba30a823 · ba30a823 · ba30a823
Commit ba30a823 authored 2 years ago by François Agneray
--- a/client/src/app/instance/search/components/criteria/criterion.component.html
+++ b/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)">

--- a/client/src/app/instance/search/components/criteria/criterion.component.ts
+++ b/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);
    }
 }
--- a/client/src/app/instance/search/components/criteria/search-type/abstract-search-type.component.ts
+++ b/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.
     *

--- 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
 <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>

--- 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
@@ -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();
        }
    }


--- a/client/src/app/instance/search/components/criteria/search-type/date.component.html
+++ b/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>

--- a/client/src/app/instance/search/components/criteria/search-type/date.component.ts
+++ b/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();
        }
    }


--- a/client/src/app/instance/search/components/criteria/search-type/datetime.component.html
+++ b/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>

--- a/client/src/app/instance/search/components/criteria/search-type/datetime.component.ts
+++ b/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();
        }
    }


--- a/client/src/app/instance/search/components/criteria/search-type/field.component.html
+++ b/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>

--- a/client/src/app/instance/search/components/criteria/search-type/field.component.ts
+++ b/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();
        }
    }


--- a/client/src/app/instance/search/components/criteria/search-type/radio.component.html
+++ b/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>

--- a/client/src/app/instance/search/components/criteria/search-type/radio.component.ts
+++ b/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();
        }
    }
 }
--- a/client/src/app/instance/search/components/criteria/search-type/select.component.html
+++ b/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>

--- a/client/src/app/instance/search/components/criteria/search-type/select.component.ts
+++ b/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();
        }
    }
 }
--- a/client/src/app/instance/search/components/criteria/search-type/time.component.html
+++ b/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>

--- a/client/src/app/instance/search/components/criteria/search-type/time.component.ts
+++ b/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;
    }
-
 }
--- a/client/src/app/shared/utils.ts
+++ b/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' }
 ];