context menu of EventType.Character is added

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

@@ -1,25 +1,48 @@
 <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
-    }">
+    }"
-
+  >
-    <ucap-chat-message-box-date-splitter *ngIf="getDateSplitter(i)" [message]="message">
+    <ucap-chat-message-box-date-splitter
+      *ngIf="getDateSplitter(i)"
+      [message]="message"
+    >
     </ucap-chat-message-box-date-splitter>
 
-    <div *ngIf="getIsInformation(message); then information else contents"></div>
+    <div
+      *ngIf="getIsInformation(message); then information; else contents"
+    ></div>
     <ng-template #information>
-      <ng-container class="bubble" *ngIf="message.type !== EventType.NotificationForTimerRoom"
+      <ng-container
-        [ngSwitch]="message.type">
+        class="bubble"
-        <ucap-chat-message-box-information *ngSwitchCase="EventType.Join" [message]="message">
+        *ngIf="message.type !== EventType.NotificationForTimerRoom"
+        [ngSwitch]="message.type"
+      >
+        <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
+          *ngSwitchCase="EventType.Exit"
+          [message]="message"
+        >
         </ucap-chat-message-box-information>
-        <ucap-chat-message-box-information *ngSwitchCase="EventType.RenameRoom" [message]="message">
+        <ucap-chat-message-box-information
+          *ngSwitchCase="EventType.RenameRoom"
+          [message]="message"
+        >
         </ucap-chat-message-box-information>
-        <ucap-chat-message-box-information *ngSwitchCase="EventType.GuideForRoomTimerChanged" [message]="message"
+        <ucap-chat-message-box-information
-          [senderName]="getUserName(message.senderSeq)">
+          *ngSwitchCase="EventType.GuideForRoomTimerChanged"
+          [message]="message"
+          [senderName]="getUserName(message.senderSeq)"
+        >
         </ucap-chat-message-box-information>
       </ng-container>
     </ng-template>
@@ -27,8 +50,12 @@
       <div>
         <ul>
           <li *ngIf="getUserProfile(message.senderSeq) != ''">
-            <img [src]="getUserProfile(message.senderSeq)" onerror="this.src='assets/images/img_nophoto_50.png'"
+            <img
-              class="avatar" style="width: 50px; height: 50px;" />
+              [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) }}
@@ -36,18 +63,39 @@
         </ul>
       </div>
 
-      <ng-container class="bubble" *ngIf="message.type !== EventType.NotificationForTimerRoom"
+      <ng-container
-        [ngSwitch]="message.type">
+        class="bubble"
-        <ucap-chat-message-box-mass *ngSwitchCase="EventType.MassText" [message]="message"
+        *ngIf="message.type !== EventType.NotificationForTimerRoom"
-          (massDetail)="onMassDetail($event)">
+        [ngSwitch]="message.type"
+      >
+        <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)"
+        <ucap-chat-message-box-file
-          (imageViewer)="onImageViewer($event)">
+          *ngSwitchCase="EventType.File"
+          [message]="message"
+          (save)="onSave($event)"
+          (imageViewer)="onImageViewer($event)"
+        >
         </ucap-chat-message-box-file>
-        <ucap-chat-message-box-sticker *ngSwitchCase="EventType.Sticker" [message]="message">
+        <ucap-chat-message-box-sticker
+          *ngSwitchCase="EventType.Sticker"
+          [message]="message"
+        >
         </ucap-chat-message-box-sticker>
-        <ucap-chat-message-box-recall *ngSwitchCase="EventType.RecalledMessage"></ucap-chat-message-box-recall>
+        <ucap-chat-message-box-recall
-        <ucap-chat-message-box-text *ngSwitchCase="EventType.Character" [message]="message">
+          *ngSwitchCase="EventType.RecalledMessage"
+        ></ucap-chat-message-box-recall>
+        <ucap-chat-message-box-text
+          *ngSwitchCase="EventType.Character"
+          [message]="message"
+          (contextmenu)="
+            onContextMenuMessage($event, EventType.Character, message)
+          "
+        >
         </ucap-chat-message-box-text>
         <div *ngSwitchDefault>
           mass-translation
