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

virture scroll 기능 추가.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -17,29 +17,58 @@
<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">
<ucap-profile-user-list-item <cdk-virtual-scroll-viewport
*ngFor="let userInfo of selectedDepartmentUserInfoList$ | async" itemSize="20"
[userInfo]="userInfo" style="height: calc(100% - 20px);"
[checkable]="true"
[sessionVerinfo]="sessionVerinfo"
[selectedUserList]="selectedUserList"
[isChecked]="getCheckedUser(userInfo)"
(checkUser)="onCheckUser($event)"
> >
</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> </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>

113
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
View File

@ -33,26 +33,45 @@
<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>
<ucap-organization-tenant-search <div>
[companyList]="companyList$ | async" <ucap-organization-tenant-search
[companyCode]="companyCode" [companyList]="companyList$ | async"
(keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)" [companyCode]="companyCode"
(cancel)="onClickCancel($event)" (keyDownEnter)="
></ucap-organization-tenant-search> onKeyDownEnterOrganizationTenantSearch($event)
</div> "
<div *ngIf="!isShowSearch"> (cancel)="onClickCancel($event)"
<ucap-group-expansion-panel ></ucap-organization-tenant-search>
#groupExpansionPanel </div>
[groupBuddyList]="groupBuddyList$ | async" <div *ngIf="!isShowSearch">
[favoritBuddyList]="favoritBuddyList$ | async" <ucap-group-expansion-panel
[selectedUserList]="selectedUserList" #groupExpansionPanel
[checkable]="true" [groupBuddyList]="groupBuddyList$ | async"
(checkGroup)="onCheckGroup($event)" [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 <ucap-profile-user-list-item
*ucapGroupExpansionPanelItem="let userInfo" *ngFor="let userInfo of searchUserInfos"
[userInfo]="userInfo" [userInfo]="userInfo"
[sessionVerinfo]="sessionVerinfo" [sessionVerinfo]="sessionVerinfo"
[selectedUserList]="selectedUserList" [selectedUserList]="selectedUserList"
@ -61,52 +80,42 @@
(checkUser)="onCheckUser($event)" (checkUser)="onCheckUser($event)"
> >
</ucap-profile-user-list-item> </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>
<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> </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>
<app-layout-chat-left-sidenav-organization <div style="height:500px">
[selectedUserList]="selectedUserList" <app-layout-chat-left-sidenav-organization
[isUserSelect]="true" [selectedUserList]="selectedUserList"
(checkUser)="onCheckUser($event)" [isUserSelect]="true"
> (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>
<ucap-room-list-item <div style="height:500px">
*ngFor="let room of roomList" <cdk-virtual-scroll-viewport itemSize="20" style="height: 100%">
[loginRes]="loginRes" <ucap-room-list-item
[roomInfo]="room" *ngFor="let room of roomList"
[roomUserInfo]="getRoomUserList(room)" [loginRes]="loginRes"
[sessionVerinfo]="sessionVerinfo" [roomInfo]="room"
[checkable]="getCheckableRoom(room)" [roomUserInfo]="getRoomUserList(room)"
[isChecked]="getCheckedRoom(room)" [sessionVerinfo]="sessionVerinfo"
[multiCheckable]="false" [checkable]="getCheckableRoom(room)"
(checkRoom)="onCheckRoom($event)" [isChecked]="getCheckedRoom(room)"
> [multiCheckable]="false"
</ucap-room-list-item> (checkRoom)="onCheckRoom($event)"
>
</ucap-room-list-item>
</cdk-virtual-scroll-viewport>
</div>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</div> </div>