38 lines
1.6 KiB
HTML
38 lines
1.6 KiB
HTML
|
<fieldset class="query">
|
||
|
|
<legend>Predicate <button (click)="removeQuery.emit()">Delete</button></legend>
|
||
|
|
|
||
|
|
<div class="logical-operator-toggle">
|
||
|
|
<label>
|
||
|
|
<input type="radio" name="logicalOperator-{{ queryId }}" [(ngModel)]="query.logicalOperator" value="AND" (change)="this.queryChanged.emit()"/>
|
||
|
|
AND
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<input type="radio" name="logicalOperator-{{ queryId }}" [(ngModel)]="query.logicalOperator" value="OR" (change)="this.queryChanged.emit()"/>
|
||
|
|
OR
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div *ngFor="let predicate of query.predicates; let i = index">
|
||
|
|
|
||
|
|
<select style="max-width: 40%">
|
||
|
|
<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" (change)="this.queryChanged.emit()">
|
||
|
|
{{ operator }}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<input [(ngModel)]="predicate.value" type="text" placeholder="Value" [disabled]="!predicate.field" (change)="this.queryChanged.emit()">
|
||
|
|
<button (click)="removePredicate(i)">X</button>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<button (click)="addPredicate()" style="margin-top: 5px">+ Rule</button>
|
||
|
|
|
||
|
|
<div *ngFor="let childQuery of query.childQueries; let i = index">
|
||
|
|
<app-query [query]="childQuery" [fields]="fields" (removeQuery)="removeSubQuery(i)" (queryChanged)="queryChanged.emit()"></app-query>
|
||
|
|
</div>
|
||
|
|
<button (click)="addSubQuery()">+ Sub-Predicate</button>
|
||
|
|
</fieldset>
|