|
|
@ -15,41 +15,41 @@ |
|
|
limitations under the License. |
|
|
limitations under the License. |
|
|
|
|
|
|
|
|
--> |
|
|
--> |
|
|
<section fxLayout="column" [formGroup]="filterListFormGroup"> |
|
|
<section class="flex flex-col" [formGroup]="filterListFormGroup"> |
|
|
<mat-expansion-panel [expanded]="true"> |
|
|
<mat-expansion-panel [expanded]="true"> |
|
|
<mat-expansion-panel-header> |
|
|
<mat-expansion-panel-header> |
|
|
<mat-panel-title> |
|
|
<mat-panel-title> |
|
|
<div translate>filter.filters</div> |
|
|
<div translate>filter.filters</div> |
|
|
</mat-panel-title> |
|
|
</mat-panel-title> |
|
|
</mat-expansion-panel-header> |
|
|
</mat-expansion-panel-header> |
|
|
<div fxLayout="row"> |
|
|
<div class="flex flex-row"> |
|
|
<span fxFlex="8"></span> |
|
|
<span class="flex-full max-w-8%"></span> |
|
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" fxFlex="92"> |
|
|
<div class="flex-full max-w-92% flex flex-row justify-start items-center gap-2"> |
|
|
<div fxFlex fxLayout="row" fxLayoutGap="8px"> |
|
|
<div class="flex-1 flex flex-row gap-2"> |
|
|
<div fxFlex="30" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
|
<div class="flex-full max-w-30% flex flex-row justify-start items-center gap-2"> |
|
|
<label fxFlex translate class="tb-title no-padding">filter.operation.operation</label> |
|
|
<label translate class="tb-title no-padding flex-1">filter.operation.operation</label> |
|
|
<label *ngIf="valueType === valueTypeEnum.STRING" |
|
|
<label *ngIf="valueType === valueTypeEnum.STRING" |
|
|
translate class="tb-title no-padding" style="min-width: 70px;">filter.ignore-case</label> |
|
|
translate class="tb-title no-padding" style="min-width: 70px;">filter.ignore-case</label> |
|
|
</div> |
|
|
</div> |
|
|
<label fxFlex="70" translate class="tb-title no-padding">filter.value</label> |
|
|
<label translate class="tb-title no-padding flex-full max-w-70%">filter.value</label> |
|
|
</div> |
|
|
</div> |
|
|
<label *ngIf="displayUserParameters" |
|
|
<label *ngIf="displayUserParameters" |
|
|
translate class="tb-title no-padding" style="width: 60px;">filter.user-parameters</label> |
|
|
translate class="tb-title no-padding" style="width: 60px;">filter.user-parameters</label> |
|
|
<span [fxShow]="!disabled" style="min-width: 40px;"> </span> |
|
|
<span [class.!hidden]="disabled" style="min-width: 40px;"> </span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<mat-divider style="padding-bottom: 5px;"></mat-divider> |
|
|
<mat-divider style="padding-bottom: 5px;"></mat-divider> |
|
|
<div class="predicate-list"> |
|
|
<div class="predicate-list"> |
|
|
<div fxLayout="row" fxLayoutAlign="start" style="height: 76px;" |
|
|
<div class="flex flex-row justify-start items-stretch" style="height: 76px;" |
|
|
formArrayName="predicates" |
|
|
formArrayName="predicates" |
|
|
*ngFor="let predicateControl of predicatesFormArray.controls; let $index = index"> |
|
|
*ngFor="let predicateControl of predicatesFormArray.controls; let $index = index"> |
|
|
<div fxFlex="8" fxLayout="row" fxLayoutAlign="center" class="filters-operation"> |
|
|
<div class="filters-operation flex-full max-w-8% flex flex-row justify-center items-stretch"> |
|
|
<span *ngIf="$index > 0">{{ complexOperationTranslations.get(operation) | translate }}</span> |
|
|
<span *ngIf="$index > 0">{{ complexOperationTranslations.get(operation) | translate }}</span> |
|
|
</div> |
|
|
</div> |
|
|
<div fxLayout="column" fxFlex="92"> |
|
|
<div class="flex-full max-w-92% flex flex-col"> |
|
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" fxFlex> |
|
|
<div class="flex-1 flex flex-row justify-start items-center gap-2"> |
|
|
<tb-filter-predicate |
|
|
<tb-filter-predicate |
|
|
fxFlex |
|
|
class="flex-1" |
|
|
[valueType]="valueType" |
|
|
[valueType]="valueType" |
|
|
[displayUserParameters]="displayUserParameters" |
|
|
[displayUserParameters]="displayUserParameters" |
|
|
[allowUserDynamicSource]="allowUserDynamicSource" |
|
|
[allowUserDynamicSource]="allowUserDynamicSource" |
|
|
@ -58,7 +58,7 @@ |
|
|
[formControl]="predicateControl"> |
|
|
[formControl]="predicateControl"> |
|
|
</tb-filter-predicate> |
|
|
</tb-filter-predicate> |
|
|
<button mat-icon-button color="primary" |
|
|
<button mat-icon-button color="primary" |
|
|
[fxShow]="!disabled" |
|
|
[class.!hidden]="disabled" |
|
|
type="button" |
|
|
type="button" |
|
|
(click)="removePredicate($index)" |
|
|
(click)="removePredicate($index)" |
|
|
matTooltip="{{ 'filter.remove-filter' | translate }}" |
|
|
matTooltip="{{ 'filter.remove-filter' | translate }}" |
|
|
@ -68,13 +68,13 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<span [fxShow]="!predicatesFormArray.length" |
|
|
<span [class.!hidden]="!!predicatesFormArray.length" |
|
|
fxLayoutAlign="center center" [ngClass]="{'disabled': disabled}" |
|
|
[class.disabled]="disabled" |
|
|
class="no-data-found" translate>filter.no-filters</span> |
|
|
class="no-data-found flex justify-center items-center" translate>filter.no-filters</span> |
|
|
</div> |
|
|
</div> |
|
|
<div style="margin-top: 16px;" fxLayout="row" fxLayoutGap="8px"> |
|
|
<div style="margin-top: 16px;" class="flex flex-row gap-2"> |
|
|
<button mat-button mat-raised-button color="primary" |
|
|
<button mat-button mat-raised-button color="primary" |
|
|
[fxShow]="!disabled" |
|
|
[class.!hidden]="disabled" |
|
|
(click)="addPredicate(false)" |
|
|
(click)="addPredicate(false)" |
|
|
type="button" |
|
|
type="button" |
|
|
matTooltip="{{ 'filter.add-filter' | translate }}" |
|
|
matTooltip="{{ 'filter.add-filter' | translate }}" |
|
|
@ -82,7 +82,7 @@ |
|
|
{{ 'action.add' | translate }} |
|
|
{{ 'action.add' | translate }} |
|
|
</button> |
|
|
</button> |
|
|
<button mat-button mat-raised-button color="primary" |
|
|
<button mat-button mat-raised-button color="primary" |
|
|
[fxShow]="!disabled" |
|
|
[class.!hidden]="disabled" |
|
|
(click)="addPredicate(true)" |
|
|
(click)="addPredicate(true)" |
|
|
type="button" |
|
|
type="button" |
|
|
matTooltip="{{ 'filter.add-complex-filter' | translate }}" |
|
|
matTooltip="{{ 'filter.add-complex-filter' | translate }}" |
|
|
|
Igor Kulikov
2 years ago