대화방 리스트 virture scroll 적용.

This commit is contained in:
leejinho 2020-01-02 14:50:03 +09:00
parent dbf62d321b
commit 3e2e7e0239
3 changed files with 51 additions and 18 deletions

View File

@ -167,7 +167,9 @@
class="left-side-tabs-contents"
style="display: none;"
>
<app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
<app-layout-chat-left-sidenav-chat
[isVisible]="currentTabLable === MainMenu.Chat"
></app-layout-chat-left-sidenav-chat>
</div>
<div
#tabs

View File

@ -50,9 +50,14 @@
</div>
</div>
<div *ngIf="!isSearch" class="app-layout-chat-left-sidenav-chat-list">
<perfect-scrollbar fxFlex="1 1 auto">
<cdk-virtual-scroll-viewport
#cvsvChatList
itemSize="80"
perfectScrollbar
fxFlexFill
>
<ucap-room-list-item
*ngFor="let room of roomList"
*cdkVirtualFor="let room of roomList"
[loginRes]="loginRes"
[roomInfo]="room"
[roomUserInfo]="getRoomUserList(room)"
@ -62,19 +67,7 @@
class="ucap-clickable"
>
</ucap-room-list-item>
</perfect-scrollbar>
<!-- <cdk-virtual-scroll-viewport itemSize="40" perfectScrollbar fxFlexFill>
<ucap-room-list-item
*cdkVirtualFor="let room of roomList"
[loginRes]="loginRes"
[roomInfo]="room"
[roomUserInfo]="getRoomUserList(room)"
[sessionVerinfo]="sessionVerinfo"
(click)="onClickContextMenu('SELECT_ROOM', room)"
(contextmenu)="onContextMenuChat($event, room)"
>
</ucap-room-list-item>
</cdk-virtual-scroll-viewport> -->
</cdk-virtual-scroll-viewport>
</div>
<div *ngIf="!!isSearch" class="app-layout-chat-left-sidenav-chat-list search">
<perfect-scrollbar fxFlex="1 1 auto">

View File

@ -1,5 +1,12 @@
import { exit } from './../../../../store/messenger/room/actions';
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import {
Component,
OnInit,
OnDestroy,
ViewChild,
AfterViewChecked,
Input
} from '@angular/core';
import {
ucapAnimations,
DialogService,
@ -29,6 +36,8 @@ import { KEY_VER_INFO } from '@app/types';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { MatMenuTrigger } from '@angular/material';
import { FormGroup, FormBuilder } from '@angular/forms';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
@Component({
selector: 'app-layout-chat-left-sidenav-chat',
@ -36,7 +45,16 @@ import { FormGroup, FormBuilder } from '@angular/forms';
styleUrls: ['./chat.component.scss'],
animations: ucapAnimations
})
export class ChatComponent implements OnInit, OnDestroy {
export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
@Input()
isVisible = true;
@ViewChild('cvsvChatList', { static: false })
cvsvChatList: CdkVirtualScrollViewport;
@ViewChild(PerfectScrollbarDirective, { static: false })
psDirectiveRef?: PerfectScrollbarDirective;
@ViewChild('chatContextMenuTrigger', { static: true })
chatContextMenuTrigger: MatMenuTrigger;
chatContextMenuPosition = { x: '0px', y: '0px' };
@ -56,6 +74,9 @@ export class ChatComponent implements OnInit, OnDestroy {
recommendedWordList: string[];
filteredRecommendedWordList: string[];
/** 채팅 리스트에 virture scroll의 size check */
isInitList = false;
constructor(
private store: Store<any>,
private formBuilder: FormBuilder,
@ -133,6 +154,10 @@ export class ChatComponent implements OnInit, OnDestroy {
}
this.recommendedWordList = [...recommendedWordList];
if (!!this.psDirectiveRef) {
this.psDirectiveRef.update();
}
})
)
.subscribe();
@ -156,6 +181,19 @@ export class ChatComponent implements OnInit, OnDestroy {
}
}
ngAfterViewChecked(): void {
if (
!!this.cvsvChatList &&
!!this.roomList &&
this.roomList.length > 0 &&
!this.isInitList &&
this.isVisible
) {
this.isInitList = true;
this.cvsvChatList.checkViewportSize();
}
}
onClickSearchCancel() {
this.isSearch = false;
this.searchRoomList = [];