[Update] 暂存

src/app/app.module.ts

@@ -16,7 +16,7 @@ import {AppRouterModule} from './router/router.module';
 import {AppComponent} from './pages/app.component';
 
 // service
-import {AppService, HttpService, LocalStorageService, LogService, UUIDService} from './app.service';
+import {AppService, HttpService, LocalStorageService, NavService, LogService, UUIDService} from './app.service';
 
 
 import {CookieService} from 'ngx-cookie-service';
@@ -66,6 +66,7 @@ import {SftpComponent} from './elements/sftp/sftp.component';
     AppService,
     HttpService,
     LogService,
+    NavService,
     UUIDService,
     LocalStorageService,
     DialogService,

src/app/app.service.ts

@@ -11,7 +11,6 @@ import {CookieService} from 'ngx-cookie-service';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 import {DataStore, User, Browser, i18n} from './globals';
-import {environment} from '../environments/environment';
 import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
 import {NGXLogger} from 'ngx-logger';
 import * as UUID from 'uuid-js/lib/uuid.js';
@@ -70,8 +69,12 @@ export class HttpService {
     return this.http.get('/api/users/v1/profile/');
   }
 
-  getMyGrantedNodes() {
-    return this.http.get<Array<Node>>('/api/perms/v1/user/nodes-assets/tree/?cache_policy=1');
+  getMyGrantedNodes(async: boolean, refresh?: boolean) {
+    const cachePolicy = refresh ? '2' : '1';
+    const syncUrl = '/api/perms/v1/users/nodes-with-assets/tree/?cache_policy=' + cachePolicy;
+    const asyncUrl = '/api/perms/v1/users/nodes/children-with-assets/tree/?cache_policy=' + cachePolicy;
+    const url = async ? asyncUrl : syncUrl;
+    return this.http.get<Array<Node>>(url);
   }
 
   getMyGrantedRemoteApps() {
@@ -405,3 +408,28 @@ export class UUIDService {
   }
 }
 
+
+@Injectable()
+export class NavService {
+  constructor(private store: LocalStorageService) {}
+
+  get treeLoadAsync() {
+    const value = this.store.get('LoadTreeAsync');
+    return value === '1';
+  }
+
+  set treeLoadAsync(v: boolean) {
+    const value = v ? '1' : '0';
+    this.store.set('LoadTreeAsync', value);
+  }
+
+  get skipAllManualPassword() {
+    const value = this.store.get('SkipAllManualPassword');
+    return value === '1';
+  }
+
+  set skipAllManualPassword(v) {
+    const value = v ? '1' : '0';
+    this.store.set('SkipAllManualPassword', value);
+  }
+}

src/app/elements/asset-tree/asset-tree.component.html

-<ul id="ztree" class="ztree">
-  {{ "Loading"|trans }} ...
-</ul>
+<div>
+  <ul id="assetsTree" class="ztree">
+    {{ "Loading"|trans }} ...
+  </ul>
+
+  <ul id="remoteAppsTree" class="ztree">
+    {{ "Loading"|trans }} ...
+  </ul>
+</div>
+
 
 <div #rMenu *ngIf="isShowRMenu" class="basicContext" [style.top]="pos.top" [style.left]="pos.left">
   <table>

src/app/elements/asset-tree/asset-tree.component.scss

-#ztree .fa {
+.tree-refresh .fa {
   width: 24px;
   height: 24px;
   line-height: 24px;
@@ -35,7 +35,7 @@
     user-select: none;
 }
 .basicContext, .basicContext * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .basicContextContainer {
@@ -92,11 +92,11 @@ tr {
 }
 
 tr:hover {
-   background-color: #463e3e;
+  background-color: #463e3e;
 }
 
 .basicContext table {
-    border-spacing: 0 !important;
+  border-spacing: 0 !important;
 }
 
 .basicContext__data {

src/app/elements/asset-tree/asset-tree.component.ts

-import {Component, Input, Output, OnInit, Inject, SimpleChanges, OnChanges, ElementRef, ViewChild, EventEmitter} from '@angular/core';
+import {Component, Input, OnInit, Inject, SimpleChanges, OnChanges, ElementRef, ViewChild} from '@angular/core';
 import {NavList, View} from '../../pages/control/control/control.component';
-import {AppService, HttpService, LogService} from '../../app.service';
+import {AppService, HttpService, LogService, NavService} from '../../app.service';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
 import {FormControl, Validators} from '@angular/forms';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@@ -33,23 +33,21 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
         title: 'title'
       }
     },
-    callback: {
-      onClick: this.onCzTreeOnClick.bind(this),
-      onRightClick: this.onRightClick.bind(this)
-    },
+
   };
   pos = {left: '100px', top: '200px'};
   hiddenNodes: any;
   expandNodes: any;
