[ISSUE 208] [ISSUE 153] fixed

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

@@ -50,46 +50,37 @@
   </div>
 </div>
 <div *ngIf="!isSearch" class="app-layout-chat-left-sidenav-chat-list">
-  <perfect-scrollbar fxFlex="1 1 auto">
+  <virtual-scroller
-    <ucap-room-list-item
+    #chatRoomList
-      *ngFor="let room of roomList"
+    [items]="roomList"
-      [loginRes]="loginRes"
-      [isSelected]="(selectedRoomInfo$ | async)?.roomSeq === room.roomSeq"
-      [roomInfo]="room"
-      [roomUserInfo]="getRoomUserList(room)"
-      [sessionVerinfo]="sessionVerinfo"
-      (click)="onClickContextMenu('SELECT_ROOM', room)"
-      (contextmenu)="onContextMenuChat($event, room)"
-      class="ucap-clickable"
-    >
-    </ucap-room-list-item>
-  </perfect-scrollbar>
-  <!-- <cdk-virtual-scroll-viewport
-    #cvsvChatList
-    itemSize="60"
     perfectScrollbar
     fxFlexFill
   >
     <ucap-room-list-item
-      *cdkVirtualFor="let room of roomList"
+      *ngFor="let room of chatRoomList.viewPortItems"
       [loginRes]="loginRes"
+      [isSelected]="(selectedRoomInfo$ | async)?.roomSeq === room.roomSeq"
       [roomInfo]="room"
       [roomUserInfo]="getRoomUserList(room)"
       [sessionVerinfo]="sessionVerinfo"
       (click)="onClickContextMenu('SELECT_ROOM', room)"
       (contextmenu)="onContextMenuChat($event, room)"
       class="ucap-clickable"
+      style="height: 60px;"
     >
     </ucap-room-list-item>
-  </cdk-virtual-scroll-viewport> -->
+  </virtual-scroller>
 </div>
 <div *ngIf="!!isSearch" class="app-layout-chat-left-sidenav-chat-list search">
-  <perfect-scrollbar
+  <virtual-scroller
-    fxFlex="1 1 auto"
     *ngIf="!!searchRoomList && 0 < searchRoomList.length"
+    #chatRoomSearchList
+    [items]="searchRoomList"
+    perfectScrollbar
+    fxFlexFill
   >
     <ucap-room-list-item
-      *ngFor="let room of searchRoomList"
+      *ngFor="let room of chatRoomSearchList.viewPortItems"
       [loginRes]="loginRes"
       [isSelected]="(selectedRoomInfo$ | async)?.roomSeq === room.roomSeq"
       [roomInfo]="room"
@@ -99,22 +90,8 @@
       (contextmenu)="onContextMenuChat($event, room)"
     >
     </ucap-room-list-item>
-  </perfect-scrollbar>
+  </virtual-scroller>
-  <!-- <cdk-virtual-scroll-viewport
+
-    itemSize="60"
-    class="app-layout-chat-left-sidenav-chat-list-viewport"
-  >
-    <ucap-room-list-item
-      *cdkVirtualFor="let room of getRoomList()"
-      [loginRes]="loginRes"
-      [roomInfo]="room"
-      [roomUserInfo]="getRoomUserList(room)"
-      [sessionVerinfo]="sessionVerinfo"
-      (click)="onSelectedRoom(room)"
-      (contextmenu)="onContextMenuChat($event, room)"
-    >
-    </ucap-room-list-item>
-  </cdk-virtual-scroll-viewport> -->
   <div
     class="no-search-result"
     fxFlexFill

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

@@ -15,7 +15,7 @@
     <ucap-organization-tree
       [oraganizationList]="departmentInfoList$ | async"
       [loginRes]="loginRes"
-      [activate$]="gnbMenuChangedSubject.asObservable()"
+      [activate$]="organizationTreeActivatedSubject.asObservable()"
       (selected)="onSelectedOrganization($event)"
       class="tab-tree-frame"
     ></ucap-organization-tree>

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

@@ -10,7 +10,13 @@ import {
   ChangeDetectorRef
 } from '@angular/core';
 import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
-import { Observable, Subscription, of, BehaviorSubject } from 'rxjs';
+import {
+  Observable,
+  Subscription,
+  of,
+  BehaviorSubject,
+  combineLatest
+} from 'rxjs';
 import {
   DeptInfo,
   QueryProtocolService,
@@ -155,10 +161,10 @@ export class OrganizationComponent
   isShowSearch = false;
   searchUserInfos: UserInfoSS[] = [];
 
-  gnbMenuChangedSubject: BehaviorSubject<boolean> = new BehaviorSubject<
+  organizationTreeActivatedSubject: BehaviorSubject<
     boolean
-  >(false);
+  > = new BehaviorSubject<boolean>(false);
-  gnbMenuChangedSubscription: Subscription;
+  organizationTreeActivatedSubscription: Subscription;
 
   /** 부서원 리스트에 virture scroll의 size 가 체킹되지 않아 강제 수행. 1번만. */
   isInitList = false;
@@ -263,10 +269,19 @@ export class OrganizationComponent
         }
       });
 
