Alert and confirm 적용

alert :
1. 파일전송 확장자 오류.
2. 파일전송시 HTTP error
confirm:
1. 대화방 나가기 전.
ext:
1. 새그룹추가 팝업 : 그룹명 valid 에 의한 버튼 활성화 비활성화 여부.

projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts

@@ -3,7 +3,7 @@ import {
   HttpClient,
   HttpEventType,
   HttpResponse,
-  HttpRequest,
+  HttpRequest
 } from '@angular/common/http';
 
 import { Observable, Subject } from 'rxjs';
@@ -13,60 +13,60 @@ import {
   FileProfileSaveRequest,
   FileProfileSaveResponse,
   encodeFileProfileSave,
-  decodeFileProfileSave,
+  decodeFileProfileSave
 } from '../apis/file-profile-save';
 import {
   FileTalkDownloadRequest,
   encodeFileTalkDownload,
-  encodeFormDataFileTalkDownload,
+  encodeFormDataFileTalkDownload
 } from '../apis/file-talk-download';
 import {
   FileTalkSaveRequest,
   FileTalkSaveResponse,
   encodeFileTalkSave,
-  decodeFileTalkSave,
+  decodeFileTalkSave
 } from '../apis/file-talk-save';
 import {
   FileTalkShareRequest,
   FileTalkShareResponse,
   encodeFileTalkShare,
-  decodeFileTalkShare,
+  decodeFileTalkShare
 } from '../apis/file-talk-share';
 import {
   MassTalkDownloadRequest,
   MassTalkDownloadResponse,
   encodeMassTalkDownload,
-  decodeMassTalkDownload,
+  decodeMassTalkDownload
 } from '../apis/mass-talk-download';
 import {
   MassTalkSaveRequest,
   MassTalkSaveResponse,
   encodeMassTalkSave,
-  decodeMassTalkSave,
+  decodeMassTalkSave
 } from '../apis/mass-talk-save';
 import {
   TransMassTalkDownloadRequest,
   TransMassTalkDownloadResponse,
   encodeTransMassTalkDownload,
-  decodeTransMassTalkDownload,
+  decodeTransMassTalkDownload
 } from '../apis/trans-mass-talk-download';
 import {
   TransMassTalkSaveRequest,
   TransMassTalkSaveResponse,
   encodeTransMassTalkSave,
-  decodeTransMassTalkSave,
+  decodeTransMassTalkSave
 } from '../apis/trans-mass-talk-save';
 import {
   TranslationReqRequest,
   TranslationReqResponse,
   encodeTranslationReq,
-  decodeTranslationReq,
+  decodeTranslationReq
 } from '../apis/translation-req';
 import {
   TranslationSaveRequest,
   TranslationSaveResponse,
   encodeTranslationSave,
-  decodeTranslationSave,
+  decodeTranslationSave
 } from '../apis/translation-save';
 
 import { _MODULE_CONFIG } from '../config/token';
@@ -75,7 +75,7 @@ import { Urls } from '../config/urls';
 import { UrlConfig } from '@ucap-webmessenger/core';
 
 @Injectable({
-  providedIn: 'root',
+  providedIn: 'root'
 })
 export class CommonApiService {
   readonly urls: Urls;
@@ -99,7 +99,7 @@ export class CommonApiService {
         !!fileProfileSaveUrl ? fileProfileSaveUrl : this.urls.fileProfileSave,
         {},
         {
-          params: encodeFileProfileSave(req),
+          params: encodeFileProfileSave(req)
         }
       )
       .pipe(map(res => decodeFileProfileSave(res)));
@@ -114,7 +114,7 @@ export class CommonApiService {
       !!fileTalkDownloadUrl ? fileTalkDownloadUrl : this.urls.fileTalkDownload,
       {},
       {
-        params: encodeFileTalkDownload(req),
+        params: encodeFileTalkDownload(req)
       }
     );
 
@@ -186,7 +186,11 @@ export class CommonApiService {
     );
   }
 
