UI: On tables hide page size option on mobile view

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html

@@ -196,6 +196,7 @@
                    [pageIndex]="pageLink.page"
                    [pageSize]="pageLink.pageSize"
                    [pageSizeOptions]="[10, 20, 30]"
+                   [hidePageSize]="hidePageSize"
                    showFirstLastButtons></mat-paginator>
     <ngx-hm-carousel fxFlex *ngIf="mode === 'widget' && widgetsList.length > 0"
                      #carousel

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts

@@ -38,7 +38,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { MatDialog } from '@angular/material/dialog';
 import { DialogService } from '@core/services/dialog.service';
 import { Direction, SortOrder } from '@shared/models/page/sort-order';
-import { fromEvent, merge } from 'rxjs';
+import { fromEvent, merge, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 import { EntityId } from '@shared/models/id/entity-id';
 import {
@@ -84,6 +84,8 @@ import {
 } from '@home/components/attribute/add-widget-to-dashboard-dialog.component';
 import { deepClone } from '@core/utils';
 import { Filters } from '@shared/models/query/query.models';
+import { MediaBreakpoints } from '@shared/models/constants';
+import { BreakpointObserver } from '@angular/cdk/layout';
 
 
 @Component({
@@ -171,6 +173,9 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
+  private breakpointObserverSubscription$: Subscription;
+  public hidePageSize = true;
+
   constructor(protected store: Store<AppState>,
               private attributeService: AttributeService,
               private telemetryWsService: TelemetryWebsocketService,
@@ -184,7 +189,8 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
               private dashboardUtils: DashboardUtilsService,
               private widgetService: WidgetService,
               private zone: NgZone,
-              private cd: ChangeDetectorRef) {
+              private cd: ChangeDetectorRef,
+              private breakpointObserver: BreakpointObserver) {
     super(store);
     this.dirtyValue = !this.activeValue;
     const sortOrder: SortOrder = { property: 'key', direction: Direction.ASC };
@@ -193,6 +199,19 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
   }
 
   ngOnInit() {
+    this.breakpointObserverSubscription$ = this.breakpointObserver
+      .observe(MediaBreakpoints['gt-xs']).subscribe(
+        () => {
+          this.hidePageSize = !this.breakpointObserver.isMatched(MediaBreakpoints['gt-xs']);
+          this.cd.detectChanges();
+        }
+      );
+  }
+
+  ngOnDestroy() {
+    if (this.breakpointObserverSubscription$) {
+      this.breakpointObserverSubscription$.unsubscribe();
+    }
   }
 
   attributeScopeChanged(attributeScope: TelemetryType) {

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

@@ -266,6 +266,7 @@
                        [pageIndex]="pageLink.page"
                        [pageSize]="pageLink.pageSize"
                        [pageSizeOptions]="pageSizeOptions"
+                       [hidePageSize]="hidePageSize"
                        showFirstLastButtons></mat-paginator>
       </div>
     </div>

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

@@ -64,6 +64,8 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
 import { isDefined, isUndefined } from '@core/utils';
 import { HasUUID } from '@shared/models/id/has-uuid';
+import { MediaBreakpoints } from '@shared/models/constants';
+import { BreakpointObserver } from '@angular/cdk/layout';
 
 @Component({
   selector: 'tb-entities-table',
@@ -120,6 +122,9 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
   private updateDataSubscription: Subscription;
   private viewInited = false;
 
+  private breakpointObserverSubscription$: Subscription;
+  public hidePageSize = true;
+
   constructor(protected store: Store<AppState>,
               public route: ActivatedRoute,
               public translate: TranslateService,
@@ -127,7 +132,8 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
               private dialogService: DialogService,
               private domSanitizer: DomSanitizer,
               private cd: ChangeDetectorRef,
-              private componentFactoryResolver: ComponentFactoryResolver) {
+              private componentFactoryResolver: ComponentFactoryResolver,
+              private breakpointObserver: BreakpointObserver) {
     super(store);
   }
 
@@ -137,6 +143,19 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
     } else {
       this.init(this.route.snapshot.data.entitiesTableConfig);
     }
+    this.breakpointObserverSubscription$ = this.breakpointObserver
+      .observe(MediaBreakpoints['gt-xs']).subscribe(
+        () => {
+          this.hidePageSize = !this.breakpointObserver.isMatched(MediaBreakpoints['gt-xs']);
+          this.cd.detectChanges();
+        }
+      );
+  }
+
+  ngOnDestroy() {
+    if (this.breakpointObserverSubscription$) {
+      this.breakpointObserverSubscription$.unsubscribe();
+    }
   }
 
   ngOnChanges(changes: SimpleChanges): void {

ui-ngx/src/app/modules/home/components/relation/relation-table.component.html

@@ -165,6 +165,7 @@
     <mat-paginator [length]="dataSource.total() | async"
                    [pageIndex]="pageLink.page"
                    [pageSize]="pageLink.pageSize"
-                   [pageSizeOptions]="[10, 20, 30]"></mat-paginator>
+                   [pageSizeOptions]="[10, 20, 30]"
+                   [hidePageSize]="hidePageSize"></mat-paginator>
   </div>
 </div>

ui-ngx/src/app/modules/home/components/relation/relation-table.component.ts

@@ -14,7 +14,16 @@
 /// limitations under the License.
 ///
 
-import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  ViewChild
+} from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { PageLink } from '@shared/models/page/page-link';
 import { MatPaginator } from '@angular/material/paginator';
@@ -26,7 +35,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { DialogService } from '@core/services/dialog.service';
 import { EntityRelationService } from '@core/http/entity-relation.service';
 import { Direction, SortOrder } from '@shared/models/page/sort-order';
-import { forkJoin, fromEvent, merge, Observable } from 'rxjs';
+import { forkJoin, fromEvent, merge, Observable, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 import {
   EntityRelation,
@@ -38,6 +47,8 @@ import {
 import { EntityId } from '@shared/models/id/entity-id';
 import { RelationsDatasource } from '../../models/datasource/relation-datasource';
 import { RelationDialogComponent, RelationDialogData } from '@home/components/relation/relation-dialog.component';
+import { MediaBreakpoints } from '@shared/models/constants';
+import { BreakpointObserver } from '@angular/cdk/layout';
 
 @Component({
   selector: 'tb-relation-table',
@@ -65,6 +76,9 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
 
   viewsInited = false;
 
+  private breakpointObserverSubscription$: Subscription;
+  public hidePageSize = true;
+
   @Input()
   set active(active: boolean) {
     if (this.activeValue !== active) {
@@ -100,7 +114,9 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
               private entityRelationService: EntityRelationService,
               public translate: TranslateService,
               public dialog: MatDialog,
-              private dialogService: DialogService) {
+              private dialogService: DialogService,
+              private cd: ChangeDetectorRef,
+              private breakpointObserver: BreakpointObserver) {
     super(store);
     this.dirtyValue = !this.activeValue;
     const sortOrder: SortOrder = { property: 'type', direction: Direction.ASC };
@@ -111,6 +127,19 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
   }
 
   ngOnInit() {
+    this.breakpointObserverSubscription$ = this.breakpointObserver
+      .observe(MediaBreakpoints['gt-xs']).subscribe(
+        () => {
+          this.hidePageSize = !this.breakpointObserver.isMatched(MediaBreakpoints['gt-xs']);
+          this.cd.detectChanges();
+        }
+      );
+  }
+
+  ngOnDestroy() {
+    if (this.breakpointObserverSubscription$) {
+      this.breakpointObserverSubscription$.unsubscribe();
+    }
   }
 
   updateColumns() {

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-table-widget tb-absolute-fill">
+<div #alarmWidgetContainer class="tb-table-widget tb-absolute-fill">
   <div fxFlex fxLayout="column" class="tb-absolute-fill">
     <mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode && alarmsDatasource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
@@ -147,6 +147,7 @@
                    [pageIndex]="pageLink.page"
                    [pageSize]="pageLink.pageSize"
                    [pageSizeOptions]="pageSizeOptions"
+                   [hidePageSize]="hidePageSize"
                    showFirstLastButtons></mat-paginator>
   </div>
 </div>

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

@@ -123,6 +123,7 @@ import {
 } from '@home/components/widget/lib/alarm-filter-panel.component';
 import { entityFields } from '@shared/models/entity.models';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 interface AlarmsTableWidgetSettings extends TableWidgetSettings {
   alarmsTitle: string;
@@ -152,6 +153,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
   @Input()
   ctx: WidgetContext;
 
+  @ViewChild('alarmWidgetContainer', {static: true}) alarmWidgetContainerRef: ElementRef;
   @ViewChild('searchInput') searchInputField: ElementRef;
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -168,6 +170,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
   public displayedColumns: string[] = [];
   public alarmsDatasource: AlarmsDatasource;
   public noDataDisplayMessageText: string;
+  public hidePageSize = false;
   private setCellButtonAction: boolean;
 
   private cellContentCache: Array<any> = [];
@@ -177,6 +180,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
   private settings: AlarmsTableWidgetSettings;
   private widgetConfig: WidgetConfig;
   private subscription: IWidgetSubscription;
+  private widgetResize$: ResizeObserver;
 
   private alarmsTitlePattern: string;
 
@@ -257,6 +261,14 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
       this.widgetTimewindowChanged$ = this.ctx.defaultSubscription.widgetTimewindowChanged$.subscribe(
         () => this.pageLink.page = 0
       );
+      this.widgetResize$ = new ResizeObserver(() => {
+        const showHidePageSize = this.ctx.$container[0].offsetWidth < 450;
+        if (showHidePageSize !== this.hidePageSize) {
+          this.hidePageSize = showHidePageSize;
+          this.ctx.detectChanges();
+        }
+      });
+      this.widgetResize$.observe(this.alarmWidgetContainerRef.nativeElement);
     }
   }
 
@@ -265,6 +277,9 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
       this.widgetTimewindowChanged$.unsubscribe();
       this.widgetTimewindowChanged$ = null;
     }
+    if (this.widgetResize$) {
+      this.widgetResize$.disconnect();
+    }
   }
 
   ngAfterViewInit(): void {

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-table-widget tb-absolute-fill">
+<div #entitiesWidgetContainer class="tb-table-widget tb-absolute-fill">
   <div fxFlex fxLayout="column" class="tb-absolute-fill">
     <mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode">
       <div class="mat-toolbar-tools">
@@ -106,6 +106,7 @@
                    [pageIndex]="pageLink.page"
                    [pageSize]="pageLink.pageSize"
                    [pageSizeOptions]="pageSizeOptions"
+                   [hidePageSize]="hidePageSize"
                    showFirstLastButtons></mat-paginator>
   </div>
 </div>

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

@@ -107,6 +107,7 @@ import { sortItems } from '@shared/models/page/page-link';
 import { entityFields } from '@shared/models/entity.models';
 import { DatePipe } from '@angular/common';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 interface EntitiesTableWidgetSettings extends TableWidgetSettings {
   entitiesTitle: string;
@@ -129,6 +130,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
   @Input()
   ctx: WidgetContext;
 
+  @ViewChild('entitiesWidgetContainer', {static: true}) entitiesWidgetContainerRef: ElementRef;
   @ViewChild('searchInput') searchInputField: ElementRef;
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -144,6 +146,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
   public displayedColumns: string[] = [];
   public entityDatasource: EntityDatasource;
   public noDataDisplayMessageText: string;
+  public hidePageSize = false;
   private setCellButtonAction: boolean;
 
   private cellContentCache: Array<any> = [];
@@ -153,6 +156,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
   private settings: EntitiesTableWidgetSettings;
   private widgetConfig: WidgetConfig;
   private subscription: IWidgetSubscription;
+  private widgetResize$: ResizeObserver;
 
   private entitiesTitlePattern: string;
 
@@ -211,6 +215,22 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     this.initializeConfig();
     this.updateDatasources();
     this.ctx.updateWidgetParams();
+    if (this.displayPagination) {
+      this.widgetResize$ = new ResizeObserver(() => {
+        const showHidePageSize = this.ctx.$container[0].offsetWidth < 450;
+        if (showHidePageSize !== this.hidePageSize) {
+          this.hidePageSize = showHidePageSize;
+          this.ctx.detectChanges();
+        }
+      });
+      this.widgetResize$.observe(this.entitiesWidgetContainerRef.nativeElement);
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.widgetResize$) {
+      this.widgetResize$.disconnect();
+    }
   }
 
   ngAfterViewInit(): void {

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-table-widget tb-absolute-fill">
+<div #timeseriesWidgetContainer class="tb-table-widget tb-absolute-fill">
   <div fxFlex fxLayout="column" class="tb-absolute-fill">
     <mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode">
       <div class="mat-toolbar-tools">
@@ -112,6 +112,7 @@
                          [pageIndex]="source.pageLink.page"
                          [pageSize]="source.pageLink.pageSize"
                          [pageSizeOptions]="pageSizeOptions"
+                         [hidePageSize]="hidePageSize"
                          showFirstLastButtons></mat-paginator>
         </ng-template>
       </mat-tab>

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

@@ -71,6 +71,7 @@ import { SubscriptionEntityInfo } from '@core/api/widget-api.models';
 import { DatePipe } from '@angular/common';
 import { parseData } from '@home/components/widget/lib/maps/common-maps-utils';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 export interface TimeseriesTableWidgetSettings extends TableWidgetSettings {
   showTimestamp: boolean;
@@ -115,6 +116,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
   @Input()
   ctx: WidgetContext;
 
+  @ViewChild('timeseriesWidgetContainer', {static: true}) timeseriesWidgetContainerRef: ElementRef;
   @ViewChild('searchInput') searchInputField: ElementRef;
   @ViewChildren(MatPaginator) paginators: QueryList<MatPaginator>;
   @ViewChildren(MatSort) sorts: QueryList<MatSort>;
@@ -128,6 +130,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
   public sources: TimeseriesTableSource[];
   public sourceIndex: number;
   public noDataDisplayMessageText: string;
+  public hidePageSize = false;
   private setCellButtonAction: boolean;
 
   private cellContentCache: Array<any> = [];
@@ -150,6 +153,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
 
   private subscriptions: Subscription[] = [];
   private widgetTimewindowChanged$: Subscription;
+  private widgetResize$: ResizeObserver;
 
   private searchAction: WidgetAction = {
     name: 'action.search',
@@ -190,6 +194,14 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
           });
         }
       );
+      this.widgetResize$ = new ResizeObserver(() => {
+        const showHidePageSize = this.ctx.$container[0].offsetWidth < 450;
+        if (showHidePageSize !== this.hidePageSize) {
+          this.hidePageSize = showHidePageSize;
+          this.ctx.detectChanges();
+        }
+      });
+      this.widgetResize$.observe(this.timeseriesWidgetContainerRef.nativeElement);
     }
   }
 
@@ -198,6 +210,9 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
       this.widgetTimewindowChanged$.unsubscribe();
       this.widgetTimewindowChanged$ = null;
     }
+    if (this.widgetResize$) {
+      this.widgetResize$.disconnect();
+    }
   }
 
   ngAfterViewInit(): void {