virture scroll 기능 추가.

This commit is contained in:
leejh 2019-10-28 11:15:20 +09:00
parent 451c013421
commit e56b3a8c4d
3 changed files with 116 additions and 76 deletions

View File

@ -20,7 +20,8 @@
</button> </button>
</mat-form-field> </mat-form-field>
</div> </div>
<div> <div style="height:100%">
<cdk-virtual-scroll-viewport itemSize="20" style="height: 100%">
<ucap-room-list-item <ucap-room-list-item
*ngFor="let room of getRoomList()" *ngFor="let room of getRoomList()"
[loginRes]="loginRes" [loginRes]="loginRes"
@ -31,6 +32,7 @@
(contextmenu)="onContextMenuChat($event, room)" (contextmenu)="onContextMenuChat($event, room)"
> >
</ucap-room-list-item> </ucap-room-list-item>
</cdk-virtual-scroll-viewport>
</div> </div>
<div <div

View File

@ -17,8 +17,15 @@
<mat-progress-bar mode="indeterminate"></mat-progress-bar> <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div> </div>
<div class="search-list"> <div class="search-list">
<cdk-virtual-scroll-viewport
itemSize="20"
style="height: calc(100% - 20px);"
>
<ucap-profile-user-list-item <ucap-profile-user-list-item
*ngFor="let userInfo of selectedDepartmentUserInfoList$ | async" *cdkVirtualFor="
let userInfo of selectedDepartmentUserInfoList$ | async;
templateCacheSize: 20
"
[userInfo]="userInfo" [userInfo]="userInfo"
[checkable]="true" [checkable]="true"
[sessionVerinfo]="sessionVerinfo" [sessionVerinfo]="sessionVerinfo"
@ -26,20 +33,42 @@
[isChecked]="getCheckedUser(userInfo)" [isChecked]="getCheckedUser(userInfo)"
(checkUser)="onCheckUser($event)" (checkUser)="onCheckUser($event)"
> >
Loading...
</ucap-profile-user-list-item> </ucap-profile-user-list-item>
</cdk-virtual-scroll-viewport>
</div> </div>
</div> </div>
<div *ngIf="!isUserSelect" class="btn-box"> <div *ngIf="!isUserSelect" class="btn-box">
<!--선택된 후에는 disabled="true" 빼주세요. --> <!--선택된 후에는 disabled="true" 빼주세요. -->
<button mat-stroked-button class="mat-primary" (click)="onClickShowSelectedUserList()"> <button
mat-stroked-button
class="mat-primary"
(click)="onClickShowSelectedUserList()"
>
선택<span *ngIf="selectedUserList.length > 0" 선택<span *ngIf="selectedUserList.length > 0"
>({{ selectedUserList.length }})</span >({{ selectedUserList.length }})</span
> >
</button> </button>
<ul> <ul>
<li><button mat-flat-button (click)="onClickAddGroup()" class="mat-primary">그룹에 추가</button></li> <li>
<li><button mat-flat-button (click)="onClickChatOpen()" class="mat-primary">대화</button></li> <button mat-flat-button (click)="onClickAddGroup()" class="mat-primary">
<li><button mat-flat-button (click)="onClickConference()" class="mat-primary">화상회의</button></li> 그룹에 추가
</button>
</li>
<li>
<button mat-flat-button (click)="onClickChatOpen()" class="mat-primary">
대화
</button>
</li>
<li>
<button
mat-flat-button
(click)="onClickConference()"
class="mat-primary"
>
화상회의
</button>
</li>
</ul> </ul>
</div> </div>
</div> </div>

View File

@ -33,12 +33,14 @@
<ng-template mat-tab-label> <ng-template mat-tab-label>
<mat-icon>group</mat-icon> <mat-icon>group</mat-icon>
</ng-template> </ng-template>
<div>
<div> <div>
<ucap-organization-tenant-search <ucap-organization-tenant-search
[companyList]="companyList$ | async" [companyList]="companyList$ | async"
[companyCode]="companyCode" [companyCode]="companyCode"
(keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)" (keyDownEnter)="
onKeyDownEnterOrganizationTenantSearch($event)
"
(cancel)="onClickCancel($event)" (cancel)="onClickCancel($event)"
></ucap-organization-tenant-search> ></ucap-organization-tenant-search>
</div> </div>
@ -79,22 +81,27 @@
> >
</ucap-profile-user-list-item> </ucap-profile-user-list-item>
</div> </div>
</div>
</mat-tab> </mat-tab>
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<mat-icon>device_hub</mat-icon> <mat-icon>device_hub</mat-icon>
</ng-template> </ng-template>
<div style="height:500px">
<app-layout-chat-left-sidenav-organization <app-layout-chat-left-sidenav-organization
[selectedUserList]="selectedUserList" [selectedUserList]="selectedUserList"
[isUserSelect]="true" [isUserSelect]="true"
(checkUser)="onCheckUser($event)" (checkUser)="onCheckUser($event)"
> >
</app-layout-chat-left-sidenav-organization> </app-layout-chat-left-sidenav-organization>
</div>
</mat-tab> </mat-tab>
<mat-tab *ngIf="data.type === UserSelectDialogType.MessageForward"> <mat-tab *ngIf="data.type === UserSelectDialogType.MessageForward">
<ng-template mat-tab-label> <ng-template mat-tab-label>
<mat-icon>chat</mat-icon> <mat-icon>chat</mat-icon>
</ng-template> </ng-template>
<div style="height:500px">
<cdk-virtual-scroll-viewport itemSize="20" style="height: 100%">
<ucap-room-list-item <ucap-room-list-item
*ngFor="let room of roomList" *ngFor="let room of roomList"
[loginRes]="loginRes" [loginRes]="loginRes"
@ -107,6 +114,8 @@
(checkRoom)="onCheckRoom($event)" (checkRoom)="onCheckRoom($event)"
> >
</ucap-room-list-item> </ucap-room-list-item>
</cdk-virtual-scroll-viewport>
</div>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</div> </div>