Merge pull request #8894 from ArtemDzhereleiko/AD/imp/show-hide-action-on-mobile

Add option collapse cell actions in mobile view for entities/timeseries/alarm table
3 years ago · 163f3d67c1
15 changed files with 38 additions and 13 deletions
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
@ -218,7 +218,7 @@
              <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 48) + 'px',
                                                                    maxWidth: (cellActionDescriptors.length * 48) + 'px',
                                                                    width: (cellActionDescriptors.length * 48) + 'px' }">
-                <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+                <div [fxHide]="cellActionDescriptors.length !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
                  <button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)"
                          *ngFor="let actionDescriptor of cellActionDescriptors"
                          matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
@ -229,7 +229,7 @@
                      {{actionDescriptor.icon}}</mat-icon>
                  </button>
                </div>
-                <div fxHide fxShow.lt-lg *ngIf="cellActionDescriptors.length">
+                <div fxHide [fxShow.lt-lg]="cellActionDescriptors.length !== 1" *ngIf="cellActionDescriptors.length">
                  <button mat-icon-button
                          (click)="$event.stopPropagation()"
                          [matMenuTriggerFor]="cellActionsMenu">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
+++ b/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 fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+            <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: 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 *ngIf="alarm.hasActions">
+            <div fxHide [fxShow.lt-lg]="showCellActionsMenu" *ngIf="alarm.hasActions">
              <button mat-icon-button
                      (click)="$event.stopPropagation(); ctx.detectChanges();"
                      [matMenuTriggerFor]="cellActionsMenu">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
