bug of context menu is fixed

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

@@ -67,9 +67,52 @@
   [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 matMenuContent let-userInfo="userInfo">
+    <button
+      mat-menu-item
+      (click)="onClickProfileContextMenu('VIEW_PROFILE', userInfo)"
+    >
+      프로필 보기
+    </button>
+    <button
+      mat-menu-item
+      (click)="onClickProfileContextMenu('REGISTER_FAVORITE', userInfo)"
+    >
+      즐겨찾기 등록
+    </button>
+    <button mat-menu-item (click)="onClickProfileContextMenu('CHAT', userInfo)">
+      대화하기
+    </button>
+    <button
+      mat-menu-item
+      (click)="onClickProfileContextMenu('REMOVE_FROM_GROUP', userInfo)"
+    >
+      이 그룹에서 삭제
+    </button>
+    <button
+      mat-menu-item
+      (click)="onClickProfileContextMenu('COPY_BUDDY', userInfo)"
+    >
+      대화 상대 복사
+    </button>
+    <button
+      mat-menu-item
+      (click)="onClickProfileContextMenu('MOVE_BUDDY', userInfo)"
+    >
+      대화 상대 이동
+    </button>
+    <button
+      mat-menu-item
+      (click)="onClickProfileContextMenu('SEND_NOTE', userInfo)"
+    >
+      쪽지 보내기
+    </button>
+    <button
+      mat-menu-item
+      (click)="onClickProfileContextMenu('REGISTER_NICKNAME', userInfo)"
+    >
+      닉네임 설정
+    </button>
   </ng-template>
 </mat-menu>
 
@@ -80,11 +123,25 @@
   [matMenuTriggerFor]="groupContextMenu"
 ></div>
 <mat-menu #groupContextMenu="matMenu" [overlapTrigger]="false">
-  <ng-template matMenuContent let-item="group">
-    <button mat-menu-item>그룹 대화하기</button>
-    <button mat-menu-item>그룹 쪽지 보내기</button>
-    <button mat-menu-item>그룹 이름 바꾸기</button>
-    <button mat-menu-item>그룹 멤버 변경</button>
-    <button mat-menu-item>그룹 삭제</button>
+  <ng-template matMenuContent let-group="group">
+    <button mat-menu-item (click)="onClickGroupContextMenu('CHAT', group)">
+      그룹 대화하기
+    </button>
+    <button mat-menu-item (click)="onClickGroupContextMenu('SEND_NOTE', group)">
+      그룹 쪽지 보내기
+    </button>
+    <button mat-menu-item (click)="onClickGroupContextMenu('RENAME', group)">
+      그룹 이름 바꾸기
+    </button>
+    <mat-divider></mat-divider>
+    <button
+      mat-menu-item
+      (click)="onClickGroupContextMenu('EDIT_MEMBER', group)"
+    >
+      그룹 멤버 변경
+    </button>
+    <button mat-menu-item (click)="onClickGroupContextMenu('REMOVE', group)">
+      그룹 삭제
+    </button>
   </ng-template>
 </mat-menu>

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

@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 
 import { Observable, combineLatest, Subscription } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map, tap, take } from 'rxjs/operators';
 
 import { Store, select } from '@ngrx/store';
 
@@ -52,12 +52,10 @@ export class GroupComponent implements OnInit {
 
   @ViewChild('profileContextMenu', { static: true })
   profileContextMenu: MatMenu;
-
   profileContextMenuPosition = { x: '0px', y: '0px' };
 
   @ViewChild('groupContextMenu', { static: true })
   groupContextMenu: MatMenu;
-
   groupContextMenuPosition = { x: '0px', y: '0px' };
 
   groupBuddyList$: Observable<
@@ -206,6 +204,19 @@ export class GroupComponent implements OnInit {
     );
   }
 
+  onClickProfileContextMenu(
+    menuType: string,
+    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN
+  ) {
+    this.logger.debug(
+      'onClickProfileContextMenu',
+      'menuType',
+      menuType,
+      'userInfo',
+      userInfo
+    );
+  }
+
   onContextMenuProfile(
     event: MouseEvent,
     userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN
@@ -213,6 +224,8 @@ export class GroupComponent implements OnInit {
     event.preventDefault();
     event.stopPropagation();
 
+    this.profileContextMenu.focusFirstItem('mouse');
+
     this.profileContextMenuPosition.x = event.clientX + 'px';
     this.profileContextMenuPosition.y = event.clientY + 'px';
     const profileContextMenuTrigger = this.menuTriggerList.toArray()[1];
@@ -220,7 +233,22 @@ export class GroupComponent implements OnInit {
     profileContextMenuTrigger.openMenu();
   }
 
+  onClickGroupContextMenu(menuType: string, group: GroupDetailData) {
+    this.logger.debug(
+      'onClickGroupContextMenu',
+      'menuType',
+      menuType,
+      'group',
+      group
+    );
+  }
+
   onMoreGroup(params: { event: MouseEvent; group: GroupDetailData }) {
+    params.event.preventDefault();
+    params.event.stopPropagation();
+
+    this.groupContextMenu.focusFirstItem('mouse');
+
     this.groupContextMenuPosition.x = params.event.clientX + 'px';
     this.groupContextMenuPosition.y = params.event.clientY + 'px';
     const groupContextMenuTrigger = this.menuTriggerList.toArray()[2];

projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts

@@ -6,6 +6,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -32,6 +33,7 @@ import { DIALOGS } from './dialogs';
     MatButtonModule,
     MatCardModule,
     MatDialogModule,
+    MatDividerModule,
     MatIconModule,
     MatMenuModule,
     MatProgressBarModule,

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

@@ -158,6 +158,8 @@ export class MessagesComponent implements OnInit {
   onContextMenuMessage(event: MouseEvent, eventType: EventType, message: Info) {
     event.preventDefault();
 
+    this.messageContextMenu.focusFirstItem('mouse');
+
     this.messageContextMenuPosition.x = event.clientX + 'px';
     this.messageContextMenuPosition.y = event.clientY + 'px';
     const messageContextMenuTrigger = this.menuTriggerList.toArray()[0];

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts

@@ -55,9 +55,6 @@ export class ExpansionPanelComponent implements OnInit {
   }
 
   onClickMore(event: MouseEvent, group: GroupDetailData) {
-    event.preventDefault();
-    event.stopPropagation();
-
     this.more.emit({ event, group });
   }
 }