organization is modified

projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html

@@ -20,18 +20,25 @@
       matTreeNodePaddingIndent="20"
       class="tree-no-child"
     >
-      <div class="tree-node-closer-container">
+      <div
-        <div class="tree-node-closer-top"></div>
+        class="tree-node-closer-container"
+        *ngFor="let i of appendDivArray(node.level)"
+      >
+        <div
+          class="tree-node-closer-top"
+          [style.left.px]="20 - 20 * i"
+          [attr.last-node]="isLastNode(node, i) ? '' : null"
+          [attr.sub-node]="0 < i ? '' : null"
+        ></div>
         <div
           class="tree-node-closer-bottom"
-          [attr.last-node]="isLastNode(node) ? '' : null"
+          [style.left.px]="20 - 20 * i"
+          [attr.last-node]="isLastNode(node, i) ? '' : null"
+          [attr.sub-node]="0 < i ? '' : null"
         ></div>
       </div>
-      <li
+
-        (click)="onClickNode(node)"
+      <li (click)="onClickNode(node)" matRipple>
-        matRipple
-        [attr.sub-node]="isParentLastNode(node) ? '' : null"
-      >
         <div class="tree-node-body">{{ node.name }}</div>
       </li>
     </mat-tree-node>
@@ -42,19 +49,25 @@
       matTreeNodePaddingIndent="20"
       class="tree-has-child"
     >
-      <div *ngIf="0 !== node.level" class="tree-node-closer-container">
+      <div
-        <div class="tree-node-closer-top"></div>
+        class="tree-node-closer-container"
+        *ngFor="let i of appendDivArray(node.level)"
+      >
+        <div
+          class="tree-node-closer-top"
+          [style.left.px]="20 - 20 * i"
+          [attr.last-node]="isLastNode(node, i) ? '' : null"
+          [attr.sub-node]="0 < i ? '' : null"
+        ></div>
         <div
           class="tree-node-closer-bottom"
+          [style.left.px]="20 - 20 * i"
           [attr.expanded]="treeControl.isExpanded(node) ? '' : null"
-          [attr.last-node]="isLastNode(node) ? '' : null"
+          [attr.last-node]="isLastNode(node, i) ? '' : null"
+          [attr.sub-node]="0 < i ? '' : null"
         ></div>
       </div>
-      <li
+      <li (click)="onClickNode(node)" matRipple>
-        (click)="onClickNode(node)"
-        matRipple
-        [attr.sub-node]="isParentLastNode(node) ? '' : null"
-      >
         <div class="tree-node-body">
           <span class="horizontal-line"></span>
           <button

projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss

@@ -13,7 +13,7 @@
       border: 1px dotted grey;
       border-width: 0 0 1px 1px;
       top: -40px;
-      left: 20px;
+      // left: 20px;
     }
     .tree-node-closer-bottom {
       width: 15px;
@@ -22,7 +22,14 @@
       border: 1px dotted grey;
       border-width: 0 0 1px 1px;
       top: 0px;
-      left: 20px;
+      // left: 20px;
+    }
+
+    .tree-node-closer-top[sub-node] {
+      border-width: 0 0 0 1px;
+    }
+    .tree-node-closer-top[sub-node][last-node] {
+      border-width: 0 0 0 0;
     }
 
     .tree-node-closer-bottom[expanded] {
@@ -31,6 +38,12 @@
     .tree-node-closer-bottom[last-node] {
       border-width: 0 0 1px 0px;
     }
+    .tree-node-closer-bottom[sub-node] {
+      border-width: 0 0 0 1px;
+    }
+    .tree-node-closer-bottom[sub-node][last-node] {
+      border-width: 0 0 0 0;
+    }
   }
 
   li {
@@ -39,11 +52,6 @@
     list-style-type: none;
   }
 
-  // li[sub-node] {
-  //   border: 1px dotted grey;
-  //   border-width: 0 0 0 1px;
-  // }
-
   // li:last-child {
   //   border-left: 1px solid white;
   //   margin-left: -41px;

projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts

@@ -19,6 +19,8 @@ import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { VirtualScrollTreeFlatDataSource } from '@ucap-webmessenger/ui';
 import { ucapAnimations } from '@ucap-webmessenger/ui';
 import { trigger, transition, style, animate } from '@angular/animations';