-  zTree: any;
+  assetsTree: any;
+  remoteAppsTree: any;
   isShowRMenu = false;
   rightClickSelectNode: any;
   hasLoginTo = false;
+  loadTreeAsync = false;
 
-  onCzTreeOnClick(event, treeId, treeNode, clickFlag) {
+  onNodeClick(event, treeId, treeNode, clickFlag) {
     if (treeNode.isParent) {
-      const zTreeObj = $.fn.zTree.getZTreeObj('ztree');
-      zTreeObj.expandNode(treeNode);
+      this.assetsTree.expandNode(treeNode);
     } else {
       this._http.getUserProfile().subscribe();
       this.Connect(treeNode);
@@ -60,41 +58,25 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
               public _dialog: MatDialog,
               public _logger: LogService,
               private activatedRoute: ActivatedRoute,
-              private _http: HttpService
+              private _http: HttpService,
+              private _navSvc: NavService
   ) {
     this.searchEvt$ = new BehaviorSubject<string>(this.query);
   }
 
-  getGrantedAssetsNodes() {
-    this._http.getMyGrantedNodes()
-      .subscribe(response => {
-        this.Data = [...response, ...this.Data];
-        this.draw();
-      });
-  }
-
   refreshGrantedAssetsNodes() {
     this._http.refreshMyGrantedNodes()
       .subscribe(response => {
         this.Data = [...response, ...this.Data];
-        this.draw();
-      });
-  }
-
-  getGrantedRemoteApps() {
-    this._http.getMyGrantedRemoteApps()
-      .subscribe(response => {
-        if (response.length > 1) {
-          this.Data = [...this.Data, ...response];
-          this.draw();
-        }
+        this.initTree();
       });
   }
 
   ngOnInit() {
-    this.getGrantedAssetsNodes();
-    this.getGrantedRemoteApps();
+    this.initAssetsTree();
+    this.initRemoteAppsTree();
     document.addEventListener('click', this.hideRMenu.bind(this), false);
+    this.loadTreeAsync = this._navSvc.treeLoadAsync;
     this.searchEvt$.asObservable()
       .debounceTime(300)
       .distinctUntilChanged()
@@ -104,27 +86,63 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['Data'] && this.Data) {
-      this.draw();
-    }
+    // if (changes['Data'] && this.Data) {
+    //   this.draw();
+    // }
     if (changes['query'] && !changes['query'].firstChange) {
       this.searchEvt$.next(this.query);
     }
   }
 
-  refreshNodes() {
-    this.zTree.destroy();
-    this.Data = [];
-    this.refreshGrantedAssetsNodes();
-    this.getGrantedRemoteApps();
+  refreshAssetsTree() {
+    this.assetsTree.destroy();
+    this.initAssetsTree(true);
   }
 
-  draw() {
-    $.fn.zTree.init($('#ztree'), this.setting, this.Data);
-    this.zTree = $.fn.zTree.getZTreeObj('ztree');
-    this.rootNodeAddDom(this.zTree, () => {
-      this.refreshNodes();
-    });
+  initAssetsTree(refresh?: boolean) {
+    const setting = Object.assign({}, this.setting);
+    setting['callback'] = {
+      onClick: this.onNodeClick.bind(this),
+      onRightClick: this.onRightClick.bind(this)
+    };
+    if (this.loadTreeAsync) {
+      setting['async'] = {
+        enable: true,
+        url: '/api/perms/v1/users/nodes/children-with-assets/tree/',
+        autoParam: ['id=key', 'name=n', 'level=lv'],
+        type: 'get'
+      };
+    }
+
+    this._http.getMyGrantedNodes(this.loadTreeAsync, refresh).subscribe(resp => {
+        const assetsTree = $.fn.zTree.init($('#assetsTree'), setting, resp);
+        this.assetsTree = assetsTree;
+        this.rootNodeAddDom(assetsTree, () => {
+          this.refreshAssetsTree();
+        });
+      });
+  }
+
+  refreshRemoteAppsTree() {
+    this.remoteAppsTree.destroy();
+    this.initRemoteAppsTree();
+  }
+
+  initRemoteAppsTree() {
+    this._http.getMyGrantedRemoteApps().subscribe(
+      resp => {
+        const tree = $.fn.zTree.init($('#remoteAppsTree'), this.setting, resp);
+        this.remoteAppsTree = tree;
+        this.rootNodeAddDom(tree, () => {
+          this.refreshRemoteAppsTree();
+        });
+      }
+    );
+  }
+
+  initTree() {
+    this.initAssetsTree();
+    this.initRemoteAppsTree();
 
     this.activatedRoute.queryParams.subscribe(params => {
       const login_to = params['login_to'];
@@ -141,11 +159,13 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
   }
 
   rootNodeAddDom(ztree, callback) {
-    const refreshIcon = '<a id="tree-refresh"><i class="fa fa-refresh"></i></a>';
+    const tId = ztree.setting.treeId + '_tree_refresh';
+    const refreshIcon = '<a id=' + tId + ' class="tree-refresh">' +
+      '<i class="fa fa-refresh" style="font-family: FontAwesome !important;" ></i></a>';
     const rootNode = ztree.getNodes()[0];
     const $rootNodeRef = $('#' + rootNode.tId + '_a');
     $rootNodeRef.after(refreshIcon);
-    const refreshIconRef = $('#tree-refresh');
+    const refreshIconRef = $('#' + tId);
     refreshIconRef.bind('click', function () {
       callback();
     });
@@ -186,10 +206,10 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
     }
 
     if (!treeNode && event.target.tagName.toLowerCase() !== 'button' && $(event.target).parents('a').length === 0) {
-      this.zTree.cancelSelectedNode();
+      this.assetsTree.cancelSelectedNode();
       this.showRMenu(event.clientX, event.clientY);
     } else if (treeNode && !treeNode.noR) {
-      this.zTree.selectNode(treeNode);
+      this.assetsTree.selectNode(treeNode);
       this.showRMenu(event.clientX, event.clientY);
       this.rightClickSelectNode = treeNode;
     }
@@ -458,7 +478,6 @@ export class ManualPasswordDialogComponent implements OnInit {
   PasswordControl = new FormControl('', [Validators.required]);
   constructor(@Inject(MAT_DIALOG_DATA) public data: any,
               public dialogRef: MatDialogRef<ManualPasswordDialogComponent>) {
-
   }
 
   onSkip() {

src/app/elements/nav/nav.component.html

@@ -3,12 +3,12 @@
   <ul>
     <li><a href="/"><img src="static/imgs/logo.png" height="26px"/></a>
     </li>
-    <li *ngFor="let v of DataStore.Nav" [ngClass]="{'dropdown': v.children}">
+    <li *ngFor="let v of navs" [ngClass]="{'dropdown': v.children}">
       <a>{{v.name|trans}}</a>
       <ul [ngClass]="{'dropdown-content': v.children}">
         <li *ngFor="let vv of v.children" [ngClass]="{'disabled': vv.disable}">
           <a *ngIf="vv.href" [routerLink]="[vv.href]">{{vv.name|trans}}</a>
-          <a id="{{vv.id}}" *ngIf="vv.click" (click)="click(vv.click)">{{vv.name|trans}}</a>
+          <a id="{{vv.id}}" *ngIf="vv.click && !vv.hide" (click)="click(vv.click)">{{vv.name|trans}}</a>
         </li>
       </ul>
     </li>

src/app/elements/nav/nav.component.ts

@@ -6,7 +6,7 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 import {Component, Inject, OnInit} from '@angular/core';
-import {AppService, HttpService, LocalStorageService, LogService} from '../../app.service';
+import {AppService, HttpService, LocalStorageService, NavService, LogService} from '../../app.service';
 import {CleftbarComponent} from '../../pages/control/cleftbar/cleftbar.component';
 import {ControlComponent, NavList, View} from '../../pages/control/control/control.component';
 import {DataStore, i18n} from '../../globals';
@@ -21,7 +21,9 @@ declare let layer: any;
 })
 export class ElementNavComponent implements OnInit {
   DataStore = DataStore;
+  navs: Array<object>;
   ChangeLanWarningDialog: any;
+  _asyncTree = false;
 
   static Hide() {
     jQuery('elements-nav').hide();
@@ -31,12 +33,22 @@ export class ElementNavComponent implements OnInit {
               private _http: HttpService,
               private _logger: LogService,
               public _dialog: MatDialog,
+              public _navSvc: NavService,
               private _localStorage: LocalStorageService) {
     this._logger.log('nav.ts:NavComponent');
     this.getNav();
   }
 
   ngOnInit() {
+    this.navs = this.getNav();
+  }
+
+  get treeLoadAsync() {
+    return this._asyncTree;
+  }
+
+  set treeLoadAsync(value) {
+    this._asyncTree = value;
   }
 
   click(event) {
@@ -67,7 +79,7 @@ export class ElementNavComponent implements OnInit {
         break;
       }
       case 'FullScreen': {
-        let ele:any = document.getElementsByClassName("window active ")[0];
+        const ele: any = document.getElementsByClassName('window active')[0];
         
         if (ele.requestFullscreen) {
           ele.requestFullscreen();
@@ -195,6 +207,16 @@ export class ElementNavComponent implements OnInit {
         });
         break;
       }
+      case 'LoadTreeAsync': {
+        this._navSvc.treeLoadAsync = !this._navSvc.treeLoadAsync;
+        this.refreshNav();
+        break;
+      }
+      case 'SkipManualPassword': {
+        this._navSvc.skipAllManualPassword = !this._navSvc.skipAllManualPassword;
+        this.refreshNav();
+        break;
+      }
       default: {
         break;
       }
@@ -219,8 +241,12 @@ export class ElementNavComponent implements OnInit {
     });
   }
 
+  refreshNav() {
+    this.navs = this.getNav();
+  }
+
   getNav() {
-    DataStore.Nav = [{
+    return [{
       'id': 'File',
       'name': 'Server',
       'children': [
@@ -287,6 +313,30 @@ export class ElementNavComponent implements OnInit {
           'id': 'FullScreen',
           'click': 'FullScreen',
           'name': 'Full Screen'
+        },
+        {
+          'id': 'LoadTreeAsync',
+          'click': 'LoadTreeAsync',
+          'name': 'Load Tree Async',
+          'hide': this._navSvc.treeLoadAsync
+        },
+        {
+          'id': 'LoadTreeSync',
+          'click': 'LoadTreeAsync',
+          'name': 'Load Tree Sync',
+          'hide': !this._navSvc.treeLoadAsync
+        },
+        {
+          'id': 'SkipManualPassword',
+          'click': 'SkipManualPassword',
+          'name': 'Skip manual password',
+          'hide': this._navSvc.skipAllManualPassword
+        },
+        {
+          'id': 'ShowManualPassword',
+          'click': 'SkipManualPassword',
+          'name': 'show manual password',
+          'hide': !this._navSvc.skipAllManualPassword
         }
         ]
     }, {

src/app/globals.ts

@@ -90,7 +90,7 @@ export let User: {
 
 export let DataStore: {
   socket: any;
-  Nav: Array<{}>;
+  Nav: Array<object>;
   NavShow: boolean;
   Path: {};
   error: {};

src/styles.css

@@ -90,7 +90,7 @@ body ::-webkit-scrollbar-thumb {
   border-radius: 6px;
 }
 
-.ztree * {
+.ztree *:not(.fa) {
   font-family: 'Monaco', 'Consolas', 'monospace' !important;
   font-size: 13px !important;
 }