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

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

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;

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"

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;
 

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'
   "

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();
   }

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>

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[]) {

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)"
       >

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();
   }

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"

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));
+  }
 }

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

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;