virtual-scroller is added

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

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

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,