91 lines
4.2 KiB
HTML
91 lines
4.2 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>
|
|
@if (selectionModel.queries.length > 0) {
|
|
<pngx-clearable-badge [selected]="selectionModel.queries.length > 0" (cleared)="reset()"></pngx-clearable-badge>
|
|
}
|
|
</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="node-plus"></i-bs> Add query
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-primary" (click)="addExpression()" [disabled]="disabled">
|
|
<i-bs name="braces"></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 flex-nowrap">
|
|
@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>
|
|
}
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ng-template #queryAtom let-query="query">
|
|
<div class="input-group input-group-sm">
|
|
<ng-select
|
|
[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.value">{{operator.label}}</option>
|
|
</select>
|
|
@switch (query.operator) {
|
|
@case (CustomFieldQueryOperator.Exists) {
|
|
<select class="w-25 form-select rounded-end" [(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 rounded-end" type="text" [(ngModel)]="query.value" [disabled]="disabled">
|
|
}
|
|
}
|
|
<button class="btn btn-link btn-sm text-danger pe-0" type="button" (click)="removeComponent(query)" [disabled]="disabled">
|
|
<i-bs name="x-circle"></i-bs>
|
|
</button>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-template #queryExpression let-query="query">
|
|
<div class="d-flex flex-column border border-primary rounded px-2 pt-2 w-100">
|
|
<div class="btn-group btn-group-xs" 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 flex-nowrap">
|
|
@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>
|
|
}
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-link btn-sm text-danger pe-0" type="button" (click)="removeComponent(query)" [disabled]="disabled">
|
|
<i-bs name="x-circle"></i-bs>
|
|
</button>
|
|
</ng-template>
|