ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

virtual-scroller is added

Browse Source
This commit is contained in:
richard-loafle 2020-01-30 17:06:01 +09:00
parent d71d13c676
commit b1ed539d46
3 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -88,14 +88,15 @@
</cdk-virtual-scroll-viewport> </cdk-virtual-scroll-viewport>
</div> </div>
<div *ngIf="isShowSearch" class="search-result"> <div *ngIf="isShowSearch" class="search-result">
<cdk-virtual-scroll-viewport <virtual-scroller
#cvsvDeptSearchUser #vsDeptSearchUser
itemSize="60" [items]="searchUserInfos"
perfectScrollbar perfectScrollbar
fxFlexFill fxFlexFill
> >
<ucap-profile-user-list-item <ucap-profile-user-list-item
*cdkVirtualFor="let userInfo of searchUserInfos" style="height: 60px;"
*ngFor="let userInfo of vsDeptSearchUser.viewPortItems"
[userInfo]="userInfo" [userInfo]="userInfo"
[checkable]="userInfo.seq !== loginRes.userSeq" [checkable]="userInfo.seq !== loginRes.userSeq"
[sessionVerinfo]="sessionVerinfo" [sessionVerinfo]="sessionVerinfo"
@ -110,7 +111,7 @@
matTooltipPosition="after" matTooltipPosition="after"
> >
</ucap-profile-user-list-item> </ucap-profile-user-list-item>
</cdk-virtual-scroll-viewport> </virtual-scroller>
</div> </div>
</div> </div>
<div *ngIf="!isUserSelect" class="btn-box"> <div *ngIf="!isUserSelect" class="btn-box">

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

@ -66,6 +66,7 @@ import {
} from '../../dialogs/organization/selected-user-list.dialog.component'; } from '../../dialogs/organization/selected-user-list.dialog.component';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { StringFormatterPhonePipe } from 'projects/ucap-webmessenger-ui/src/lib/pipes/string.pipe'; import { StringFormatterPhonePipe } from 'projects/ucap-webmessenger-ui/src/lib/pipes/string.pipe';
import { VirtualScrollerComponent } from 'ngx-virtual-scroller';
@Component({ @Component({
selector: 'app-layout-chat-left-sidenav-organization', selector: 'app-layout-chat-left-sidenav-organization',
@ -120,8 +121,9 @@ export class OrganizationComponent
@ViewChild('cvsvDeptUser', { static: false }) @ViewChild('cvsvDeptUser', { static: false })
cvsvDeptUser: CdkVirtualScrollViewport; cvsvDeptUser: CdkVirtualScrollViewport;
@ViewChild('cvsvDeptSearchUser', { static: false })
cvsvDeptSearchUser: CdkVirtualScrollViewport; @ViewChild('vsDeptSearchUser', { static: false })
private vsDeptSearchUser: VirtualScrollerComponent;
@ViewChild(PerfectScrollbarDirective, { static: false }) @ViewChild(PerfectScrollbarDirective, { static: false })
psDirectiveRef?: PerfectScrollbarDirective; psDirectiveRef?: PerfectScrollbarDirective;
@ -306,8 +308,8 @@ export class OrganizationComponent
this.searchUserInfos = searchUserInfos; this.searchUserInfos = searchUserInfos;
this.selectedDepartmentProcessing = false; this.selectedDepartmentProcessing = false;
if (!!this.cvsvDeptSearchUser) { if (!!this.vsDeptSearchUser) {
this.cvsvDeptSearchUser.scrollToOffset(0); this.vsDeptSearchUser.scrollToIndex(0);
} }
if (!!this.psDirectiveRef) { if (!!this.psDirectiveRef) {
this.psDirectiveRef.update(); this.psDirectiveRef.update();

2
projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
View File

@ -39,6 +39,7 @@ import { MatListModule } from '@angular/material/list';
import { MatChipsModule } from '@angular/material/chips'; import { MatChipsModule } from '@angular/material/chips';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'; import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { VirtualScrollerModule } from 'ngx-virtual-scroller';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
@ -93,6 +94,7 @@ import { DIALOGS } from './dialogs';
MatSidenavModule, MatSidenavModule,
PerfectScrollbarModule, PerfectScrollbarModule,
VirtualScrollerModule,
TranslateModule, TranslateModule,