modify message-box in Information by JOIN, EXIT

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

@@ -0,0 +1,3 @@
+<p>
+  {{ contents }}
+</p>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { NGXLogger } from 'ngx-logger';
+import { Info, EventType } from '@ucap-webmessenger/protocol-event';
 
 @Component({
   selector: 'ucap-chat-message-box-information',
@@ -6,7 +8,30 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./information.component.scss']
 })
 export class InformationComponent implements OnInit {
-  constructor() {}
+  @Input()
+  message: Info;
 
-  ngOnInit() {}
+  contents: string;
+
+  constructor(private logger: NGXLogger) {}
+
+  ngOnInit() {
+    switch (this.message.type) {
+      case EventType.Join:
+        let owner: string;
+        const inviter: string[] = [];
+        this.message.sentMessage.split(',').forEach((userName, idx) => {
+          if (idx === 0) {
+            owner = userName + '님';
+          } else {
+            inviter.push(userName + '님');
+          }
+        });
+        this.contents = `${owner}이 ${inviter.join(',')}을 초대했습니다.`;
+        break;
+      case EventType.Exit:
+        this.contents = `${this.message.sentMessage}님이 퇴장하셨습니다.`;
+        break;
+    }
+  }
 }

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

@@ -4,7 +4,7 @@
       me: message.senderSeq === loginRes.userSeq,
       contact: message.senderSeq !== loginRes.userSeq
     }">
-    <div>
+    <div *ngIf="message.type !== EventType.Join && message.type !== EventType.Exit">
       <ul>
         <li *ngIf="getUserProfile(message.senderSeq) != ''">
           <img [src]="getUserProfile(message.senderSeq)" onerror="this.src='assets/images/img_nophoto_50.png'"
@@ -16,19 +16,19 @@
       </ul>
     </div>
     <ng-container [ngSwitch]="message.type">
-      <ucap-chat-message-box-text *ngSwitchCase="EventType.Character" [message]="message"></ucap-chat-message-box-text>
+      <ucap-chat-message-box-information *ngSwitchCase="EventType.Join" [message]="message">
+      </ucap-chat-message-box-information>
+      <ucap-chat-message-box-information *ngSwitchCase="EventType.Exit" [message]="message">
+      </ucap-chat-message-box-information>
       <ucap-chat-message-box-mass *ngSwitchCase="EventType.MassText" [message]="message"
         (massDetail)="onMassDetail($event)">
       </ucap-chat-message-box-mass>
       <ucap-chat-message-box-file *ngSwitchCase="EventType.File" [message]="message" (save)="onSave($event)"
         (imageViewer)="onImageViewer($event)">
       </ucap-chat-message-box-file>
-      <div *ngSwitchCase="EventType.Join">Join</div>
       <div *ngSwitchDefault>
         date splitter
         <ucap-chat-message-box-date-splitter></ucap-chat-message-box-date-splitter>
-        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