modify chat message component / TEXT

modify userinfo in chat event list
2019-10-11 11:40:35 +09:00 · 2019-10-11 11:40:35 +09:00 · be0e24b922
commit be0e24b922
parent 55d593904b
9 changed files with 143 additions and 64 deletions
--- 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 @@
    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
      <div fxLayout="row" fxLayoutAlign="start center">
        <!-- RESPONSIVE CHATS BUTTON-->
-        <button
-          mat-icon-button
-          aria-label="chats button"
-          fxHide.gt-md
-          class="responsive-chats-button"
-        >
+        <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
-          mat-icon-button
-          [matMenuTriggerFor]="contactMenu"
-          aria-label="more"
-        >
+        <button 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
-    *ngIf="eventListProcessing$ | async"
-    mode="indeterminate"
-  ></mat-progress-bar>
+  <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
-      [messages]="eventList$ | async"
-      [loginRes]="loginRes"
-    ></ucap-chat-messages>
+    <ucap-chat-messages [messages]="eventList$ | async" [userInfos]="userInfoList$ | async" [loginRes]="loginRes">
+    </ucap-chat-messages>
    <!-- CHAT MESSAGES -->
  </div>
  <!-- / CHAT CONTENT -->
--- 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<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)
    );
--- 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'
 }
--- 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 @@
+<p>
+  <span>
+    {{ message.sentMessage }}
+  </span>
+  <span>
+    {{ message.sendDate | date: 'short' }}
+  </span>
+</p>
--- 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() {}
--- 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 @@
+<p>
+  <span>
+    {{ message.sentMessage }}
+  </span>
+  <span>
+    {{ message.sendDate | date: 'short' }}
+  </span>
+</p>
--- 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() {}
--- 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 @@
 <div class="chat-messages">
  <!-- MESSAGE -->
-  <div
-    *ngFor="let message of messages; let i = index"
-    class="message-row"
-    [ngClass]="{
+  <div *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>
--- 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<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 '';
  }
 }