nise/nise-frontend/src/corelib/components/query/query.component.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 [disabled]="!predicate.field">
      <option *ngFor="let operator of getOperators(predicate.field?.type)"
              [selected]="operator.operatorType === predicate.operator?.operatorType"
              (click)="predicate.operator = operator; this.queryChanged.emit()">
        {{ operator.operatorType }}
      </option>
    </select>

    <ng-container *ngIf="predicate.operator">

      <ng-container *ngIf="predicate.operator.acceptsValues == 'any'">
        <input [(ngModel)]="predicate.value" type="text" placeholder="Value" [disabled]="!predicate.field" (change)="this.queryChanged.emit()">
      </ng-container>

      <ng-container *ngIf="predicate.operator.acceptsValues == 'boolean'">

        <select [(ngModel)]="predicate.value" [disabled]="!predicate.field" (change)="this.queryChanged.emit()">
          <option value="True">True</option>
          <option value="False">False</option>
        </select>

        </ng-container>

    </ng-container>

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