modify chat message component / TEXT

modify userinfo in chat event list

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

@@ -5,23 +5,14 @@
     <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
       <div fxLayout="row" fxLayoutAlign="start center">
         <!-- RESPONSIVE CHATS BUTTON-->
-        <button
+        <button mat-icon-button aria-label="chats button" fxHide.gt-md class="responsive-chats-button">
-          mat-icon-button
-          aria-label="chats button"
-          fxHide.gt-md
-          class="responsive-chats-button"
-        >
           <mat-icon>chat</mat-icon>
         </button>
         <!-- / RESPONSIVE CHATS BUTTON-->
       </div>
 
       <div>
-        <button
+        <button mat-icon-button [matMenuTriggerFor]="contactMenu" aria-label="more">
-          mat-icon-button
-          [matMenuTriggerFor]="contactMenu"
-          aria-label="more"
-        >
           <mat-icon>more_vert</mat-icon>
         </button>
 
@@ -34,17 +25,12 @@
     </div>
   </mat-toolbar>
   <!-- / CHAT TOOLBAR -->
-  <mat-progress-bar
+  <mat-progress-bar *ngIf="eventListProcessing$ | async" mode="indeterminate"></mat-progress-bar>
-    *ngIf="eventListProcessing$ | async"
-    mode="indeterminate"
-  ></mat-progress-bar>
   <!-- CHAT CONTENT -->
   <div fxFlex="1 1 auto" class="chat-content" #messageBoxContainer>
     <!-- CHAT MESSAGES -->
-    <ucap-chat-messages
+    <ucap-chat-messages [messages]="eventList$ | async" [userInfos]="userInfoList$ | async" [loginRes]="loginRes">
-      [messages]="eventList$ | async"
+    </ucap-chat-messages>
-      [loginRes]="loginRes"
-    ></ucap-chat-messages>
     <!-- CHAT MESSAGES -->
   </div>
   <!-- / CHAT CONTENT -->

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<Info[]>;
   roomInfo: RoomInfo;
   roomInfoSubscription: Subscription;
+  userInfoList$: Observable<UserInfo[]>;
   eventListProcessing$: Observable<boolean>;
 
   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)
     );

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'
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html

@@ -0,0 +1,8 @@
+<p>
+  <span>
+    {{ message.sentMessage }}
+  </span>
+  <span>
+    {{ message.sendDate | date: 'short' }}
+  </span>
+</p>

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() {}

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html

@@ -0,0 +1,8 @@
+<p>
+  <span>
+    {{ message.sentMessage }}
+  </span>
+  <span>
+    {{ message.sendDate | date: 'short' }}
+  </span>
+</p>

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() {}

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -1,27 +1,60 @@
 <div class="chat-messages">
   <!-- MESSAGE -->
-  <div
+  <div *ngFor="let message of messages; let i = index" class="message-row" [ngClass]="{
-    *ngFor="let message of messages; let i = index"
-    class="message-row"
-    [ngClass]="{
       me: message.senderSeq === loginRes.userSeq,
       contact: message.senderSeq !== loginRes.userSeq
-    }"
+    }">
-  >
+    <div>
+      <ul>
+        <li *ngIf="getUserProfile(message.senderSeq) != ''">
+          <img [src]="getUserProfile(message.senderSeq)" onerror="this.src='assets/images/img_nophoto_50.png'"
+            class="avatar" style="width: 50px; height: 50px;" />
+        </li>
+        <li>
+          {{ getUserName(message.senderSeq) }}
+        </li>
+      </ul>
+    </div>
     <ng-container [ngSwitch]="message.type">
-      <div *ngSwitchCase="EventType.Character">Character</div>
+      <ucap-chat-message-box-text *ngSwitchCase="EventType.Character" [message]="message"></ucap-chat-message-box-text>
+      <ucap-chat-message-box-mass *ngSwitchCase="EventType.MassText" [message]="message"></ucap-chat-message-box-mass>
       <div *ngSwitchCase="EventType.Join">Join</div>
+      <div *ngSwitchDefault>
+        date splitter
+        <ucap-chat-message-box-date-splitter></ucap-chat-message-box-date-splitter>
+        file
+        <ucap-chat-message-box-file></ucap-chat-message-box-file>
+        image
+        <ucap-chat-message-box-image></ucap-chat-message-box-image>
+        information
+        <ucap-chat-message-box-information></ucap-chat-message-box-information>
+        mass-translation
+        <ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation>
+        notice
+        <ucap-chat-message-box-notice></ucap-chat-message-box-notice>
+        recall
+        <ucap-chat-message-box-recall></ucap-chat-message-box-recall>
+        <ucap-chat-message-box-schedule></ucap-chat-message-box-schedule>
+        sticker
+        <ucap-chat-message-box-sticker></ucap-chat-message-box-sticker>
+        translation
+        <ucap-chat-message-box-translation></ucap-chat-message-box-translation>
+        video
+        <ucap-chat-message-box-video></ucap-chat-message-box-video>
+        video-conference
+        <ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>
+
+        <div class="bubble">
+          <div class="message">
+            {{ message.sentMessage }}
+          </div>
+          <div class="time secondary-text">
+            {{ message.sendDate | date: 'short' }}
+          </div>
+        </div>
+      </div>
     </ng-container>
 
-    <img *ngIf="" src="" class="avatar" />
 
-    <div class="bubble">
-      <div class="message">
-        {{ message.sentMessage }}
-      </div>
-      <div class="time secondary-text">
-        {{ message.sendDate | date: 'short' }}
-      </div>
-    </div>
   </div>
 </div>

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<VerInfo2>(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 '';
   }
 }