From 0362bc427ceeca96ec1d73fbd281c8065f950574 Mon Sep 17 00:00:00 2001 From: leejh Date: Thu, 7 Nov 2019 13:14:44 +0900 Subject: [PATCH] =?UTF-8?q?=EB=8C=80=ED=99=94=EB=B0=A9=20>=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EA=B4=80=EB=A0=A8=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=88=98=EC=A0=95.=20>>=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EC=A4=91=20=EC=B5=9C=EA=B7=BC=EB=8C=80=ED=99=94=20=EC=9C=A0?= =?UTF-8?q?=EC=9E=85=EC=8B=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC.=20=EB=B0=8F=20snackbar=20=EB=A1=9C=20=EC=9C=A0?= =?UTF-8?q?=EC=9E=85=EB=8C=80=ED=99=94=20=EB=B3=B4=EA=B8=B0=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/messages.component.html | 7 +- .../components/messages.component.scss | 8 + .../components/messages.component.ts | 138 +++++++++++++----- .../src/lib/services/snack-bar.service.ts | 11 +- 4 files changed, 122 insertions(+), 42 deletions(-) diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html index b8ca98d6..1b7c2279 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html @@ -95,11 +95,12 @@ []>; + eventList: Info[]; + eventListNew: Info[]; + eventListSubscription: Subscription; baseEventSeq = 0; roomInfo: RoomInfo; roomInfoSubscription: Subscription; @@ -127,6 +133,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { /** Timer 대화방의 대화 삭제를 위한 interval */ interval: any; + snackBarPreviewEvent: MatSnackBarRef; + constructor( private store: Store, private sessionStorageService: SessionStorageService, @@ -145,6 +153,13 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { ); } + setEventMoreInit() { + console.log('setEventMoreInit'); + // 방정보가 바뀌면 이전대화 보기 관련 값들을 초기화 한다. + this.scrollUpinit = false; + this.eventMorePosition = 0; + } + ngOnInit() { this.loginResSubscription = this.store .pipe( @@ -161,9 +176,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { tap(roomInfo => { this.roomInfo = roomInfo; - // 방정보가 바뀌면 이전대화 보기 관련 값들을 초기화 한다. - this.scrollUpinit = false; - this.eventMorePosition = 0; + this.setEventMoreInit(); }) ) .subscribe(); @@ -188,15 +201,27 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { }) ); - this.eventList$ = this.store.pipe( - select(AppStore.MessengerSelector.EventSelector.selectAllInfoList), - tap(infoList => { - if (!!infoList && infoList.length > 0) { - this.baseEventSeq = infoList[0].seq; - this.readyToReply(); - } - }) - ); + this.eventListSubscription = this.store + .pipe( + select(AppStore.MessengerSelector.EventSelector.selectAllInfoList), + tap(infoList => { + if (!!this.eventList && this.eventList.length > 0) { + this.eventListNew = infoList.filter(info => { + if (info.seq <= this.eventList[this.eventList.length - 1].seq) { + return false; + } + return true; + }); + } + this.eventList = infoList; + + if (!!infoList && infoList.length > 0) { + this.baseEventSeq = infoList[0].seq; + this.readyToReply(); + } + }) + ) + .subscribe(); this.eventInfoStatus$ = this.store.pipe( select(AppStore.MessengerSelector.EventSelector.infoStatus) @@ -219,6 +244,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { if (!!this.userInfoListSubscription) { this.userInfoListSubscription.unsubscribe(); } + if (!!this.eventListSubscription) { + this.eventListSubscription.unsubscribe(); + } clearInterval(this.interval); } @@ -259,6 +287,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { } } + /** 대화전송 가능한 방인지 판단 */ getEnableSend() { if (!this.roomInfo) { return false; @@ -287,8 +316,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { } } - selectContact() {} - readyToReply(): void { setTimeout(() => { this.focusReplyInput(); @@ -304,6 +331,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { }); } + /** Scroll Handler */ scrollToBottom(speed?: number): void { if (this.eventMorePosition > 0) { if (this.psChatContent.directiveRef) { @@ -316,7 +344,34 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { speed ); - this.scrollUpinit = false; + this.eventMorePosition = 0; + }); + } + } else if (this.scrollUpinit) { + if (!!this.eventListNew && this.eventListNew.length > 0) { + let message = ''; + const info = this.eventListNew[this.eventListNew.length - 1]; + const senderUser = this.userInfoList.filter( + user => user.seq === info.senderSeq + ); + if (!!senderUser && senderUser.length > 0) { + message += `${senderUser[0].name} : `; + } + message += StringUtil.convertFinalEventMessage( + info.type, + info.sentMessageJson || info.sentMessage + ); + + this.snackBarPreviewEvent = this.snackBarService.open(message, 'GO', { + // duration: 3000, + verticalPosition: 'bottom', + horizontalPosition: 'center', + panelClass: ['chat-snackbar-class'] + }); + this.snackBarPreviewEvent.onAction().subscribe(() => { + this.setEventMoreInit(); + this.scrollToBottom(); + this.snackBarPreviewEvent.dismiss(); }); } } else { @@ -330,8 +385,37 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { } } } + onScrollup(event: any) { + this.scrollUpinit = true; + } + onScrollReachStart(event: any) { + this.onMoreEvent(this.baseEventSeq); + } + onScrollReachEnd(event: any) { + this.setEventMoreInit(); + if (!!this.snackBarPreviewEvent) { + this.snackBarPreviewEvent.dismiss(); + } + } + + /** More Event */ + onMoreEvent(seq: number) { + if (this.scrollUpinit && this.eventRemain) { + this.eventMorePosition = this.psChatContent.directiveRef.elementRef.nativeElement.scrollHeight; + + this.store.dispatch( + EventStore.info({ + roomSeq: this.roomInfo.roomSeq, + baseSeq: seq, + requestCount: CONST.EVENT_INFO_READ_COUNT + }) + ); + } + } async onSendMessage(message: string) { + this.setEventMoreInit(); + if (!message || message.trim().length === 0) { const result = await this.dialogService.open< AlertDialogComponent, @@ -378,24 +462,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { this.store.dispatch(RoomStore.updateOnlyAlarm({ roomInfo: this.roomInfo })); } - onScrollup(event: any) { - this.onMoreEvent(this.baseEventSeq); - } - /** More Event */ - onMoreEvent(seq: number) { - if (this.scrollUpinit && this.eventRemain) { - this.store.dispatch( - EventStore.info({ - roomSeq: this.roomInfo.roomSeq, - baseSeq: seq, - requestCount: CONST.EVENT_INFO_READ_COUNT - }) - ); - this.scrollUpinit = false; - this.eventMorePosition = this.psChatContent.directiveRef.elementRef.nativeElement.scrollHeight; - } - } - /** MassText Detail View */ onMassDetail(value: number) { this.store.dispatch( diff --git a/projects/ucap-webmessenger-ui/src/lib/services/snack-bar.service.ts b/projects/ucap-webmessenger-ui/src/lib/services/snack-bar.service.ts index 34f1181b..651ee820 100644 --- a/projects/ucap-webmessenger-ui/src/lib/services/snack-bar.service.ts +++ b/projects/ucap-webmessenger-ui/src/lib/services/snack-bar.service.ts @@ -1,6 +1,11 @@ import { Injectable } from '@angular/core'; -import { MatSnackBar, MatSnackBarConfig } from '@angular/material'; +import { + MatSnackBar, + MatSnackBarConfig, + MatSnackBarRef, + SimpleSnackBar +} from '@angular/material'; @Injectable({ providedIn: 'root' @@ -12,7 +17,7 @@ export class SnackBarService { message: string, action?: string, config?: MatSnackBarConfig - ): void { - this.matSnackBar.open(message, action, config); + ): MatSnackBarRef { + return this.matSnackBar.open(message, action, config); } }