+import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+import { Subscription } from 'rxjs';
 
 interface OrganizationNode {
   deptInfo: DeptInfo;
@@ -110,10 +112,15 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
   @ViewChild('orgranizationTree', { static: false })
   orgranizationTree: MatTree<OrganizationNode>;
 
+  @ViewChild(PerfectScrollbarDirective, { static: false })
+  psDirectiveRef?: PerfectScrollbarDirective;
+
   treeControl: FlatTreeControl<FlatNode>;
   treeFlattener: MatTreeFlattener<OrganizationNode, FlatNode>;
   dataSource: VirtualScrollTreeFlatDataSource<OrganizationNode, FlatNode>;
 
+  treeControlExpansionChangeSubscription: Subscription;
+
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private logger: NGXLogger
@@ -141,10 +148,19 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
     >(this.treeControl, this.treeFlattener);
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.treeControlExpansionChangeSubscription = this.treeControl.expansionModel.changed.subscribe(
+      () => {
+        this.psDirectiveRef.update();
+      }
+    );
+  }
 
   ngOnDestroy(): void {
     this.logger.debug('-----------------------TreeComponent ngOnDestroy');
+    if (!!this.treeControlExpansionChangeSubscription) {
+      this.treeControlExpansionChangeSubscription.unsubscribe();
+    }
   }
 
   ngAfterViewInit(): void {
@@ -153,51 +169,70 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
 
   hasChild = (_: number, node: FlatNode) => node.expandable;
 
-  isLastNode(node: FlatNode): boolean {
+  isLastNode(node: FlatNode, depth: number): boolean {
-    const i = this.findNodeIndex(node);
+    const i = this.findNodeIndex(node, depth);
+
+    if (-1 === i) {
+      return false;
+    }
 
     if (i === this.dataSource.expandedDataSubject.value.length - 1) {
       return true;
     }
 
-    if (node.level !== this.dataSource.expandedDataSubject.value[i + 1].level) {
+    const n = this.dataSource.expandedDataSubject.value[i];
+
+    for (
+      let idx = i + 1;
+      idx < this.dataSource.expandedDataSubject.value.length;
+      idx++
+    ) {
+      const element = this.dataSource.expandedDataSubject.value[idx];
+      if (n.level === element.level) {
+        return false;
+      }
+      if (n.level > element.level) {
         return true;
       }
-    return false;
+    }
+    return true;
   }
 
-  isParentLastNode(node: FlatNode): boolean {
+  appendDivArray(level: number): number[] {
-    const pi = this.findParentNodeIndex(node);
+    if (0 === level) {
-    if (-1 === pi) {
+      return [];
-      return false;
     }
-    return this.isLastNode(this.dataSource.expandedDataSubject.value[pi]);
+
+    return Array.from({ length: level }, (_, i: number) => i);
   }
 
   onClickNode(node: OrganizationNode) {
     this.selected.emit(node.deptInfo);
   }
 
-  private findNodeIndex(node: FlatNode): number {
+  private findNodeIndex(node: FlatNode, depth: number): number {
-    return this.dataSource.expandedDataSubject.value.findIndex(n => {
+    if (!node) {
+      return -1;
+    }
+    const i = this.dataSource.expandedDataSubject.value.findIndex(n => {
       return node.deptInfo.seq === n.deptInfo.seq;
     });
+
+    if (0 === depth) {
+      return i;
+    }
+    return this.findNodeIndex(this.findParentNode(i), depth - 1);
   }
 
-  private findParentNodeIndex(node: FlatNode): number {
+  private findParentNode(index: number): FlatNode {
-    const i = this.findNodeIndex(node);
+    const node = this.dataSource.expandedDataSubject.value[index];
-    if (-1 === i) {
-      return -1;
-    }
 
-    for (let idx = i - 1; idx >= 0; idx--) {
+    for (let idx = index - 1; idx >= 0; idx--) {
-      if (
+      const n = this.dataSource.expandedDataSubject.value[idx];
-        this.dataSource.expandedDataSubject.value[idx].level ===
+      if (n.level === node.level - 1) {
-        node.level - 1
+        return n;
-      ) {
-        return idx;
       }
     }
-    return -1;
+    return undefined;
   }
 }

projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.ts

@@ -71,7 +71,7 @@ export class SplashScreenService {
       .build([
         style({ opacity: '1' }),
         animate(
-          '400ms ease',
+          '700ms ease',
           style({
             opacity: '0',
             display: 'none',