dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5655 from ArtemDzhereleiko/imp/tables/hide-page-size-option

Browse Source 
[3.3.3] UI: On tables hide page size option on mobile view
This commit is contained in:
Igor Kulikov 2022-01-12 16:31:32 +02:00 committed by GitHub
commit 6a1c29c67e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 183 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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

1
ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
View File

@ -18,6 +18,7 @@
:host {
width: 100%;
height: 100%;
display: block;
.tb-entity-table {
.tb-entity-table-content {
width: 100%;

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

@ -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 { hidePageSizePixelValue } from '@shared/models/constants';
import { ResizeObserver } from '@juggle/resize-observer';
@Component({
@ -109,6 +111,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
pageLink: PageLink;
textSearchMode = false;
dataSource: AttributeDatasource;
hidePageSize = false;
activeValue = false;
dirtyValue = false;
@ -127,10 +130,14 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
aliasController: IAliasController;
private widgetDatasource: Datasource;
private widgetResize$: ResizeObserver;
private disableAttributeScopeSelectionValue: boolean;
get disableAttributeScopeSelection(): boolean {
return this.disableAttributeScopeSelectionValue;
}
@Input()
set disableAttributeScopeSelection(value: boolean) {
this.disableAttributeScopeSelectionValue = coerceBooleanProperty(value);
@ -184,7 +191,8 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
private dashboardUtils: DashboardUtilsService,
private widgetService: WidgetService,
private zone: NgZone,
private cd: ChangeDetectorRef) {
private cd: ChangeDetectorRef,
private elementRef: ElementRef) {
super(store);
this.dirtyValue = !this.activeValue;
const sortOrder: SortOrder = { property: 'key', direction: Direction.ASC };
@ -193,6 +201,20 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
}
ngOnInit() {
this.widgetResize$ = new ResizeObserver(() => {
const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.cd.markForCheck();
}
});
this.widgetResize$.observe(this.elementRef.nativeElement);
}
ngOnDestroy() {
if (this.widgetResize$) {
this.widgetResize$.disconnect();
}
}
attributeScopeChanged(attributeScope: TelemetryType) {

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

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

1
ui-ngx/src/app/modules/home/components/entity/entities-table.component.scss
View File

@ -18,6 +18,7 @@
:host {
width: 100%;
height: 100%;
display: block;
.tb-entity-table {
.tb-entity-table-content {
width: 100%;

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

@ -55,15 +55,13 @@ import { EntityTypeTranslation } from '@shared/models/entity-type.models';
import { DialogService } from '@core/services/dialog.service';
import { AddEntityDialogComponent } from './add-entity-dialog.component';
import { AddEntityDialogData, EntityAction } from '@home/models/entity/entity-component.models';
import {
calculateIntervalStartEndTime,
HistoryWindowType,
Timewindow
} from '@shared/models/time/time.models';
import { calculateIntervalStartEndTime, HistoryWindowType, Timewindow } from '@shared/models/time/time.models';
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 { ResizeObserver } from '@juggle/resize-observer';
import { hidePageSizePixelValue } from '@shared/models/constants';
import { IEntitiesTableComponent } from '@home/models/entity/entity-table-component.models';
@Component({
@ -99,6 +97,7 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
defaultPageSize = 10;
displayPagination = true;
hidePageSize = false;
pageSizeOptions;
pageLink: PageLink;
textSearchMode = false;
@ -121,6 +120,8 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
private updateDataSubscription: Subscription;
private viewInited = false;
private widgetResize$: ResizeObserver;
constructor(protected store: Store<AppState>,
public route: ActivatedRoute,
public translate: TranslateService,
@ -128,7 +129,8 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
private dialogService: DialogService,
private domSanitizer: DomSanitizer,
private cd: ChangeDetectorRef,
private componentFactoryResolver: ComponentFactoryResolver) {
private componentFactoryResolver: ComponentFactoryResolver,
private elementRef: ElementRef) {
super(store);
}
@ -138,6 +140,20 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
} else {
this.init(this.route.snapshot.data.entitiesTableConfig);
}
this.widgetResize$ = new ResizeObserver(() => {
const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.cd.markForCheck();
}
});
this.widgetResize$.observe(this.elementRef.nativeElement);
}
ngOnDestroy() {
if (this.widgetResize$) {
this.widgetResize$.disconnect();
}
}
ngOnChanges(changes: SimpleChanges): void {

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

@ -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>

1
ui-ngx/src/app/modules/home/components/relation/relation-table.component.scss
View File

@ -18,6 +18,7 @@
:host {
width: 100%;
height: 100%;
display: block;
.tb-entity-table {
.tb-entity-table-content {
width: 100%;

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

@ -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';
@ -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 { hidePageSizePixelValue } from '@shared/models/constants';
import { ResizeObserver } from '@juggle/resize-observer';
@Component({
selector: 'tb-relation-table',
@ -56,6 +67,7 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
displayedColumns: string[];
direction: EntitySearchDirection;
pageLink: PageLink;
hidePageSize = false;
textSearchMode = false;
dataSource: RelationsDatasource;
@ -65,6 +77,8 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
viewsInited = false;
private widgetResize$: ResizeObserver;
@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 elementRef: ElementRef) {
super(store);
this.dirtyValue = !this.activeValue;
const sortOrder: SortOrder = { property: 'type', direction: Direction.ASC };
@ -111,6 +127,20 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
}
ngOnInit() {
this.widgetResize$ = new ResizeObserver(() => {
const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.cd.markForCheck();
}
});
this.widgetResize$.observe(this.elementRef.nativeElement);
}
ngOnDestroy() {
if (this.widgetResize$) {
this.widgetResize$.disconnect();
}
}
updateColumns() {

3
ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
View File

@ -119,6 +119,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>

1
ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.scss
View File

@ -16,6 +16,7 @@
:host {
width: 100%;
height: 100%;
display: block;
.tb-entity-table {
.tb-entity-table-content {
width: 100%;

35
ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
View File

@ -14,7 +14,17 @@
/// limitations under the License.
///
import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import {
AfterViewInit,
ChangeDetectorRef,
Component,
ElementRef,
forwardRef,
Input,
OnDestroy,
OnInit,
ViewChild
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';
import { PageComponent } from '@shared/components/page.component';
@ -36,13 +46,14 @@ import {
WidgetActionsDatasource
} from '@home/components/widget/action/manage-widget-actions.component.models';
import { UtilsService } from '@core/services/utils.service';
import { WidgetActionDescriptor, WidgetActionSource } from '@shared/models/widget.models';
import { WidgetActionDescriptor, WidgetActionSource, widgetType } from '@shared/models/widget.models';
import {
WidgetActionDialogComponent,
WidgetActionDialogData
} from '@home/components/widget/action/widget-action-dialog.component';
import { deepClone } from '@core/utils';
import { widgetType } from '@shared/models/widget.models';
import { ResizeObserver } from '@juggle/resize-observer';
import { hidePageSizePixelValue } from '@shared/models/constants';
@Component({
selector: 'tb-manage-widget-actions',
@ -69,11 +80,14 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
displayedColumns: string[];
pageLink: PageLink;
textSearchMode = false;
hidePageSize = false;
dataSource: WidgetActionsDatasource;
viewsInited = false;
dirtyValue = false;
private widgetResize$: ResizeObserver;
@ViewChild('searchInput') searchInputField: ElementRef;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ -85,7 +99,9 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
private translate: TranslateService,
private utils: UtilsService,
private dialog: MatDialog,
private dialogs: DialogService) {
private dialogs: DialogService,
private cd: ChangeDetectorRef,
private elementRef: ElementRef) {
super(store);
const sortOrder: SortOrder = { property: 'actionSourceName', direction: Direction.ASC };
this.pageLink = new PageLink(10, 0, null, sortOrder);
@ -94,9 +110,20 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
}
ngOnInit(): void {
this.widgetResize$ = new ResizeObserver(() => {
const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.cd.markForCheck();
}
});
this.widgetResize$.observe(this.elementRef.nativeElement);
}
ngOnDestroy(): void {
if (this.widgetResize$) {
this.widgetResize$.disconnect();
}
}
ngAfterViewInit() {

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

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

1
ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.scss
View File

@ -16,6 +16,7 @@
:host {
width: 100%;
height: 100%;
display: block;
.tb-table-widget {
.table-container {
position: relative;

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

@ -16,6 +16,7 @@
import {
AfterViewInit,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
@ -123,6 +124,8 @@ 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';
import { hidePageSizePixelValue } from '@shared/models/constants';
interface AlarmsTableWidgetSettings extends TableWidgetSettings {
alarmsTitle: string;
@ -164,6 +167,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
public pageLink: AlarmDataPageLink;
public sortOrderProperty: string;
public textSearchMode = false;
public hidePageSize = false;
public columns: Array<EntityColumn> = [];
public displayedColumns: string[] = [];
public alarmsDatasource: AlarmsDatasource;
@ -177,6 +181,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
private settings: AlarmsTableWidgetSettings;
private widgetConfig: WidgetConfig;
private subscription: IWidgetSubscription;
private widgetResize$: ResizeObserver;
private alarmsTitlePattern: string;
@ -235,7 +240,8 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
private datePipe: DatePipe,
private dialog: MatDialog,
private dialogService: DialogService,
private alarmService: AlarmService) {
private alarmService: AlarmService,
private cd: ChangeDetectorRef) {
super(store);
this.pageLink = {
page: 0,
@ -257,6 +263,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.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.cd.markForCheck();
}
});
this.widgetResize$.observe(this.elementRef.nativeElement);
}
}
@ -265,6 +279,9 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
this.widgetTimewindowChanged$.unsubscribe();
this.widgetTimewindowChanged$ = null;
}
if (this.widgetResize$) {
this.widgetResize$.disconnect();
}
}
ngAfterViewInit(): void {

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

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

1
ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.scss
View File

@ -16,6 +16,7 @@
:host {
width: 100%;
height: 100%;
display: block;
.tb-table-widget {
.table-container {
position: relative;

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

@ -16,6 +16,7 @@
import {
AfterViewInit,
ChangeDetectorRef,
Component,
ElementRef,
Injector,
@ -107,6 +108,8 @@ 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';
import { hidePageSizePixelValue } from '@shared/models/constants';
interface EntitiesTableWidgetSettings extends TableWidgetSettings {
entitiesTitle: string;
@ -140,6 +143,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
public pageLink: EntityDataPageLink;
public sortOrderProperty: string;
public textSearchMode = false;
public hidePageSize = false;
public columns: Array<EntityColumn> = [];
public displayedColumns: string[] = [];
public entityDatasource: EntityDatasource;
@ -153,6 +157,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
private settings: EntitiesTableWidgetSettings;
private widgetConfig: WidgetConfig;
private subscription: IWidgetSubscription;
private widgetResize$: ResizeObserver;
private entitiesTitlePattern: string;
@ -193,7 +198,8 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
private utils: UtilsService,
private datePipe: DatePipe,
private translate: TranslateService,
private domSanitizer: DomSanitizer) {
private domSanitizer: DomSanitizer,
private cd: ChangeDetectorRef) {
super(store);
this.pageLink = {
page: 0,
@ -211,6 +217,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.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.cd.markForCheck();
}
});
this.widgetResize$.observe(this.elementRef.nativeElement);
}
}
ngOnDestroy(): void {
if (this.widgetResize$) {
this.widgetResize$.disconnect();
}
}
ngAfterViewInit(): void {

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

@ -112,6 +112,7 @@
[pageIndex]="source.pageLink.page"
[pageSize]="source.pageLink.pageSize"
[pageSizeOptions]="pageSizeOptions"
[hidePageSize]="hidePageSize"
showFirstLastButtons></mat-paginator>
</ng-template>
</mat-tab>

1
ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.scss
View File

@ -16,6 +16,7 @@
:host {
width: 100%;
height: 100%;
display: block;
.tb-table-widget {
mat-footer-row, mat-row {
height: 38px;

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

@ -16,6 +16,7 @@
import {
AfterViewInit,
ChangeDetectorRef,
Component,
ElementRef,
Input,
@ -71,6 +72,8 @@ 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';
import { hidePageSizePixelValue } from '@shared/models/constants';
export interface TimeseriesTableWidgetSettings extends TableWidgetSettings {
showTimestamp: boolean;
@ -124,6 +127,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
public enableStickyAction = true;
public pageSizeOptions;
public textSearchMode = false;
public hidePageSize = false;
public textSearch: string = null;
public sources: TimeseriesTableSource[];
public sourceIndex: number;
@ -150,6 +154,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
private subscriptions: Subscription[] = [];
private widgetTimewindowChanged$: Subscription;
private widgetResize$: ResizeObserver;
private searchAction: WidgetAction = {
name: 'action.search',
@ -167,7 +172,8 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
private utils: UtilsService,
private translate: TranslateService,
private domSanitizer: DomSanitizer,
private datePipe: DatePipe) {
private datePipe: DatePipe,
private cd: ChangeDetectorRef) {
super(store);
}
@ -190,6 +196,14 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
});
}
);
this.widgetResize$ = new ResizeObserver(() => {
const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.cd.markForCheck();
}
});
this.widgetResize$.observe(this.elementRef.nativeElement);
}
}
@ -198,6 +212,9 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
this.widgetTimewindowChanged$.unsubscribe();
this.widgetTimewindowChanged$ = null;
}
if (this.widgetResize$) {
this.widgetResize$.disconnect();
}
}
ngAfterViewInit(): void {