From b1ed539d46e289a0fa30c43cd768fe658352beee Mon Sep 17 00:00:00 2001
From: richard-loafle <44828666+richard-loafle@users.noreply.github.com>
Date: Thu, 30 Jan 2020 17:06:01 +0900
Subject: [PATCH] virtual-scroller is added

---
 .../left-sidenav/organization.component.html          | 11 ++++++-----
 .../components/left-sidenav/organization.component.ts | 10 ++++++----
 .../app/layouts/messenger/messenger.layout.module.ts  |  2 ++
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
index 77995867..ae9341a2 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
@@ -88,14 +88,15 @@
       </cdk-virtual-scroll-viewport>
     </div>
     <div *ngIf="isShowSearch" class="search-result">
-      <cdk-virtual-scroll-viewport
-        #cvsvDeptSearchUser
-        itemSize="60"
+      <virtual-scroller
+        #vsDeptSearchUser
+        [items]="searchUserInfos"
         perfectScrollbar
         fxFlexFill
       >
         <ucap-profile-user-list-item
-          *cdkVirtualFor="let userInfo of searchUserInfos"
+          style="height: 60px;"
+          *ngFor="let userInfo of vsDeptSearchUser.viewPortItems"
           [userInfo]="userInfo"
           [checkable]="userInfo.seq !== loginRes.userSeq"
           [sessionVerinfo]="sessionVerinfo"
@@ -110,7 +111,7 @@
           matTooltipPosition="after"
         >
         </ucap-profile-user-list-item>
-      </cdk-virtual-scroll-viewport>
+      </virtual-scroller>
     </div>
   </div>
   <div *ngIf="!isUserSelect" class="btn-box">
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts
index 53a0765f..6ae7a8b2 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts
@@ -66,6 +66,7 @@ import {
 } from '../../dialogs/organization/selected-user-list.dialog.component';
 import { TranslateService } from '@ngx-translate/core';
 import { StringFormatterPhonePipe } from 'projects/ucap-webmessenger-ui/src/lib/pipes/string.pipe';
+import { VirtualScrollerComponent } from 'ngx-virtual-scroller';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-organization',
@@ -120,8 +121,9 @@ export class OrganizationComponent
 
   @ViewChild('cvsvDeptUser', { static: false })
   cvsvDeptUser: CdkVirtualScrollViewport;
-  @ViewChild('cvsvDeptSearchUser', { static: false })
-  cvsvDeptSearchUser: CdkVirtualScrollViewport;
+
+  @ViewChild('vsDeptSearchUser', { static: false })
+  private vsDeptSearchUser: VirtualScrollerComponent;
 
   @ViewChild(PerfectScrollbarDirective, { static: false })
   psDirectiveRef?: PerfectScrollbarDirective;
@@ -306,8 +308,8 @@ export class OrganizationComponent
                   this.searchUserInfos = searchUserInfos;
                   this.selectedDepartmentProcessing = false;
 
-                  if (!!this.cvsvDeptSearchUser) {
-                    this.cvsvDeptSearchUser.scrollToOffset(0);
+                  if (!!this.vsDeptSearchUser) {
+                    this.vsDeptSearchUser.scrollToIndex(0);
                   }
                   if (!!this.psDirectiveRef) {
                     this.psDirectiveRef.update();
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
index decd71d3..f390f876 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
@@ -39,6 +39,7 @@ import { MatListModule } from '@angular/material/list';
 import { MatChipsModule } from '@angular/material/chips';
 
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import { VirtualScrollerModule } from 'ngx-virtual-scroller';
 
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -93,6 +94,7 @@ import { DIALOGS } from './dialogs';
     MatSidenavModule,
 
     PerfectScrollbarModule,
+    VirtualScrollerModule,
 
     TranslateModule,