Merge pull request #8767 from ArtemDzhereleiko/AD/bug-fix/table-row-style

Fixed widgets table styles for correct applying row style function

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html

@@ -70,7 +70,7 @@
                           [indeterminate]="alarmsDatasource.selection.hasValue() && !(alarmsDatasource.isAllSelected() | async)">
             </mat-checkbox>
           </mat-header-cell>
-          <mat-cell *matCellDef="let alarm">
+          <mat-cell *matCellDef="let alarm; let row = index" [style]="rowStyle(alarm, row)">
             <mat-checkbox (click)="$event.stopPropagation();"
                           (change)="$event ? alarmsDatasource.toggleSelection(alarm) : null"
                           [checked]="alarmsDatasource.isSelected(alarm)">
@@ -122,7 +122,7 @@
                                                                 maxWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
                                                                 width: (alarmsDatasource.countCellButtonAction * 48) + 'px' }">
           </mat-header-cell>
-          <mat-cell *matCellDef="let alarm" [ngStyle.gt-md]="{ minWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
+          <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">

ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html

@@ -52,7 +52,7 @@
                                                                 maxWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
                                                                 width: (entityDatasource.countCellButtonAction * 48) + 'px' }">
           </mat-header-cell>
-          <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
+          <mat-cell *matCellDef="let entity; let row = index" [style]="rowStyle(entity, row)" [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
                                                                 maxWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
                                                                 width: (entityDatasource.countCellButtonAction * 48) + 'px' }">
             <div [fxHide]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">

ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts

@@ -452,7 +452,7 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string {
     '.mat-mdc-table .mat-mdc-row .mat-mdc-cell.mat-mdc-table-sticky, .mat-mdc-table .mat-mdc-header-cell.mat-mdc-table-sticky {\n' +
     'background-color: ' + origBackgroundColor + ';\n' +
     '}\n' +
-    '.mat-mdc-table .mat-mdc-cell {\n' +
+    '.mat-mdc-table .mat-mdc-row {\n' +
     'color: ' + mdDark + ';\n' +
     'background-color: rgba(0, 0, 0, 0);\n' +
     '}\n' +

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html

@@ -64,7 +64,7 @@
                                                                       maxWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px',
                                                                       width: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px' }">
                 </mat-header-cell>
-                <mat-cell *matCellDef="let row" [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px',
+                <mat-cell *matCellDef="let entity; let row = index" [style]="rowStyle(source, entity, row)" [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px',
                                                                    maxWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px',
                                                                    width: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px' }">
                   <div [fxHide]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
@@ -74,22 +74,22 @@
                               mat-icon-button [disabled]="isLoading$ | async"
                               matTooltip="{{ actionDescriptor.displayName }}"
                               matTooltipPosition="above"
-                              (click)="onActionButtonClick($event, row, actionDescriptor)">
+                              (click)="onActionButtonClick($event, entity, actionDescriptor)">
                         <mat-icon>{{actionDescriptor.icon}}</mat-icon>
                       </button>
                     </ng-container>
                   </div>
-                  <div fxHide [fxShow.lt-lg]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" *ngIf="row.hasActions">
+                  <div fxHide [fxShow.lt-lg]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" *ngIf="entity.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 row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
+                      <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
                         <button mat-menu-item *ngIf="actionDescriptor.icon"
                                 [disabled]="isLoading$ | async"
-                                (click)="onActionButtonClick($event, row, actionDescriptor)">
+                                (click)="onActionButtonClick($event, entity, actionDescriptor)">
                           <mat-icon>{{actionDescriptor.icon}}</mat-icon>
                           <span>{{ actionDescriptor.displayName }}</span>
                         </button>

ui-ngx/src/styles.scss

@@ -692,6 +692,21 @@ mat-label {
     margin: 0;
   }
 
+  .tb-table-widget {
+    .mat-mdc-table {
+      .mat-mdc-cell {
+        background: inherit;
+        color: inherit;
+        font-size: inherit;
+        font-family: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+        letter-spacing: inherit;
+        text-transform: inherit;
+      }
+    }
+  }
+
   .mat-mdc-footer-row::after, .mat-mdc-header-row::after, .mat-mdc-row::after {
     content: none;
   }