조직도에서 부서원 선택시 해당 부서원의 부서를 트리에 표현해 주는 로직 추가.

2020-03-09 13:27:15 +09:00 · 2020-03-09 13:27:15 +09:00 · 906bbdcf2c
commit 906bbdcf2c
parent a6f1386c98
14 changed files with 106 additions and 8 deletions
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
@ -28,6 +28,7 @@
      "
    >
      <app-layout-chat-left-sidenav-organization-tree
+        [gotoDeptTree]="gotoDeptTree"
        class="organization-side"
      ></app-layout-chat-left-sidenav-organization-tree>
      <!-- <app-layout-chat-left-sidenav-organization
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
@ -8,7 +8,8 @@ import {
  QueryList,
  ElementRef,
  OnDestroy,
-  ViewChild
+  ViewChild,
+  Input
 } from '@angular/core';
 import { NGXLogger } from 'ngx-logger';
 import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
@ -58,6 +59,9 @@ import { TranslateService } from '@ngx-translate/core';
  animations: ucapAnimations
 })
 export class LeftSideComponent implements OnInit, OnDestroy {
+  @Input()
+  gotoDeptTree: number;
+
  @Output()
  openProfile = new EventEmitter<{
    userSeq: number;
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization-tree.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization-tree.component.html
@ -15,6 +15,7 @@
    <ucap-organization-tree
      [oraganizationList]="departmentInfoList$ | async"
      [loginRes]="loginRes"
+      [gotoDept]="gotoDeptTree"
      [activate$]="organizationTreeActivatedSubject.asObservable()"
      (selected)="onSelectedOrganization($event)"
      class="tab-tree-frame"
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization-tree.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization-tree.component.ts
@ -1,4 +1,10 @@
-import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectorRef,
+  Input
+} from '@angular/core';
 import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
 import { Observable, Subscription, BehaviorSubject, combineLatest } from 'rxjs';
 import {
@ -29,6 +35,9 @@ import { OrganizationService } from '@ucap-webmessenger/ui-organization';
  animations: ucapAnimations
 })
 export class OrganizationTreeComponent implements OnInit, OnDestroy {
+  @Input()
+  gotoDeptTree: number;
+
  companyList$: Observable<Company[]>;
  companyCode: string;

--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.html
@ -16,6 +16,7 @@
 <app-layout-messenger-organization
  (openProfile)="onClickOpenProfile($event)"
  (createConference)="onClickConferenceCreate($event)"
+  (gotoDeptTree)="onClickGotoDeptTree($event)"
  [style.display]="
    MainMenu.Organization === (this.gnbMenuIndex$ | async) ? 'block' : 'none'
  "
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.ts
@ -20,6 +20,8 @@ export class MainContentsComponent implements OnInit {
  openProfile = new EventEmitter<{
    userSeq: number;
  }>();
+  @Output()
+  gotoDeptTree = new EventEmitter<number>();

  @Output()
  closeRightDrawer = new EventEmitter();
@ -47,6 +49,10 @@ export class MainContentsComponent implements OnInit {
    this.openProfile.emit({ userSeq });
  }

+  onClickGotoDeptTree(deptSeq: number) {
+    this.gotoDeptTree.emit(deptSeq);
+  }
+
  onCloseRightDrawer() {
    this.closeRightDrawer.emit();
  }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.html
@ -161,6 +161,7 @@
        (openProfile)="onClickOpenProfile($event)"
        (toggleAllUser)="onToggleAllUser($event)"
        (toggleUser)="onToggleUser($event)"
+        (gotoDeptTree)="onClickGotoDeptTree($event)"
        class="detail-table"
      ></ucap-organization-detail-table>
    </div>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.ts
@ -50,6 +50,10 @@ import { MatOption } from '@angular/material/core';
 export class OrganizationComponent implements OnInit, OnDestroy {
  @Output()
  openProfile = new EventEmitter<number>();
+
+  @Output()
+  gotoDeptTree = new EventEmitter<number>();
+
  @Output()
  createConference = new EventEmitter<number[]>();

@ -323,6 +327,9 @@ export class OrganizationComponent implements OnInit, OnDestroy {
  onClickOpenProfile(userSeq: number) {
    this.openProfile.emit(userSeq);
  }
+  onClickGotoDeptTree(deptSeq: number) {
+    this.gotoDeptTree.emit(deptSeq);
+  }

  /** Handling Filters */
  setFilterOptions(list: UserInfoSS[]) {
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
@ -7,6 +7,7 @@
    <mat-drawer #leftSideDrawer mode="side" [disableClose]="true" opened>
      <app-layout-messenger-left-side
        #leftSideContainer
+        [gotoDeptTree]="gotoDeptTree"
        (openProfile)="onClickOpenProfile($event)"
        (sendCall)="sendClickToCall($event)"
        (sendSms)="openSms($event)"
@ -28,6 +29,7 @@
      <app-layout-messenger-main-contents
        [selectedChat]="this.selectedChat$ | async"
        (openProfile)="onClickOpenProfile($event)"
+        (gotoDeptTree)="onClickGotoDeptTree($event)"
        (closeRightDrawer)="onCloseRightDrawer()"
        (createConference)="conferenceCreate($event)"
      >
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
@ -85,6 +85,8 @@ export class MainPageComponent implements OnInit, OnDestroy {
  loginResSubscription: Subscription;
  environmentsInfo: EnvironmentsInfo;

+  gotoDeptTree: number;
+
  showLeftDrawer = true;
  showLeftDrawerIndicator = false;
  onLeftDrawerIndicator = false;
@ -466,6 +468,10 @@ export class MainPageComponent implements OnInit, OnDestroy {
    }
  }

+  onClickGotoDeptTree(deptSeq: number) {
+    this.gotoDeptTree = deptSeq;
+  }
+
  onCloseRightDrawer() {
    this.rightDrawer.close();
  }
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.html
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.html
@ -50,7 +50,12 @@
          {{ 'search.fieldDeptartment' | translate }}
        </div>
      </th>
-      <td mat-cell *matCellDef="let element" class="profileInfo">
+      <td
+        mat-cell
+        *matCellDef="let element"
+        class="profileInfo"
+        (click)="onClickGotoDeptTree($event, element.deptSeq)"
+      >
        <div class="baseInfo">
          <span
            *ngIf="getWorkstatusInfo(element, 'style').length > 0"
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.ts
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.ts
@ -41,6 +41,8 @@ export class DetailTableComponent implements OnInit, OnDestroy {
  @Output()
  openProfile = new EventEmitter<number>();
  @Output()
+  gotoDeptTree = new EventEmitter<number>();
+  @Output()
  toggleAllUser = new EventEmitter<{
    isChecked: boolean;
    userInfos: UserInfoSS[];
@ -280,4 +282,9 @@ export class DetailTableComponent implements OnInit, OnDestroy {
    event.stopPropagation();
    this.openProfile.emit(userSeq);
  }
+  onClickGotoDeptTree(event: MouseEvent, deptSeq: number) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.gotoDeptTree.emit(Number(deptSeq));
+  }
 }
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html
@ -39,7 +39,11 @@
        ></div>
      </div>

-      <li (click)="onClickNode(node)" matRipple>
+      <li
+        (click)="onClickNode(node)"
+        matRipple
+        [ngClass]="currentDeptSeq === node.deptInfo.seq ? 'current' : ''"
+      >
        <div class="tree-node-body">
          {{ node.deptInfo | ucapTranslate: 'name' }}
        </div>
@ -71,7 +75,10 @@
        ></div>
      </div>
      <li (click)="onClickNode(node)" matRipple>
-        <div class="tree-node-body">
+        <div
+          class="tree-node-body"
+          [ngClass]="currentDeptSeq === node.deptInfo.seq ? 'current' : ''"
+        >
          <span class="horizontal-line"></span>
          <button
            mat-icon-button
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts
@ -95,6 +95,8 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
      }
    });

+    this.deptInfoList = deptInfoList;
+
    remainChildNodeList.forEach(node => {
      if (nodeMap.has(node.deptInfo.parentSeq)) {
        nodeMap.get(node.deptInfo.parentSeq).children.push(node);
@ -104,7 +106,7 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {

    // 내부서 트리 오픈
    if (!this.myDeptRoot) {
-      this.myDeptRoot = this.getMyRoot(
+      this.myDeptRoot = this.getDeptRoot(
        deptInfoList,
        this.loginRes.departmentCode,
        []
@ -112,6 +114,8 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
    }

    if (!!this.myDeptRoot) {
+      this.currentDeptSeq = this.loginRes.departmentCode;
+
      this.myDeptRoot.reverse().forEach(seq => {
        this.treeControl.dataNodes.some(dn => {
          if (dn.deptInfo.seq === seq) {
@ -123,6 +127,40 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
    }
  }

+  @Input()
+  set gotoDept(deptSeq: number) {
+    if (!deptSeq || !this.deptInfoList || this.deptInfoList.length === 0) {
+      return;
+    }
+
+    const deptRoot = this.getDeptRoot(this.deptInfoList, deptSeq, []);
+    if (!!deptRoot) {
+      this.treeControl.collapseAll();
+
+      this.currentDeptSeq = deptSeq;
+
+      deptRoot.reverse().forEach(seq => {
+        this.treeControl.dataNodes.some(dn => {
+          if (dn.deptInfo.seq === seq) {
+            this.treeControl.expand(dn);
+            return;
+          }
+        });
+      });
+
+      // scroll index
+      if (!!this.cvsvOrganization) {
+        const curIndex = this.dataSource.expandedDataSubject.value.findIndex(
+          node => node.deptInfo.seq === this.currentDeptSeq
+        );
+        if (curIndex > -1) {
+          this.cvsvOrganization.scrollToIndex(curIndex);
+          this.psDirectiveRef.update();
+        }
+      }
+    }
+  }
+
  @Input()
  activate$: Observable<boolean>;

@ -138,6 +176,8 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
  @ViewChild(PerfectScrollbarDirective, { static: false })
  psDirectiveRef?: PerfectScrollbarDirective;

+  currentDeptSeq: number;
+  deptInfoList: DeptInfo[];
  myDeptRoot: number[];
  treeControl: FlatTreeControl<FlatNode>;
  treeFlattener: MatTreeFlattener<OrganizationNode, FlatNode>;
@ -249,6 +289,7 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
  }

  onClickNode(node: OrganizationNode) {
+    this.currentDeptSeq = node.deptInfo.seq;
    this.selected.emit(node.deptInfo);
  }

@ -278,7 +319,7 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
    return undefined;
  }

-  private getMyRoot(
+  private getDeptRoot(
    deptInfoList: DeptInfo[],
    srcDeptSeq: number,
    data: number[]
@ -291,7 +332,7 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
      if (info.type === DeptType.Root) {
        return data;
      } else {
-        return this.getMyRoot(deptInfoList, info.parentSeq, data);
+        return this.getDeptRoot(deptInfoList, info.parentSeq, data);
      }
    } else {
      return data;