34 lines
1.3 KiB
HTML
34 lines
1.3 KiB
HTML
|
<fieldset>
|
||
|
|
<legend>Query builder</legend>
|
||
|
|
<fieldset *ngFor="let query of queries; let i = index" class="query">
|
||
|
|
<legend>Predicate #{{ i + 1 }}</legend>
|
||
|
|
<div class="logical-operator-toggle">
|
||
|
|
<label>
|
||
|
|
<input type="radio" name="logicalOperator{{i}}" [(ngModel)]="query.logicalOperator" value="AND" />
|
||
|
|
AND
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<input type="radio" name="logicalOperator{{i}}" [(ngModel)]="query.logicalOperator" value="OR" />
|
||
|
|
OR
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div *ngFor="let predicate of query.predicates; let j = index" class="predicate">
|
||
|
|
<select>
|
||
|
|
<option *ngFor="let field of fields" (click)="onFieldChange(predicate, field)" [selected]="field.name === predicate.field?.name">{{ field.name }}</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<select [(ngModel)]="predicate.operator" [disabled]="!predicate.field">
|
||
|
|
<option *ngFor="let operator of getOperators(predicate.field?.type)" [value]="operator">
|
||
|
|
{{ operator }}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<input [(ngModel)]="predicate.value" type="text" placeholder="Value" [disabled]="!predicate.field">
|
||
|
|
<button (click)="removePredicate(i, j)">X</button>
|
||
|
|
</div>
|
||
|
|
<button (click)="addPredicate(i)">+ Rule</button>
|
||
|
|
</fieldset>
|
||
|
|
<button (click)="addQuery()">+ Predicate</button>
|
||
|
|
</fieldset>
|