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

@@ -25,11 +25,6 @@
           </svg>
         </div>
       </ng-template>
-      <app-layout-chat-left-sidenav-group
-        class="left-group-side"
-        (newGroupAndMember)="onClickNewGroupAndMember()"
-        (openProfile)="onClickOpenProfile($event)"
-      ></app-layout-chat-left-sidenav-group>
     </mat-tab>
     <mat-tab [aria-label]="MainMenu.Chat">
       <ng-template mat-tab-label>
@@ -66,7 +61,6 @@
           </svg>
         </div>
       </ng-template>
-      <app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
     </mat-tab>
     <mat-tab [aria-label]="MainMenu.Organization">
       <ng-template mat-tab-label>
@@ -92,12 +86,6 @@
           </svg>
         </div>
       </ng-template>
-      <app-layout-chat-left-sidenav-organization
-        [selectedUserList]="selectedUserList"
-        (checkAllUser)="onCheckAllUser($event)"
-        (checkUser)="onCheckUser($event)"
-        class="organization-side"
-      ></app-layout-chat-left-sidenav-organization>
     </mat-tab>
     <mat-tab [aria-label]="MainMenu.Call">
       <ng-template mat-tab-label>
@@ -127,9 +115,33 @@
           </svg>
         </div>
       </ng-template>
-      <app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
     </mat-tab>
   </mat-tab-group>
+
+  <div class="left-side-tabs-body">
+    <div #tabs id="tabs-0" style="display: block;">
+      <app-layout-chat-left-sidenav-group
+        class="left-group-side"
+        (newGroupAndMember)="onClickNewGroupAndMember()"
+        (openProfile)="onClickOpenProfile($event)"
+      ></app-layout-chat-left-sidenav-group>
+    </div>
+    <div #tabs id="tabs-1" style="display: none;">
+      <app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
+    </div>
+    <div #tabs id="tabs-2" style="display: none;">
+      <app-layout-chat-left-sidenav-organization
+        [selectedUserList]="selectedUserList"
+        (checkAllUser)="onCheckAllUser($event)"
+        (checkUser)="onCheckUser($event)"
+        class="organization-side"
+      ></app-layout-chat-left-sidenav-organization>
+    </div>
+    <div #tabs id="tabs-3" style="display: none;">
+      <app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
+    </div>
+  </div>
+
   <ucap-float-action-button
     *ngIf="fabButtonShow"
     [fabButtons]="fabButtons"

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

@@ -5,12 +5,18 @@
 
 ::ng-deep .mat-tab-body-wrapper,
 ::ng-deep .mat-tab-body {
-  height: 100%;
+  height: 0%;
-  width: 100%;
+  width: 0%;
 }
 ::ng-deep .mat-tab-header {
   border-bottom: none !important;
 }
