UI: refactoring and disabled collapse on single cell action

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

@@ -125,7 +125,7 @@
           <mat-cell *matCellDef="let alarm" [ngStyle.gt-md]="{ minWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
                                                                maxWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
                                                                width: (alarmsDatasource.countCellButtonAction * 48) + 'px' }">
-            <div [fxHide]="hideActionCellButtons" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+            <div [fxHide]="collapseCellActions" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
               <ng-container *ngFor="let actionDescriptor of alarm.actionCellButtons; trackBy: trackByActionCellDescriptionId">
                 <span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span>
                 <button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
@@ -137,7 +137,7 @@
                 </button>
               </ng-container>
             </div>
-            <div fxHide [fxShow.lt-lg]="hideActionCellButtons" *ngIf="alarm.hasActions">
+            <div fxHide [fxShow.lt-lg]="collapseCellActions" *ngIf="alarm.hasActions">
               <button mat-icon-button
                       (click)="$event.stopPropagation(); ctx.detectChanges();"
                       [matMenuTriggerFor]="cellActionsMenu">

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

@@ -181,7 +181,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
   public displayPagination = true;
   public enableStickyHeader = true;
   public enableStickyAction = false;
-  public hideActionCellButtons = true;
+  public collapseCellActions = true;
   public pageSizeOptions;
   public pageLink: AlarmDataPageLink;
   public sortOrderProperty: string;
@@ -366,7 +366,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     this.displayPagination = isDefined(this.settings.displayPagination) ? this.settings.displayPagination : true;
     this.enableStickyHeader = isDefined(this.settings.enableStickyHeader) ? this.settings.enableStickyHeader : true;
     this.enableStickyAction = isDefined(this.settings.enableStickyAction) ? this.settings.enableStickyAction : false;
-    this.hideActionCellButtons = isDefined(this.settings.hideActionCellButtons) ? this.settings.hideActionCellButtons : true;
+    this.collapseCellActions = isDefined(this.settings.collapseCellActions) ? this.settings.collapseCellActions : true;
     this.columnDisplayAction.show = isDefined(this.settings.enableSelectColumnDisplay) ? this.settings.enableSelectColumnDisplay : true;
     let enableFilter;
     if (isDefined(this.settings.enableFilter)) {

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

@@ -55,7 +55,7 @@
           <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
                                                                 maxWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
                                                                 width: (entityDatasource.countCellButtonAction * 48) + 'px' }">
-            <div [fxHide]="hideActionCellButtons" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+            <div [fxHide]="collapseCellActions && entityDatasource.countCellButtonAction !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
               <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
                 <span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span>
                 <button mat-icon-button [disabled]="isLoading$ | async"
@@ -67,7 +67,7 @@
                 </button>
               </ng-container>
             </div>
-            <div fxHide [fxShow.lt-lg]="hideActionCellButtons" *ngIf="entity.hasActions">
+            <div fxHide [fxShow.lt-lg]="collapseCellActions && entityDatasource.countCellButtonAction !== 1" *ngIf="entity.hasActions">
               <button mat-icon-button
                       (click)="$event.stopPropagation(); ctx.detectChanges();"
                       [matMenuTriggerFor]="cellActionsMenu">

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

@@ -142,7 +142,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
   public displayPagination = true;
   public enableStickyHeader = true;
   public enableStickyAction = true;
-  public hideActionCellButtons = true;
+  public collapseCellActions = true;
   public pageSizeOptions;
   public pageLink: EntityDataPageLink;
   public sortOrderProperty: string;
@@ -292,7 +292,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     this.displayPagination = isDefined(this.settings.displayPagination) ? this.settings.displayPagination : true;
     this.enableStickyHeader = isDefined(this.settings.enableStickyHeader) ? this.settings.enableStickyHeader : true;
     this.enableStickyAction = isDefined(this.settings.enableStickyAction) ? this.settings.enableStickyAction : true;
