Alert and confirm 적용

alert : 1. 파일전송 확장자 오류. 2. 파일전송시 HTTP error confirm: 1. 대화방 나가기 전. ext: 1. 새그룹추가 팝업 : 그룹명 valid 에 의한 버튼 활성화 비활성화 여부.
2019-11-15 17:55:05 +09:00 · 2019-11-15 17:55:05 +09:00 · c5fb1df147
commit c5fb1df147
parent 6305855bfa
8 changed files with 143 additions and 58 deletions
--- a/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts
+++ b/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)));
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.ts
+++ b/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) {
-    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
-      })
-    );
+  async onClickContextMenu(type: string, roomInfo: RoomInfo) {
+    switch (type) {
+      case 'SELECT_ROOM':
+        this.store.dispatch(
+          ChatStore.selectedRoom({ roomSeq: roomInfo.roomSeq })
+        );
+        break;
+      case 'TOGGLE_ALARM':
+        this.store.dispatch(RoomStore.updateOnlyAlarm({ roomInfo }));
+        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)[] {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
+++ b/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();
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.ts
+++ b/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({
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.html
+++ b/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
--- a/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts
+++ b/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)) {
-      event.dataTransfer.dropEffect = 'copy';
-    } else {
-      event.dataTransfer.dropEffect = 'none';
-    }
+    // if (this.fileUploadQueue.isEventInElement(event)) {
+    //   event.dataTransfer.dropEffect = 'copy';
+    // } else {
+    //   event.dataTransfer.dropEffect = 'none';
+    // }
    event.preventDefault();
  }

@ -103,17 +110,32 @@ export class FileUploadForDirective implements AfterViewInit {
    }
    const files: FileList = event.dataTransfer.files;

-    if (
-      !this.commonApiService.acceptableExtensionForFileTalk(
-        FileUtil.getExtensions(files)
-      )
-    ) {
+    const checkExt = this.commonApiService.acceptableExtensionForFileTalk(
+      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;
    }