You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

84 lines
2.2 KiB

<div class="py-3">
<div class="align-items-center flex-nowrap no-gutters row">
@if (isLoading) {
<div>
<ngx-skeleton-loader
animation="pulse"
class="mr-2"
[theme]="{
height: '2rem',
width: '2rem'
}"
/>
</div>
} @else {
<div
class="align-items-center d-flex icon-container mr-2 px-2"
[ngClass]="{
okay: rule?.value === true,
warn: rule?.value === false,
disabled: rule?.value === undefined
}"
>
@if (rule?.value === true) {
<ion-icon name="checkmark-circle-outline" />
} @else if (rule?.value === false) {
<ion-icon name="warning-outline" />
} @else {
<ion-icon name="close-outline" />
}
</div>
}
@if (isLoading) {
<div class="flex-grow-1">
<ngx-skeleton-loader
animation="pulse"
class="mt-1 mb-1"
[theme]="{
height: '1rem',
width: '10rem'
}"
/>
<ngx-skeleton-loader
animation="pulse"
[theme]="{
height: '1rem',
width: '15rem'
}"
/>
</div>
} @else {
<div class="flex-grow-1">
<div class="h6 my-1">{{ rule?.name }}</div>
<div class="evaluation">
@if (rule?.evaluation) {
{{ rule?.evaluation }}
} @else {
Rule is disabled
}
<div class="float-right">
<button
class="mx-1 no-min-width px-2"
mat-button
[matMenuTriggerFor]="accountMenu"
(click)="$event.stopPropagation()"
>
<ion-icon name="ellipsis-horizontal" />
</button>
<mat-menu #accountMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="onUpdateAccount(rule)">
<span class="align-items-center d-flex">
@if (rule?.evaluation) {
Disable
} @else {
Enable
}
</span>
</button>
</mat-menu>
</div>
</div>
</div>
}
</div>
</div>