-    this.hideActionCellButtons = isDefined(this.settings.hideActionCellButtons) ? this.settings.hideActionCellButtons : true;
+    this.collapseCellActions = isDefined(this.settings.collapseCellActions) ? this.settings.collapseCellActions : true;
     this.columnDisplayAction.show = isDefined(this.settings.enableSelectColumnDisplay) ? this.settings.enableSelectColumnDisplay : true;
 
     this.rowStylesInfo = getRowStyleInfo(this.settings, 'entity, ctx');

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

@@ -51,8 +51,8 @@
       <mat-slide-toggle class="mat-slide"  formControlName="enableStickyAction">
         {{ 'widgets.table.enable-sticky-action' | translate }}
       </mat-slide-toggle>
-      <mat-slide-toggle class="mat-slide"  formControlName="hideActionCellButtons">
+      <mat-slide-toggle class="mat-slide"  formControlName="collapseCellActions">
-        {{ 'widgets.table.hide-action-cell-buttons' | translate }}
+        {{ 'widgets.table.collapse-cell-actions-mobile' | translate }}
       </mat-slide-toggle>
     </div>
     <div class="tb-form-panel stroked">

ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.ts

@@ -47,7 +47,7 @@ export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent
       enableFilter: true,
       enableStickyHeader: true,
       enableStickyAction: true,
-      hideActionCellButtons: true,
+      collapseCellActions: true,
       reserveSpaceForHiddenAction: 'true',
       displayDetails: true,
       allowAcknowledgment: true,
@@ -70,7 +70,7 @@ export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent
       enableFilter: [settings.enableFilter, []],
       enableStickyHeader: [settings.enableStickyHeader, []],
       enableStickyAction: [settings.enableStickyAction, []],
-      hideActionCellButtons: [settings.hideActionCellButtons, []],
+      collapseCellActions: [settings.collapseCellActions, []],
       reserveSpaceForHiddenAction: [settings.reserveSpaceForHiddenAction, []],
       displayDetails: [settings.displayDetails, []],
       allowAcknowledgment: [settings.allowAcknowledgment, []],

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

@@ -66,8 +66,8 @@
       <mat-slide-toggle class="mat-slide"  formControlName="enableStickyAction">
         {{ 'widgets.table.enable-sticky-action' | translate }}
       </mat-slide-toggle>
-      <mat-slide-toggle class="mat-slide"  formControlName="hideActionCellButtons">
+      <mat-slide-toggle class="mat-slide"  formControlName="collapseCellActions">
-        {{ 'widgets.table.hide-action-cell-buttons' | translate }}
+        {{ 'widgets.table.collapse-cell-actions-mobile' | translate }}
       </mat-slide-toggle>
     </div>
     <mat-form-field fxFlex subscriptSizing="dynamic">

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.ts

@@ -45,7 +45,7 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen
       enableSelectColumnDisplay: true,
       enableStickyHeader: true,
       enableStickyAction: true,
-      hideActionCellButtons: true,
+      collapseCellActions: true,
       reserveSpaceForHiddenAction: 'true',
       displayEntityName: true,
       entityNameColumnTitle: '',
@@ -67,7 +67,7 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen
       enableSelectColumnDisplay: [settings.enableSelectColumnDisplay, []],
       enableStickyHeader: [settings.enableStickyHeader, []],
       enableStickyAction: [settings.enableStickyAction, []],
-      hideActionCellButtons: [settings.hideActionCellButtons, []],
+      collapseCellActions: [settings.collapseCellActions, []],
       reserveSpaceForHiddenAction: [settings.reserveSpaceForHiddenAction, []],
       displayEntityName: [settings.displayEntityName, []],
       entityNameColumnTitle: [settings.entityNameColumnTitle, []],

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

@@ -39,8 +39,8 @@
     <mat-slide-toggle class="mat-slide"  formControlName="enableStickyAction">
       {{ 'widgets.table.enable-sticky-action' | translate }}
     </mat-slide-toggle>
-    <mat-slide-toggle class="mat-slide"  formControlName="hideActionCellButtons">
+    <mat-slide-toggle class="mat-slide"  formControlName="collapseCellActions">
-      {{ 'widgets.table.hide-action-cell-buttons' | translate }}
+      {{ 'widgets.table.collapse-cell-actions-mobile' | translate }}
     </mat-slide-toggle>
     <mat-form-field fxFlex subscriptSizing="dynamic">
       <mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label>

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.ts

