Organization tree component is implemented

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html

@@ -1 +1,3 @@
-<ucap-organization-tree></ucap-organization-tree>
+<ucap-organization-tree
+  [oraganizationList]="departmentInfoList$ | async"
+></ucap-organization-tree>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts

@@ -1,5 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { ucapAnimations } from '@ucap-webmessenger/ui';
+import { Observable } from 'rxjs';
+import { DeptInfo } from '@ucap-webmessenger/protocol-query';
+import { Store, select } from '@ngrx/store';
+import { NGXLogger } from 'ngx-logger';
+
+import * as AppStore from '@app/store';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-organization',
@@ -8,7 +14,13 @@ import { ucapAnimations } from '@ucap-webmessenger/ui';
   animations: ucapAnimations
 })
 export class OrganizationComponent implements OnInit {
-  constructor() {}
+  departmentInfoList$: Observable<DeptInfo[]>;
 
-  ngOnInit() {}
+  constructor(private store: Store<any>, private logger: NGXLogger) {}
+
+  ngOnInit() {
+    this.departmentInfoList$ = this.store.pipe(
+      select(AppStore.MessengerSelector.QuerySelector.departmentInfoList)
+    );
+  }
 }

projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts

@@ -127,29 +127,6 @@ export class Effects {
     { dispatch: false }
   );
 