@ -160,6 +160,7 @@ interface AlarmWidgetActionDescriptor extends TableCellButtonActionDescriptor {
 })
 export class AlarmsTableWidgetComponent extends PageComponent implements OnInit, OnDestroy, AfterViewInit {

+
  @Input()
  ctx: WidgetContext;

@ -171,6 +172,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
  public displayPagination = true;
  public enableStickyHeader = true;
  public enableStickyAction = false;
+  public showCellActionsMenu = true;
  public pageSizeOptions;
  public pageLink: AlarmDataPageLink;
  public sortOrderProperty: string;
@ -355,6 +357,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.showCellActionsMenu = isDefined(this.settings.showCellActionsMenu) ? this.settings.showCellActionsMenu : true;
    this.columnDisplayAction.show = isDefined(this.settings.enableSelectColumnDisplay) ? this.settings.enableSelectColumnDisplay : true;
    let enableFilter;
    if (isDefined(this.settings.enableFilter)) {
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html
+++ b/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 fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+            <div [fxHide]="showCellActionsMenu && 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 *ngIf="entity.hasActions">
+            <div fxHide [fxShow.lt-lg]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" *ngIf="entity.hasActions">
              <button mat-icon-button
                      (click)="$event.stopPropagation(); ctx.detectChanges();"
                      [matMenuTriggerFor]="cellActionsMenu">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
@ -22,6 +22,7 @@ import {
  Injector,
  Input,
  NgZone,
+  OnDestroy,
  OnInit,
  StaticProvider,
  ViewChild,
@ -78,8 +79,8 @@ import {
  getColumnDefaultVisibility,
  getColumnSelectionAvailability,
  getColumnWidth,
-  getHeaderTitle,
  getEntityValue,
+  getHeaderTitle,
  getRowStyleInfo,
  getTableCellButtonActions,
  noDataMessage,
@ -129,7 +130,7 @@ interface EntitiesTableWidgetSettings extends TableWidgetSettings {
  templateUrl: './entities-table-widget.component.html',
  styleUrls: ['./entities-table-widget.component.scss', './table-widget.scss']
 })
-export class EntitiesTableWidgetComponent extends PageComponent implements OnInit, AfterViewInit {
+export class EntitiesTableWidgetComponent extends PageComponent implements OnInit, AfterViewInit, OnDestroy {

  @Input()
  ctx: WidgetContext;
@ -141,6 +142,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
  public displayPagination = true;
  public enableStickyHeader = true;
  public enableStickyAction = true;
+  public showCellActionsMenu = true;
  public pageSizeOptions;
  public pageLink: EntityDataPageLink;
  public sortOrderProperty: string;
@ -290,6 +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.showCellActionsMenu = isDefined(this.settings.showCellActionsMenu) ? this.settings.showCellActionsMenu : true;
    this.columnDisplayAction.show = isDefined(this.settings.enableSelectColumnDisplay) ? this.settings.enableSelectColumnDisplay : true;

    this.rowStylesInfo = getRowStyleInfo(this.settings, 'entity, ctx');
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
@ -47,10 +47,13 @@
    <mat-slide-toggle class="mat-slide"  formControlName="enableSelection">
      {{ 'widgets.table.enable-alarms-selection' | translate }}
    </mat-slide-toggle>
-    <div class="tb-form-row">
+    <div class="tb-form-panel stroked">
      <mat-slide-toggle class="mat-slide"  formControlName="enableStickyAction">
        {{ 'widgets.table.enable-sticky-action' | translate }}
      </mat-slide-toggle>
+      <mat-slide-toggle class="mat-slide"  formControlName="showCellActionsMenu">
+        {{ 'widgets.table.show-cell-actions-menu-mobile' | translate }}
+      </mat-slide-toggle>
    </div>
    <div class="tb-form-panel stroked">
      <div class="tb-form-panel-title" translate>widgets.table.table-buttons</div>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.ts
@ -47,6 +47,7 @@ export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent
      enableFilter: true,
      enableStickyHeader: true,
      enableStickyAction: true,
+      showCellActionsMenu: true,
      reserveSpaceForHiddenAction: 'true',
      displayDetails: true,
      allowAcknowledgment: true,
@ -69,6 +70,7 @@ export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent
      enableFilter: [settings.enableFilter, []],
      enableStickyHeader: [settings.enableStickyHeader, []],
      enableStickyAction: [settings.enableStickyAction, []],
+      showCellActionsMenu: [settings.showCellActionsMenu, []],
      reserveSpaceForHiddenAction: [settings.reserveSpaceForHiddenAction, []],
      displayDetails: [settings.displayDetails, []],
      allowAcknowledgment: [settings.allowAcknowledgment, []],
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.html
@ -62,10 +62,13 @@
        {{ 'widgets.table.display-entity-type' | translate }}
      </mat-slide-toggle>
    </div>
-    <div class="tb-form-row">
+    <div class="tb-form-panel stroked">
      <mat-slide-toggle class="mat-slide"  formControlName="enableStickyAction">
        {{ 'widgets.table.enable-sticky-action' | translate }}
      </mat-slide-toggle>
+      <mat-slide-toggle class="mat-slide"  formControlName="showCellActionsMenu">
+        {{ 'widgets.table.show-cell-actions-menu-mobile' | translate }}
+      </mat-slide-toggle>
    </div>
    <mat-form-field fxFlex subscriptSizing="dynamic">
      <mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.ts
@ -45,6 +45,7 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen
      enableSelectColumnDisplay: true,
      enableStickyHeader: true,
      enableStickyAction: true,
+      showCellActionsMenu: true,
      reserveSpaceForHiddenAction: 'true',
      displayEntityName: true,
      entityNameColumnTitle: '',
@ -66,6 +67,7 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen
      enableSelectColumnDisplay: [settings.enableSelectColumnDisplay, []],
      enableStickyHeader: [settings.enableStickyHeader, []],
      enableStickyAction: [settings.enableStickyAction, []],
+      showCellActionsMenu: [settings.showCellActionsMenu, []],
      reserveSpaceForHiddenAction: [settings.reserveSpaceForHiddenAction, []],
      displayEntityName: [settings.displayEntityName, []],
      entityNameColumnTitle: [settings.entityNameColumnTitle, []],
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
@ -39,6 +39,9 @@
    <mat-slide-toggle class="mat-slide"  formControlName="enableStickyAction">
      {{ 'widgets.table.enable-sticky-action' | translate }}
    </mat-slide-toggle>
+    <mat-slide-toggle class="mat-slide"  formControlName="showCellActionsMenu">
+      {{ 'widgets.table.show-cell-actions-menu-mobile' | translate }}
+    </mat-slide-toggle>
    <mat-form-field fxFlex subscriptSizing="dynamic">
      <mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label>
      <mat-select formControlName="reserveSpaceForHiddenAction">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.ts
@ -44,6 +44,7 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
      enableSelectColumnDisplay: true,
      enableStickyHeader: true,
      enableStickyAction: true,
+      showCellActionsMenu: true,
      reserveSpaceForHiddenAction: 'true',
      showTimestamp: true,
      showMilliseconds: false,
@ -63,6 +64,7 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
      enableSelectColumnDisplay: [settings.enableSelectColumnDisplay, []],
      enableStickyHeader: [settings.enableStickyHeader, []],
      enableStickyAction: [settings.enableStickyAction, []],
+      showCellActionsMenu: [settings.showCellActionsMenu, []],
      reserveSpaceForHiddenAction: [settings.reserveSpaceForHiddenAction, []],
      showTimestamp: [settings.showTimestamp, []],
      showMilliseconds: [settings.showMilliseconds, []],
--- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
@ -33,6 +33,7 @@ export interface TableWidgetSettings {
  enableSearch: boolean;
  enableSelectColumnDisplay: boolean;
  enableStickyAction: boolean;
+  showCellActionsMenu: boolean;
  enableStickyHeader: boolean;
  displayPagination: boolean;
  defaultPageSize: number;
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
+++ b/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 fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+                  <div [fxHide]="showCellActionsMenu && 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 *ngIf="row.hasActions">
+                  <div fxHide [fxShow.lt-lg]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" *ngIf="row.hasActions">
                    <button mat-icon-button
                            (click)="$event.stopPropagation(); ctx.detectChanges();"
                            [matMenuTriggerFor]="cellActionsMenu">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
@ -154,6 +154,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
  public displayPagination = true;
  public enableStickyHeader = true;
  public enableStickyAction = true;
+  public showCellActionsMenu = true;
  public pageSizeOptions;
  public textSearchMode = false;
  public hidePageSize = false;
@ -306,6 +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.showCellActionsMenu = isDefined(this.settings.showCellActionsMenu) ? this.settings.showCellActionsMenu : 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;
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@ -5280,7 +5280,8 @@
            "pagination": "Pagination",
            "rows": "Rows",
            "timeseries-column-error": "At least one timeseries column should be specified",
-            "table-tabs": "Table tabs"
+            "table-tabs": "Table tabs",
+            "show-cell-actions-menu-mobile": "Show cell actions dropdown menu in mobile mode"
        },
        "value-source": {
            "value-source": "Value source",