기능 추가 :: 대화 > 대화목록 :: context menu 기능 추가 및 기능 구현.

1. 대화방 열기,
2. 대화방 알림 토들
3. 대화방 나가기.

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

@@ -28,6 +28,28 @@
     [roomUserInfo]="getRoomUserList(room)"
     [sessionVerinfo]="sessionVerinfo"
     (click)="onSelectedRoom(room)"
+    (contextmenu)="onContextMenuChat($event, room)"
   >
   </ucap-room-list-item>
 </div>
+
+<div
+  style="visibility: hidden; position: fixed"
+  [style.left]="chatContextMenuPosition.x"
+  [style.top]="chatContextMenuPosition.y"
+  #chatContextMenuTrigger="matMenuTrigger"
+  [matMenuTriggerFor]="chatContextMenu"
+></div>
+<mat-menu #chatContextMenu="matMenu" [overlapTrigger]="false">
+  <ng-template matMenuContent let-roomInfo="roomInfo">
+    <button mat-menu-item (click)="onSelectedRoom(roomInfo)">
+      대화방 열기
+    </button>
+    <button mat-menu-item (click)="onClickToggleAlarm(roomInfo)">
+      대화방 알람 {{ roomInfo.receiveAlarm ? '끄기' : '켜기' }}
+    </button>
+    <button mat-menu-item (click)="onClickExit(roomInfo)">
+      대화방 나가기
+    </button>
+  </ng-template>
+</mat-menu>

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

@@ -1,4 +1,5 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { exit } from './../../../../store/messenger/room/actions';
+import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
 import { ucapAnimations } from '@ucap-webmessenger/ui';
 import { NGXLogger } from 'ngx-logger';
 import { Store, select } from '@ngrx/store';
@@ -10,7 +11,8 @@ import {
 } from '@ucap-webmessenger/protocol-room';
 import * as AppStore from '@app/store';
 import * as ChatStore from '@app/store/messenger/chat';
-import { tap, map } from 'rxjs/operators';
+import * as RoomStore from '@app/store/messenger/room';
+import { tap } from 'rxjs/operators';
 import {
   RoomUserDetailData,
   RoomUserData
@@ -19,6 +21,7 @@ import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { KEY_VER_INFO } from '@app/types/ver-info.type';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+import { MatMenuTrigger } from '@angular/material';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-chat',
@@ -27,6 +30,10 @@ import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
   animations: ucapAnimations
 })
 export class ChatComponent implements OnInit, OnDestroy {
+  @ViewChild('chatContextMenuTrigger', { static: true })
+  chatContextMenuTrigger: MatMenuTrigger;
+  chatContextMenuPosition = { x: '0px', y: '0px' };
+
   roomList: RoomInfo[];
   roomUserList: RoomUserDetailData[];
   roomUserShortList: RoomUserData[];
@@ -100,9 +107,30 @@ export class ChatComponent implements OnInit, OnDestroy {
     }
   }
 
+  onContextMenuChat(event: MouseEvent, roomInfo: RoomInfo) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.chatContextMenuPosition.x = event.clientX + 'px';
+    this.chatContextMenuPosition.y = event.clientY + 'px';
+    this.chatContextMenuTrigger.menu.focusFirstItem('mouse');
+    this.chatContextMenuTrigger.menuData = { roomInfo };
+    this.chatContextMenuTrigger.openMenu();
+  }
+
   onSelectedRoom(roomInfo: RoomInfo) {
     this.store.dispatch(ChatStore.selectedRoom({ roomSeq: roomInfo.roomSeq }));
   }
+  onClickToggleAlarm(roomInfo: RoomInfo) {
+    this.store.dispatch(RoomStore.updateOnlyAlarm({ roomInfo }));
+  }
+  onClickExit(roomInfo: RoomInfo) {
+    this.store.dispatch(
+      RoomStore.exit({
+        roomSeq: roomInfo.roomSeq
+      })
+    );
+  }
 
   getRoomList() {
     if (this.isSearch && this.searchWord.trim().length > 0) {

projects/ucap-webmessenger-app/src/app/store/messenger/room/actions.ts

@@ -11,7 +11,9 @@ import {
   UpdateResponse,
   UpdateRequest,
   OpenRequest,
-  OpenResponse
+  OpenResponse,
+  ExitRequest,
+  ExitResponse
 } from '@ucap-webmessenger/protocol-room';
 
 export const info = createAction(
@@ -91,3 +93,20 @@ export const openFailure = createAction(
   '[Messenger::Room] Open Failure',
   props<{ error: any }>()
 );
+
+export const exit = createAction(
+  '[Messenger::Room] Exit',
+  props<ExitRequest>()
+);
+
+export const exitSuccess = createAction(
+  '[Messenger::Room] Exit Success',
+  props<{
+    res: ExitResponse;
+  }>()
+);
+
+export const exitFailure = createAction(
+  '[Messenger::Room] Exit Failure',
+  props<{ error: any }>()
+);

projects/ucap-webmessenger-app/src/app/store/messenger/room/effects.ts

@@ -28,7 +28,8 @@ import {
   UserShortData,
   UserData,
   UpdateResponse,
-  OpenResponse
+  OpenResponse,
+  ExitResponse
 } from '@ucap-webmessenger/protocol-room';
 
 import * as ChatStore from '@app/store/messenger/chat';
@@ -47,7 +48,10 @@ import {
   updateFailure,
   open,
   openSuccess,
-  openFailure
+  openFailure,
+  exit,
+  exitSuccess,
+  exitFailure
 } from './actions';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
@@ -171,6 +175,20 @@ export class Effects {
     )
   );
 
+  exit$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(exit),
+      exhaustMap(req => {
+        return this.roomProtocolService.exit(req).pipe(
+          map((res: ExitResponse) => {
+            return exitSuccess({ res });
+          }),
+          catchError(error => of(exitFailure({ error })))
+        );
+      })
+    )
+  );
+
   inviteNotification$ = createEffect(
     () => {
       return this.actions$.pipe(

projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts

@@ -15,7 +15,6 @@ import {
   refreshRoomSuccess,
   updateUnreadCount,
   createGroupSuccess,
-  addBuddySuccess,
   delBuddySuccess,
   delGroupSuccess,
   updateBuddySuccess
@@ -27,10 +26,8 @@ import {
   UserInfo
 } from '@ucap-webmessenger/protocol-sync';
 
-import * as AuthenticationStore from '@app/store/account/authentication';
 import * as RoomStore from '@app/store/messenger/room';
 import { RoomInfo } from '@ucap-webmessenger/protocol-room';
-import { UpdateResponse } from '@ucap-webmessenger/protocol-buddy';
 
 export const reducer = createReducer(
   initialState,
@@ -133,6 +130,13 @@ export const reducer = createReducer(
     };
   }),
 
+  on(RoomStore.exitSuccess, (state, action) => {
+    return {
+      ...state,
+      room: adapterRoom.removeOne(action.res.roomSeq, { ...state.room })
+    };
+  }),
+
   on(refreshRoomSuccess, (state, action) => {
     const roomUserList: RoomUserDetailData[] = [];
     const roomUserShortList: RoomUserData[] = [];

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

@@ -16,6 +16,9 @@
           <div class="num" *ngIf="roomInfo.roomType === RoomType.Multi">
             {{ roomInfo.joinUserCount }}명
           </div>
+          <div *ngIf="!roomInfo.receiveAlarm">
+            <mat-icon>notifications_off</mat-icon>
+          </div>
         </div>
         <div class="room-msg">{{ finalEventMessage }}</div>
       </div>