@@ -72,3 +120,23 @@
     </ng-template>
   </div>
 </div>
+
+<div
+  style="visibility: hidden; position: fixed"
+  [style.left]="messageContextMenuPosition.x"
+  [style.top]="messageContextMenuPosition.y"
+  [matMenuTriggerFor]="messageContextMenu"
+></div>
+<mat-menu #messageContextMenu="matMenu" [overlapTrigger]="false">
+  <ng-template matMenuContent let-eventType="eventType" let-message="message">
+    <ng-container *ngIf="!isRecalledMessage(eventType)">
+      <button mat-menu-item *ngIf="isCopyableMessage(eventType)">
+        대화 복사
+      </button>
+      <button mat-menu-item>대화 전달</button>
+      <button mat-menu-item>대화 나에게 전달</button>
+      <button mat-menu-item>대화 삭제</button>
+      <button mat-menu-item *ngIf="isMine(message)">대화 회수</button>
+    </ng-container>
+  </ng-template>
+</mat-menu>

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

@@ -1,4 +1,13 @@
-import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  EventEmitter,
+  Output,
+  ViewChild,
+  ViewChildren,
+  QueryList
+} from '@angular/core';
 
 import { Info, EventType } from '@ucap-webmessenger/protocol-event';
 import {
@@ -10,6 +19,7 @@ import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { KEY_VER_INFO, VerInfo2 } from '@app/types/ver-info.type';
 import { FileInfo } from '../models/file-info.json';
 import { DatePipe } from '@angular/common';
+import { MatMenu, MatMenuTrigger } from '@angular/material';
 
 @Component({
   selector: 'ucap-chat-messages',
@@ -31,6 +41,12 @@ export class MessagesComponent implements OnInit {
   @Output()
   save = new EventEmitter<{ fileInfo: FileInfo; type: string }>();
 
+  @ViewChildren(MatMenuTrigger) menuTriggerList: QueryList<MatMenuTrigger>;
+
+  @ViewChild('messageContextMenu', { static: true })
+  messageContextMenu: MatMenu;
+  messageContextMenuPosition = { x: '0px', y: '0px' };
+
   EventType = EventType;
   profileImageRoot: string;
 
@@ -109,6 +125,20 @@ export class MessagesComponent implements OnInit {
     return false;
   }
 
+  isCopyableMessage(eventType: EventType): boolean {
+    return (
+      EventType.Character === eventType || EventType.Translation === eventType
+    );
+  }
+
+  isRecalledMessage(eventType: EventType): boolean {
+    return EventType.RecalledMessage === eventType;
+  }
+
+  isMine(message: Info): boolean {
+    return message.senderSeq === this.loginRes.userSeq;
+  }
+
   /** [Event] MassTalk Detail View */
   onMassDetail(value: number) {
     this.massDetail.emit(value);
@@ -123,4 +153,12 @@ export class MessagesComponent implements OnInit {
   onSave(value: { fileInfo: FileInfo; type: string }) {
     this.save.emit(value);
   }
+
+  onContextMenuMessage(event: MouseEvent, eventType: EventType, message: Info) {
+    this.messageContextMenuPosition.x = event.clientX + 'px';
+    this.messageContextMenuPosition.y = event.clientY + 'px';
+    const messageContextMenuTrigger = this.menuTriggerList.toArray()[0];
+    messageContextMenuTrigger.menuData = { eventType, message };
+    messageContextMenuTrigger.openMenu();
+  }
 }

projects/ucap-webmessenger-ui-chat/src/lib/ucap-ui-chat.module.ts

@@ -8,6 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
 
 import { FormComponent } from './components/form.component';
 import { MessagesComponent } from './components/messages.component';
@@ -60,7 +61,8 @@ const PROVIDERS = [DatePipe];
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
-    MatButtonModule
+    MatButtonModule,
+    MatMenuModule
   ],
   exports: [...COMPONENTS],
   declarations: [...COMPONENTS],