From be0e24b9221fee9d7e0e861a49b745076c909da7 Mon Sep 17 00:00:00 2001 From: leejh Date: Fri, 11 Oct 2019 11:40:35 +0900 Subject: [PATCH] modify chat message component / TEXT modify userinfo in chat event list --- .../components/messages.component.html | 24 ++----- .../components/messages.component.ts | 7 +- .../src/lib/types/event.type.ts | 46 ++++++------- .../message-box/mass.component.html | 8 +++ .../components/message-box/mass.component.ts | 6 +- .../message-box/text.component.html | 8 +++ .../components/message-box/text.component.ts | 6 +- .../lib/components/messages.component.html | 65 ++++++++++++++----- .../src/lib/components/messages.component.ts | 37 ++++++++++- 9 files changed, 143 insertions(+), 64 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 60985e68..c2cf30a0 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 @@ -5,23 +5,14 @@
-
- @@ -34,17 +25,12 @@
- +
- + +
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts index c929bc5a..25deb750 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts @@ -17,7 +17,7 @@ import * as EventStore from '@app/store/messenger/event'; import { LoginResponse } from '@ucap-webmessenger/protocol-authentication'; import { SessionStorageService } from '@ucap-webmessenger/web-storage'; import { LoginInfo, KEY_LOGIN_INFO } from '@app/types'; -import { RoomInfo } from '@ucap-webmessenger/protocol-room'; +import { RoomInfo, UserInfo } from '@ucap-webmessenger/protocol-room'; import { tap } from 'rxjs/operators'; @Component({ @@ -35,6 +35,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked { eventList$: Observable; roomInfo: RoomInfo; roomInfoSubscription: Subscription; + userInfoList$: Observable; eventListProcessing$: Observable; constructor( @@ -64,6 +65,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked { ) .subscribe(); + this.userInfoList$ = this.store.pipe( + select(AppStore.MessengerSelector.RoomSelector.userInfoList) + ); + this.eventListProcessing$ = this.store.pipe( select(AppStore.MessengerSelector.EventSelector.infoListProcessing) ); diff --git a/projects/ucap-webmessenger-protocol-event/src/lib/types/event.type.ts b/projects/ucap-webmessenger-protocol-event/src/lib/types/event.type.ts index ed24aa90..ea028046 100644 --- a/projects/ucap-webmessenger-protocol-event/src/lib/types/event.type.ts +++ b/projects/ucap-webmessenger-protocol-event/src/lib/types/event.type.ts @@ -1,48 +1,48 @@ export enum EventType { - // J: 대화참여 + /** J: 대화참여 */ Join = 'J', - // C: 대화전송 + /** C: 대화전송 */ Character = 'C', - // F: 파일전송 + /** F: 파일전송 */ File = 'F', - // S: 스티커 + /** S: 스티커 */ Sticker = 'S', - // T: Mass Text + /** T: Mass Text */ MassText = 'T', - // E: 대화퇴장 + /** E: 대화퇴장 */ Exit = 'E', - // P: 일정 + /** P: 일정 */ Plan = 'P', - // V: 화상회의 + /** V: 화상회의 */ VideoConference = 'V', - // L: 링크(Legacy) + /** L: 링크(Legacy) */ Link = 'L', - // R: 대화방명변경 + /** R: 대화방명변경 */ RenameRoom = 'R', - // Y: 번역 + /** Y: 번역 */ Translation = 'Y', - // Z: 대용량 번역 + /** Z: 대용량 번역 */ MassTranslation = 'Z', - // U: 회수된 메시지 + /** U: 회수된 메시지 */ RecalledMessage = 'U', - // N: 방Timer 변경 안내 + /** N: 방Timer 변경 안내 */ GuideForRoomTimerChanged = 'N', - // X: iOS캡쳐알림 + /** X: iOS캡쳐알림 */ NotificationForiOSCapture = 'X', - // B: 타이머대화방알림 + /** B: 타이머대화방알림 */ NotificationForTimerRoom = 'B', - // Q: 2개월전 메시지 + /** Q: 2개월전 메시지 */ Before2MonthsAgo = 'Q', - // G: 강제 퇴장 + /** G: 강제 퇴장 */ ForcedExit = 'G', - // H: 챗봇대화 시작 + /** H: 챗봇대화 시작 */ ChatbotStart = 'H', - // K: 챗봇대화 종료 + /** K: 챗봇대화 종료 */ ChatbotEnd = 'K', - // I: 챗봇대화 전송 + /** I: 챗봇대화 전송 */ ChatbotSend = 'I', - // A: 챗봇 대용량 대화 전송 + /** A: 챗봇 대용량 대화 전송 */ ChatbotSendMass = 'A', - // M: 동영상 스트리밍 + /** M: 동영상 스트리밍 */ VideoStreamming = 'M' } diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html index e69de29b..04a3f68e 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html @@ -0,0 +1,8 @@ +

+ + {{ message.sentMessage }} + + + {{ message.sendDate | date: 'short' }} + +

diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.ts index 082a081e..ce58dbd1 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.ts +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; +import { Info } from '@ucap-webmessenger/protocol-event'; @Component({ selector: 'ucap-chat-message-box-mass', @@ -6,6 +7,9 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./mass.component.scss'] }) export class MassComponent implements OnInit { + @Input() + message: Info; + constructor() {} ngOnInit() {} diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html index e69de29b..04a3f68e 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html @@ -0,0 +1,8 @@ +

+ + {{ message.sentMessage }} + + + {{ message.sendDate | date: 'short' }} + +

diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.ts index 23a19dca..a2e54116 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.ts +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; +import { Info } from '@ucap-webmessenger/protocol-event'; @Component({ selector: 'ucap-chat-message-box-text', @@ -6,6 +7,9 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./text.component.scss'] }) export class TextComponent implements OnInit { + @Input() + message: Info; + constructor() {} ngOnInit() {} diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html index 310dcf57..261e2898 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html @@ -1,27 +1,60 @@
-
+ }"> +
+
    +
  • + +
    • +
  • + {{ getUserName(message.senderSeq) }} +
    • +
+
-
Character
+ +
Join
+
+ date splitter + + file + + image + + information + + mass-translation + + notice + + recall + + + sticker + + translation + + video + + video-conference + + +
+
+ {{ message.sentMessage }} +
+
+ {{ message.sendDate | date: 'short' }} +
+
+
- -
-
- {{ message.sentMessage }} -
-
- {{ message.sendDate | date: 'short' }} -
-
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts index 2a712d15..797d512e 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts @@ -1,8 +1,13 @@ import { Component, OnInit, Input } from '@angular/core'; import { Info, EventType } from '@ucap-webmessenger/protocol-event'; -import { LoginResponse } from '@ucap-webmessenger/protocol-authentication'; +import { + LoginResponse, + UserInfo +} from '@ucap-webmessenger/protocol-authentication'; import { NGXLogger } from 'ngx-logger'; +import { SessionStorageService } from '@ucap-webmessenger/web-storage'; +import { KEY_VER_INFO, VerInfo2 } from '@app/types/ver-info.type'; @Component({ selector: 'ucap-chat-messages', @@ -14,12 +19,38 @@ export class MessagesComponent implements OnInit { loginRes: LoginResponse; @Input() messages: Info[]; + @Input() + userInfos?: UserInfo[]; EventType = EventType; + profileImageRoot: string; - constructor(private logger: NGXLogger) {} + constructor( + private logger: NGXLogger, + private sessionStorageService: SessionStorageService + ) {} ngOnInit() { - this.logger.debug('type of userSeq', typeof this.loginRes.userSeq); + const verInfo = this.sessionStorageService.get(KEY_VER_INFO); + this.profileImageRoot = this.profileImageRoot || verInfo.profileRoot; + } + + getUserName(seq: number): string { + const userInfo: UserInfo[] = this.userInfos.filter( + user => user.seq === seq + ); + if (!!userInfo && userInfo.length > 0) { + return userInfo[0].name; + } + return '(알수없는 사용자)'; + } + getUserProfile(seq: number): string { + const userInfo: UserInfo[] = this.userInfos.filter( + user => user.seq === seq + ); + if (!!userInfo && userInfo.length > 0) { + return this.profileImageRoot + userInfo[0].profileImageFile; + } + return ''; } }