-  public acceptableExtensionForFileTalk(extensions: string[]): boolean {
+  public acceptableExtensionForFileTalk(
+    extensions: string[]
+  ): { accept: boolean; reject: string[] } {
+    let accept = true;
+    const reject: string[] = [];
     for (const extension of extensions) {
       if (
         -1 ===
@@ -194,10 +198,14 @@ export class CommonApiService {
           extension.toLowerCase()
         )
       ) {
-        return false;
+        reject.push(extension);
+        accept = false;
       }
     }
-    return true;
+    return {
+      accept,
+      reject
+    };
   }
 
   public fileTalkShare(
@@ -208,7 +216,7 @@ export class CommonApiService {
         this.urls.fileTalkShare,
         {},
         {
-          params: encodeFileTalkShare(req),
+          params: encodeFileTalkShare(req)
         }
       )
       .pipe(map(res => decodeFileTalkShare(res)));
@@ -223,7 +231,7 @@ export class CommonApiService {
         {},
         {
           params: encodeMassTalkDownload(req),
-          responseType: 'text' as 'json',
+          responseType: 'text' as 'json'
         }
       )
       .pipe(map(res => decodeMassTalkDownload(res)));
@@ -238,7 +246,7 @@ export class CommonApiService {
         {},
         {
           params: encodeMassTalkSave(req),
-          responseType: 'text' as 'json',
+          responseType: 'text' as 'json'
         }
       )
       .pipe(map(res => decodeMassTalkSave(res)));
@@ -252,7 +260,7 @@ export class CommonApiService {
         this.urls.transMassTalkDownload,
         {},
         {
-          params: encodeTransMassTalkDownload(req),
+          params: encodeTransMassTalkDownload(req)
         }
       )
       .pipe(map(res => decodeTransMassTalkDownload(res)));
@@ -266,7 +274,7 @@ export class CommonApiService {
         this.urls.transMassTalkSave,
         {},
         {
-          params: encodeTransMassTalkSave(req),
+          params: encodeTransMassTalkSave(req)
         }
       )
       .pipe(map(res => decodeTransMassTalkSave(res)));
@@ -280,7 +288,7 @@ export class CommonApiService {
         this.urls.translationReq,
         {},
         {
-          params: encodeTranslationReq(req),
+          params: encodeTranslationReq(req)
         }
       )
       .pipe(map(res => decodeTranslationReq(res)));
@@ -294,7 +302,7 @@ export class CommonApiService {
         this.urls.translationSave,
         {},
         {
-          params: encodeTranslationSave(req),
+          params: encodeTranslationSave(req)
         }
       )
       .pipe(map(res => decodeTranslationSave(res)));

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

@@ -57,7 +57,7 @@
       [roomInfo]="room"
       [roomUserInfo]="getRoomUserList(room)"
       [sessionVerinfo]="sessionVerinfo"
-      (click)="onSelectedRoom(room)"
+      (click)="onClickContextMenu('SELECT_ROOM', room)"
       (contextmenu)="onContextMenuChat($event, room)"
     >
     </ucap-room-list-item>
@@ -86,7 +86,7 @@
       [roomInfo]="room"
       [roomUserInfo]="getRoomUserList(room)"
       [sessionVerinfo]="sessionVerinfo"
-      (click)="onSelectedRoom(room)"
+      (click)="onClickContextMenu('SELECT_ROOM', room)"
       (contextmenu)="onContextMenuChat($event, room)"
     >
     </ucap-room-list-item>
@@ -121,13 +121,16 @@
   (ucapClickOutside)="chatContextMenuTrigger.closeMenu()"
 >
   <ng-template matMenuContent let-roomInfo="roomInfo">
-    <button mat-menu-item (click)="onSelectedRoom(roomInfo)">
+    <button mat-menu-item (click)="onClickContextMenu('SELECT_ROOM', roomInfo)">
       대화방 열기
     </button>
-    <button mat-menu-item (click)="onClickToggleAlarm(roomInfo)">
+    <button
+      mat-menu-item
+      (click)="onClickContextMenu('TOGGLE_ALARM', roomInfo)"
+    >
       대화방 알람 {{ roomInfo.receiveAlarm ? '끄기' : '켜기' }}
     </button>
-    <button mat-menu-item (click)="onClickExit(roomInfo)">
+    <button mat-menu-item (click)="onClickContextMenu('EXIT_ROOM', roomInfo)">
       대화방 나가기
     </button>
   </ng-template>

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

@@ -1,6 +1,12 @@
 import { exit } from './../../../../store/messenger/room/actions';
 import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
-import { ucapAnimations } from '@ucap-webmessenger/ui';
+import {
+  ucapAnimations,
+  DialogService,
+  ConfirmDialogComponent,
+  ConfirmDialogResult,
+  ConfirmDialogData
+} from '@ucap-webmessenger/ui';
 import { NGXLogger } from 'ngx-logger';
 import { Store, select } from '@ngrx/store';
 import { Subscription, combineLatest, Observable } from 'rxjs';
@@ -54,6 +60,7 @@ export class ChatComponent implements OnInit, OnDestroy {
     private store: Store<any>,
     private formBuilder: FormBuilder,
     private logger: NGXLogger,
+    private dialogService: DialogService,
     private sessionStorageService: SessionStorageService
   ) {
     this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
@@ -194,18 +201,35 @@ export class ChatComponent implements OnInit, OnDestroy {
     this.chatContextMenuTrigger.openMenu();
   }
 
-  onSelectedRoom(roomInfo: RoomInfo) {
+  async onClickContextMenu(type: string, roomInfo: RoomInfo) {
-    this.store.dispatch(ChatStore.selectedRoom({ roomSeq: roomInfo.roomSeq }));
+    switch (type) {
-  }
+      case 'SELECT_ROOM':
-  onClickToggleAlarm(roomInfo: RoomInfo) {
+        this.store.dispatch(
-    this.store.dispatch(RoomStore.updateOnlyAlarm({ roomInfo }));
+          ChatStore.selectedRoom({ roomSeq: roomInfo.roomSeq })
-  }
+        );
-  onClickExit(roomInfo: RoomInfo) {
+        break;
-    this.store.dispatch(
+      case 'TOGGLE_ALARM':
-      RoomStore.exit({
+        this.store.dispatch(RoomStore.updateOnlyAlarm({ roomInfo }));
-        roomSeq: roomInfo.roomSeq
+        break;
-      })
+      case 'EXIT_ROOM':
-    );
+        {
+          const result = await this.dialogService.open<
+            ConfirmDialogComponent,
+            ConfirmDialogData,
+            ConfirmDialogResult
+          >(ConfirmDialogComponent, {
+            data: {
+              title: 'Exit Room',
+              html: `대화방을 나가시겠습니까?<br/>나가기를 하면 대화내용 및 대화방 정보가 삭제됩니다.`
+            }
+          });
+
+          if (!!result && !!result.choice && result.choice) {
+            this.store.dispatch(RoomStore.exit({ roomSeq: roomInfo.roomSeq }));
+          }
+        }
+        break;
+    }
   }
 
   getRoomUserList(roomInfo: RoomInfo): (RoomUserInfo | UserInfoShort)[] {

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

@@ -607,6 +607,18 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
         },
         error => {
           this.logger.debug('onFileSelected error', error);
+          this.fileUploadQueue.onUploadComplete();
+
+          this.dialogService.open<
+            AlertDialogComponent,
+            AlertDialogData,
+            AlertDialogResult
+          >(AlertDialogComponent, {
+            data: {
+              title: 'Alert',
+              html: `파일전송에 실패하였습니다.<br/>계속 문제 발생 시 관리자에게 문의하세요.`
+            }
+          });
         },
         () => {
           this.fileUploadQueue.onUploadComplete();

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

@@ -168,7 +168,12 @@
     >
       No
     </button>
-    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+    <button
+      mat-flat-button
+      [disabled]="getBtnValid()"
+      (click)="onClickChoice(true)"
+      class="mat-primary"
+    >
       Yes
     </button>
   </mat-card-actions>

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

@@ -62,7 +62,8 @@ export interface CreateChatDialogData {
     | UserInfoSS
     | UserInfoF
     | UserInfoDN
-    | RoomUserInfo)[];
+    | RoomUserInfo
+  )[];
 }
 
 export interface CreateChatDialogResult {
@@ -72,7 +73,8 @@ export interface CreateChatDialogResult {
     | UserInfoSS
     | UserInfoF
     | UserInfoDN
-    | RoomUserInfo)[];
+    | RoomUserInfo
+  )[];
   selectedRoom?: RoomInfo;
   groupName?: string;
   oldGroup?: GroupDetailData;
@@ -132,7 +134,8 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     | UserInfoSS
     | UserInfoF
     | UserInfoDN
-    | RoomUserInfo)[] = [];
+    | RoomUserInfo
+  )[] = [];
   isShowSelectedUserList = true;
   selectedRoom: RoomInfo;
 
@@ -449,6 +452,14 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     );
   }
 
