Commit eea3bee9 authored by François Agneray's avatar François Agneray
Browse files

#46 => done

parent a3c7c402
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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
];
<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
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();
}
}
}
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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
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;
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment