Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger

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

@@ -140,10 +140,12 @@
     </mat-tab>
   </mat-tab-group>
 
-  <div class="myprofile">
+  <ucap-profile-my-profile-widget
-    <span class="myprofile-img"></span>
+    [profileImageRoot]="sessionVerinfo.profileRoot"
-    <span>내프로필</span>
+    [profileImageFile]="loginRes.userInfo.profileImageFile"
-  </div>
+    (click)="onClickOpenProfile(loginRes.userInfo)"
+    class="myprofile"
+  ></ucap-profile-my-profile-widget>
 
   <div class="left-side-tabs-body">
     <div

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss

@@ -45,16 +45,8 @@
   color: #ffffff;
   font-size: 11px;
   text-align: center;
-
+  z-index: 1;
-  .myprofile-img {
+  cursor: pointer;
-    display: block;
-    border-radius: 10px;
-    height: 42px;
-    width: 42px;
-    background-color: #efefef;
-    align-self: center;
-    margin-bottom: 6px;
-  }
 }
 
 ::ng-deep .organization-side {

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

@@ -30,6 +30,11 @@ import {
 } from '@ucap-webmessenger/protocol-query';
 import { MatTabChangeEvent, MatTabGroup } from '@angular/material';
 import { RightDrawer } from '@app/types';
+import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
+import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
+import { KEY_VER_INFO } from '@app/types/ver-info.type';
 
 export enum MainMenu {
   Group = 'GROUP',
@@ -67,11 +72,22 @@ export class LeftSideComponent implements OnInit, OnDestroy {
 
   MainMenu = MainMenu;
 
+  sessionVerinfo: VersionInfo2Response;
+  loginRes: LoginResponse;
+
   constructor(
     private store: Store<any>,
     private dialogService: DialogService,
+    private sessionStorageService: SessionStorageService,
     private logger: NGXLogger
-  ) {}
+  ) {
+    this.loginRes = this.sessionStorageService.get<LoginResponse>(
+      KEY_LOGIN_RES_INFO
+    );
+    this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
+      KEY_VER_INFO
+    );
+  }
 
   ngOnInit() {
     this.badgeChatUnReadCountSubscription = this.store

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

@@ -44,7 +44,7 @@
     <div *ngIf="selectedDepartmentProcessing">
       <mat-progress-bar mode="indeterminate"></mat-progress-bar>
     </div>
-    <div class="search-list">
+    <div *ngIf="!isShowSearch" class="search-list">
       <cdk-virtual-scroll-viewport
         itemSize="80"
         #cvsvDeptUser

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

@@ -24,10 +24,14 @@
         <div class="tree-node-closer-top"></div>
         <div
           class="tree-node-closer-bottom"
-          [attr.lastNode]="isLastNode(node) ? '' : null"
+          [attr.last-node]="isLastNode(node) ? '' : null"
         ></div>
       </div>
-      <li (click)="onClickNode(node)" matRipple>
+      <li
+        (click)="onClickNode(node)"
+        matRipple
+        [attr.sub-node]="isParentLastNode(node) ? '' : null"
+      >
         <div class="tree-node-body">{{ node.name }}</div>
       </li>
     </mat-tree-node>
@@ -43,10 +47,14 @@
         <div
           class="tree-node-closer-bottom"
           [attr.expanded]="treeControl.isExpanded(node) ? '' : null"
-          [attr.lastNode]="isLastNode(node) ? '' : null"
+          [attr.last-node]="isLastNode(node) ? '' : null"
         ></div>
       </div>
-      <li (click)="onClickNode(node)" matRipple>
+      <li
+        (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

@@ -28,7 +28,7 @@
     .tree-node-closer-bottom[expanded] {
       border-width: 0 0 1px 0px;
     }
-    .tree-node-closer-bottom[lastNode] {
+    .tree-node-closer-bottom[last-node] {
       border-width: 0 0 1px 0px;
     }
   }
@@ -39,6 +39,11 @@
     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

@@ -154,9 +154,7 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
   hasChild = (_: number, node: FlatNode) => node.expandable;
 
   isLastNode(node: FlatNode): boolean {
-    const i = this.dataSource.expandedDataSubject.value.findIndex(n => {
+    const i = this.findNodeIndex(node);
-      return node.deptInfo.seq === n.deptInfo.seq;
-    });
 
     if (i === this.dataSource.expandedDataSubject.value.length - 1) {
       return true;
@@ -168,7 +166,38 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
     return false;
   }
 
+  isParentLastNode(node: FlatNode): boolean {
+    const pi = this.findParentNodeIndex(node);
+    if (-1 === pi) {
+      return false;
+    }
+    return this.isLastNode(this.dataSource.expandedDataSubject.value[pi]);
+  }
+
   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) {
+      return -1;
+    }
+
+    for (let idx = i - 1; idx >= 0; idx--) {
+      if (
+        this.dataSource.expandedDataSubject.value[idx].level ===
+        node.level - 1
+      ) {
+        return idx;
+      }
+    }
+    return -1;
+  }
 }

projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.html

@@ -0,0 +1,12 @@
+<div class="myprofile">
+  <span class="myprofile-img">
+    <img
+      class="thumbnail"
+      ucapImage
+      [base]="profileImageRoot"
+      [path]="profileImageFile"
+      [default]="'assets/images/img_nophoto_50.png'"
+    />
+  </span>
+  <span>내프로필</span>
+</div>

projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.scss

@@ -0,0 +1,26 @@
+.myprofile {
+  position: absolute;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  height: 80px;
+  width: 68px;
+  bottom: 10px;
+  color: #ffffff;
+  font-size: 11px;
+  text-align: center;
+
+  .myprofile-img {
+    display: block;
+    border-radius: 10px;
+    height: 42px;
+    width: 42px;
+    background-color: #efefef;
+    align-self: center;
+    margin-bottom: 6px;
+
+    .thumbnail {
+      border-radius: 10px;
+    }
+  }
+}

projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MyProfileWidgetComponent } from './my-profile-widget.component';
+
+describe('MyProfileWidgetComponent', () => {
+  let component: MyProfileWidgetComponent;
+  let fixture: ComponentFixture<MyProfileWidgetComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MyProfileWidgetComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MyProfileWidgetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { UserInfo } from '@ucap-webmessenger/protocol-room';
+import {
+  UserInfoSS,
+  UserInfoF,
+  UserInfoDN
+} from '@ucap-webmessenger/protocol-query';
+
+@Component({
+  selector: 'ucap-profile-my-profile-widget',
+  templateUrl: './my-profile-widget.component.html',
+  styleUrls: ['./my-profile-widget.component.scss']
+})
+export class MyProfileWidgetComponent implements OnInit {
+  @Input()
+  profileImageRoot: string;
+  @Input()
+  profileImageFile: string;
+
+  @Output()
+  openProfile = new EventEmitter<
+    UserInfo | UserInfoSS | UserInfoF | UserInfoDN
+  >();
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  onClickOpenProfile(
+    event: MouseEvent,
+    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN
+  ) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.openProfile.emit(userInfo);
+  }
+}

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

@@ -14,8 +14,14 @@ import { UCapUiModule } from '@ucap-webmessenger/ui';
 import { ListItemComponent } from './components/list-item.component';
 import { UserListItemComponent } from './components/user-list-item.component';
 import { ProfileComponent } from './components/profile.component';
+import { MyProfileWidgetComponent } from './components/my-profile-widget.component';
 
-const COMPONENTS = [ListItemComponent, UserListItemComponent, ProfileComponent];
+const COMPONENTS = [
+  ListItemComponent,
+  UserListItemComponent,
+  ProfileComponent,
+  MyProfileWidgetComponent
+];
 
 const SERVICES = [];