+  getBtnValid() {
+    if (this.data.type === UserSelectDialogType.NewGroup) {
+      return this.inputForm.invalid;
+    } else {
+      return false;
+    }
+  }
+
   /** 팝업의 선택 이벤트 전달. */
   onClickChoice(choice: boolean): void {
     this.dialogRef.close({

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

@@ -5,7 +5,7 @@
   <mat-card-content>
     <form name="inputForm" [formGroup]="inputForm" novalidate>
       <div>
-        <mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다.">
+        <mat-form-field hintLabel="">
           <input
             matInput
             #input

projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts

@@ -15,6 +15,12 @@ import {
   CommonApiService
 } from '@ucap-webmessenger/api-common';
 import { FileUtil } from '@ucap-webmessenger/core';
+import { DialogService } from '../services/dialog.service';
+import {
+  AlertDialogComponent,
+  AlertDialogResult,
+  AlertDialogData
+} from '../dialogs/alert.dialog.component';
 
 @Directive({
   selector: 'input[ucapFileUploadFor], div[ucapFileUploadFor]'
@@ -40,7 +46,8 @@ export class FileUploadForDirective implements AfterViewInit {
   constructor(
     private commonApiService: CommonApiService,
     private elementRef: ElementRef,
-    private logger: NGXLogger
+    private logger: NGXLogger,
+    private dialogService: DialogService
   ) {}
 
   ngAfterViewInit(): void {}
@@ -66,11 +73,11 @@ export class FileUploadForDirective implements AfterViewInit {
       return;
     }
 
-    if (this.fileUploadQueue.isEventInElement(event)) {
+    // if (this.fileUploadQueue.isEventInElement(event)) {
-      event.dataTransfer.dropEffect = 'copy';
+    //   event.dataTransfer.dropEffect = 'copy';
-    } else {
+    // } else {
-      event.dataTransfer.dropEffect = 'none';
+    //   event.dataTransfer.dropEffect = 'none';
-    }
+    // }
     event.preventDefault();
   }
 
@@ -103,17 +110,32 @@ export class FileUploadForDirective implements AfterViewInit {
     }
     const files: FileList = event.dataTransfer.files;
 
-    if (
+    const checkExt = this.commonApiService.acceptableExtensionForFileTalk(
-      !this.commonApiService.acceptableExtensionForFileTalk(
+      FileUtil.getExtensions(files)
-        FileUtil.getExtensions(files)
+    );
-      )
+    if (!checkExt.accept) {
-    ) {
       this.logger.debug('window:drop not acceptable');
       if (!!this.fileUploadQueue) {
         this.fileUploadQueue.onDragLeave();
       }
       this.elementRef.nativeElement.value = '';
       this.dragOver = false;
+
+      this.dialogService.open<
+        AlertDialogComponent,
+        AlertDialogData,
+        AlertDialogResult
+      >(AlertDialogComponent, {
+        data: {
+          title: 'Alert',
+          html: `지원하지 않는 파일형식입니다.${
+            checkExt.reject.length > 0
+              ? '<br/>(' + checkExt.reject.join(',') + ')'
+              : ''
+          }`
+        }
+      });
+
       return;
     }