Igor Kulikov
7 years ago
26 changed files with 1594 additions and 26 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,51 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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-entities-hierarchy tb-absolute-fill" tb-toast toastTarget="{{ toastTargetId }}"> |
||||
|
<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)]="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="tb-entities-nav-tree-panel"> |
||||
|
<tb-nav-tree |
||||
|
[loadNodes]="loadNodes" |
||||
|
[onNodeSelected]="onNodeSelected" |
||||
|
[onNodesInserted]="onNodesInserted" |
||||
|
[editCallbacks]="nodeEditCallbacks" |
||||
|
enableSearch="true" |
||||
|
[searchCallback]="searchCallback" |
||||
|
></tb-nav-tree> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,122 @@ |
|||||
|
/** |
||||
|
* 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-context(.tb-has-timewindow) { |
||||
|
.tb-entities-hierarchy { |
||||
|
mat-toolbar { |
||||
|
height: 60px; |
||||
|
max-height: 60px; |
||||
|
.mat-toolbar-tools { |
||||
|
height: 60px; |
||||
|
max-height: 60px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host { |
||||
|
.tb-entities-hierarchy { |
||||
|
mat-toolbar.mat-table-toolbar:not([color="primary"]) { |
||||
|
background: transparent; |
||||
|
} |
||||
|
mat-toolbar { |
||||
|
min-height: 39px; |
||||
|
max-height: 39px; |
||||
|
.mat-toolbar-tools { |
||||
|
min-height: 39px; |
||||
|
max-height: 39px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-entities-nav-tree-panel { |
||||
|
overflow-x: auto; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host ::ng-deep { |
||||
|
.tb-nav-tree-container { |
||||
|
&.jstree-proton { |
||||
|
.jstree-anchor { |
||||
|
div.node-icon { |
||||
|
display: inline-block; |
||||
|
width: 22px; |
||||
|
height: 22px; |
||||
|
margin-right: 2px; |
||||
|
margin-bottom: 2px; |
||||
|
background-color: transparent; |
||||
|
background-repeat: no-repeat; |
||||
|
background-attachment: scroll; |
||||
|
background-position: center center; |
||||
|
background-size: 18px 18px; |
||||
|
} |
||||
|
|
||||
|
mat-icon.node-icon { |
||||
|
width: 22px; |
||||
|
min-width: 22px; |
||||
|
height: 22px; |
||||
|
min-height: 22px; |
||||
|
margin-right: 2px; |
||||
|
margin-bottom: 2px; |
||||
|
color: inherit; |
||||
|
vertical-align: middle; |
||||
|
|
||||
|
&.material-icons { |
||||
|
font-size: 18px; |
||||
|
line-height: 22px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.jstree-hovered:not(.jstree-clicked), |
||||
|
&.jstree-disabled { |
||||
|
div.node-icon { |
||||
|
opacity: .5; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 768px) { |
||||
|
.tb-nav-tree-container { |
||||
|
&.jstree-proton-responsive { |
||||
|
.jstree-anchor { |
||||
|
div.node-icon { |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
margin: 0; |
||||
|
background-size: 24px 24px; |
||||
|
} |
||||
|
|
||||
|
mat-icon.node-icon { |
||||
|
width: 40px; |
||||
|
min-width: 40px; |
||||
|
height: 40px; |
||||
|
min-height: 40px; |
||||
|
margin: 0; |
||||
|
|
||||
|
&.material-icons { |
||||
|
font-size: 24px; |
||||
|
line-height: 40px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,490 @@ |
|||||
|
///
|
||||
|
/// 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 { DatasourceData, DatasourceType, WidgetConfig, widgetType } from '@shared/models/widget.models'; |
||||
|
import { IWidgetSubscription, WidgetSubscriptionOptions } from '@core/api/widget-api.models'; |
||||
|
import { UtilsService } from '@core/services/utils.service'; |
||||
|
import cssjs from '@core/css/css'; |
||||
|
import { forkJoin, fromEvent, Observable, of } from 'rxjs'; |
||||
|
import { catchError, debounceTime, distinctUntilChanged, map, mergeMap, tap } from 'rxjs/operators'; |
||||
|
import { constructTableCssString } from '@home/components/widget/lib/table-widget.models'; |
||||
|
import { Overlay } from '@angular/cdk/overlay'; |
||||
|
import { |
||||
|
LoadNodesCallback, |
||||
|
NavTreeEditCallbacks, |
||||
|
NodeSearchCallback, |
||||
|
NodeSelectedCallback, |
||||
|
NodesInsertedCallback |
||||
|
} from '@shared/components/nav-tree.component'; |
||||
|
import { BaseData } from '@shared/models/base-data'; |
||||
|
import { EntityId } from '@shared/models/id/entity-id'; |
||||
|
import { EntityType } from '@shared/models/entity-type.models'; |
||||
|
import { deepClone } from '@core/utils'; |
||||
|
import { |
||||
|
defaultNodeIconFunction, |
||||
|
defaultNodeOpenedFunction, |
||||
|
defaultNodeRelationQueryFunction, |
||||
|
defaultNodesSortFunction, |
||||
|
EntitiesHierarchyWidgetSettings, |
||||
|
HierarchyNavTreeNode, |
||||
|
HierarchyNodeContext, |
||||
|
HierarchyNodeDatasource, |
||||
|
iconUrlHtml, |
||||
|
loadNodeCtxFunction, |
||||
|
materialIconHtml, |
||||
|
NodeDisabledFunction, |
||||
|
NodeHasChildrenFunction, |
||||
|
NodeIconFunction, |
||||
|
NodeOpenedFunction, |
||||
|
NodeRelationQueryFunction, |
||||
|
NodesSortFunction, |
||||
|
NodeTextFunction |
||||
|
} from '@home/components/widget/lib/entities-hierarchy-widget.models'; |
||||
|
import { EntityService } from '@core/http/entity.service'; |
||||
|
import { EntityRelationsQuery, EntitySearchDirection } from '@shared/models/relation.models'; |
||||
|
import { EntityRelationService } from '@core/http/entity-relation.service'; |
||||
|
import { ActionNotificationShow } from '@core/notification/notification.actions'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-entities-hierarchy-widget', |
||||
|
templateUrl: './entities-hierarchy-widget.component.html', |
||||
|
styleUrls: ['./entities-hierarchy-widget.component.scss'] |
||||
|
}) |
||||
|
export class EntitiesHierarchyWidgetComponent extends PageComponent implements OnInit, AfterViewInit { |
||||
|
|
||||
|
@Input() |
||||
|
ctx: WidgetContext; |
||||
|
|
||||
|
@ViewChild('searchInput', {static: false}) searchInputField: ElementRef; |
||||
|
|
||||
|
public toastTargetId = 'entities-hierarchy-' + this.utils.guid(); |
||||
|
|
||||
|
public textSearchMode = false; |
||||
|
public textSearch = null; |
||||
|
|
||||
|
public nodeEditCallbacks: NavTreeEditCallbacks = {}; |
||||
|
|
||||
|
private settings: EntitiesHierarchyWidgetSettings; |
||||
|
private widgetConfig: WidgetConfig; |
||||
|
private subscription: IWidgetSubscription; |
||||
|
private datasources: Array<HierarchyNodeDatasource>; |
||||
|
|
||||
|
private nodesMap: {[nodeId: string]: HierarchyNavTreeNode} = {}; |
||||
|
private pendingUpdateNodeTasks: {[nodeId: string]: () => void} = {}; |
||||
|
private nodeIdCounter = 0; |
||||
|
|
||||
|
private nodeRelationQueryFunction: NodeRelationQueryFunction; |
||||
|
private nodeIconFunction: NodeIconFunction; |
||||
|
private nodeTextFunction: NodeTextFunction; |
||||
|
private nodeDisabledFunction: NodeDisabledFunction; |
||||
|
private nodeOpenedFunction: NodeOpenedFunction; |
||||
|
private nodeHasChildrenFunction: NodeHasChildrenFunction; |
||||
|
private nodesSortFunction: NodesSortFunction; |
||||
|
|
||||
|
private searchAction: WidgetAction = { |
||||
|
name: 'action.search', |
||||
|
show: true, |
||||
|
icon: 'search', |
||||
|
onAction: () => { |
||||
|
this.enterFilterMode(); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private elementRef: ElementRef, |
||||
|
private overlay: Overlay, |
||||
|
private viewContainerRef: ViewContainerRef, |
||||
|
private utils: UtilsService, |
||||
|
private entityService: EntityService, |
||||
|
private entityRelationService: EntityRelationService) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.ctx.$scope.entitiesHierarchyWidget = this; |
||||
|
this.settings = this.ctx.settings; |
||||
|
this.widgetConfig = this.ctx.widgetConfig; |
||||
|
this.subscription = this.ctx.defaultSubscription; |
||||
|
this.datasources = this.subscription.datasources as Array<HierarchyNodeDatasource>; |
||||
|
this.initializeConfig(); |
||||
|
this.ctx.updateWidgetParams(); |
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit(): void { |
||||
|
fromEvent(this.searchInputField.nativeElement, 'keyup') |
||||
|
.pipe( |
||||
|
debounceTime(150), |
||||
|
distinctUntilChanged(), |
||||
|
tap(() => { |
||||
|
this.updateSearchNodes(); |
||||
|
}) |
||||
|
) |
||||
|
.subscribe(); |
||||
|
} |
||||
|
|
||||
|
public onDataUpdated() { |
||||
|
this.updateNodeData(this.subscription.data); |
||||
|
} |
||||
|
|
||||
|
private initializeConfig() { |
||||
|
this.ctx.widgetActions = [this.searchAction]; |
||||
|
|
||||
|
const testNodeCtx: HierarchyNodeContext = { |
||||
|
entity: { |
||||
|
id: { |
||||
|
entityType: EntityType.DEVICE, |
||||
|
id: '123' |
||||
|
}, |
||||
|
name: 'TEST DEV1' |
||||
|
}, |
||||
|
data: {}, |
||||
|
level: 2 |
||||
|
}; |
||||
|
const parentNodeCtx = deepClone(testNodeCtx); |
||||
|
parentNodeCtx.level = 1; |
||||
|
testNodeCtx.parentNodeCtx = parentNodeCtx; |
||||
|
|
||||
|
this.nodeRelationQueryFunction = loadNodeCtxFunction(this.settings.nodeRelationQueryFunction, 'nodeCtx', testNodeCtx); |
||||
|
this.nodeIconFunction = loadNodeCtxFunction(this.settings.nodeIconFunction, 'nodeCtx', testNodeCtx); |
||||
|
this.nodeTextFunction = loadNodeCtxFunction(this.settings.nodeTextFunction, 'nodeCtx', testNodeCtx); |
||||
|
this.nodeDisabledFunction = loadNodeCtxFunction(this.settings.nodeDisabledFunction, 'nodeCtx', testNodeCtx); |
||||
|
this.nodeOpenedFunction = loadNodeCtxFunction(this.settings.nodeOpenedFunction, 'nodeCtx', testNodeCtx); |
||||
|
this.nodeHasChildrenFunction = loadNodeCtxFunction(this.settings.nodeHasChildrenFunction, 'nodeCtx', testNodeCtx); |
||||
|
|
||||
|
const testNodeCtx2 = deepClone(testNodeCtx); |
||||
|
testNodeCtx2.entity.name = 'TEST DEV2'; |
||||
|
|
||||
|
this.nodesSortFunction = loadNodeCtxFunction(this.settings.nodesSortFunction, 'nodeCtx1,nodeCtx2', testNodeCtx, testNodeCtx2); |
||||
|
|
||||
|
this.nodeRelationQueryFunction = this.nodeRelationQueryFunction || defaultNodeRelationQueryFunction; |
||||
|
this.nodeIconFunction = this.nodeIconFunction || defaultNodeIconFunction; |
||||
|
this.nodeTextFunction = this.nodeTextFunction || ((nodeCtx) => nodeCtx.entity.name); |
||||
|
this.nodeDisabledFunction = this.nodeDisabledFunction || (() => false); |
||||
|
this.nodeOpenedFunction = this.nodeOpenedFunction || defaultNodeOpenedFunction; |
||||
|
this.nodeHasChildrenFunction = this.nodeHasChildrenFunction || (() => true); |
||||
|
this.nodesSortFunction = this.nodesSortFunction || defaultNodesSortFunction; |
||||
|
|
||||
|
const cssString = constructTableCssString(this.widgetConfig); |
||||
|
const cssParser = new cssjs(); |
||||
|
cssParser.testMode = false; |
||||
|
const namespace = 'entities-hierarchy-' + this.utils.hashCode(cssString); |
||||
|
cssParser.cssPreviewNamespace = namespace; |
||||
|
cssParser.createStyleElement(namespace, cssString); |
||||
|
$(this.elementRef.nativeElement).addClass(namespace); |
||||
|
} |
||||
|
|
||||
|
private enterFilterMode() { |
||||
|
this.textSearchMode = true; |
||||
|
this.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.textSearch = null; |
||||
|
this.updateSearchNodes(); |
||||
|
this.ctx.hideTitlePanel = false; |
||||
|
this.ctx.detectChanges(true); |
||||
|
} |
||||
|
|
||||
|
private updateSearchNodes() { |
||||
|
if (this.textSearch != null) { |
||||
|
this.nodeEditCallbacks.search(this.textSearch); |
||||
|
} else { |
||||
|
this.nodeEditCallbacks.clearSearch(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private updateNodeData(subscriptionData: Array<DatasourceData>) { |
||||
|
const affectedNodes: string[] = []; |
||||
|
if (subscriptionData) { |
||||
|
subscriptionData.forEach((datasourceData) => { |
||||
|
const datasource = datasourceData.datasource as HierarchyNodeDatasource; |
||||
|
if (datasource.nodeId) { |
||||
|
const node = this.nodesMap[datasource.nodeId]; |
||||
|
const key = datasourceData.dataKey.label; |
||||
|
let value = undefined; |
||||
|
if (datasourceData.data && datasourceData.data.length) { |
||||
|
value = datasourceData.data[0][1]; |
||||
|
} |
||||
|
if (node.data.nodeCtx.data[key] !== value) { |
||||
|
if (affectedNodes.indexOf(datasource.nodeId) === -1) { |
||||
|
affectedNodes.push(datasource.nodeId); |
||||
|
} |
||||
|
node.data.nodeCtx.data[key] = value; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
affectedNodes.forEach((nodeId) => { |
||||
|
const node: HierarchyNavTreeNode = this.nodeEditCallbacks.getNode(nodeId); |
||||
|
if (node) { |
||||
|
this.updateNodeStyle(this.nodesMap[nodeId]); |
||||
|
} else { |
||||
|
this.pendingUpdateNodeTasks[nodeId] = () => { |
||||
|
this.updateNodeStyle(this.nodesMap[nodeId]); |
||||
|
}; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public loadNodes: LoadNodesCallback = (node, cb) => { |
||||
|
if (node.id === '#') { |
||||
|
const tasks: Observable<HierarchyNavTreeNode>[] = []; |
||||
|
this.datasources.forEach((datasource) => { |
||||
|
tasks.push(this.datasourceToNode(datasource)); |
||||
|
}); |
||||
|
forkJoin(tasks).subscribe((nodes) => { |
||||
|
cb(this.prepareNodes(nodes)); |
||||
|
this.updateNodeData(this.subscription.data); |
||||
|
}); |
||||
|
} else { |
||||
|
if (node.data && node.data.nodeCtx.entity && node.data.nodeCtx.entity.id && node.data.nodeCtx.entity.id.entityType !== 'function') { |
||||
|
const relationQuery = this.prepareNodeRelationQuery(node.data.nodeCtx); |
||||
|
this.entityRelationService.findByQuery(relationQuery, {ignoreErrors: true, ignoreLoading: true}).subscribe( |
||||
|
(entityRelations) => { |
||||
|
if (entityRelations.length) { |
||||
|
const tasks: Observable<HierarchyNavTreeNode>[] = []; |
||||
|
entityRelations.forEach((relation) => { |
||||
|
const targetId = relationQuery.parameters.direction === EntitySearchDirection.FROM ? relation.to : relation.from; |
||||
|
tasks.push(this.entityIdToNode(targetId.entityType as EntityType, targetId.id, node.data.datasource, node.data.nodeCtx)); |
||||
|
}); |
||||
|
forkJoin(tasks).subscribe((nodes) => { |
||||
|
cb(this.prepareNodes(nodes)); |
||||
|
}); |
||||
|
} else { |
||||
|
cb([]); |
||||
|
} |
||||
|
}, |
||||
|
(error) => { |
||||
|
let errorText = 'Failed to get relations!'; |
||||
|
if (error && error.status === 400) { |
||||
|
errorText = 'Invalid relations query returned by \'Node relations query function\'! Please check widget configuration!'; |
||||
|
} |
||||
|
this.showError(errorText); |
||||
|
} |
||||
|
); |
||||
|
} else { |
||||
|
cb([]); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
public onNodeSelected: NodeSelectedCallback = (node, event) => { |
||||
|
let nodeId; |
||||
|
if (!node) { |
||||
|
nodeId = -1; |
||||
|
} else { |
||||
|
nodeId = node.id; |
||||
|
} |
||||
|
if (nodeId !== -1) { |
||||
|
const selectedNode = this.nodesMap[nodeId]; |
||||
|
if (selectedNode) { |
||||
|
const descriptors = this.ctx.actionsApi.getActionDescriptors('nodeSelected'); |
||||
|
if (descriptors.length) { |
||||
|
const entity = selectedNode.data.nodeCtx.entity; |
||||
|
this.ctx.actionsApi.handleWidgetAction(event, descriptors[0], entity.id, entity.name, { nodeCtx: selectedNode.data.nodeCtx }); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
public onNodesInserted: NodesInsertedCallback = (nodes, parent) => { |
||||
|
if (nodes) { |
||||
|
nodes.forEach((nodeId) => { |
||||
|
const task = this.pendingUpdateNodeTasks[nodeId]; |
||||
|
if (task) { |
||||
|
task(); |
||||
|
delete this.pendingUpdateNodeTasks[nodeId]; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
public searchCallback: NodeSearchCallback = (searchText, node) => { |
||||
|
const theNode = this.nodesMap[node.id]; |
||||
|
if (theNode && theNode.data.searchText) { |
||||
|
return theNode.data.searchText.includes(searchText.toLowerCase()); |
||||
|
} |
||||
|
return false; |
||||
|
}; |
||||
|
|
||||
|
private updateNodeStyle(node: HierarchyNavTreeNode) { |
||||
|
const newText = this.prepareNodeText(node); |
||||
|
if (node.text !== newText) { |
||||
|
node.text = newText; |
||||
|
this.nodeEditCallbacks.updateNode(node.id, node.text); |
||||
|
} |
||||
|
const newDisabled = this.nodeDisabledFunction(node.data.nodeCtx); |
||||
|
if (node.state.disabled !== newDisabled) { |
||||
|
node.state.disabled = newDisabled; |
||||
|
if (node.state.disabled) { |
||||
|
this.nodeEditCallbacks.disableNode(node.id); |
||||
|
} else { |
||||
|
this.nodeEditCallbacks.enableNode(node.id); |
||||
|
} |
||||
|
} |
||||
|
const newHasChildren = this.nodeHasChildrenFunction(node.data.nodeCtx); |
||||
|
if (node.children !== newHasChildren) { |
||||
|
node.children = newHasChildren; |
||||
|
this.nodeEditCallbacks.setNodeHasChildren(node.id, node.children); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private showError(errorText: string) { |
||||
|
this.store.dispatch(new ActionNotificationShow( |
||||
|
{ |
||||
|
message: errorText, |
||||
|
type: 'error', |
||||
|
target: this.toastTargetId, |
||||
|
verticalPosition: 'bottom', |
||||
|
horizontalPosition: 'left' |
||||
|
})); |
||||
|
} |
||||
|
|
||||
|
private prepareNodes(nodes: HierarchyNavTreeNode[]): HierarchyNavTreeNode[] { |
||||
|
nodes = nodes.filter((node) => node !== null); |
||||
|
nodes.sort((node1, node2) => this.nodesSortFunction(node1.data.nodeCtx, node2.data.nodeCtx)); |
||||
|
return nodes; |
||||
|
} |
||||
|
|
||||
|
private prepareNodeText(node: HierarchyNavTreeNode): string { |
||||
|
const nodeIcon = this.prepareNodeIcon(node.data.nodeCtx); |
||||
|
const nodeText = this.nodeTextFunction(node.data.nodeCtx); |
||||
|
node.data.searchText = nodeText ? nodeText.replace(/<[^>]+>/g, '').toLowerCase() : ''; |
||||
|
return nodeIcon + nodeText; |
||||
|
} |
||||
|
|
||||
|
private prepareNodeIcon(nodeCtx: HierarchyNodeContext): string { |
||||
|
let iconInfo = this.nodeIconFunction(nodeCtx); |
||||
|
if (iconInfo) { |
||||
|
if (iconInfo === 'default') { |
||||
|
iconInfo = defaultNodeIconFunction(nodeCtx); |
||||
|
} |
||||
|
if (iconInfo && iconInfo !== 'default' && (iconInfo.iconUrl || iconInfo.materialIcon)) { |
||||
|
if (iconInfo.materialIcon) { |
||||
|
return materialIconHtml(iconInfo.materialIcon); |
||||
|
} else { |
||||
|
return iconUrlHtml(iconInfo.iconUrl); |
||||
|
} |
||||
|
} else { |
||||
|
return ''; |
||||
|
} |
||||
|
} else { |
||||
|
return ''; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private datasourceToNode(datasource: HierarchyNodeDatasource, parentNodeCtx?: HierarchyNodeContext): Observable<HierarchyNavTreeNode> { |
||||
|
return this.resolveEntity(datasource).pipe( |
||||
|
map(entity => { |
||||
|
if (entity !== null) { |
||||
|
const node: HierarchyNavTreeNode = { |
||||
|
id: (++this.nodeIdCounter)+'' |
||||
|
}; |
||||
|
this.nodesMap[node.id] = node; |
||||
|
datasource.nodeId = node.id; |
||||
|
node.icon = false; |
||||
|
const nodeCtx: HierarchyNodeContext = { |
||||
|
parentNodeCtx, |
||||
|
entity, |
||||
|
data: {} |
||||
|
}; |
||||
|
nodeCtx.level = parentNodeCtx ? parentNodeCtx.level + 1 : 1; |
||||
|
node.data = { |
||||
|
datasource, |
||||
|
nodeCtx |
||||
|
}; |
||||
|
node.state = { |
||||
|
disabled: this.nodeDisabledFunction(node.data.nodeCtx), |
||||
|
opened: this.nodeOpenedFunction(node.data.nodeCtx) |
||||
|
}; |
||||
|
node.text = this.prepareNodeText(node); |
||||
|
node.children = this.nodeHasChildrenFunction(node.data.nodeCtx); |
||||
|
return node; |
||||
|
} else { |
||||
|
return null; |
||||
|
} |
||||
|
}) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
private entityIdToNode(entityType: EntityType, entityId: string, |
||||
|
parentDatasource: HierarchyNodeDatasource, |
||||
|
parentNodeCtx: HierarchyNodeContext): Observable<HierarchyNavTreeNode> { |
||||
|
const datasource = { |
||||
|
dataKeys: parentDatasource.dataKeys, |
||||
|
type: DatasourceType.entity, |
||||
|
entityType, |
||||
|
entityId |
||||
|
} as HierarchyNodeDatasource; |
||||
|
return this.datasourceToNode(datasource, parentNodeCtx).pipe( |
||||
|
mergeMap((node) => { |
||||
|
if (node != null) { |
||||
|
const subscriptionOptions: WidgetSubscriptionOptions = { |
||||
|
type: widgetType.latest, |
||||
|
datasources: [datasource], |
||||
|
callbacks: { |
||||
|
onDataUpdated: subscription => { |
||||
|
this.updateNodeData(subscription.data); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
return this.ctx.subscriptionApi. |
||||
|
createSubscription(subscriptionOptions, true).pipe( |
||||
|
map(() => node)); |
||||
|
} else { |
||||
|
return of(node); |
||||
|
} |
||||
|
}) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
private resolveEntity(datasource: HierarchyNodeDatasource): Observable<BaseData<EntityId>> { |
||||
|
if (datasource.type === DatasourceType.function) { |
||||
|
const entity = { |
||||
|
id: { |
||||
|
entityType: 'function' |
||||
|
}, |
||||
|
name: datasource.name |
||||
|
}; |
||||
|
return of(entity as BaseData<EntityId>); |
||||
|
} else { |
||||
|
return this.entityService.getEntity(datasource.entityType, datasource.entityId, {ignoreLoading: true}).pipe( |
||||
|
catchError(err => of(null)) |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private prepareNodeRelationQuery(nodeCtx: HierarchyNodeContext): EntityRelationsQuery { |
||||
|
let relationQuery = this.nodeRelationQueryFunction(nodeCtx); |
||||
|
if (relationQuery && relationQuery === 'default') { |
||||
|
relationQuery = defaultNodeRelationQueryFunction(nodeCtx); |
||||
|
} |
||||
|
return relationQuery as EntityRelationsQuery; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,160 @@ |
|||||
|
///
|
||||
|
/// 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 { BaseData } from '@shared/models/base-data'; |
||||
|
import { EntityId } from '@shared/models/id/entity-id'; |
||||
|
import { NavTreeNode } from '@shared/components/nav-tree.component'; |
||||
|
import { Datasource } from '@shared/models/widget.models'; |
||||
|
import { isDefined, isUndefined } from '@core/utils'; |
||||
|
import { EntityRelationsQuery, EntitySearchDirection, RelationTypeGroup } from '@shared/models/relation.models'; |
||||
|
import { EntityType } from '@shared/models/entity-type.models'; |
||||
|
|
||||
|
export interface EntitiesHierarchyWidgetSettings { |
||||
|
nodeRelationQueryFunction: string; |
||||
|
nodeHasChildrenFunction: string; |
||||
|
nodeOpenedFunction: string; |
||||
|
nodeDisabledFunction: string; |
||||
|
nodeIconFunction: string; |
||||
|
nodeTextFunction: string; |
||||
|
nodesSortFunction: string; |
||||
|
} |
||||
|
|
||||
|
export interface HierarchyNodeContext { |
||||
|
parentNodeCtx?: HierarchyNodeContext; |
||||
|
entity: BaseData<EntityId>; |
||||
|
level?: number; |
||||
|
data: {[key: string]: any}; |
||||
|
} |
||||
|
|
||||
|
export interface HierarchyNavTreeNode extends NavTreeNode { |
||||
|
data?: { |
||||
|
datasource: HierarchyNodeDatasource; |
||||
|
nodeCtx: HierarchyNodeContext; |
||||
|
searchText?: string; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export interface HierarchyNodeDatasource extends Datasource { |
||||
|
nodeId: string; |
||||
|
} |
||||
|
|
||||
|
export interface HierarchyNodeIconInfo { |
||||
|
iconUrl?: string; |
||||
|
materialIcon?: string; |
||||
|
} |
||||
|
|
||||
|
export type NodeRelationQueryFunction = (nodeCtx: HierarchyNodeContext) => EntityRelationsQuery | 'default'; |
||||
|
export type NodeTextFunction = (nodeCtx: HierarchyNodeContext) => string; |
||||
|
export type NodeDisabledFunction = (nodeCtx: HierarchyNodeContext) => boolean; |
||||
|
export type NodeIconFunction = (nodeCtx: HierarchyNodeContext) => HierarchyNodeIconInfo | 'default'; |
||||
|
export type NodeOpenedFunction = (nodeCtx: HierarchyNodeContext) => boolean; |
||||
|
export type NodeHasChildrenFunction = (nodeCtx: HierarchyNodeContext) => boolean; |
||||
|
export type NodesSortFunction = (nodeCtx1: HierarchyNodeContext, nodeCtx2: HierarchyNodeContext) => number; |
||||
|
|
||||
|
export function loadNodeCtxFunction<F extends Function>(functionBody: string, argNames: string, ...args: any[]): F { |
||||
|
let nodeCtxFunction: F = null; |
||||
|
if (isDefined(functionBody) && functionBody.length) { |
||||
|
try { |
||||
|
nodeCtxFunction = new Function(argNames, functionBody) as F; |
||||
|
const res = nodeCtxFunction.apply(null, args); |
||||
|
if (isUndefined(res)) { |
||||
|
nodeCtxFunction = null; |
||||
|
} |
||||
|
} catch (e) { |
||||
|
nodeCtxFunction = null; |
||||
|
} |
||||
|
} |
||||
|
return nodeCtxFunction; |
||||
|
} |
||||
|
|
||||
|
export function materialIconHtml(materialIcon: string): string { |
||||
|
return '<mat-icon class="node-icon material-icons" role="img" aria-hidden="false">'+materialIcon+'</mat-icon>'; |
||||
|
} |
||||
|
|
||||
|
export function iconUrlHtml(iconUrl: string): string { |
||||
|
return '<div class="node-icon" style="background-image: url('+iconUrl+');"> </div>'; |
||||
|
} |
||||
|
|
||||
|
export const defaultNodeRelationQueryFunction: NodeRelationQueryFunction = nodeCtx => { |
||||
|
const entity = nodeCtx.entity; |
||||
|
const query: EntityRelationsQuery = { |
||||
|
parameters: { |
||||
|
rootId: entity.id.id, |
||||
|
rootType: entity.id.entityType as EntityType, |
||||
|
direction: EntitySearchDirection.FROM, |
||||
|
relationTypeGroup: RelationTypeGroup.COMMON, |
||||
|
maxLevel: 1 |
||||
|
}, |
||||
|
filters: [ |
||||
|
{ |
||||
|
relationType: "Contains", |
||||
|
entityTypes: [] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
return query; |
||||
|
}; |
||||
|
|
||||
|
export const defaultNodeIconFunction: NodeIconFunction = nodeCtx => { |
||||
|
let materialIcon = 'insert_drive_file'; |
||||
|
const entity = nodeCtx.entity; |
||||
|
if (entity && entity.id && entity.id.entityType) { |
||||
|
switch (entity.id.entityType as EntityType | string) { |
||||
|
case 'function': |
||||
|
materialIcon = 'functions'; |
||||
|
break; |
||||
|
case EntityType.DEVICE: |
||||
|
materialIcon = 'devices_other'; |
||||
|
break; |
||||
|
case EntityType.ASSET: |
||||
|
materialIcon = 'domain'; |
||||
|
break; |
||||
|
case EntityType.TENANT: |
||||
|
materialIcon = 'supervisor_account'; |
||||
|
break; |
||||
|
case EntityType.CUSTOMER: |
||||
|
materialIcon = 'supervisor_account'; |
||||
|
break; |
||||
|
case EntityType.USER: |
||||
|
materialIcon = 'account_circle'; |
||||
|
break; |
||||
|
case EntityType.DASHBOARD: |
||||
|
materialIcon = 'dashboards'; |
||||
|
break; |
||||
|
case EntityType.ALARM: |
||||
|
materialIcon = 'notifications_active'; |
||||
|
break; |
||||
|
case EntityType.ENTITY_VIEW: |
||||
|
materialIcon = 'view_quilt'; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
materialIcon |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
export const defaultNodeOpenedFunction: NodeOpenedFunction = nodeCtx => { |
||||
|
return nodeCtx.level <= 4; |
||||
|
}; |
||||
|
|
||||
|
export const defaultNodesSortFunction: NodesSortFunction = (nodeCtx1, nodeCtx2) => { |
||||
|
let result = nodeCtx1.entity.id.entityType.localeCompare(nodeCtx2.entity.id.entityType); |
||||
|
if (result === 0) { |
||||
|
result = nodeCtx1.entity.name.localeCompare(nodeCtx2.entity.name); |
||||
|
} |
||||
|
return result; |
||||
|
}; |
||||
@ -0,0 +1,18 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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-nav-tree-container"></div> |
||||
@ -0,0 +1,347 @@ |
|||||
|
/** |
||||
|
* 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. |
||||
|
*/ |
||||
|
.tb-nav-tree-container { |
||||
|
padding: 15px; |
||||
|
font-family: Roboto, "Helvetica Neue", sans-serif; |
||||
|
|
||||
|
&.jstree-proton { |
||||
|
.jstree-node, |
||||
|
.jstree-icon { |
||||
|
background-image: url("../../../assets/jstree/32px.png"); |
||||
|
} |
||||
|
|
||||
|
.jstree-last { |
||||
|
background: transparent; |
||||
|
} |
||||
|
|
||||
|
.jstree-themeicon-custom { |
||||
|
background-image: none; |
||||
|
|
||||
|
&.material-icons { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.jstree-anchor { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.jstree-proton-small { |
||||
|
.jstree-node, |
||||
|
.jstree-icon { |
||||
|
background-image: url("../../../assets/jstree/32px.png"); |
||||
|
} |
||||
|
|
||||
|
.jstree-last { |
||||
|
background: transparent; |
||||
|
} |
||||
|
|
||||
|
.jstree-themeicon-custom { |
||||
|
background-image: none; |
||||
|
|
||||
|
&.material-icons { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.jstree-anchor { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.jstree-proton-large { |
||||
|
.jstree-node, |
||||
|
.jstree-icon { |
||||
|
background-image: url("../../../assets/jstree/32px.png"); |
||||
|
} |
||||
|
|
||||
|
.jstree-last { |
||||
|
background: transparent; |
||||
|
} |
||||
|
|
||||
|
.jstree-themeicon-custom { |
||||
|
background-image: none; |
||||
|
|
||||
|
&.material-icons { |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.jstree-anchor { |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
border-bottom: none; |
||||
|
|
||||
|
i.jstree-themeicon-custom { |
||||
|
&.tb-user-group { |
||||
|
&::before { |
||||
|
content: "account_circle"; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.tb-customer-group { |
||||
|
&::before { |
||||
|
content: "supervisor_account"; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.tb-asset-group { |
||||
|
&::before { |
||||
|
content: "domain"; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.tb-device-group { |
||||
|
&::before { |
||||
|
content: "devices_other"; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.tb-entity-view-group { |
||||
|
&::before { |
||||
|
content: "view_quilt"; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.tb-dashboard-group { |
||||
|
&::before { |
||||
|
content: "dashboard"; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.tb-customer { |
||||
|
&::before { |
||||
|
content: "supervisor_account"; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 768px) { |
||||
|
.tb-nav-tree-container { |
||||
|
&.jstree-proton-responsive { |
||||
|
.jstree-node, |
||||
|
.jstree-icon, |
||||
|
.jstree-node > .jstree-ocl, |
||||
|
.jstree-themeicon, |
||||
|
.jstree-checkbox { |
||||
|
background-image: url("../../../assets/jstree/40px.png"); |
||||
|
background-size: 120px 240px; |
||||
|
} |
||||
|
|
||||
|
.jstree-container-ul { |
||||
|
overflow: visible; |
||||
|
} |
||||
|
|
||||
|
.jstree-themeicon-custom { |
||||
|
background-color: transparent; |
||||
|
background-image: none; |
||||
|
background-position: 0 0; |
||||
|
|
||||
|
&.material-icons { |
||||
|
margin: 0; |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.jstree-node, |
||||
|
.jstree-leaf > .jstree-ocl { |
||||
|
background: 0 0; |
||||
|
} |
||||
|
|
||||
|
.jstree-node { |
||||
|
min-width: 40px; |
||||
|
min-height: 40px; |
||||
|
margin-left: 40px; |
||||
|
line-height: 40px; |
||||
|
white-space: nowrap; |
||||
|
background-repeat: repeat-y; |
||||
|
background-position: -80px 0; |
||||
|
} |
||||
|
|
||||
|
.jstree-last { |
||||
|
background: 0 0; |
||||
|
} |
||||
|
|
||||
|
.jstree-anchor { |
||||
|
height: 40px; |
||||
|
font-size: 1.1em; |
||||
|
font-weight: 700; |
||||
|
line-height: 40px; |
||||
|
text-shadow: 1px 1px #fff; |
||||
|
} |
||||
|
|
||||
|
.jstree-icon, |
||||
|
.jstree-icon:empty { |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
} |
||||
|
|
||||
|
> { |
||||
|
.jstree-container-ul > .jstree-node { |
||||
|
margin-right: 0; |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.jstree-ocl, |
||||
|
.jstree-themeicon, |
||||
|
.jstree-checkbox { |
||||
|
background-size: 120px 240px; |
||||
|
} |
||||
|
|
||||
|
.jstree-leaf > .jstree-ocl { |
||||
|
background: 0 0; |
||||
|
background-position: -40px -120px; |
||||
|
} |
||||
|
|
||||
|
.jstree-last > .jstree-ocl { |
||||
|
background-position: -40px -160px; |
||||
|
} |
||||
|
|
||||
|
.jstree-open > .jstree-ocl { |
||||
|
background-position: 0 0 !important; |
||||
|
} |
||||
|
|
||||
|
.jstree-closed > .jstree-ocl { |
||||
|
background-position: 0 -40px !important; |
||||
|
} |
||||
|
|
||||
|
.jstree-themeicon { |
||||
|
background-position: -40px -40px; |
||||
|
} |
||||
|
|
||||
|
.jstree-checkbox, |
||||
|
.jstree-checkbox:hover { |
||||
|
background-position: -40px -80px; |
||||
|
} |
||||
|
|
||||
|
&.jstree-checkbox-selection { |
||||
|
.jstree-clicked > .jstree-checkbox, |
||||
|
.jstree-clicked > .jstree-checkbox:hover { |
||||
|
background-position: 0 -80px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.jstree-checked > .jstree-checkbox, |
||||
|
.jstree-checked > .jstree-checkbox:hover { |
||||
|
background-position: 0 -80px; |
||||
|
} |
||||
|
|
||||
|
.jstree-anchor > .jstree-undetermined, |
||||
|
.jstree-anchor > .jstree-undetermined:hover { |
||||
|
background-position: 0 -120px; |
||||
|
} |
||||
|
|
||||
|
.jstree-striped { |
||||
|
background: 0 0; |
||||
|
} |
||||
|
|
||||
|
.jstree-wholerow { |
||||
|
height: 40px; |
||||
|
background: #ebebeb; |
||||
|
border-top: 1px solid rgba(255, 255, 255, .7); |
||||
|
border-bottom: 1px solid rgba(64, 64, 64, .2); |
||||
|
} |
||||
|
|
||||
|
.jstree-wholerow-hovered { |
||||
|
background: #e7f4f9; |
||||
|
} |
||||
|
|
||||
|
.jstree-wholerow-clicked { |
||||
|
background: #beebff; |
||||
|
} |
||||
|
|
||||
|
.jstree-children { |
||||
|
.jstree-last > .jstree-wholerow { |
||||
|
box-shadow: inset 0 -6px 3px -5px #666; |
||||
|
} |
||||
|
|
||||
|
.jstree-open > .jstree-wholerow { |
||||
|
border-top: 0; |
||||
|
box-shadow: inset 0 6px 3px -5px #666; |
||||
|
} |
||||
|
|
||||
|
.jstree-open + .jstree-open { |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.jstree-rtl { |
||||
|
.jstree-node { |
||||
|
margin-right: 40px; |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
|
||||
|
.jstree-container-ul > .jstree-node { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
.jstree-closed > .jstree-ocl { |
||||
|
background-position: -40px 0 !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-nav-tree .mat-button.tb-active { |
||||
|
font-weight: 500; |
||||
|
background-color: rgba(255, 255, 255, .15); |
||||
|
} |
||||
|
|
||||
|
.tb-nav-tree, |
||||
|
.tb-nav-tree ul { |
||||
|
margin-top: 0; |
||||
|
list-style: none; |
||||
|
|
||||
|
&:first-child { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
li { |
||||
|
.mat-button { |
||||
|
width: 100%; |
||||
|
max-height: 40px; |
||||
|
padding: 0 16px; |
||||
|
margin: 0; |
||||
|
overflow: hidden; |
||||
|
line-height: 40px; |
||||
|
color: inherit; |
||||
|
text-align: left; |
||||
|
text-decoration: none; |
||||
|
text-overflow: ellipsis; |
||||
|
text-transform: none; |
||||
|
text-rendering: optimizeLegibility; |
||||
|
white-space: nowrap; |
||||
|
cursor: pointer; |
||||
|
border-radius: 0; |
||||
|
|
||||
|
span { |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,272 @@ |
|||||
|
///
|
||||
|
/// 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, Input, NgZone, OnInit, ViewEncapsulation } from '@angular/core'; |
||||
|
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
||||
|
import { deepClone } from '@core/utils'; |
||||
|
|
||||
|
export interface NavTreeNodeState { |
||||
|
disabled?: boolean; |
||||
|
opened?: boolean; |
||||
|
loaded?: boolean; |
||||
|
} |
||||
|
|
||||
|
export interface NavTreeNode { |
||||
|
id: string; |
||||
|
icon?: boolean; |
||||
|
text?: string; |
||||
|
state?: NavTreeNodeState; |
||||
|
children?: NavTreeNode[] | boolean; |
||||
|
data?: any; |
||||
|
} |
||||
|
|
||||
|
export interface NavTreeEditCallbacks { |
||||
|
selectNode?: (id: string) => void; |
||||
|
deselectAll?: () => void; |
||||
|
getNode?: (id: string) => NavTreeNode; |
||||
|
getParentNodeId?: (id: string) => string; |
||||
|
openNode?: (id: string, cb?: () => void) => void; |
||||
|
nodeIsOpen?: (id: string) => boolean; |
||||
|
nodeIsLoaded?: (id: string) => boolean; |
||||
|
refreshNode?: (id: string) => void; |
||||
|
updateNode?: (id: string, newName: string) => void; |
||||
|
createNode?: (parentId: string, node: NavTreeNode, pos: number) => void; |
||||
|
deleteNode?: (id: string) => void; |
||||
|
disableNode?: (id: string) => void; |
||||
|
enableNode?: (id: string) => void; |
||||
|
setNodeHasChildren?: (id: string, hasChildren: boolean) => void; |
||||
|
search?: (searchText: string) => void; |
||||
|
clearSearch?: () => void; |
||||
|
} |
||||
|
|
||||
|
export type NodesCallback = (nodes: NavTreeNode[]) => void; |
||||
|
export type LoadNodesCallback = (node: NavTreeNode, cb: NodesCallback) => void; |
||||
|
export type NodeSearchCallback = (searchText: string, node: NavTreeNode) => boolean; |
||||
|
export type NodeSelectedCallback = (node: NavTreeNode, event: Event) => void; |
||||
|
export type NodesInsertedCallback = (nodes: string[], parent: string) => void; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-nav-tree', |
||||
|
templateUrl: './nav-tree.component.html', |
||||
|
styleUrls: ['./nav-tree.component.scss'], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class NavTreeComponent implements OnInit { |
||||
|
|
||||
|
private enableSearchValue: boolean; |
||||
|
get enableSearch(): boolean { |
||||
|
return this.enableSearchValue; |
||||
|
} |
||||
|
@Input() |
||||
|
set enableSearch(value: boolean) { |
||||
|
this.enableSearchValue = coerceBooleanProperty(value); |
||||
|
} |
||||
|
|
||||
|
@Input() |
||||
|
private loadNodes: LoadNodesCallback; |
||||
|
|
||||
|
@Input() |
||||
|
private searchCallback: NodeSearchCallback; |
||||
|
|
||||
|
@Input() |
||||
|
private onNodeSelected: NodeSelectedCallback; |
||||
|
|
||||
|
@Input() |
||||
|
private onNodesInserted: NodesInsertedCallback; |
||||
|
|
||||
|
@Input() |
||||
|
private editCallbacks: NavTreeEditCallbacks; |
||||
|
|
||||
|
private treeElement: JSTree; |
||||
|
|
||||
|
constructor(private elementRef: ElementRef<HTMLElement>, |
||||
|
private ngZone: NgZone) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.initTree(); |
||||
|
} |
||||
|
|
||||
|
private initTree() { |
||||
|
|
||||
|
const loadNodes: LoadNodesCallback = (node, cb) => { |
||||
|
const outCb = (_nodes: NavTreeNode[]) => { |
||||
|
const copied: NavTreeNode[] = []; |
||||
|
if (_nodes) { |
||||
|
_nodes.forEach((n) => { |
||||
|
copied.push(deepClone(n, ['data'])); |
||||
|
}); |
||||
|
} |
||||
|
cb(copied); |
||||
|
}; |
||||
|
this.ngZone.runOutsideAngular(() => { |
||||
|
this.loadNodes(node, outCb); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const config: JSTreeStaticDefaults = { |
||||
|
core: { |
||||
|
worker: false, |
||||
|
multiple: false, |
||||
|
check_callback: true, |
||||
|
themes: { name: 'proton', responsive: true }, |
||||
|
data: loadNodes, |
||||
|
error: () => { |
||||
|
console.error('Unexpected jstree error!'); |
||||
|
} |
||||
|
}, |
||||
|
plugins: [] |
||||
|
}; |
||||
|
|
||||
|
if (this.enableSearch) { |
||||
|
config.plugins.push('search'); |
||||
|
config.search = { |
||||
|
ajax: false, |
||||
|
fuzzy: false, |
||||
|
close_opened_onclear: true, |
||||
|
case_sensitive: false, |
||||
|
show_only_matches: true, |
||||
|
show_only_matches_children: false, |
||||
|
search_leaves_only: false, |
||||
|
search_callback: this.searchCallback |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
this.treeElement = $('.tb-nav-tree-container', this.elementRef.nativeElement).jstree(config); |
||||
|
|
||||
|
this.treeElement.on('changed.jstree', (e, data) => { |
||||
|
const node: NavTreeNode = data.instance.get_selected(true)[0]; |
||||
|
if (this.onNodeSelected) { |
||||
|
this.onNodeSelected(node, e); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
this.treeElement.on('model.jstree', (e, data) => { |
||||
|
if (this.onNodesInserted) { |
||||
|
this.onNodesInserted(data.nodes, data.parent); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
if (this.editCallbacks) { |
||||
|
this.editCallbacks.selectNode = id => { |
||||
|
const node: NavTreeNode = this.treeElement.jstree('get_node', id); |
||||
|
if (node) { |
||||
|
this.treeElement.jstree('deselect_all', true); |
||||
|
this.treeElement.jstree('select_node', node); |
||||
|
} |
||||
|
}; |
||||
|
this.editCallbacks.deselectAll = () => { |
||||
|
this.treeElement.jstree('deselect_all'); |
||||
|
}; |
||||
|
this.editCallbacks.getNode = (id) => { |
||||
|
const node: NavTreeNode = this.treeElement.jstree('get_node', id); |
||||
|
return node; |
||||
|
}; |
||||
|
this.editCallbacks.getParentNodeId = (id) => { |
||||
|
const node: NavTreeNode = this.treeElement.jstree('get_node', id); |
||||
|
if (node) { |
||||
|
return this.treeElement.jstree('get_parent', node); |
||||
|
} |
||||
|
}; |
||||
|
this.editCallbacks.openNode = (id, cb) => { |
||||
|
const node: NavTreeNode = this.treeElement.jstree('get_node', id); |
||||
|
if (node) { |
||||
|
this.treeElement.jstree('open_node', node, cb); |
||||
|
} |
||||
|
}; |
||||
|
this.editCallbacks.nodeIsOpen = (id) => { |
||||
|
const node: NavTreeNode = this.treeElement.jstree('get_node', id); |
||||
|
if (node) { |
||||
|
return this.treeElement.jstree('is_open', node); |
||||
|
} else { |
||||
|
return true; |
||||
|
} |
||||
|
}; |
||||
|
this.editCallbacks.nodeIsLoaded = (id) => { |
||||
|
const node: NavTreeNode = this.treeElement.jstree('get_node', id); |
||||
|
if (node) { |
||||
|
return this.treeElement.jstree('is_loaded', node); |
||||
|
} else { |
||||
|
return true; |
||||
|
} |
||||
|
}; |
||||
|
this.editCallbacks.refreshNode = (id) => { |
||||
|
if (id === '#') { |
||||
|
this.treeElement.jstree('refresh'); |
||||
|
this.treeElement.jstree('redraw'); |
||||
|
} else { |
||||
|
const node: NavTreeNode = this.treeElement.jstree('get_node', id); |
||||
|
if (node) { |
||||
|
const opened = this.treeElement.jstree('is_open', node); |
||||
|
this.treeElement.jstree('refresh_node', node); |
||||
|
this.treeElement.jstree('redraw'); |
||||
|
if (node.children && opened/* && !node.children.length*/) { |
||||
|
this.treeElement.jstree('open_node', node); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
this.editCallbacks.updateNode = (id, newName) => { |
||||
|
const node: NavTreeNode = this.treeElement.jstree('get_node', id); |
||||
|
if (node) { |
||||
|
this.treeElement.jstree('rename_node', node, newName); |
||||
|
} |
||||
|
}; |
||||
|
this.editCallbacks.createNode = (parentId, node, pos) => { |
||||
|
const parentNode: NavTreeNode = this.treeElement.jstree('get_node', parentId); |
||||
|
if (parentNode) { |
||||
|
this.treeElement.jstree('create_node', parentNode, node, pos); |
||||
|
} |
||||
|
}; |
||||
|
this.editCallbacks.deleteNode = (id) => { |
||||
|
const node: NavTreeNode = this.treeElement.jstree('get_node', id); |
||||
|
if (node) { |
||||
|
this.treeElement.jstree('delete_node', node); |
||||
|
} |
||||
|
}; |
||||
|
this.editCallbacks.disableNode = (id) => { |
||||
|
const node: NavTreeNode = this.treeElement.jstree('get_node', id); |
||||
|
if (node) { |
||||
|
this.treeElement.jstree('disable_node', node); |
||||
|
} |
||||
|
}; |
||||
|
this.editCallbacks.enableNode = (id) => { |
||||
|
const node: NavTreeNode = this.treeElement.jstree('get_node', id); |
||||
|
if (node) { |
||||
|
this.treeElement.jstree('enable_node', node); |
||||
|
} |
||||
|
}; |
||||
|
this.editCallbacks.setNodeHasChildren = (id, hasChildren) => { |
||||
|
const node: NavTreeNode = this.treeElement.jstree('get_node', id); |
||||
|
if (node) { |
||||
|
if (!node.children || (Array.isArray(node.children) && !node.children.length)) { |
||||
|
node.children = hasChildren; |
||||
|
node.state.loaded = !hasChildren; |
||||
|
node.state.opened = false; |
||||
|
this.treeElement.jstree('_node_changed', node.id); |
||||
|
this.treeElement.jstree('redraw'); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
this.editCallbacks.search = (searchText) => { |
||||
|
this.treeElement.jstree('search', searchText); |
||||
|
}; |
||||
|
this.editCallbacks.clearSearch = () => { |
||||
|
this.treeElement.jstree('clear_search'); |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,29 @@ |
|||||
|
///
|
||||
|
/// 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.
|
||||
|
///
|
||||
|
|
||||
|
interface JSTreeEventData { |
||||
|
instance: JSTree; |
||||
|
} |
||||
|
|
||||
|
interface JSTreeModelEventData extends JSTreeEventData { |
||||
|
nodes: string[]; |
||||
|
parent: string; |
||||
|
} |
||||
|
|
||||
|
interface JQuery { |
||||
|
on(events: 'changed.jstree', handler: (e: Event, data: JSTreeEventData) => void): this; |
||||
|
on(events: 'model.jstree', handler: (e: Event, data: JSTreeModelEventData) => void): this; |
||||
|
} |
||||
Loading…
Reference in new issue