contextMenu of profile is added

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html

@@ -12,7 +12,12 @@
     >
       <mat-icon>more_vert</mat-icon>
     </button>
-    <mat-menu #groupMenu="matMenu" xPosition="after" yPosition="below">
+    <mat-menu
+      #groupMenu="matMenu"
+      xPosition="after"
+      yPosition="below"
+      [overlapTrigger]="false"
+    >
       <button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
         <mat-icon>group_add</mat-icon>
         <span>새 그룹 추가</span>
@@ -46,8 +51,22 @@
         [userInfo]="userInfo"
         [presence]="getStatusBulkInfo(userInfo) | async"
         (click)="onSelectBuddy(userInfo)"
+        (contextMenu)="onContextMenuProfile($event)"
       >
       </ucap-profile-user-list-item>
     </ucap-group-expansion-panel>
   </div>
 </div>
+
+<div
+  style="visibility: hidden; position: fixed"
+  [style.left]="profileContextMenuPosition.x"
+  [style.top]="profileContextMenuPosition.y"
+  [matMenuTriggerFor]="profileContextMenu"
+></div>
+<mat-menu #profileContextMenu="matMenu" [overlapTrigger]="false">
+  <ng-template matMenuContent let-item="userInfo">
+    <button mat-menu-item>Action 1</button>
+    <button mat-menu-item>Action 2</button>
+  </ng-template>
+</mat-menu>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts

@@ -1,4 +1,10 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ViewChild,
+  ViewChildren,
+  QueryList
+} from '@angular/core';
 
 import { Observable, combineLatest, Subscription } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
@@ -22,7 +28,13 @@ import {
   CreateGroupDialogResult
 } from '@app/layouts/messenger/dialogs/create-group.dialog.component';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
-import { DeptSearchType } from '@ucap-webmessenger/protocol-query';
+import {
+  DeptSearchType,
+  UserInfoSS,
+  UserInfoF,
+  UserInfoDN
+} from '@ucap-webmessenger/protocol-query';
+import { MatMenuTrigger, MatMenu } from '@angular/material';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-group',
@@ -34,6 +46,13 @@ export class GroupComponent implements OnInit {
   @ViewChild('groupExpansionPanel', { static: true })
   groupExpansionPanel: GroupExpansionPanelComponent;
 
+  @ViewChildren(MatMenuTrigger) menuTriggerList: QueryList<MatMenuTrigger>;
+
+  @ViewChild('profileContextMenu', { static: true })
+  profileContextMenu: MatMenu;
+
+  profileContextMenuPosition = { x: '0px', y: '0px' };
+
   groupBuddyList$: Observable<
     { group: GroupDetailData; buddyList: UserInfo[] }[]
   >;
@@ -174,4 +193,18 @@ export class GroupComponent implements OnInit {
       })
     );
   }
+
+  onContextMenuProfile(event: {
+    event: MouseEvent;
+    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
+  }) {
+    this.logger.debug('onContextMenuProfile', event);
+    event.event.preventDefault();
+    this.profileContextMenuPosition.x = event.event.clientX + 'px';
+    this.profileContextMenuPosition.y = event.event.clientY + 'px';
+    const profileContextMenuTrigger = this.menuTriggerList.toArray()[1];
+    profileContextMenuTrigger.menu = this.profileContextMenu;
+    profileContextMenuTrigger.menuData = { userInfo: event.userInfo };
+    profileContextMenuTrigger.openMenu();
+  }
 }

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html

@@ -1,13 +1,23 @@
 <!--체크박스 보여줄때는 <div class="list-item checkbox" matRipple>  클래스에 checkbox만 추가-->
-<div class="list-item" matRipple>
+<div
+  class="list-item"
+  matRipple
+  (contextmenu)="onContextMenu($event, userInfo)"
+>
   <!--pcOn , pcOut  pcOff , pcOther-->
-  <span class="presence" [ngClass]="getPresence(PresenceType.PC)"
-    *ngIf="userPresence && userPresence.pcStatus">{{ userPresence.pcStatus }}
+  <span
+    class="presence"
+    [ngClass]="getPresence(PresenceType.PC)"
+    *ngIf="userPresence && userPresence.pcStatus"
+    >{{ userPresence.pcStatus }}
   </span>
   <dl class="item-default">
     <dt>
-      <img class="thumbnail" [src]="profileImageRoot + userInfo.profileImageFile"
-        onerror="this.src='assets/images/img_nophoto_50.png'" />
+      <img
+        class="thumbnail"
+        [src]="profileImageRoot + userInfo.profileImageFile"
+        onerror="this.src='assets/images/img_nophoto_50.png'"
+      />
     </dt>
     <dd class="info">
       <div class="detail">
@@ -19,7 +29,10 @@
           {{ userInfo.deptName }}
         </span>
       </div>
-      <div class="msg-status" *ngIf="!checkable && userInfo.intro.trim() && !compactable">
+      <div
+        class="msg-status"
+        *ngIf="!checkable && userInfo.intro.trim() && !compactable"
+      >
         {{ userInfo.intro }}
       </div>
     </dd>

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts

@@ -1,4 +1,11 @@
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  OnDestroy,
+  Output,
+  EventEmitter
+} from '@angular/core';
 import { UserInfo } from '@ucap-webmessenger/protocol-sync';
 import {
   UserInfoSS,
@@ -35,6 +42,12 @@ export class UserListItemComponent implements OnInit, OnDestroy {
   @Input()
   compactable = false;
 
+  @Output()
+  contextMenu = new EventEmitter<{
+    event: MouseEvent;
+    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
+  }>();
+
   userPresence: StatusBulkInfo | StatusInfo;
 
   PresenceType = PresenceType;
@@ -95,6 +108,13 @@ export class UserListItemComponent implements OnInit, OnDestroy {
 
     return rtnClass;
   }
+
+  onContextMenu(
+    event: MouseEvent,
+    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN
+  ) {
+    this.contextMenu.emit({ event, userInfo });
+  }
 }
 
 export enum PresenceType {