+
+.left-side-tabs-body {
+  height: 100%;
+  width: 100%;
+}
+
 .container {
   display: flex;
   height: 100%;
@@ -18,7 +24,7 @@
 
 .mat-tab-group {
   display: flex;
-  width: 100%;
+  width: 70px;
   flex-direction: row;
 }
 ::ng-deep .organization-side {

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

@@ -1,5 +1,13 @@
 import { UserSelectDialogType } from './../../../types/userselect.dialog.type';
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Output,
+  EventEmitter,
+  ViewChildren,
+  QueryList,
+  ElementRef
+} from '@angular/core';
 import { NGXLogger } from 'ngx-logger';
 import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
 import {
@@ -42,6 +50,8 @@ export class LeftSideComponent implements OnInit {
     UserInfo | UserInfoSS | UserInfoF | UserInfoDN
   >();
 
+  @ViewChildren('tabs') tabs: QueryList<ElementRef<HTMLDivElement>>;
+
   badgeChatUnReadCount$: Observable<number>;
 
   /** 조직도에서 부서원 선택 */
@@ -134,6 +144,14 @@ export class LeftSideComponent implements OnInit {
 
   onSelectedTabChange(event: MatTabChangeEvent) {
     this.setFabInitial(event.tab.ariaLabel);
+
+    this.tabs.forEach(tab => {
+      if (`tabs-${event.index}` === tab.nativeElement.id) {
+        tab.nativeElement.style.display = 'block';
+      } else {
+        tab.nativeElement.style.display = 'none';
+      }
+    });
   }
   setFabInitial(type: string) {
     switch (type) {

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

@@ -65,24 +65,26 @@
   </mat-menu>
 </div>
 <div *ngIf="!isShowSearch" class="search-result" style="overflow: auto;">
-  <ucap-group-expansion-panel
+  <perfect-scrollbar>
-    #groupExpansionPanel
+    <ucap-group-expansion-panel
-    [groupBuddyList]="groupBuddyList$ | async"
+      #groupExpansionPanel
-    [favoritBuddyList]="favoritBuddyList$ | async"
+      [groupBuddyList]="groupBuddyList$ | async"
-    [myProfileInfo]="loginRes.userInfo"
+      [favoritBuddyList]="favoritBuddyList$ | async"
-    (more)="onMoreGroup($event)"
+      [myProfileInfo]="loginRes.userInfo"
-  >
+      (more)="onMoreGroup($event)"
-    <ucap-profile-user-list-item
-      *ucapGroupExpansionPanelItem="let userInfo"
-      [userInfo]="userInfo"
-      [presence]="getStatusBulkInfo(userInfo) | async"
-      [sessionVerinfo]="sessionVerinfo"
-      (click)="onSelectBuddy(userInfo)"
-      (openProfile)="onClickOpenProfile($event)"
-      (contextmenu)="onContextMenuProfile($event, userInfo)"
     >
-    </ucap-profile-user-list-item>
+      <ucap-profile-user-list-item
-  </ucap-group-expansion-panel>
+        *ucapGroupExpansionPanelItem="let userInfo"
+        [userInfo]="userInfo"
+        [presence]="getStatusBulkInfo(userInfo) | async"
+        [sessionVerinfo]="sessionVerinfo"
+        (click)="onSelectBuddy(userInfo)"
+        (openProfile)="onClickOpenProfile($event)"
+        (contextmenu)="onContextMenuProfile($event, userInfo)"
+      >
+      </ucap-profile-user-list-item>
+    </ucap-group-expansion-panel>
+  </perfect-scrollbar>
 </div>
 <div *ngIf="isShowSearch" class="search-result">
   <div *ngIf="searchProcessing">

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

@@ -12,11 +12,13 @@
 </div>
 <div class="oraganization-tab">
   <div class="oraganization-tab-tree">
-    <ucap-organization-tree
+    <perfect-scrollbar>
-      [oraganizationList]="departmentInfoList$ | async"
+      <ucap-organization-tree
-      [loginRes]="loginRes"
+        [oraganizationList]="departmentInfoList$ | async"
-      (selected)="onSelectedOrganization($event)"
+        [loginRes]="loginRes"
-    ></ucap-organization-tree>
+        (selected)="onSelectedOrganization($event)"
+      ></ucap-organization-tree>
+    </perfect-scrollbar>
   </div>
   <div class="select-list">
     <dl class="select-dept text-accent-color">
@@ -44,19 +46,21 @@
       <mat-progress-bar mode="indeterminate"></mat-progress-bar>
     </div>
     <div *ngIf="!isShowSearch" class="search-list">
-      <cdk-virtual-scroll-viewport itemSize="20" style="height: 100%;">
+      <perfect-scrollbar>
-        <ucap-profile-user-list-item
+        <cdk-virtual-scroll-viewport itemSize="20" fxFlexFill>
-          *cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"
+          <ucap-profile-user-list-item
-          [userInfo]="userInfo"
+            *cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"
-          [checkable]="true"
+            [userInfo]="userInfo"
-          [sessionVerinfo]="sessionVerinfo"
+            [checkable]="true"
-          [selectedUserList]="selectedUserList"
+            [sessionVerinfo]="sessionVerinfo"
-          [isChecked]="getCheckedUser(userInfo)"
+            [selectedUserList]="selectedUserList"
-          (checkUser)="onCheckUser($event)"
+            [isChecked]="getCheckedUser(userInfo)"
-        >
+            (checkUser)="onCheckUser($event)"
-          Loading...
+          >
-        </ucap-profile-user-list-item>
+            Loading...
-      </cdk-virtual-scroll-viewport>
+          </ucap-profile-user-list-item>
+        </cdk-virtual-scroll-viewport>
+      </perfect-scrollbar>
       <!-- <ucap-profile-user-list-item
         *ngFor="let userInfo of selectedDepartmentUserInfoList$ | async"
         [userInfo]="userInfo"

projects/ucap-webmessenger-ui-account/src/lib/components/login.component.ts

@@ -5,7 +5,8 @@ import {
   Output,
   EventEmitter,
   ViewChild,
-  ElementRef
+  ElementRef,
+  ChangeDetectorRef
 } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Company } from '@ucap-webmessenger/api-external';
@@ -40,6 +41,7 @@ export class LoginComponent implements OnInit {
 
   constructor(
     private formBuilder: FormBuilder,
+    private changeDetectorRef: ChangeDetectorRef,
     private localStorageService: LocalStorageService
   ) {}
 
@@ -47,21 +49,20 @@ export class LoginComponent implements OnInit {
     const loginInfo: LoginInfo = this.localStorageService.get<LoginInfo>(
       KEY_LOGIN_INFO
     );
-    let companyCode = '';
-    let loginId = '';
-    let remember = false;
-    if (loginInfo && loginInfo.companyCode && loginInfo.loginId) {
-      companyCode = loginInfo.companyCode;
-      loginId = loginInfo.loginId;
-      remember = true;
-    }
     this.loginForm = this.formBuilder.group({
-      companyCode: [companyCode, [Validators.required]],
+      companyCode: ['', [Validators.required]],
-      loginId: [loginId, [Validators.required]],
+      loginId: ['', [Validators.required]],
       loginPw: ['', Validators.required],
-      remember: [remember]
+      remember: [false]
     });
 
+    if (loginInfo && loginInfo.companyCode && loginInfo.loginId) {
+      this.loginForm.get('companyCode').setValue(loginInfo.companyCode);
+      this.loginForm.get('loginId').setValue(loginInfo.loginId);
+      this.loginForm.get('remember').setValue(true);
+      this.changeDetectorRef.detectChanges();
+    }
+
     if (!this.loginBtnText || this.loginBtnText.trim().length === 0) {
       this.loginBtnText = 'LOGIN';
     }