-    this.gnbMenuChangedSubscription = this.store
+    this.organizationTreeActivatedSubscription = combineLatest([
-      .pipe(select(AppStore.MessengerSelector.SettingsSelector.gnbMenuIndex))
+      this.store.pipe(
-      .subscribe(menu => {
+        select(AppStore.MessengerSelector.SettingsSelector.gnbMenuIndex)
-        this.gnbMenuChangedSubject.next(menu === MainMenu.Organization);
+      ),
+      this.store.pipe(
+        select(
+          AppStore.MessengerSelector.SettingsSelector.organizationTreeActivated
+        )
+      )
+    ]).subscribe(([menu, activate]) => {
+      this.organizationTreeActivatedSubject.next(
+        menu === MainMenu.Organization || activate
+      );
     });
   }
 
@@ -289,8 +304,8 @@ export class OrganizationComponent
     if (!!this.myDepartmentUserInfoListSubscription) {
       this.myDepartmentUserInfoListSubscription.unsubscribe();
     }
-    if (!!this.gnbMenuChangedSubscription) {
+    if (!!this.organizationTreeActivatedSubscription) {
-      this.gnbMenuChangedSubscription.unsubscribe();
+      this.organizationTreeActivatedSubscription.unsubscribe();
     }
   }
 

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.ts

@@ -25,6 +25,7 @@ import { map, tap, catchError, take } from 'rxjs/operators';
 import { Store, select } from '@ngrx/store';
 import * as AppStore from '@app/store';
 import * as StatusStore from '@app/store/messenger/status';
+import * as SettingsStore from '@app/store/messenger/settings';
 
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { Company } from '@ucap-webmessenger/api-external';
@@ -64,7 +65,6 @@ import {
 } from '@ucap-webmessenger/ui';
 import { TranslateService, TranslateParser } from '@ngx-translate/core';
 import { environment } from '../../../../../environments/environment';
-import { StringUtil } from '@ucap-webmessenger/core';
 
 export interface CreateChatDialogData {
   type?: string;
@@ -397,11 +397,17 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
   onSelectedTabChange(tabChangeEvent: MatTabChangeEvent): void {
     this.currentTabIndex = tabChangeEvent.index;
 
-    if (tabChangeEvent.index === 2) {
+    if (2 === tabChangeEvent.index) {
       this.selectedUserList = [];
     } else {
       this.selectedRoom = null;
     }
+
+    this.store.dispatch(
+      SettingsStore.organizationTreeActivated({
+        activate: 1 === tabChangeEvent.index
+      })
+    );
   }
 
   /** 유저검색 */

projects/ucap-webmessenger-app/src/app/store/messenger/settings/actions.ts

@@ -7,3 +7,8 @@ export const selectedGnbMenuIndex = createAction(
   '[Messenger::Settings] select Gnb MenuIndex',
   props<{ menuIndex: MainMenu }>()
 );
+
+export const organizationTreeActivated = createAction(
+  '[Messenger::Settings] Organization Tree Activated',
+  props<{ activate: boolean }>()
+);

projects/ucap-webmessenger-app/src/app/store/messenger/settings/reducers.ts

@@ -1,6 +1,6 @@
 import { createReducer, on } from '@ngrx/store';
 import { initialState } from './state';
-import { selectedGnbMenuIndex } from './actions';
+import { selectedGnbMenuIndex, organizationTreeActivated } from './actions';
 
 import * as AuthenticationStore from '@app/store/account/authentication';
 
@@ -12,6 +12,12 @@ export const reducer = createReducer(
       gnbMenuIndex: action.menuIndex
     };
   }),
+  on(organizationTreeActivated, (state, action) => {
+    return {
+      ...state,
+      organizationTreeActivated: action.activate
+    };
+  }),
 
   on(AuthenticationStore.logoutInitialize, (state, action) => {
     return {

projects/ucap-webmessenger-app/src/app/store/messenger/settings/state.ts

@@ -5,14 +5,23 @@ import { MainMenu } from '@app/types';
 
 export interface State {
   gnbMenuIndex: MainMenu;
+  organizationTreeActivated: boolean;
 }
 
 export const initialState: State = {
-  gnbMenuIndex: MainMenu.Group
+  gnbMenuIndex: MainMenu.Group,
+  organizationTreeActivated: false
 };
 
 export function selectors<S>(selector: Selector<any, State>) {
   return {
-    gnbMenuIndex: createSelector(selector, (state: State) => state.gnbMenuIndex)
+    gnbMenuIndex: createSelector(
+      selector,
+      (state: State) => state.gnbMenuIndex
+    ),
+    organizationTreeActivated: createSelector(
+      selector,
+      (state: State) => state.organizationTreeActivated
+    )
   };
 }