#46 => done

src/app/search/components/criteria-by-family.component.html

@@ -58,6 +58,11 @@
                 [criterion]="getCriterion(attribute.id)" (add)="add($event)">
             </app-datetime>
         </div>
+        <div *ngSwitchCase="'js'">
+            <app-json class="criteria" [id]="attribute.id" [label]="attribute.form_label"
+                [criterion]="getCriterion(attribute.id)" (add)="add($event)">
+            </app-json>
+        </div>
         <div *ngSwitchDefault>
             {{ attribute.search_type }} search type not supported
         </div>

src/app/search/components/criteria/between.component.html

@@ -8,7 +8,7 @@
         <input type="text" class="form-control" [placeholder]="getPlaceholderMax()" [formControl]="fieldMax"
             autocomplete="off" />
     </div>
-    <div class="col-2 align-self-center text-center">
+    <div class="col-2 text-center">
         <button class="btn btn-outline-success" *ngIf="!fieldMin.disabled" [hidden]="!fieldMin.value && !fieldMax.value"
             (click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
     </div>

src/app/search/components/criteria/checkbox.component.html

@@ -6,7 +6,7 @@
             <label class="form-check-label" for="cb_{{_options[i].value}}">{{_options[i].label}}</label>
         </div>
     </div>
-    <div class="col-2 align-self-center text-center">
+    <div class="col-2 text-center">
         <button class="btn btn-outline-success" *ngIf="!checkboxes.disabled" [hidden]="!isChecked()"
             (click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
     </div>

src/app/search/components/criteria/datalist.component.html

@@ -7,7 +7,7 @@
             <option *ngFor="let option of options" [value]="option.value">
         </datalist>
     </div>
-    <div class="col-2 align-self-center text-center">
+    <div class="col-2 text-center">
         <button class="btn btn-outline-success" *ngIf="!field.disabled" [hidden]="!field.value"
             (click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
     </div>

src/app/search/components/criteria/date.component.html

@@ -4,7 +4,7 @@
         <input type="text" placeholder="Pick a date..." class="form-control" [formControl]="field"
             [bsValue]="field.value" [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }" bsDatepicker>
     </div>
-    <div class="col-2 align-self-center text-center">
+    <div class="col-2 text-center">
         <button class="btn btn-outline-success" *ngIf="!field.disabled" [hidden]="!field.value"
             (click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
     </div>

src/app/search/components/criteria/datetime.component.html

@@ -20,7 +20,7 @@
             </div>
         </div>
     </div>
-    <div class="col-2 align-self-center text-center">
+    <div class="col-2 text-center">
         <button class="btn btn-outline-success" *ngIf="!date.disabled || !hh.disabled || !mm.disabled" [hidden]="!isValidFields"
             (click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
     </div>

src/app/search/components/criteria/field.component.html

@@ -4,7 +4,7 @@
         <input [type]="getType()" class="form-control" [placeholder]="getPlaceholder()" [formControl]="field"
             autocomplete="off">
     </div>
-    <div class="col-2 align-self-center text-center">
+    <div class="col-2 text-center">
         <button class="btn btn-outline-success" *ngIf="!field.disabled" [hidden]="!field.value"
             (click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
     </div>

src/app/search/components/criteria/index.ts

@@ -8,6 +8,7 @@ import { CheckboxComponent } from './checkbox.component';
 import { DateComponent } from './date.component';
 import { TimeComponent } from './time.component';
 import { DatetimeComponent } from './datetime.component';
+import { JsonComponent } from './json.component';
 
 export const criteriaComponents = [
     FieldComponent,
@@ -19,5 +20,6 @@ export const criteriaComponents = [
     CheckboxComponent,
     DateComponent,
     TimeComponent,
-    DatetimeComponent
+    DatetimeComponent,
+    JsonComponent
 ];

src/app/search/components/criteria/json.component.html

+<div class="form-group row">
+    <label class="col-3 col-form-label">{{label}}</label>
+    <div class="col">
+        <div class="row">
+            <div class="col-5">
+                <input class="form-control" name="path" [formControl]="jsonForm.controls.path" placeholder="Path"
+                    required autocomplete="off">
+            </div>
+            <div class="col-2 px-0">
+                <select class="form-control" name="operator" [formControl]="jsonForm.controls.operator" required>
+                    <option></option>
+                    <option value="eq">=</option>
+                    <option value="gt">></option>
+                    <option value="gte">>=</option>
+                    <option value="lt"><</option>
+                    <option value="lte"><=</option>
+                </select>
+            </div> 
+            <div class="col-5">
+                <input class="form-control" name="value" [formControl]="jsonForm.controls.value"
+                    placeholder="Value" required autocomplete="off">
+            </div>
+        </div>
+    </div>
+    <div class="col-2 text-center">
+        <button class="btn btn-outline-success" *ngIf="!jsonForm.disabled" [hidden]="jsonForm.invalid"
+            (click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
+    </div>
+</div>
\ No newline at end of file

src/app/search/components/criteria/json.component.ts

+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+import { JsonCriterion, Criterion } from '../../store/model';
+
+@Component({
+    selector: 'app-json',
+    templateUrl: 'json.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class JsonComponent {
+    @Input() id: number;
+    @Input() label: string;
+    @Input()
+    set criterion(criterion: Criterion) {
+        this.getDefault(criterion);
+    }
+    @Output() add: EventEmitter<JsonCriterion> = new EventEmitter();
+
+    jsonForm = new FormGroup({
+        path: new FormControl(),
+        operator: new FormControl(),
+        value: new FormControl()
+    })
+
+    addCriterion() {
+        const js = new JsonCriterion(this.id, this.jsonForm.value.path, this.jsonForm.value.operator, this.jsonForm.value.value)
+        this.add.emit(js);
+    }
+
+    getDefault(criterion: Criterion): void {
+        if (!criterion) {
+            this.jsonForm.reset();
+            this.jsonForm.enable();
+        } else {
+            const c = criterion as JsonCriterion;
+            this.jsonForm.controls.path.setValue(c.path);
+            this.jsonForm.controls.operator.setValue(c.operator);
+            this.jsonForm.controls.value.setValue(c.value);
+            this.jsonForm.disable();
+        }
+    }
+}

src/app/search/components/criteria/radio.component.html

@@ -7,7 +7,7 @@
             <label class="form-check-label" for="cb_{{option.value}}">{{option.label}}</label>
         </div>
     </div>
-    <div class="col-2 align-self-center text-center">
+    <div class="col-2 text-center">
         <button class="btn btn-outline-success" *ngIf="!radio.disabled" [hidden]="!radio.value"
             (click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
     </div>

src/app/search/components/criteria/select-multiple.component.html

@@ -5,7 +5,7 @@
             <ng-option *ngFor="let option of options" [value]="option.value">{{option.label}}</ng-option>
         </ng-select>
     </div>
-    <div class="col-2 align-self-center text-center">
+    <div class="col-2 text-center">
         <button class="btn btn-outline-success" *ngIf="!ms.disabled" [hidden]="!ms.value" (click)="addCriterion()"><i
                 class="fas fa-plus-circle"></i></button>
     </div>

src/app/search/components/criteria/select.component.html

@@ -5,7 +5,7 @@
             <ng-option *ngFor="let option of options" [value]="option.value">{{option.label}}</ng-option>
         </ng-select>
     </div>
-    <div class="col-2 align-self-center text-center">
+    <div class="col-2 text-center">
         <button class="btn btn-outline-success" *ngIf="!se.disabled" [hidden]="!se.value" (click)="addCriterion()"><i
                 class="fas fa-plus-circle"></i></button>
     </div>

src/app/search/components/criteria/time.component.html

@@ -15,7 +15,7 @@
             </div>
         </div>
     </div>
-    <div class="col-2 align-self-center text-center">
+    <div class="col-2 text-center">
         <button class="btn btn-outline-success" *ngIf="!hh.disabled || !mm.disabled" [hidden]="!hh.value || !mm.value"
             (click)="addCriterion()">
             <i class="fas fa-plus-circle"></i>

src/app/search/store/model/index.ts

@@ -5,4 +5,5 @@ export * from './checkbox-criterion.model';
 export * from './select-multiple-criterion.model';
 export * from './search-meta.model';
 export * from './time-criterion.model';
-export * from './datetime-criterion.model';
\ No newline at end of file
+export * from './datetime-criterion.model';
+export * from './json-criterion.model';
\ No newline at end of file

src/app/search/store/model/json-criterion.model.ts

+import { Criterion } from './criterion.model';
+
+export class JsonCriterion extends Criterion {
+    path: string;
+    operator: string;
+    value: string;
+
+    constructor(id: number, path: string, operator: string, value: string) {
+        super(id);
+        this.path = path;
+        this.operator = operator;
+        this.value = value;
+    }
+
+    printCriterion(): string {
+        return this.path + ' ' + this.operator + ' ' + this.value;
+    }
+
+    getCriterionStr() {
+        return this.id + ':js:' + this.path + '|' + this.operator + '|' + this.value;
+    }
+}