@@ -44,7 +44,7 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
       enableSelectColumnDisplay: true,
       enableStickyHeader: true,
       enableStickyAction: true,
-      hideActionCellButtons: true,
+      collapseCellActions: true,
       reserveSpaceForHiddenAction: 'true',
       showTimestamp: true,
       showMilliseconds: false,
@@ -64,7 +64,7 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
       enableSelectColumnDisplay: [settings.enableSelectColumnDisplay, []],
       enableStickyHeader: [settings.enableStickyHeader, []],
       enableStickyAction: [settings.enableStickyAction, []],
-      hideActionCellButtons: [settings.hideActionCellButtons, []],
+      collapseCellActions: [settings.collapseCellActions, []],
       reserveSpaceForHiddenAction: [settings.reserveSpaceForHiddenAction, []],
       showTimestamp: [settings.showTimestamp, []],
       showMilliseconds: [settings.showMilliseconds, []],

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

@@ -33,7 +33,7 @@ export interface TableWidgetSettings {
   enableSearch: boolean;
   enableSelectColumnDisplay: boolean;
   enableStickyAction: boolean;
-  hideActionCellButtons: boolean;
+  collapseCellActions: boolean;
   enableStickyHeader: boolean;
   displayPagination: boolean;
   defaultPageSize: number;

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

@@ -67,7 +67,7 @@
                 <mat-cell *matCellDef="let row" [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px',
                                                                    maxWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px',
                                                                    width: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px' }">
-                  <div [fxHide]="hideActionCellButtons" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+                  <div [fxHide]="collapseCellActions && source.timeseriesDatasource.countCellButtonAction !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
                     <ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
                       <span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span>
                       <button *ngIf="actionDescriptor.icon"
@@ -79,7 +79,7 @@
                       </button>
                     </ng-container>
                   </div>
-                  <div fxHide [fxShow.lt-lg]="hideActionCellButtons" *ngIf="row.hasActions">
+                  <div fxHide [fxShow.lt-lg]="collapseCellActions && source.timeseriesDatasource.countCellButtonAction !== 1" *ngIf="row.hasActions">
                     <button mat-icon-button
                             (click)="$event.stopPropagation(); ctx.detectChanges();"
                             [matMenuTriggerFor]="cellActionsMenu">

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

@@ -154,7 +154,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
   public displayPagination = true;
   public enableStickyHeader = true;
   public enableStickyAction = true;
-  public hideActionCellButtons = true;
+  public collapseCellActions = true;
   public pageSizeOptions;
   public textSearchMode = false;
   public hidePageSize = false;
@@ -307,7 +307,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
     this.displayPagination = isDefined(this.settings.displayPagination) ? this.settings.displayPagination : true;
     this.enableStickyHeader = isDefined(this.settings.enableStickyHeader) ? this.settings.enableStickyHeader : true;
     this.enableStickyAction = isDefined(this.settings.enableStickyAction) ? this.settings.enableStickyAction : true;
-    this.hideActionCellButtons = isDefined(this.settings.hideActionCellButtons) ? this.settings.hideActionCellButtons : true;
+    this.collapseCellActions = isDefined(this.settings.collapseCellActions) ? this.settings.collapseCellActions : true;
     this.hideEmptyLines = isDefined(this.settings.hideEmptyLines) ? this.settings.hideEmptyLines : false;
     this.useEntityLabel = isDefined(this.widgetConfig.settings.useEntityLabel) ? this.widgetConfig.settings.useEntityLabel : false;
     this.showTimestamp = this.settings.showTimestamp !== false;

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -5270,7 +5270,7 @@
             "rows": "Rows",
             "timeseries-column-error": "At least one timeseries column should be specified",
             "table-tabs": "Table tabs",
-            "hide-action-cell-buttons": "Hide action cell buttons"
+            "collapse-cell-actions-mobile": "Collapse cell actions in mobile view"
         },
         "value-source": {
             "value-source": "Value source",