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,17 +20,19 @@
</button>
</mat-form-field>
</div>
<div>
<ucap-room-list-item
*ngFor="let room of getRoomList()"
[loginRes]="loginRes"
[roomInfo]="room"
[roomUserInfo]="getRoomUserList(room)"
[sessionVerinfo]="sessionVerinfo"
(click)="onSelectedRoom(room)"
(contextmenu)="onContextMenuChat($event, room)"
>
</ucap-room-list-item>
<div style="height:100%">
<cdk-virtual-scroll-viewport itemSize="20" style="height: 100%">
<ucap-room-list-item
*ngFor="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>
<div

View File

@ -17,29 +17,58 @@
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
<div class="search-list">
<ucap-profile-user-list-item
*ngFor="let userInfo of selectedDepartmentUserInfoList$ | async"
[userInfo]="userInfo"
[checkable]="true"
[sessionVerinfo]="sessionVerinfo"
[selectedUserList]="selectedUserList"
[isChecked]="getCheckedUser(userInfo)"
(checkUser)="onCheckUser($event)"
<cdk-virtual-scroll-viewport
itemSize="20"
style="height: calc(100% - 20px);"
>
</ucap-profile-user-list-item>
<ucap-profile-user-list-item
*cdkVirtualFor="
let userInfo of selectedDepartmentUserInfoList$ | async;
templateCacheSize: 20
"
[userInfo]="userInfo"
[checkable]="true"
[sessionVerinfo]="sessionVerinfo"
[selectedUserList]="selectedUserList"
[isChecked]="getCheckedUser(userInfo)"
(checkUser)="onCheckUser($event)"
>
Loading...
</ucap-profile-user-list-item>
</cdk-virtual-scroll-viewport>
</div>
</div>
<div *ngIf="!isUserSelect" class="btn-box">
<!--선택된 후에는 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"
>({{ selectedUserList.length }})</span
>
</button>
<ul>
<li><button mat-flat-button (click)="onClickAddGroup()" class="mat-primary">그룹에 추가</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>
<li>
<button mat-flat-button (click)="onClickAddGroup()" class="mat-primary">
그룹에 추가
</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>
</div>
</div>

View File

@ -33,26 +33,45 @@
<ng-template mat-tab-label>
<mat-icon>group</mat-icon>
</ng-template>
<div>
<ucap-organization-tenant-search
[companyList]="companyList$ | async"
[companyCode]="companyCode"
(keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
(cancel)="onClickCancel($event)"
></ucap-organization-tenant-search>
</div>
<div *ngIf="!isShowSearch">
<ucap-group-expansion-panel
#groupExpansionPanel
[groupBuddyList]="groupBuddyList$ | async"
[favoritBuddyList]="favoritBuddyList$ | async"
[selectedUserList]="selectedUserList"
[checkable]="true"
(checkGroup)="onCheckGroup($event)"
>
<div>
<ucap-organization-tenant-search
[companyList]="companyList$ | async"
[companyCode]="companyCode"
(keyDownEnter)="
onKeyDownEnterOrganizationTenantSearch($event)
"
(cancel)="onClickCancel($event)"
></ucap-organization-tenant-search>
</div>
<div *ngIf="!isShowSearch">
<ucap-group-expansion-panel
#groupExpansionPanel
[groupBuddyList]="groupBuddyList$ | async"
[favoritBuddyList]="favoritBuddyList$ | async"
[selectedUserList]="selectedUserList"
[checkable]="true"
(checkGroup)="onCheckGroup($event)"
>
<ucap-profile-user-list-item
*ucapGroupExpansionPanelItem="let userInfo"
[userInfo]="userInfo"
[sessionVerinfo]="sessionVerinfo"
[selectedUserList]="selectedUserList"
[isChecked]="getCheckedUser(userInfo)"
[checkable]="true"
(checkUser)="onCheckUser($event)"
>
</ucap-profile-user-list-item>
</ucap-group-expansion-panel>
</div>
<div *ngIf="isShowSearch">
<div *ngIf="searchProcessing">
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
<div>검색결과({{ searchUserInfos.length }}명)</div>
<ucap-profile-user-list-item
*ucapGroupExpansionPanelItem="let userInfo"
*ngFor="let userInfo of searchUserInfos"
[userInfo]="userInfo"
[sessionVerinfo]="sessionVerinfo"
[selectedUserList]="selectedUserList"
@ -61,52 +80,42 @@
(checkUser)="onCheckUser($event)"
>
</ucap-profile-user-list-item>
</ucap-group-expansion-panel>
</div>
<div *ngIf="isShowSearch">
<div *ngIf="searchProcessing">
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
<div>검색결과({{ searchUserInfos.length }}명)</div>
<ucap-profile-user-list-item
*ngFor="let userInfo of searchUserInfos"
[userInfo]="userInfo"
[sessionVerinfo]="sessionVerinfo"
[selectedUserList]="selectedUserList"
[isChecked]="getCheckedUser(userInfo)"
[checkable]="true"
(checkUser)="onCheckUser($event)"
>
</ucap-profile-user-list-item>
</div>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>device_hub</mat-icon>
</ng-template>
<app-layout-chat-left-sidenav-organization
[selectedUserList]="selectedUserList"
[isUserSelect]="true"
(checkUser)="onCheckUser($event)"
>
</app-layout-chat-left-sidenav-organization>
<div style="height:500px">
<app-layout-chat-left-sidenav-organization
[selectedUserList]="selectedUserList"
[isUserSelect]="true"
(checkUser)="onCheckUser($event)"
>
</app-layout-chat-left-sidenav-organization>
</div>
</mat-tab>
<mat-tab *ngIf="data.type === UserSelectDialogType.MessageForward">
<ng-template mat-tab-label>
<mat-icon>chat</mat-icon>
</ng-template>
<ucap-room-list-item
*ngFor="let room of roomList"
[loginRes]="loginRes"
[roomInfo]="room"
[roomUserInfo]="getRoomUserList(room)"
[sessionVerinfo]="sessionVerinfo"
[checkable]="getCheckableRoom(room)"
[isChecked]="getCheckedRoom(room)"
[multiCheckable]="false"
(checkRoom)="onCheckRoom($event)"
>
</ucap-room-list-item>
<div style="height:500px">
<cdk-virtual-scroll-viewport itemSize="20" style="height: 100%">
<ucap-room-list-item
*ngFor="let room of roomList"
[loginRes]="loginRes"
[roomInfo]="room"
[roomUserInfo]="getRoomUserList(room)"
[sessionVerinfo]="sessionVerinfo"
[checkable]="getCheckableRoom(room)"
[isChecked]="getCheckedRoom(room)"
[multiCheckable]="false"
(checkRoom)="onCheckRoom($event)"
>
</ucap-room-list-item>
</cdk-virtual-scroll-viewport>
</div>
</mat-tab>
</mat-tab-group>
</div>