89 lines
4.0 KiB
HTML
89 lines
4.0 KiB
HTML
<div class="btn-group w-100" ngbDropdown role="group" #dropdown="ngbDropdown">
|
|
<button class="btn btn-sm btn-outline-primary" id="dropdown_{{name}}" ngbDropdownToggle [disabled]="disabled">
|
|
<i-bs name="{{icon}}"></i-bs>
|
|
<div class="d-none d-sm-inline"> {{title}}</div>
|
|
</button>
|
|
<div class="dropdown-menu px-3 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
|
|
<div class="btn-group my-2 w-100">
|
|
<button type="button" class="btn btn-sm btn-outline-primary" (click)="addAtom()" [disabled]="disabled">
|
|
<i-bs name="plus"></i-bs> Add query
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-primary" (click)="addExpression()" [disabled]="disabled">
|
|
<i-bs name="plus"></i-bs> Add expression
|
|
</button>
|
|
</div>
|
|
<div class="list-group list-group-flush">
|
|
@for (query of selectionModel.queries; track query; let i = $index) {
|
|
<div class="list-group-item px-0 d-flex">
|
|
@switch (query.type) {
|
|
@case (CustomFieldQueryComponentType.Atom) {
|
|
<ng-container *ngTemplateOutlet="queryAtom; context: { query: query }"></ng-container>
|
|
}
|
|
@case (CustomFieldQueryComponentType.Expression) {
|
|
<ng-container *ngTemplateOutlet="queryExpression; context: { query: query }"></ng-container>
|
|
}
|
|
}
|
|
<button class="btn btn-link btn-sm pe-0" type="button" (click)="removeComponent(query)" [disabled]="disabled">
|
|
<i-bs name="x"></i-bs>
|
|
</button>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ng-template #queryAtom let-query="query">
|
|
<div class="input-group input-group-sm flex-shrink-1 flex-nowrap">
|
|
<ng-select
|
|
class="w-50"
|
|
[items]="customFields"
|
|
[(ngModel)]="query.field"
|
|
[disabled]="disabled"
|
|
bindLabel="name"
|
|
bindValue="id"
|
|
></ng-select>
|
|
<select class="w-25 form-select" [(ngModel)]="query.operator" [disabled]="disabled">
|
|
<option *ngFor="let operator of getOperatorsForField(query.field)" [ngValue]="operator">{{operator}}</option>
|
|
</select>
|
|
@switch (query.operator) {
|
|
@case ('exists') {
|
|
<select class="w-25 form-select" [(ngModel)]="query.value" [disabled]="disabled">
|
|
<option value="true" i18n>true</option>
|
|
<option value="false" i18n>false</option>
|
|
</select>
|
|
}
|
|
@default {
|
|
<input class="w-25 form-control" type="text" [(ngModel)]="query.value" [disabled]="disabled">
|
|
}
|
|
}
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-template #queryExpression let-query="query">
|
|
<div class="d-flex flex-column border border-primary rounded p-2 mt-2">
|
|
<div class="btn-group btn-group-xs flex-fill" role="group">
|
|
<input [(ngModel)]="query.operator" type="radio" class="btn-check" id="logicalOperatorAnd_{{query.field}}" name="logicalOperatorAnd_{{query.field}}" value="AND">
|
|
<label class="btn btn-outline-primary" for="logicalOperatorAnd_{{query.field}}" i18n>And</label>
|
|
<input [(ngModel)]="query.operator" type="radio" class="btn-check" id="logicalOperatorOr_{{query.field}}" name="logicalOperatorOr_{{query.field}}" value="OR">
|
|
<label class="btn btn-outline-primary" for="logicalOperatorOr_{{query.field}}" i18n>Or</label>
|
|
</div>
|
|
<div class="list-group list-group-flush">
|
|
@for (subquery of query.value; track subquery; let i = $index) {
|
|
<div class="list-group-item px-0 d-flex">
|
|
@switch (subquery.type) {
|
|
@case (CustomFieldQueryComponentType.Atom) {
|
|
<ng-container *ngTemplateOutlet="queryAtom; context: { query: subquery }"></ng-container>
|
|
}
|
|
@case (CustomFieldQueryComponentType.Expression) {
|
|
<ng-container *ngTemplateOutlet="queryExpression; context: { query: subquery }"></ng-container>
|
|
}
|
|
}
|
|
<button class="btn btn-link btn-sm pe-0" type="button" (click)="removeComponent(subquery)" [disabled]="disabled">
|
|
<i-bs name="x"></i-bs>
|
|
</button>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</ng-template>
|