Igor Kulikov
7 years ago
52 changed files with 2123 additions and 268 deletions
@ -0,0 +1,40 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2019 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<mat-toolbar fxLayout="row" color="primary"> |
|||
<h2 translate>{{ title }}</h2> |
|||
<span fxFlex></span> |
|||
<button mat-button mat-icon-button |
|||
[mat-dialog-close]="false" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<div mat-dialog-content fxLayout="column"> |
|||
<div #eventContentEditor class="tb-event-content"> |
|||
</div> |
|||
</div> |
|||
<div mat-dialog-actions fxLayout="row"> |
|||
<span fxFlex></span> |
|||
<button mat-button color="primary" |
|||
style="margin-right: 20px;" |
|||
type="button" |
|||
[disabled]="(isLoading$ | async)" |
|||
[mat-dialog-close]="false" cdkFocusInitial> |
|||
{{ 'action.close' | translate }} |
|||
</button> |
|||
</div> |
|||
@ -0,0 +1,23 @@ |
|||
/** |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
:host { |
|||
.tb-event-content { |
|||
width: 100%; |
|||
min-width: 400px; |
|||
height: 100%; |
|||
min-height: 50px; |
|||
} |
|||
} |
|||
@ -0,0 +1,116 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, ElementRef, Inject, OnInit, Renderer2, ViewChild } from '@angular/core'; |
|||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
|
|||
import * as ace from 'ace-builds'; |
|||
import { DialogComponent } from '@shared/components/dialog.component'; |
|||
import { Router } from '@angular/router'; |
|||
import { ContentType, contentTypesMap } from '@shared/models/constants'; |
|||
|
|||
export interface EventContentDialogData { |
|||
content: string; |
|||
title: string; |
|||
contentType: ContentType; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-event-content-dialog', |
|||
templateUrl: './event-content-dialog.component.html', |
|||
styleUrls: ['./event-content-dialog.component.scss'] |
|||
}) |
|||
export class EventContentDialogComponent extends DialogComponent<EventContentDialogData> implements OnInit { |
|||
|
|||
@ViewChild('eventContentEditor', {static: true}) |
|||
eventContentEditorElmRef: ElementRef; |
|||
private eventContentEditor: ace.Ace.Editor; |
|||
|
|||
content: string; |
|||
title: string; |
|||
contentType: ContentType; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
@Inject(MAT_DIALOG_DATA) public data: EventContentDialogData, |
|||
public dialogRef: MatDialogRef<EventContentDialogComponent>, |
|||
private renderer: Renderer2) { |
|||
super(store, router, dialogRef); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.content = this.data.content; |
|||
this.title = this.data.title; |
|||
this.contentType = this.data.contentType; |
|||
|
|||
this.eventContentEditor = this.createEditor(this.eventContentEditorElmRef, this.content); |
|||
} |
|||
|
|||
createEditor(editorElementRef: ElementRef, content: string): ace.Ace.Editor { |
|||
const editorElement = editorElementRef.nativeElement; |
|||
let mode = 'java'; |
|||
if (this.contentType) { |
|||
mode = contentTypesMap.get(this.contentType).code; |
|||
if (this.contentType === ContentType.JSON && content) { |
|||
content = js_beautify(content, {indent_size: 4}); |
|||
} |
|||
} |
|||
let editorOptions: Partial<ace.Ace.EditorOptions> = { |
|||
mode: `ace/mode/${mode}`, |
|||
theme: 'ace/theme/github', |
|||
showGutter: false, |
|||
showPrintMargin: false, |
|||
readOnly: true |
|||
}; |
|||
|
|||
const advancedOptions = { |
|||
enableSnippets: false, |
|||
enableBasicAutocompletion: false, |
|||
enableLiveAutocompletion: false |
|||
}; |
|||
|
|||
editorOptions = {...editorOptions, ...advancedOptions}; |
|||
const editor = ace.edit(editorElement, editorOptions); |
|||
editor.session.setUseWrapMode(false); |
|||
editor.setValue(content, -1); |
|||
this.updateEditorSize(editorElement, content, editor); |
|||
return editor; |
|||
} |
|||
|
|||
updateEditorSize(editorElement: any, content: string, editor: ace.Ace.Editor) { |
|||
let newHeight = 400; |
|||
let newWidth = 600; |
|||
if (content && content.length > 0) { |
|||
const lines = content.split('\n'); |
|||
newHeight = 16 * lines.length + 16; |
|||
let maxLineLength = 0; |
|||
lines.forEach((row) => { |
|||
const line = row.replace(/\t/g, ' ').replace(/\n/g, ''); |
|||
const lineLength = line.length; |
|||
maxLineLength = Math.max(maxLineLength, lineLength); |
|||
}); |
|||
newWidth = 8 * maxLineLength + 16; |
|||
} |
|||
// newHeight = Math.min(400, newHeight);
|
|||
this.renderer.setStyle(editorElement, 'minHeight', newHeight.toString() + 'px'); |
|||
this.renderer.setStyle(editorElement, 'height', newHeight.toString() + 'px'); |
|||
this.renderer.setStyle(editorElement, 'width', newWidth.toString() + 'px'); |
|||
editor.resize(); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,24 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2019 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div fxLayout="column" class="mat-content mat-padding"> |
|||
<label class="tb-title" translate>entity.columns-to-display</label> |
|||
<mat-checkbox style="padding-bottom: 8px;" [(ngModel)]="column.display" *ngFor="let column of columns" |
|||
(ngModelChange)="update()"> |
|||
{{ column.title }} |
|||
</mat-checkbox> |
|||
</div> |
|||
@ -0,0 +1,36 @@ |
|||
/** |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
:host { |
|||
width: 100%; |
|||
height: 100%; |
|||
min-width: 300px; |
|||
overflow: hidden; |
|||
background: #fff; |
|||
border-radius: 4px; |
|||
box-shadow: |
|||
0 7px 8px -4px rgba(0, 0, 0, .2), |
|||
0 13px 19px 2px rgba(0, 0, 0, .14), |
|||
0 5px 24px 4px rgba(0, 0, 0, .12); |
|||
|
|||
.mat-content { |
|||
overflow: hidden; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.mat-padding { |
|||
padding: 16px; |
|||
} |
|||
} |
|||
@ -0,0 +1,43 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, Inject, InjectionToken } from '@angular/core'; |
|||
import { DisplayColumn } from '@home/components/widget/lib/table-widget.models'; |
|||
|
|||
export const DISPLAY_COLUMNS_PANEL_DATA = new InjectionToken<any>('DisplayColumnsPanelData'); |
|||
|
|||
export interface DisplayColumnsPanelData { |
|||
columns: DisplayColumn[]; |
|||
columnsUpdated: (columns: DisplayColumn[]) => void; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-display-columns-panel', |
|||
templateUrl: './display-columns-panel.component.html', |
|||
styleUrls: ['./display-columns-panel.component.scss'] |
|||
}) |
|||
export class DisplayColumnsPanelComponent { |
|||
|
|||
columns: DisplayColumn[]; |
|||
|
|||
constructor(@Inject(DISPLAY_COLUMNS_PANEL_DATA) public data: DisplayColumnsPanelData) { |
|||
this.columns = this.data.columns; |
|||
} |
|||
|
|||
public update() { |
|||
this.data.columnsUpdated(this.columns); |
|||
} |
|||
} |
|||
@ -0,0 +1,96 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2019 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div class="tb-entity-table tb-absolute-fill"> |
|||
<div fxFlex fxLayout="column" class="tb-absolute-fill"> |
|||
<mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode"> |
|||
<div class="mat-toolbar-tools"> |
|||
<button mat-button mat-icon-button |
|||
matTooltip="{{ 'action.search' | translate }}" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>search</mat-icon> |
|||
</button> |
|||
<mat-form-field fxFlex> |
|||
<mat-label> </mat-label> |
|||
<input #searchInput matInput |
|||
[(ngModel)]="pageLink.textSearch" |
|||
placeholder="{{ 'entity.search' | translate }}"/> |
|||
</mat-form-field> |
|||
<button mat-button mat-icon-button (click)="exitFilterMode()" |
|||
matTooltip="{{ 'action.close' | translate }}" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>close</mat-icon> |
|||
</button> |
|||
</div> |
|||
</mat-toolbar> |
|||
<div fxFlex class="table-container"> |
|||
<mat-table [dataSource]="entityDatasource" |
|||
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="(pageLink.sortOrder.direction + '').toLowerCase()" matSortDisableClear> |
|||
<ng-container [matColumnDef]="column.label" *ngFor="let column of columns; trackBy: trackByColumnLabel;"> |
|||
<mat-header-cell [ngStyle]="headerStyle(column)" *matHeaderCellDef mat-sort-header> {{ column.title }} </mat-header-cell> |
|||
<mat-cell *matCellDef="let entity;" |
|||
[innerHTML]="cellContent(entity, column)" |
|||
[ngStyle]="cellStyle(entity, column)"> |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="actions" stickyEnd> |
|||
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 36) + 'px', maxWidth: (actionCellDescriptors.length * 36) + 'px' }"> |
|||
</mat-header-cell> |
|||
<mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 36) + 'px', maxWidth: (actionCellDescriptors.length * 36) + 'px' }"> |
|||
<div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> |
|||
<button mat-button mat-icon-button [disabled]="isLoading$ | async" |
|||
*ngFor="let actionDescriptor of actionCellDescriptors" |
|||
matTooltip="{{ actionDescriptor.displayName }}" |
|||
matTooltipPosition="above" |
|||
(click)="onActionButtonClick($event, entity, actionDescriptor)"> |
|||
<mat-icon>{{actionDescriptor.icon}}</mat-icon> |
|||
</button> |
|||
</div> |
|||
<div fxHide fxShow.lt-lg> |
|||
<button mat-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"> |
|||
<button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors" |
|||
[disabled]="isLoading$ | async" |
|||
(click)="onActionButtonClick($event, entity, actionDescriptor)"> |
|||
<mat-icon>{{actionDescriptor.icon}}</mat-icon> |
|||
<span>{{ actionDescriptor.displayName }}</span> |
|||
</button> |
|||
</mat-menu> |
|||
</div> |
|||
</mat-cell> |
|||
</ng-container> |
|||
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row> |
|||
<mat-row [ngClass]="{'tb-current-entity': entityDatasource.isCurrentEntity(entity)}" |
|||
*matRowDef="let entity; columns: displayedColumns;" |
|||
(click)="onRowClick($event, entity)"></mat-row> |
|||
</mat-table> |
|||
<span [fxShow]="entityDatasource.isEmpty() | async" |
|||
fxLayoutAlign="center center" |
|||
class="no-data-found" translate>entity.no-entities-prompt</span> |
|||
</div> |
|||
<mat-divider *ngIf="displayPagination"></mat-divider> |
|||
<mat-paginator *ngIf="displayPagination" |
|||
[length]="entityDatasource.total() | async" |
|||
[pageIndex]="pageLink.page" |
|||
[pageSize]="pageLink.pageSize" |
|||
[pageSizeOptions]="pageSizeOptions"></mat-paginator> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,39 @@ |
|||
/** |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
:host { |
|||
width: 100%; |
|||
height: 100%; |
|||
.tb-entity-table { |
|||
.mat-table, .mat-paginator, mat-toolbar.mat-table-toolbar { |
|||
background: transparent; |
|||
} |
|||
mat-toolbar { |
|||
height: 39px; |
|||
max-height: 39px; |
|||
.mat-toolbar-tools { |
|||
height: 39px; |
|||
max-height: 39px; |
|||
} |
|||
} |
|||
.table-container { |
|||
overflow: auto; |
|||
} |
|||
} |
|||
} |
|||
|
|||
:host ::ng-deep .mat-sort-header-sorted .mat-sort-header-arrow { |
|||
opacity: 1 !important; |
|||
} |
|||
@ -0,0 +1,710 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { WidgetAction, WidgetContext } from '@home/models/widget-component.models'; |
|||
import { |
|||
DataKey, |
|||
Datasource, |
|||
DatasourceData, |
|||
DatasourceType, |
|||
WidgetActionDescriptor, |
|||
WidgetConfig |
|||
} from '@shared/models/widget.models'; |
|||
import { IWidgetSubscription } from '@core/api/widget-api.models'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { deepClone, isDefined, isNumber } from '@core/utils'; |
|||
import * as tinycolor_ from 'tinycolor2'; |
|||
import cssjs from '@core/css/css'; |
|||
import { PageLink } from '@shared/models/page/page-link'; |
|||
import { Direction, SortOrder, sortOrderFromString } from '@shared/models/page/sort-order'; |
|||
import { DataSource } from '@angular/cdk/typings/collections'; |
|||
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
|||
import { CollectionViewer } from '@angular/cdk/collections'; |
|||
import { BehaviorSubject, fromEvent, merge, Observable, of } from 'rxjs'; |
|||
import { emptyPageData, PageData } from '@shared/models/page/page-data'; |
|||
import { EntityId } from '@shared/models/id/entity-id'; |
|||
import { entityTypeTranslations } from '@shared/models/entity-type.models'; |
|||
import { catchError, debounceTime, distinctUntilChanged, map, tap } from 'rxjs/operators'; |
|||
import { MatPaginator } from '@angular/material/paginator'; |
|||
import { MatSort } from '@angular/material/sort'; |
|||
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; |
|||
import { |
|||
CellContentInfo, |
|||
CellStyleInfo, |
|||
DisplayColumn, |
|||
EntityColumn, |
|||
EntityData, |
|||
getEntityValue |
|||
} from '@home/components/widget/lib/table-widget.models'; |
|||
import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; |
|||
import { ComponentPortal, PortalInjector } from '@angular/cdk/portal'; |
|||
import { |
|||
DISPLAY_COLUMNS_PANEL_DATA, |
|||
DisplayColumnsPanelComponent, |
|||
DisplayColumnsPanelData |
|||
} from '@home/components/widget/lib/display-columns-panel.component'; |
|||
|
|||
const tinycolor = tinycolor_; |
|||
|
|||
interface EntitiesTableWidgetSettings { |
|||
entitiesTitle: string; |
|||
enableSearch: boolean; |
|||
enableSelectColumnDisplay: boolean; |
|||
displayEntityName: boolean; |
|||
entityNameColumnTitle: string; |
|||
displayEntityType: boolean; |
|||
displayPagination: boolean; |
|||
defaultPageSize: number; |
|||
defaultSortOrder: string; |
|||
} |
|||
|
|||
interface EntitiesTableDataKeySettings { |
|||
columnWidth: string; |
|||
useCellStyleFunction: boolean; |
|||
cellStyleFunction: string; |
|||
useCellContentFunction: boolean; |
|||
cellContentFunction: string; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-entities-table-widget', |
|||
templateUrl: './entities-table-widget.component.html', |
|||
styleUrls: ['./entities-table-widget.component.scss'] |
|||
}) |
|||
export class EntitiesTableWidgetComponent extends PageComponent implements OnInit, AfterViewInit { |
|||
|
|||
@Input() |
|||
ctx: WidgetContext; |
|||
|
|||
@ViewChild('searchInput', {static: false}) searchInputField: ElementRef; |
|||
@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator; |
|||
@ViewChild(MatSort, {static: false}) sort: MatSort; |
|||
|
|||
public displayPagination = true; |
|||
public pageSizeOptions; |
|||
public pageLink: PageLink; |
|||
public textSearchMode = false; |
|||
public columns: Array<EntityColumn> = []; |
|||
public displayedColumns: string[] = []; |
|||
public actionCellDescriptors: WidgetActionDescriptor[]; |
|||
public entityDatasource: EntityDatasource; |
|||
|
|||
private settings: EntitiesTableWidgetSettings; |
|||
private widgetConfig: WidgetConfig; |
|||
private subscription: IWidgetSubscription; |
|||
|
|||
private defaultPageSize = 10; |
|||
private defaultSortOrder = 'entityName'; |
|||
|
|||
private contentsInfo: {[key: string]: CellContentInfo} = {}; |
|||
private stylesInfo: {[key: string]: CellStyleInfo} = {}; |
|||
private columnWidth: {[key: string]: string} = {}; |
|||
|
|||
private searchAction: WidgetAction = { |
|||
name: 'action.search', |
|||
show: true, |
|||
icon: 'search', |
|||
onAction: () => { |
|||
this.enterFilterMode(); |
|||
} |
|||
}; |
|||
|
|||
private columnDisplayAction: WidgetAction = { |
|||
name: 'entity.columns-to-display', |
|||
show: true, |
|||
icon: 'view_column', |
|||
onAction: ($event) => { |
|||
this.editColumnsToDisplay($event); |
|||
} |
|||
}; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private elementRef: ElementRef, |
|||
private overlay: Overlay, |
|||
private viewContainerRef: ViewContainerRef, |
|||
private utils: UtilsService, |
|||
private translate: TranslateService, |
|||
private domSanitizer: DomSanitizer) { |
|||
super(store); |
|||
|
|||
const sortOrder: SortOrder = sortOrderFromString(this.defaultSortOrder); |
|||
this.pageLink = new PageLink(this.defaultPageSize, 0, null, sortOrder); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.ctx.$scope.entitiesTableWidget = this; |
|||
this.settings = this.ctx.settings; |
|||
this.widgetConfig = this.ctx.widgetConfig; |
|||
this.subscription = this.ctx.defaultSubscription; |
|||
this.initializeConfig(); |
|||
this.updateDatasources(); |
|||
this.ctx.updateWidgetParams(); |
|||
} |
|||
|
|||
ngAfterViewInit(): void { |
|||
fromEvent(this.searchInputField.nativeElement, 'keyup') |
|||
.pipe( |
|||
debounceTime(150), |
|||
distinctUntilChanged(), |
|||
tap(() => { |
|||
if (this.displayPagination) { |
|||
this.paginator.pageIndex = 0; |
|||
} |
|||
this.updateData(); |
|||
}) |
|||
) |
|||
.subscribe(); |
|||
|
|||
if (this.displayPagination) { |
|||
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0); |
|||
} |
|||
(this.displayPagination ? merge(this.sort.sortChange, this.paginator.page) : this.sort.sortChange) |
|||
.pipe( |
|||
tap(() => this.updateData()) |
|||
) |
|||
.subscribe(); |
|||
this.updateData(); |
|||
} |
|||
|
|||
public onDataUpdated() { |
|||
this.entityDatasource.updateEntitiesData(this.subscription.data); |
|||
this.ctx.detectChanges(); |
|||
} |
|||
|
|||
private initializeConfig() { |
|||
this.ctx.widgetActions = [this.searchAction, this.columnDisplayAction]; |
|||
|
|||
let entitiesTitle: string; |
|||
|
|||
if (this.settings.entitiesTitle && this.settings.entitiesTitle.length) { |
|||
entitiesTitle = this.utils.customTranslation(this.settings.entitiesTitle, this.settings.entitiesTitle); |
|||
} else { |
|||
entitiesTitle = this.translate.instant('entity.entities'); |
|||
} |
|||
|
|||
const datasource = this.subscription.datasources[0]; |
|||
this.ctx.widgetTitle = this.utils.createLabelFromDatasource(datasource, entitiesTitle); |
|||
|
|||
this.searchAction.show = isDefined(this.settings.enableSearch) ? this.settings.enableSearch : true; |
|||
this.displayPagination = isDefined(this.settings.displayPagination) ? this.settings.displayPagination : true; |
|||
this.columnDisplayAction.show = isDefined(this.settings.enableSelectColumnDisplay) ? this.settings.enableSelectColumnDisplay : true; |
|||
|
|||
const pageSize = this.settings.defaultPageSize; |
|||
if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) { |
|||
this.defaultPageSize = pageSize; |
|||
} |
|||
this.pageSizeOptions = [this.defaultPageSize, this.defaultPageSize*2, this.defaultPageSize*3]; |
|||
|
|||
if (this.settings.defaultSortOrder && this.settings.defaultSortOrder.length) { |
|||
this.defaultSortOrder = this.settings.defaultSortOrder; |
|||
} |
|||
|
|||
this.pageLink.pageSize = this.displayPagination ? this.defaultPageSize : Number.POSITIVE_INFINITY; |
|||
this.pageLink.sortOrder = sortOrderFromString(this.defaultSortOrder); |
|||
|
|||
const origColor = this.widgetConfig.color || 'rgba(0, 0, 0, 0.87)'; |
|||
const origBackgroundColor = this.widgetConfig.backgroundColor || 'rgb(255, 255, 255)'; |
|||
const defaultColor = tinycolor(origColor); |
|||
const mdDark = defaultColor.setAlpha(0.87).toRgbString(); |
|||
const mdDarkSecondary = defaultColor.setAlpha(0.54).toRgbString(); |
|||
const mdDarkDisabled = defaultColor.setAlpha(0.26).toRgbString(); |
|||
const mdDarkDivider = defaultColor.setAlpha(0.12).toRgbString(); |
|||
|
|||
const cssString = |
|||
'.mat-input-element::placeholder {\n' + |
|||
' color: ' + mdDarkSecondary + ';\n'+ |
|||
'}\n' + |
|||
'.mat-input-element::-moz-placeholder {\n' + |
|||
' color: ' + mdDarkSecondary + ';\n'+ |
|||
'}\n' + |
|||
'.mat-input-element::-webkit-input-placeholder {\n' + |
|||
' color: ' + mdDarkSecondary + ';\n'+ |
|||
'}\n' + |
|||
'.mat-input-element:-ms-input-placeholder {\n' + |
|||
' color: ' + mdDarkSecondary + ';\n'+ |
|||
'}\n' + |
|||
'mat-toolbar.mat-table-toolbar {\n'+ |
|||
'color: ' + mdDark + ';\n'+ |
|||
'}\n'+ |
|||
'mat-toolbar.mat-table-toolbar button.mat-icon-button mat-icon {\n'+ |
|||
'color: ' + mdDarkSecondary + ';\n'+ |
|||
'}\n'+ |
|||
'.mat-table .mat-header-row {\n'+ |
|||
'background-color: ' + origBackgroundColor + ';\n'+ |
|||
'}\n'+ |
|||
'.mat-table .mat-header-cell {\n'+ |
|||
'color: ' + mdDarkSecondary + ';\n'+ |
|||
'}\n'+ |
|||
'.mat-table .mat-header-cell .mat-sort-header-arrow {\n'+ |
|||
'color: ' + mdDarkDisabled + ';\n'+ |
|||
'}\n'+ |
|||
'.mat-table .mat-row, .mat-table .mat-header-row {\n'+ |
|||
'border-bottom-color: '+mdDarkDivider+';\n'+ |
|||
'}\n'+ |
|||
'.mat-table .mat-row:not(.tb-current-entity):not(:hover) .mat-cell.mat-table-sticky, .mat-table .mat-header-cell.mat-table-sticky {\n'+ |
|||
'background-color: ' + origBackgroundColor + ';\n'+ |
|||
'}\n'+ |
|||
'.mat-table .mat-cell {\n'+ |
|||
'color: ' + mdDark + ';\n'+ |
|||
'}\n'+ |
|||
'.mat-table .mat-cell button.mat-icon-button mat-icon {\n'+ |
|||
'color: ' + mdDarkSecondary + ';\n'+ |
|||
'}\n'+ |
|||
'.mat-divider {\n'+ |
|||
'border-top-color: ' + mdDarkDivider + ';\n'+ |
|||
'}\n'+ |
|||
'.mat-paginator {\n'+ |
|||
'color: ' + mdDarkSecondary + ';\n'+ |
|||
'}\n'+ |
|||
'.mat-paginator button.mat-icon-button {\n'+ |
|||
'color: ' + mdDarkSecondary + ';\n'+ |
|||
'}\n'+ |
|||
'.mat-paginator button.mat-icon-button[disabled][disabled] {\n'+ |
|||
'color: ' + mdDarkDisabled + ';\n'+ |
|||
'}\n'+ |
|||
'.mat-paginator .mat-select-value {\n'+ |
|||
'color: ' + mdDarkSecondary + ';\n'+ |
|||
'}'; |
|||
|
|||
const cssParser = new cssjs(); |
|||
cssParser.testMode = false; |
|||
const namespace = 'entities-table-' + this.utils.hashCode(cssString); |
|||
cssParser.cssPreviewNamespace = namespace; |
|||
cssParser.createStyleElement(namespace, cssString); |
|||
$(this.elementRef.nativeElement).addClass(namespace); |
|||
} |
|||
|
|||
private updateDatasources() { |
|||
|
|||
this.actionCellDescriptors = this.ctx.actionsApi.getActionDescriptors('actionCellButton'); |
|||
|
|||
const displayEntityName = isDefined(this.settings.displayEntityName) ? this.settings.displayEntityName : true; |
|||
let entityNameColumnTitle: string; |
|||
if (this.settings.entityNameColumnTitle && this.settings.entityNameColumnTitle.length) { |
|||
entityNameColumnTitle = this.utils.customTranslation(this.settings.entityNameColumnTitle, this.settings.entityNameColumnTitle); |
|||
} else { |
|||
entityNameColumnTitle = this.translate.instant('entity.entity-name'); |
|||
} |
|||
const displayEntityType = isDefined(this.settings.displayEntityType) ? this.settings.displayEntityType : true; |
|||
|
|||
if (displayEntityName) { |
|||
this.displayedColumns.push('entityName'); |
|||
this.columns.push( |
|||
{ |
|||
name: 'entityName', |
|||
label: 'entityName', |
|||
title: entityNameColumnTitle |
|||
} as EntityColumn |
|||
); |
|||
this.contentsInfo['entityName'] = { |
|||
useCellContentFunction: false |
|||
}; |
|||
this.stylesInfo['entityName'] = { |
|||
useCellStyleFunction: false |
|||
}; |
|||
this.columnWidth['entityName'] = '100px'; |
|||
} |
|||
if (displayEntityType) { |
|||
this.displayedColumns.push('entityType'); |
|||
this.columns.push( |
|||
{ |
|||
name: 'entityType', |
|||
label: 'entityType', |
|||
title: this.translate.instant('entity.entity-type'), |
|||
} as EntityColumn |
|||
); |
|||
this.contentsInfo['entityType'] = { |
|||
useCellContentFunction: false |
|||
}; |
|||
this.stylesInfo['entityType'] = { |
|||
useCellStyleFunction: false |
|||
}; |
|||
this.columnWidth['entityType'] = '100px'; |
|||
} |
|||
|
|||
const dataKeys: Array<DataKey> = []; |
|||
|
|||
const datasource = this.subscription.datasources[0]; |
|||
|
|||
if (datasource) { |
|||
datasource.dataKeys.forEach((_dataKey) => { |
|||
const dataKey: EntityColumn = deepClone(_dataKey) as EntityColumn; |
|||
if (dataKey.type === DataKeyType.function) { |
|||
dataKey.name = dataKey.label; |
|||
} |
|||
dataKeys.push(dataKey); |
|||
|
|||
dataKey.title = this.utils.customTranslation(dataKey.label, dataKey.label); |
|||
const keySettings: EntitiesTableDataKeySettings = dataKey.settings; |
|||
|
|||
let cellStyleFunction: Function = null; |
|||
let useCellStyleFunction = false; |
|||
|
|||
if (keySettings.useCellStyleFunction === true) { |
|||
if (isDefined(keySettings.cellStyleFunction) && keySettings.cellStyleFunction.length > 0) { |
|||
try { |
|||
cellStyleFunction = new Function('value', keySettings.cellStyleFunction); |
|||
useCellStyleFunction = true; |
|||
} catch (e) { |
|||
cellStyleFunction = null; |
|||
useCellStyleFunction = false; |
|||
} |
|||
} |
|||
} |
|||
this.stylesInfo[dataKey.label] = { |
|||
useCellStyleFunction, |
|||
cellStyleFunction |
|||
}; |
|||
|
|||
let cellContentFunction: Function = null; |
|||
let useCellContentFunction = false; |
|||
|
|||
if (keySettings.useCellContentFunction === true) { |
|||
if (isDefined(keySettings.cellContentFunction) && keySettings.cellContentFunction.length > 0) { |
|||
try { |
|||
cellContentFunction = new Function('value, entity, ctx', keySettings.cellContentFunction); |
|||
useCellContentFunction = true; |
|||
} catch (e) { |
|||
cellContentFunction = null; |
|||
useCellContentFunction = false; |
|||
} |
|||
} |
|||
} |
|||
|
|||
this.contentsInfo[dataKey.label] = { |
|||
useCellContentFunction, |
|||
cellContentFunction, |
|||
units: dataKey.units, |
|||
decimals: dataKey.decimals |
|||
}; |
|||
|
|||
const columnWidth = isDefined(keySettings.columnWidth) ? keySettings.columnWidth : '0px'; |
|||
this.columnWidth[dataKey.label] = columnWidth; |
|||
this.displayedColumns.push(dataKey.label); |
|||
this.columns.push(dataKey); |
|||
}); |
|||
} |
|||
|
|||
if (this.actionCellDescriptors.length) { |
|||
this.displayedColumns.push('actions'); |
|||
} |
|||
this.entityDatasource = new EntityDatasource( |
|||
this.translate, dataKeys, this.subscription.datasources); |
|||
} |
|||
|
|||
private editColumnsToDisplay($event: Event) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
const target = $event.target || $event.srcElement || $event.currentTarget; |
|||
const config = new OverlayConfig(); |
|||
config.backdropClass = 'cdk-overlay-transparent-backdrop'; |
|||
config.hasBackdrop = true; |
|||
const connectedPosition: ConnectedPosition = { |
|||
originX: 'end', |
|||
originY: 'bottom', |
|||
overlayX: 'end', |
|||
overlayY: 'top' |
|||
}; |
|||
config.positionStrategy = this.overlay.position().flexibleConnectedTo(target as HTMLElement) |
|||
.withPositions([connectedPosition]); |
|||
|
|||
const overlayRef = this.overlay.create(config); |
|||
overlayRef.backdropClick().subscribe(() => { |
|||
overlayRef.dispose(); |
|||
}); |
|||
|
|||
const columns: DisplayColumn[] = this.columns.map(column => { |
|||
return { |
|||
title: column.title, |
|||
label: column.label, |
|||
display: this.displayedColumns.indexOf(column.label) > -1 |
|||
} |
|||
}); |
|||
|
|||
const injectionTokens = new WeakMap<any, any>([ |
|||
[DISPLAY_COLUMNS_PANEL_DATA, { |
|||
columns, |
|||
columnsUpdated: (newColumns) => { |
|||
this.displayedColumns = newColumns.filter(column => column.display).map(column => column.label); |
|||
this.displayedColumns.push('actions'); |
|||
} |
|||
} as DisplayColumnsPanelData], |
|||
[OverlayRef, overlayRef] |
|||
]); |
|||
const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens); |
|||
overlayRef.attach(new ComponentPortal(DisplayColumnsPanelComponent, |
|||
this.viewContainerRef, injector)); |
|||
this.ctx.detectChanges(); |
|||
} |
|||
|
|||
private enterFilterMode() { |
|||
this.textSearchMode = true; |
|||
this.pageLink.textSearch = ''; |
|||
this.ctx.hideTitlePanel = true; |
|||
this.ctx.detectChanges(true); |
|||
setTimeout(() => { |
|||
this.searchInputField.nativeElement.focus(); |
|||
this.searchInputField.nativeElement.setSelectionRange(0, 0); |
|||
}, 10); |
|||
} |
|||
|
|||
exitFilterMode() { |
|||
this.textSearchMode = false; |
|||
this.pageLink.textSearch = null; |
|||
if (this.displayPagination) { |
|||
this.paginator.pageIndex = 0; |
|||
} |
|||
this.updateData(); |
|||
this.ctx.hideTitlePanel = false; |
|||
this.ctx.detectChanges(true); |
|||
} |
|||
|
|||
private updateData() { |
|||
if (this.displayPagination) { |
|||
this.pageLink.page = this.paginator.pageIndex; |
|||
this.pageLink.pageSize = this.paginator.pageSize; |
|||
} else { |
|||
this.pageLink.page = 0; |
|||
} |
|||
this.pageLink.sortOrder.property = this.sort.active; |
|||
this.pageLink.sortOrder.direction = Direction[this.sort.direction.toUpperCase()]; |
|||
this.entityDatasource.loadEntities(this.pageLink); |
|||
this.ctx.detectChanges(); |
|||
} |
|||
|
|||
public trackByColumnLabel(index, column: EntityColumn) { |
|||
return column.label; |
|||
} |
|||
|
|||
public headerStyle(key: EntityColumn): any { |
|||
return this.widthStyle(key); |
|||
} |
|||
|
|||
public cellStyle(entity: EntityData, key: EntityColumn): any { |
|||
let style: any = {}; |
|||
if (entity && key) { |
|||
const styleInfo = this.stylesInfo[key.label]; |
|||
const value = getEntityValue(entity, key); |
|||
if (styleInfo.useCellStyleFunction && styleInfo.cellStyleFunction) { |
|||
try { |
|||
style = styleInfo.cellStyleFunction(value); |
|||
} catch (e) { |
|||
style = {}; |
|||
} |
|||
} else { |
|||
style = this.defaultStyle(key, value); |
|||
} |
|||
} |
|||
const widthStyle = this.widthStyle(key); |
|||
style = {...style, ...widthStyle}; |
|||
return style; |
|||
} |
|||
|
|||
private widthStyle(key: EntityColumn): any { |
|||
let style: any = {}; |
|||
const columnWidth = this.columnWidth[key.label]; |
|||
if (columnWidth !== "0px") { |
|||
style.minWidth = columnWidth; |
|||
style.width = columnWidth; |
|||
} else { |
|||
style.minWidth = "auto"; |
|||
style.width = "auto"; |
|||
} |
|||
return style; |
|||
} |
|||
|
|||
public cellContent(entity: EntityData, key: EntityColumn): SafeHtml { |
|||
let strContent = ''; |
|||
if (entity && key) { |
|||
const contentInfo = this.contentsInfo[key.label]; |
|||
const value = getEntityValue(entity, key); |
|||
if (contentInfo.useCellContentFunction && contentInfo.cellContentFunction) { |
|||
if (isDefined(value)) { |
|||
strContent = '' + value; |
|||
} |
|||
var content = strContent; |
|||
try { |
|||
content = contentInfo.cellContentFunction(value, entity, this.ctx); |
|||
} catch (e) { |
|||
content = strContent; |
|||
} |
|||
} else { |
|||
const decimals = (contentInfo.decimals || contentInfo.decimals === 0) ? contentInfo.decimals : this.ctx.widgetConfig.decimals; |
|||
const units = contentInfo.units || this.ctx.widgetConfig.units; |
|||
content = this.ctx.utils.formatValue(value, decimals, units, true); |
|||
} |
|||
return this.domSanitizer.bypassSecurityTrustHtml(content); |
|||
} else { |
|||
return strContent; |
|||
} |
|||
} |
|||
|
|||
public onRowClick($event: Event, entity: EntityData) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
this.entityDatasource.toggleCurrentEntity(entity); |
|||
const descriptors = this.ctx.actionsApi.getActionDescriptors('rowClick'); |
|||
if (descriptors.length) { |
|||
let entityId; |
|||
let entityName; |
|||
if (entity) { |
|||
entityId = entity.id; |
|||
entityName = entity.entityName; |
|||
} |
|||
this.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName); |
|||
} |
|||
} |
|||
|
|||
public onActionButtonClick($event: Event, entity: EntityData, actionDescriptor: WidgetActionDescriptor) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
let entityId; |
|||
let entityName; |
|||
if (entity) { |
|||
entityId = entity.id; |
|||
entityName = entity.entityName; |
|||
} |
|||
this.ctx.actionsApi.handleWidgetAction($event, actionDescriptor, entityId, entityName); |
|||
} |
|||
|
|||
private defaultStyle(key: EntityColumn, value: any): any { |
|||
return {}; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
class EntityDatasource implements DataSource<EntityData> { |
|||
|
|||
private entitiesSubject = new BehaviorSubject<EntityData[]>([]); |
|||
private pageDataSubject = new BehaviorSubject<PageData<EntityData>>(emptyPageData<EntityData>()); |
|||
|
|||
private allEntities: Array<EntityData> = []; |
|||
private allEntitiesSubject = new BehaviorSubject<EntityData[]>([]); |
|||
private allEntities$: Observable<Array<EntityData>> = this.allEntitiesSubject.asObservable(); |
|||
|
|||
private currentEntity: EntityData = null; |
|||
|
|||
constructor( |
|||
private translate: TranslateService, |
|||
private dataKeys: Array<DataKey>, |
|||
datasources: Array<Datasource> |
|||
) { |
|||
|
|||
for (const datasource of datasources) { |
|||
if (datasource.type === DatasourceType.entity && !datasource.entityId) { |
|||
continue; |
|||
} |
|||
const entity: EntityData = { |
|||
id: {} as EntityId, |
|||
entityName: datasource.entityName |
|||
}; |
|||
if (datasource.entityId) { |
|||
entity.id.id = datasource.entityId; |
|||
} |
|||
if (datasource.entityType) { |
|||
entity.id.entityType = datasource.entityType; |
|||
entity.entityType = this.translate.instant(entityTypeTranslations.get(datasource.entityType).type); |
|||
} else { |
|||
entity.entityType = ''; |
|||
} |
|||
this.dataKeys.forEach((dataKey) => { |
|||
entity[dataKey.label] = ''; |
|||
}); |
|||
this.allEntities.push(entity); |
|||
} |
|||
this.allEntitiesSubject.next(this.allEntities); |
|||
} |
|||
|
|||
connect(collectionViewer: CollectionViewer): Observable<EntityData[] | ReadonlyArray<EntityData>> { |
|||
return this.entitiesSubject.asObservable(); |
|||
} |
|||
|
|||
disconnect(collectionViewer: CollectionViewer): void { |
|||
this.entitiesSubject.complete(); |
|||
this.pageDataSubject.complete(); |
|||
} |
|||
|
|||
loadEntities(pageLink: PageLink) { |
|||
this.fetchEntities(pageLink).pipe( |
|||
catchError(() => of(emptyPageData<EntityData>())), |
|||
).subscribe( |
|||
(pageData) => { |
|||
this.entitiesSubject.next(pageData.data); |
|||
this.pageDataSubject.next(pageData); |
|||
} |
|||
); |
|||
} |
|||
|
|||
updateEntitiesData(data: DatasourceData[]) { |
|||
for (let i = 0; i < this.allEntities.length; i++) { |
|||
const entity = this.allEntities[i]; |
|||
for (let a = 0; a < this.dataKeys.length; a++) { |
|||
const dataKey = this.dataKeys[a]; |
|||
const index = i * this.dataKeys.length + a; |
|||
const keyData = data[index].data; |
|||
if (keyData && keyData.length && keyData[0].length > 1) { |
|||
const value = keyData[0][1]; |
|||
entity[dataKey.label] = value; |
|||
} else { |
|||
entity[dataKey.label] = ''; |
|||
} |
|||
} |
|||
} |
|||
this.allEntitiesSubject.next(this.allEntities); |
|||
} |
|||
|
|||
isEmpty(): Observable<boolean> { |
|||
return this.entitiesSubject.pipe( |
|||
map((entities) => !entities.length) |
|||
); |
|||
} |
|||
|
|||
total(): Observable<number> { |
|||
return this.pageDataSubject.pipe( |
|||
map((pageData) => pageData.totalElements) |
|||
); |
|||
} |
|||
|
|||
public toggleCurrentEntity(entity: EntityData): boolean { |
|||
if (this.currentEntity !== entity) { |
|||
this.currentEntity = entity; |
|||
return true; |
|||
} else { |
|||
return false; |
|||
} |
|||
} |
|||
|
|||
public isCurrentEntity(entity: EntityData): boolean { |
|||
return (this.currentEntity && entity && this.currentEntity.id && entity.id) && |
|||
(this.currentEntity.id.id === entity.id.id); |
|||
} |
|||
|
|||
private fetchEntities(pageLink: PageLink): Observable<PageData<EntityData>> { |
|||
return this.allEntities$.pipe( |
|||
map((data) => pageLink.filterData(data)) |
|||
); |
|||
} |
|||
} |
|||
@ -0,0 +1,55 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { EntityId } from '@shared/models/id/entity-id'; |
|||
import { DataKey } from '@shared/models/widget.models'; |
|||
|
|||
export interface EntityData { |
|||
id: EntityId; |
|||
entityName: string; |
|||
entityType?: string; |
|||
[key: string]: any; |
|||
} |
|||
|
|||
export interface EntityColumn extends DataKey { |
|||
title: string; |
|||
} |
|||
|
|||
export interface DisplayColumn { |
|||
title: string; |
|||
label: string; |
|||
display: boolean; |
|||
} |
|||
|
|||
export interface CellContentInfo { |
|||
useCellContentFunction: boolean; |
|||
cellContentFunction?: Function; |
|||
units?: string; |
|||
decimals?: number; |
|||
} |
|||
|
|||
export interface CellStyleInfo { |
|||
useCellStyleFunction: boolean; |
|||
cellStyleFunction?: Function; |
|||
} |
|||
|
|||
export function getEntityValue(entity: any, key: DataKey): any { |
|||
return getDescendantProp(entity, key.label); |
|||
} |
|||
|
|||
export function getDescendantProp(obj: any, path: string): any { |
|||
return path.split('.').reduce((acc, part) => acc && acc[part], obj) |
|||
} |
|||
Loading…
Reference in new issue