-  // buddy2SuccessPostRoom$ = createEffect(() =>
-  //   this.actions$.pipe(
-  //     ofType(buddy2Success),
-  //     map(action => {
-  //       const loginInfo = this.sessionStorageService.get<LoginInfo>(
-  //         KEY_LOGIN_INFO
-  //       );
-
-  //       return loginInfo.localeCode;
-  //     }),
-  //     withLatestFrom(
-  //       this.store.pipe(
-  //         select(state => {
-  //           return state.messenger.sync.roomSyncDate as string;
-  //         })
-  //       )
-  //     ),
-  //     map(([localeCode, roomSyncDate]) =>
-  //       room({ syncDate: roomSyncDate, localeCode })
-  //     )
-  //   )
-  // );
-
   room$ = createEffect(
     () => {
       let roomList: RoomInfo[];
@@ -203,12 +180,6 @@ export class Effects {
                   break;
                 case SSVC_TYPE_SYNC_ROOM_RES:
                   {
-                    this.logger.debug(
-                      'roomList',
-                      roomList,
-                      'roomUserInfoMap',
-                      roomUserInfoMap
-                    );
                     this.store.dispatch(
                       roomSuccess({
                         roomList,

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

@@ -1,8 +1,35 @@
-<mat-accordion>
+<mat-tree
-  <mat-expansion-panel *ngFor="let organization of organizationList">
+  #orgranizationTree
-    <mat-expansion-panel-header>
+  [dataSource]="dataSource"
-      <mat-panel-title> </mat-panel-title>
+  [treeControl]="treeControl"
-      <mat-panel-description> </mat-panel-description>
+  class="organization-tree"
-    </mat-expansion-panel-header>
+>
-  </mat-expansion-panel>
+  <mat-nested-tree-node *matTreeNodeDef="let node">
-</mat-accordion>
+    <li>
+      <div class="mat-tree-node">{{ node.title }}</div>
+    </li>
+  </mat-nested-tree-node>
+  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
+    <li>
+      <div class="mat-tree-node">
+        <button
+          mat-icon-button
+          matTreeNodeToggle
+          [attr.aria-label]="'toggle ' + node.filename"
+        >
+          <mat-icon class="mat-icon-rtl-mirror">
+            {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
+          </mat-icon>
+        </button>
+        {{ node.title }}
+      </div>
+      <ul
+        [class.organization-tree-node-invisible]="!treeControl.isExpanded(node)"
+      >
+        <div *ngIf="treeControl.isExpanded(node)">
+          <ng-container matTreeNodeOutlet></ng-container>
+        </div>
+      </ul>
+    </li>
+  </mat-nested-tree-node>
+</mat-tree>

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

@@ -0,0 +1,12 @@
+.organization-tree {
+  ul,
+  li {
+    margin-top: 0;
+    margin-bottom: 0;
+    list-style-type: none;
+  }
+
+  .organization-tree-node-invisible {
+    display: none;
+  }
+}

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

@@ -1,4 +1,42 @@
-import { Component, OnInit, Input } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  ChangeDetectorRef,
+  ViewChild
+} from '@angular/core';
+import { DeptInfo } from '@ucap-webmessenger/protocol-query';
+import { MatTreeNestedDataSource, MatTree } from '@angular/material';
+import { NestedTreeControl } from '@angular/cdk/tree';
+import { BehaviorSubject } from 'rxjs';
+import { NGXLogger } from 'ngx-logger';
+
+export class OraganizationNode {
+  private childNodeBehaviorSubject: BehaviorSubject<OraganizationNode[]>;
+  private childNodeList: OraganizationNode[];
+
+  get title(): string {
+    return this.deptInfo.name;
+  }
+
+  get children(): BehaviorSubject<OraganizationNode[]> {
+    if (!this.childNodeBehaviorSubject) {
+      this.childNodeBehaviorSubject = new BehaviorSubject(
+        undefined === this.childNodeList ? [] : this.childNodeList
+      );
+    }
+    return this.childNodeBehaviorSubject;
+  }
+
+  constructor(public deptInfo: DeptInfo) {}
+
+  addChild(childNode: OraganizationNode) {
+    if (!this.childNodeList) {
+      this.childNodeList = [];
+    }
+    this.childNodeList.push(childNode);
+  }
+}
 
 @Component({
   selector: 'ucap-organization-tree',
@@ -7,9 +45,62 @@ import { Component, OnInit, Input } from '@angular/core';
 })
 export class TreeComponent implements OnInit {
   @Input()
-  organizationList: any[];
+  set oraganizationList(deptInfo: DeptInfo[]) {
+    const nodeMap = new Map<number, OraganizationNode>();
+    const rootNodeList: OraganizationNode[] = [];
+    const remainChildNodeList: OraganizationNode[] = [];
 
-  constructor() {}
+    deptInfo.forEach(value => {
+      const node = new OraganizationNode(value);
+      if (nodeMap.has(value.seq)) {
+        this.logger.warn('duplicate seq', value.seq);
+        return;
+      }
+      nodeMap.set(value.seq, node);
+
+      if (0 === value.parentSeq) {
+        rootNodeList.push(node);
+        return;
+      }
+
+      if (nodeMap.has(value.parentSeq)) {
+        nodeMap.get(value.parentSeq).addChild(node);
+      } else {
+        remainChildNodeList.push(node);
+      }
+    });
+
+    remainChildNodeList.forEach(value => {
+      if (nodeMap.has(value.deptInfo.parentSeq)) {
+        nodeMap.get(value.deptInfo.parentSeq).addChild(value);
+      }
+    });
+
+    this.dataSource.data = rootNodeList;
+  }
+
+  @ViewChild('orgranizationTree', { static: true })
+  orgranizationTree: MatTree<OraganizationNode>;
+
+  levels = new Map<OraganizationNode, number>();
+  treeControl: NestedTreeControl<OraganizationNode>;
+
+  dataSource: MatTreeNestedDataSource<OraganizationNode>;
+
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private logger: NGXLogger
+  ) {
+    this.treeControl = new NestedTreeControl<OraganizationNode>(
+      this.getChildren
+    );
+    this.dataSource = new MatTreeNestedDataSource();
+  }
 
   ngOnInit() {}
+
+  getChildren = (node: OraganizationNode) => node.children;
+
+  hasChildren = (index: number, node: OraganizationNode) =>
+    0 < node.children.value.length;
 }

projects/ucap-webmessenger-ui-organization/src/lib/ucap-ui-organization.module.ts

@@ -2,7 +2,9 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { MatExpansionModule } from '@angular/material/expansion';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTreeModule } from '@angular/material/tree';
 
 import { TreeComponent } from './components/tree.component';
 
@@ -10,7 +12,13 @@ const COMPONENTS = [TreeComponent];
 const SERVICES = [];
 
 @NgModule({
-  imports: [CommonModule, ReactiveFormsModule, MatExpansionModule],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatTreeModule
+  ],
   exports: [...COMPONENTS],
   declarations: [...COMPONENTS]
 })