|
|
|
@ -16,15 +16,15 @@ |
|
|
|
|
|
|
|
--> |
|
|
|
<div class="tb-table-widget tb-absolute-fill"> |
|
|
|
<div fxFlex fxLayout="column" class="tb-absolute-fill"> |
|
|
|
<mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode && alarmsDatasource.selection.isEmpty()"> |
|
|
|
<div class="tb-absolute-fill flex-1 flex flex-col"> |
|
|
|
<mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !alarmsDatasource.selection.isEmpty()"> |
|
|
|
<div class="mat-toolbar-tools"> |
|
|
|
<button mat-icon-button |
|
|
|
matTooltip="{{ 'action.search' | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon>search</mat-icon> |
|
|
|
</button> |
|
|
|
<mat-form-field fxFlex> |
|
|
|
<mat-form-field class="flex-1"> |
|
|
|
<mat-label> </mat-label> |
|
|
|
<input #searchInput matInput |
|
|
|
[formControl]="textSearch" |
|
|
|
@ -37,13 +37,13 @@ |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</mat-toolbar> |
|
|
|
<mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="!alarmsDatasource.selection.isEmpty()"> |
|
|
|
<mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="alarmsDatasource.selection.isEmpty()"> |
|
|
|
<div class="mat-toolbar-tools"> |
|
|
|
<span> |
|
|
|
{{ translate.get('alarm.selected-alarms', |
|
|
|
{count: alarmsDatasource.selection.selected.length}) | async }} |
|
|
|
</span> |
|
|
|
<span fxFlex></span> |
|
|
|
<span class="flex-1"></span> |
|
|
|
<button *ngIf="allowAcknowledgment" |
|
|
|
mat-icon-button [disabled]="isLoading$ | async" |
|
|
|
matTooltip="{{ 'alarm.acknowledge' | translate }}" |
|
|
|
@ -60,7 +60,7 @@ |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</mat-toolbar> |
|
|
|
<div fxFlex class="table-container"> |
|
|
|
<div class="table-container flex-1"> |
|
|
|
<table mat-table [dataSource]="alarmsDatasource" [trackBy]="trackByAlarmId" |
|
|
|
matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear> |
|
|
|
<ng-container matColumnDef="select" sticky> |
|
|
|
@ -78,16 +78,16 @@ |
|
|
|
</mat-cell> |
|
|
|
</ng-container> |
|
|
|
<ng-container [matColumnDef]="column.def" *ngFor="let column of columns; let $index = index; trackBy: trackByColumnDef;"> |
|
|
|
<mat-header-cell [ngStyle]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="isSorting(column)"> |
|
|
|
<mat-header-cell [style]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="isSorting(column)"> |
|
|
|
{{ column.title }} |
|
|
|
</mat-header-cell> |
|
|
|
<mat-cell *matCellDef="let alarm; let row = index" |
|
|
|
[ngStyle]="cellStyle(alarm, column, row)" |
|
|
|
[style]="cellStyle(alarm, column, row)" |
|
|
|
(click)="onCellClick($event, alarm, column, $index)" |
|
|
|
[class.tb-pointer]="columnHasCellClick($index)"> |
|
|
|
<span [innerHTML]="cellContent(alarm, column, row)"></span> |
|
|
|
<ng-container *ngIf="column.entityKey.key === 'assignee'"> |
|
|
|
<span class="assignee-cell" fxLayout="row" fxLayoutAlign="start center"> |
|
|
|
<span class="assignee-cell flex flex-row justify-start items-center"> |
|
|
|
<span *ngIf="alarm.assigneeId && checkAssigneeHasName(alarm.assignee); else unassigned" |
|
|
|
class="assigned-container"> |
|
|
|
<span class="user-avatar" [style.backgroundColor]="getAvatarBgColor(alarm.assignee)"> |
|
|
|
@ -120,60 +120,64 @@ |
|
|
|
</mat-cell> |
|
|
|
</ng-container> |
|
|
|
<ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction"> |
|
|
|
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px', |
|
|
|
maxWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px', |
|
|
|
width: (alarmsDatasource.countCellButtonAction * 48) + 'px' }"> |
|
|
|
<mat-header-cell *matHeaderCellDef> |
|
|
|
<ng-container *ngIf="alarmsDatasource.countCellButtonAction"> |
|
|
|
<div class="gt-md:!hidden" style="min-width: 48px;"> |
|
|
|
</div> |
|
|
|
<div class="lt-lg:!hidden" |
|
|
|
[style.min-width]="(alarmsDatasource.countCellButtonAction * 48) + 'px'"> |
|
|
|
</div> |
|
|
|
</ng-container> |
|
|
|
</mat-header-cell> |
|
|
|
<mat-cell *matCellDef="let alarm; let row = index" [style]="rowStyle(alarm, row)" [ngStyle.gt-md]="{ minWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px', |
|
|
|
maxWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px', |
|
|
|
width: (alarmsDatasource.countCellButtonAction * 48) + 'px' }"> |
|
|
|
<div [fxHide]="showCellActionsMenu" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> |
|
|
|
<ng-container *ngFor="let actionDescriptor of alarm.actionCellButtons; trackBy: trackByActionCellDescriptionId"> |
|
|
|
<span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span> |
|
|
|
<button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)" |
|
|
|
*ngIf="actionDescriptor.icon" |
|
|
|
matTooltip="{{ actionDescriptor.displayName }}" |
|
|
|
matTooltipPosition="above" |
|
|
|
(click)="onActionButtonClick($event, alarm, actionDescriptor)"> |
|
|
|
<mat-icon>{{actionDescriptor.icon}}</mat-icon> |
|
|
|
</button> |
|
|
|
</ng-container> |
|
|
|
</div> |
|
|
|
<div fxHide [fxShow.lt-lg]="showCellActionsMenu" *ngIf="alarm.hasActions"> |
|
|
|
<button mat-icon-button |
|
|
|
(click)="$event.stopPropagation(); ctx.detectChanges();" |
|
|
|
[matMenuTriggerFor]="cellActionsMenu"> |
|
|
|
<mat-icon class="material-icons">more_vert</mat-icon> |
|
|
|
</button> |
|
|
|
<mat-menu #cellActionsMenu="matMenu" xPosition="before"> |
|
|
|
<mat-cell *matCellDef="let alarm; let row = index" [style]="rowStyle(alarm, row)"> |
|
|
|
<ng-container *ngIf="alarmsDatasource.countCellButtonAction"> |
|
|
|
<div [class.lt-lg:!hidden]="showCellActionsMenu && alarmsDatasource.countCellButtonAction !== 1" class="flex flex-row justify-end items-stretch" |
|
|
|
[style.min-width]="(alarmsDatasource.countCellButtonAction * 48) + 'px'"> |
|
|
|
<ng-container *ngFor="let actionDescriptor of alarm.actionCellButtons; trackBy: trackByActionCellDescriptionId"> |
|
|
|
<button mat-menu-item *ngIf="actionDescriptor.icon" |
|
|
|
[disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)" |
|
|
|
<span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span> |
|
|
|
<button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)" |
|
|
|
*ngIf="actionDescriptor.icon" |
|
|
|
matTooltip="{{ actionDescriptor.displayName }}" |
|
|
|
matTooltipPosition="above" |
|
|
|
(click)="onActionButtonClick($event, alarm, actionDescriptor)"> |
|
|
|
<tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon> |
|
|
|
<span>{{ actionDescriptor.displayName }}</span> |
|
|
|
<mat-icon>{{actionDescriptor.icon}}</mat-icon> |
|
|
|
</button> |
|
|
|
</ng-container> |
|
|
|
</mat-menu> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div [class.!hidden]="!showCellActionsMenu || alarmsDatasource.countCellButtonAction === 1" class="gt-md:!hidden" *ngIf="alarm.hasActions"> |
|
|
|
<button mat-icon-button |
|
|
|
(click)="$event.stopPropagation(); ctx.detectChanges();" |
|
|
|
[matMenuTriggerFor]="cellActionsMenu"> |
|
|
|
<mat-icon class="material-icons">more_vert</mat-icon> |
|
|
|
</button> |
|
|
|
<mat-menu #cellActionsMenu="matMenu" xPosition="before"> |
|
|
|
<ng-container *ngFor="let actionDescriptor of alarm.actionCellButtons; trackBy: trackByActionCellDescriptionId"> |
|
|
|
<button mat-menu-item *ngIf="actionDescriptor.icon" |
|
|
|
[disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)" |
|
|
|
(click)="onActionButtonClick($event, alarm, actionDescriptor)"> |
|
|
|
<tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon> |
|
|
|
<span>{{ actionDescriptor.displayName }}</span> |
|
|
|
</button> |
|
|
|
</ng-container> |
|
|
|
</mat-menu> |
|
|
|
</div> |
|
|
|
</ng-container> |
|
|
|
</mat-cell> |
|
|
|
</ng-container> |
|
|
|
<mat-header-row [ngClass]="{'mat-row-select': enableSelection}" *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row> |
|
|
|
<mat-row [ngClass]="{'mat-row-select': enableSelection, |
|
|
|
'mat-selected': alarmsDatasource.isSelected(alarm), |
|
|
|
'tb-current-entity': alarmsDatasource.isCurrentAlarm(alarm), |
|
|
|
'invisible': alarmsDatasource.dataLoading, |
|
|
|
'tb-pointer': hasRowAction}" |
|
|
|
<mat-header-row [class.mat-row-select]="enableSelection" *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row> |
|
|
|
<mat-row [class.mat-row-select]="enableSelection" |
|
|
|
[class.mat-selected]="alarmsDatasource.isSelected(alarm)" |
|
|
|
[class.tb-current-entity]="alarmsDatasource.isCurrentAlarm(alarm)" |
|
|
|
[class.invisible]="alarmsDatasource.dataLoading" |
|
|
|
[class.tb-pointer]="hasRowAction" |
|
|
|
*matRowDef="let alarm; columns: displayedColumns; let row = index" |
|
|
|
[ngStyle]="rowStyle(alarm, row)" |
|
|
|
[style]="rowStyle(alarm, row)" |
|
|
|
(click)="onRowClick($event, alarm)"></mat-row> |
|
|
|
</table> |
|
|
|
<span [fxShow]="(alarmsDatasource.isEmpty() | async) && !alarmsDatasource.dataLoading" |
|
|
|
fxLayoutAlign="center center" |
|
|
|
class="no-data-found">{{ noDataDisplayMessageText }}</span> |
|
|
|
<span [fxShow]="alarmsDatasource.dataLoading" |
|
|
|
fxLayoutAlign="center center" |
|
|
|
class="no-data-found">{{ 'common.loading' | translate }}</span> |
|
|
|
<span [class.!hidden]="(alarmsDatasource.isEmpty() | async) === false || alarmsDatasource.dataLoading" |
|
|
|
class="no-data-found flex justify-center items-center">{{ noDataDisplayMessageText }}</span> |
|
|
|
<span [class.!hidden]="!alarmsDatasource.dataLoading" |
|
|
|
class="no-data-found flex justify-center items-center" >{{ 'common.loading' | translate }}</span> |
|
|
|
</div> |
|
|
|
<mat-divider *ngIf="displayPagination"></mat-divider> |
|
|
|
<mat-paginator *ngIf="displayPagination" |
|
|
|
|
Igor Kulikov
2 years ago