From abfeaa4dc95ccf770e50c328890382c412609d7d Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Tue, 26 Nov 2019 10:43:37 +0900
Subject: [PATCH 1/2] organization is modified

---
 .../src/lib/components/tree.component.html    | 45 ++++++----
 .../src/lib/components/tree.component.scss    | 22 +++--
 .../src/lib/components/tree.component.ts      | 89 +++++++++++++------
 .../src/lib/services/splash-screen.service.ts |  2 +-
 4 files changed, 107 insertions(+), 51 deletions(-)

diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html
index 43b0b034..edd9a963 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html
+++ b/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 class="tree-node-closer-top"></div>
+      <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)"
-        matRipple
-        [attr.sub-node]="isParentLastNode(node) ? '' : null"
-      >
+
+      <li (click)="onClickNode(node)" matRipple>
         <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 class="tree-node-closer-top"></div>
+      <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
-        (click)="onClickNode(node)"
-        matRipple
-        [attr.sub-node]="isParentLastNode(node) ? '' : null"
-      >
+      <li (click)="onClickNode(node)" matRipple>
         <div class="tree-node-body">
           <span class="horizontal-line"></span>
           <button
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss
index 20bca757..8293a687 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss
+++ b/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;
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts
index cbf16694..04c4dafa 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts
+++ b/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 {
-    const i = this.findNodeIndex(node);
+  isLastNode(node: FlatNode, depth: number): boolean {
+    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) {
-      return true;
+    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 {
-    const pi = this.findParentNodeIndex(node);
-    if (-1 === pi) {
-      return false;
+  appendDivArray(level: number): number[] {
+    if (0 === level) {
+      return [];
     }
-    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 {
-    return this.dataSource.expandedDataSubject.value.findIndex(n => {
-      return node.deptInfo.seq === n.deptInfo.seq;
-    });
-  }
-
-  private findParentNodeIndex(node: FlatNode): number {
-    const i = this.findNodeIndex(node);
-    if (-1 === i) {
+  private findNodeIndex(node: FlatNode, depth: number): number {
+    if (!node) {
       return -1;
     }
+    const i = this.dataSource.expandedDataSubject.value.findIndex(n => {
+      return node.deptInfo.seq === n.deptInfo.seq;
+    });
 
-    for (let idx = i - 1; idx >= 0; idx--) {
-      if (
-        this.dataSource.expandedDataSubject.value[idx].level ===
-        node.level - 1
-      ) {
-        return idx;
+    if (0 === depth) {
+      return i;
+    }
+    return this.findNodeIndex(this.findParentNode(i), depth - 1);
+  }
+
+  private findParentNode(index: number): FlatNode {
+    const node = this.dataSource.expandedDataSubject.value[index];
+
+    for (let idx = index - 1; idx >= 0; idx--) {
+      const n = this.dataSource.expandedDataSubject.value[idx];
+      if (n.level === node.level - 1) {
+        return n;
       }
     }
-    return -1;
+    return undefined;
   }
 }
diff --git a/projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.ts b/projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.ts
index 3463c7f5..4b2a571d 100644
--- a/projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.ts
+++ b/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',

From d053db400f6b4b8e371c16bcc1a40aa3168b5f87 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Tue, 26 Nov 2019 10:52:50 +0900
Subject: [PATCH 2/2] bug fixed

---
 .../components/left-sidenav/organization.component.html    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
index 9ca5cd7f..e29c9f11 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
@@ -41,8 +41,11 @@
         </mat-checkbox>
       </dd>
     </dl>
-    <div *ngIf="selectedDepartmentProcessing">
-      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    <div style="height: 3px;">
+      <mat-progress-bar
+        *ngIf="selectedDepartmentProcessing"
+        mode="indeterminate"
+      ></mat-progress-bar>
     </div>
     <div *ngIf="!isShowSearch" class="search-list">
       <cdk-virtual-scroll-viewport