Commit ead7ded1 authored by ibuler's avatar ibuler

[Update] 添加树形加载中

parent 946f4110
<div> <div>
<p *ngIf="loading" style="padding: 3px">{{ "Loading"|trans }} ...</p>
<ul id="assetsTree" class="ztree"> <ul id="assetsTree" class="ztree">
{{ "Loading"|trans }} ...
</ul> </ul>
<ul id="remoteAppsTree" class="ztree"> <ul id="remoteAppsTree" class="ztree">
......
...@@ -46,6 +46,7 @@ export class ElementAssetTreeComponent implements OnInit, OnDestroy { ...@@ -46,6 +46,7 @@ export class ElementAssetTreeComponent implements OnInit, OnDestroy {
treeFilterSubscription: any; treeFilterSubscription: any;
isLoadTreeAsync: boolean; isLoadTreeAsync: boolean;
filterAssetCancel$: Subject<boolean> = new Subject(); filterAssetCancel$: Subject<boolean> = new Subject();
loading = true;
constructor(private _appSvc: AppService, constructor(private _appSvc: AppService,
private _treeFilterSvc: TreeFilterService, private _treeFilterSvc: TreeFilterService,
...@@ -103,7 +104,9 @@ export class ElementAssetTreeComponent implements OnInit, OnDestroy { ...@@ -103,7 +104,9 @@ export class ElementAssetTreeComponent implements OnInit, OnDestroy {
}; };
} }
this.loading = true;
this._http.getMyGrantedNodes(this.isLoadTreeAsync, refresh).subscribe(resp => { this._http.getMyGrantedNodes(this.isLoadTreeAsync, refresh).subscribe(resp => {
this.loading = false;
const assetsTree = $.fn.zTree.init($('#assetsTree'), setting, resp); const assetsTree = $.fn.zTree.init($('#assetsTree'), setting, resp);
this.assetsTree = assetsTree; this.assetsTree = assetsTree;
this.rootNodeAddDom(assetsTree, () => { this.rootNodeAddDom(assetsTree, () => {
...@@ -325,21 +328,22 @@ export class ElementAssetTreeComponent implements OnInit, OnDestroy { ...@@ -325,21 +328,22 @@ export class ElementAssetTreeComponent implements OnInit, OnDestroy {
this.assetsTree.removeChildNodes(searchNode[0]); this.assetsTree.removeChildNodes(searchNode[0]);
this.assetsTree.removeNode(searchNode[0]); this.assetsTree.removeNode(searchNode[0]);
} }
const treeNodes = this.assetsTree.getNodes();
if (!keyword) { if (!keyword) {
const treeNodes = this.assetsTree.getNodes();
if (treeNodes.length !== 0) { if (treeNodes.length !== 0) {
this.assetsTree.showNode(treeNodes[0]); this.assetsTree.showNode(treeNodes[0]);
} }
return; return;
} }
this.filterAssetCancel$.next(true); this.filterAssetCancel$.next(true);
if (treeNodes.length !== 0) {
this.assetsTree.hideNode(treeNodes[0]);
}
this.loading = true;
this._http.getMyGrantedAssets(keyword) this._http.getMyGrantedAssets(keyword)
.pipe(takeUntil(this.filterAssetCancel$)) .pipe(takeUntil(this.filterAssetCancel$))
.subscribe(nodes => { .subscribe(nodes => {
const treeNodes = this.assetsTree.getNodes(); this.loading = false;
if (treeNodes.length !== 0) {
this.assetsTree.hideNode(treeNodes[0]);
}
let name = translate('Search'); let name = translate('Search');
const assetsAmount = nodes.length; const assetsAmount = nodes.length;
name = `${name} (${assetsAmount})`; name = `${name} (${assetsAmount})`;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment