기능추가 :: 대화방 설정 / 방이름 변경 || 타이머 대화방 설정

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

@@ -64,6 +64,9 @@
           <button mat-menu-item (click)="onClickContextMenu('ADD_MEMBER')">
             대화상대추가
           </button>
+          <button mat-menu-item (click)="onClickContextMenu('EDIT_ROOM')">
+            대화방설정
+          </button>
           <button mat-menu-item (click)="onClickContextMenu('CLOSE_ROOM')">
             방닫기
           </button>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

@@ -70,6 +70,11 @@ import {
 import { CONST } from '@ucap-webmessenger/core';
 import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
 import { StatusCode } from '@ucap-webmessenger/api';
+import {
+  EditChatRoomDialogComponent,
+  EditChatRoomDialogResult,
+  EditChatRoomDialogData
+} from '../dialogs/chat/edit-chat-room.dialog.component';
 
 @Component({
   selector: 'app-layout-messenger-messages',
@@ -674,6 +679,54 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
           }
         }
         break;
+      case 'EDIT_ROOM':
+        {
+          const result = await this.dialogService.open<
+            EditChatRoomDialogComponent,
+            EditChatRoomDialogData,
+            EditChatRoomDialogResult
+          >(EditChatRoomDialogComponent, {
+            width: '600px',
+            data: {
+              title: 'Edit Chat Room',
+              roomInfo: this.roomInfo
+            }
+          });
+
+          if (!!result && !!result.choice && result.choice) {
+            const roomName: string = result.roomName;
+            const roomNameChangeTarget: string = result.roomNameChangeTarget;
+            const timeRoomInterval: number = result.timeRoomInterval;
+            const roomInfo: RoomInfo = result.roomInfo;
+
+            // 방제목 업데이트.
+            this.store.dispatch(
+              RoomStore.update({
+                req: {
+                  roomSeq: roomInfo.roomSeq,
+                  roomName,
+                  receiveAlarm: roomInfo.receiveAlarm,
+                  syncAll:
+                    roomNameChangeTarget.toUpperCase() === 'ALL' ? true : false
+                }
+              })
+            );
+
+            if (
+              roomInfo.isTimeRoom &&
+              timeRoomInterval > 0 &&
+              roomInfo.timeRoomInterval !== timeRoomInterval
+            ) {
+              this.store.dispatch(
+                RoomStore.updateTimeRoomInterval({
+                  roomSeq: roomInfo.roomSeq,
+                  timerInterval: timeRoomInterval
+                })
+              );
+            }
+          }
+        }
+        break;
       case 'CLOSE_ROOM':
         {
           this.store.dispatch(ChatStore.clearSelectedRoom());

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.html

@@ -0,0 +1,54 @@
+<mat-card class="confirm-card mat-elevation-z">
+  <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
+    <mat-card-title>{{ data.title }}</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <form name="inputForm" [formGroup]="inputForm" novalidate>
+      <div>
+        <mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다.">
+          <input
+            matInput
+            #input
+            maxlength="20"
+            placeholder="대화방이름"
+            formControlName="roomName"
+          />
+          <mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint>
+        </mat-form-field>
+      </div>
+      <div class="targetSelect">
+        <span>변경 대상자</span>
+        <mat-radio-group
+          aria-label="Select an option"
+          value="me"
+          formControlName="changeTarget"
+        >
+          <mat-radio-button value="me">나</mat-radio-button>
+          <mat-radio-button value="all">전체</mat-radio-button>
+        </mat-radio-group>
+      </div>
+      <div *ngIf="data.roomInfo.isTimeRoom">
+        <mat-form-field>
+          <mat-label>Setting Timer</mat-label>
+          <mat-select formControlName="timerInterval">
+            <mat-option *ngFor="let timer of timerArray" [value]="timer.value">
+              {{ timer.text }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+    </form>
+  </mat-card-content>
+  <mat-card-actions class="button-farm flex-row">
+    <button
+      mat-stroked-button
+      (click)="onClickChoice(false)"
+      class="mat-primary"
+    >
+      No
+    </button>
+    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+      Yes
+    </button>
+  </mat-card-actions>
+</mat-card>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.scss

@@ -0,0 +1,38 @@
+::ng-deep .mat-card-header-tex {
+  margin: 0;
+}
+.confirm-card {
+  min-width: 500px;
+  .mat-card-header {
+    margin-bottom: 20px;
+    .mat-card-header-text {
+      .mat-card-title {
+        margin: 0 -16px;
+      }
+    }
+  }
+  .button-farm {
+    text-align: right;
+    .mat-primary {
+      margin-left: 4px;
+    }
+  }
+}
+
+form {
+  div {
+    padding-bottom: 5px;
+    height: 65px;
+
+    &.targetSelect {
+      line-height: 65px;
+
+      mat-radio-button {
+        padding-left: 10px;
+      }
+    }
+  }
+  .mat-form-field {
+    width: 100%;
+  }
+}

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditChatRoomDialogComponent } from './edit-chat-room.dialog.component';
+
+describe('app::layouts::messenger::EditChatRoomDialogComponent', () => {
+  let component: EditChatRoomDialogComponent;
+  let fixture: ComponentFixture<EditChatRoomDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [EditChatRoomDialogComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditChatRoomDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.ts

@@ -0,0 +1,68 @@
+import { RoomInfo } from '@ucap-webmessenger/protocol-room';
+import { Component, OnInit, Inject } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+export interface EditChatRoomDialogData {
+  title: string;
+  roomInfo: RoomInfo;
+}
+
+export interface EditChatRoomDialogResult {
+  choice: boolean;
+  roomName?: string;
+  roomNameChangeTarget?: string;
+  timeRoomInterval?: number;
+  roomInfo: RoomInfo;
+}
+
+@Component({
+  selector: 'app-layout-messenger-edit-chat-room',
+  templateUrl: './edit-chat-room.dialog.component.html',
+  styleUrls: ['./edit-chat-room.dialog.component.scss']
+})
+export class EditChatRoomDialogComponent implements OnInit {
+  roomName: string;
+  inputForm: FormGroup;
+
+  timerArray: { value: number; text: string }[] = [
+    { value: 5, text: '5 초' },
+    { value: 10, text: '10 초' },
+    { value: 30, text: '30 초' },
+    { value: 60, text: '1 분' },
+    { value: 300, text: '5 분' },
+    { value: 600, text: '10 분' },
+    { value: 1800, text: '30 분' },
+    { value: 3600, text: '1 시간' },
+    { value: 21600, text: '6 시간' },
+    { value: 43200, text: '12 시간' },
+    { value: 86400, text: '24 시간' }
+  ];
+
+  constructor(
+    public dialogRef: MatDialogRef<
+      EditChatRoomDialogData,
+      EditChatRoomDialogResult
+    >,
+    @Inject(MAT_DIALOG_DATA) public data: EditChatRoomDialogData,
+    private formBuilder: FormBuilder
+  ) {}
+
+  ngOnInit(): void {
+    this.inputForm = this.formBuilder.group({
+      roomName: [this.data.roomInfo.roomName],
+      changeTarget: ['me'],
+      timerInterval: [this.data.roomInfo.timeRoomInterval]
+    });
+  }
+
+  onClickChoice(choice: boolean): void {
+    this.dialogRef.close({
+      choice,
+      roomName: this.inputForm.get('roomName').value,
+      roomNameChangeTarget: this.inputForm.get('changeTarget').value,
+      timeRoomInterval: this.inputForm.get('timerInterval').value,
+      roomInfo: this.data.roomInfo
+    });
+  }
+}

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/index.ts

@@ -1,3 +1,4 @@
 import { CreateChatDialogComponent } from './create-chat.dialog.component';
+import { EditChatRoomDialogComponent } from './edit-chat-room.dialog.component';
 
-export const DIALOGS = [CreateChatDialogComponent];
+export const DIALOGS = [CreateChatDialogComponent, EditChatRoomDialogComponent];

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

@@ -1,5 +1,6 @@
-import { MatListModule } from '@angular/material/list';
+import { MatSelectModule } from '@angular/material/select';
-import { MatChipsModule } from '@angular/material/chips';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -22,6 +23,8 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatCheckboxModule } from '@angular/material';
+import { MatListModule } from '@angular/material/list';
+import { MatChipsModule } from '@angular/material/chips';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { OverlayModule } from '@angular/cdk/overlay';
@@ -65,6 +68,8 @@ import { DIALOGS } from './dialogs';
     MatToolbarModule,
     MatChipsModule,
     MatCheckboxModule,
+    MatRadioModule,
+    MatSelectModule,
 
     PerfectScrollbarModule,
 

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

@@ -17,7 +17,9 @@ import {
   Open3Request,
   Open3Response,
   InviteRequest,
-  InviteResponse
+  InviteResponse,
+  UpdateTimerSetRequest,
+  UpdateTimerSetResponse
 } from '@ucap-webmessenger/protocol-room';
 import { ReadNotification } from '@ucap-webmessenger/protocol-event';
 
@@ -87,6 +89,21 @@ export const updateFailure = createAction(
   props<{ error: any }>()
 );
 
+export const updateTimeRoomInterval = createAction(
+  '[Messenger::Room] Update Interval for TimeRoom',
+  props<UpdateTimerSetRequest>()
+);
+export const updateTimeRoomIntervalSuccess = createAction(
+  '[Messenger::Room] Update Interval for TimeRoom Success',
+  props<{
+    res: UpdateTimerSetResponse;
+  }>()
+);
+export const updateTimeRoomIntervalFailure = createAction(
+  '[Messenger::Room] Update Interval for TimeRoom Failure',
+  props<{ error: any }>()
+);
+
 export const open = createAction(
   '[Messenger::Room] Open',
   props<{ req: OpenRequest }>()

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

@@ -32,7 +32,8 @@ import {
   ExitResponse,
   Open3Response,
   RoomType,
-  InviteResponse
+  InviteResponse,
+  UpdateTimerSetResponse
 } from '@ucap-webmessenger/protocol-room';
 
 import * as ChatStore from '@app/store/messenger/chat';
@@ -60,7 +61,10 @@ import {
   openTimerFailure,
   inviteOrOpen,
   inviteSuccess,
-  inviteFailure
+  inviteFailure,
+  updateTimeRoomInterval,
+  updateTimeRoomIntervalSuccess,
+  updateTimeRoomIntervalFailure
 } from './actions';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
@@ -163,6 +167,20 @@ export class Effects {
     )
   );
 
+  updateTimeRoomInterval$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(updateTimeRoomInterval),
+      exhaustMap(action => {
+        return this.roomProtocolService.updateTimerSet(action).pipe(
+          map((res: UpdateTimerSetResponse) => {
+            return updateTimeRoomIntervalSuccess({ res });
+          }),
+          catchError(error => of(updateTimeRoomIntervalFailure({ error })))
+        );
+      })
+    )
+  );
+
   open$ = createEffect(() =>
     this.actions$.pipe(
       ofType(open),

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

@@ -3,7 +3,8 @@ import { initialState, adapterUserInfo, adapterUserInfoShort } from './state';
 import {
   infoSuccess,
   updateSuccess,
-  updateRoomUserLastReadSeq
+  updateRoomUserLastReadSeq,
+  updateTimeRoomIntervalSuccess
 } from './actions';
 
 import * as AuthenticationStore from '@app/store/account/authentication';
@@ -35,6 +36,16 @@ export const reducer = createReducer(
     };
   }),
 
+  on(updateTimeRoomIntervalSuccess, (state, action) => {
+    return {
+      ...state,
+      roomInfo: {
+        ...state.roomInfo,
+        timeRoomInterval: action.res.timerInterval
+      }
+    };
+  }),
+
   on(updateRoomUserLastReadSeq, (state, action) => {
     const userSeq = action.SENDER_SEQ;
 

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

@@ -148,6 +148,21 @@ export const reducer = createReducer(
     };
   }),
 
+  on(RoomStore.updateTimeRoomIntervalSuccess, (state, action) => {
+    const roomInfo: RoomInfo = {
+      ...state.room.entities[action.res.roomSeq],
+      timeRoomInterval: action.res.timerInterval
+    };
+
+    return {
+      ...state,
+      room: adapterRoom.updateOne(
+        { id: action.res.roomSeq, changes: roomInfo },
+        { ...state.room }
+      )
+    };
+  }),
+
   on(RoomStore.exitSuccess, (state, action) => {
     return {
       ...state,