Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

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

@@ -141,25 +141,27 @@
     }
   }
 }
-.translation-section {
+.translation-container {
-  display: flex;
+  .translation-section {
-  flex-flow: column;
+    display: flex;
-
+    flex-flow: column;
-  .translation-container {
+    border-top: 1px solid #dddddd;
-    position: absolute;
+    .translation-container {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    background-color: transparent;
-    background-color: rgba(250, 255, 255, 0.8);
-    border-top: 1px solid;
-
-    .translation-zone {
       position: absolute;
-      padding: 10px 10px 0 10px;
-      background-color: rgba(250, 255, 255, 0.8);
       bottom: 0;
+      left: 0;
       width: 100%;
+      background-color: transparent;
+      background-color: rgba(250, 255, 255, 0.8);
+      border-top: 1px solid;
+
+      .translation-zone {
+        position: absolute;
+        padding: 10px 10px 0 10px;
+        background-color: rgba(250, 255, 255, 0.8);
+        bottom: 0;
+        width: 100%;
+      }
     }
   }
 }

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

@@ -584,12 +584,16 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
           info.sentMessageJson || info.sentMessage
         );
 
-        this.snackBarPreviewEvent = this.snackBarService.open(message, this.translateService.instant('common.messages.confirm'), {
+        this.snackBarPreviewEvent = this.snackBarService.open(
-          // duration: 3000,
+          message,
-          verticalPosition: 'bottom',
+          this.translateService.instant('common.messages.confirm'),
-          horizontalPosition: 'center',
+          {
-          panelClass: ['chat-snackbar-class']
+            // duration: 3000,
-        });
+            verticalPosition: 'bottom',
+            horizontalPosition: 'center',
+            panelClass: ['chat-snackbar-class']
+          }
+        );
         this.snackBarPreviewEvent.onAction().subscribe(() => {
           this.setEventMoreInit();
           this.scrollToBottom();
@@ -1052,6 +1056,68 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
 
     const allObservables: Observable<FileTalkSaveResponse>[] = [];
 
+    const fileAllowSize =
+      !!this.sessionVerInfo && this.sessionVerInfo.fileAllowSize
+        ? this.sessionVerInfo.fileAllowSize
+        : environment.productConfig.CommonSetting.defaultFileAllowSize;
+
+    if (fileAllowSize > 0) {
+      if (
+        fileUploadItems.filter(
+          fui => fui.file.size > fileAllowSize * 1024 * 1024
+        ).length
+      ) {
+        this.dialogService.open<
+          AlertDialogComponent,
+          AlertDialogData,
+          AlertDialogResult
+        >(AlertDialogComponent, {
+          width: '360px',
+          data: {
+            title: '',
+            message: this.translateService.instant(
+              'common.file.errors.oversize',
+              {
+                maxSize: fileAllowSize
+              }
+            )
+          }
+        });
+        if (!!this.fileUploadQueue) {
+          this.fileUploadQueue.onUploadComplete();
+        }
+        return;
+      }
+    }
+
+    const checkExt = this.commonApiService.acceptableExtensionForFileTalk(
+      fileUploadItems.map(fui => FileUtil.getExtension(fui.file.name))
+    );
+    if (!checkExt.accept) {
+      if (!!this.fileUploadQueue) {
+        this.fileUploadQueue.onUploadComplete();
+      }
+
+      this.dialogService.open<
+        AlertDialogComponent,
+        AlertDialogData,
+        AlertDialogResult
+      >(AlertDialogComponent, {
+        data: {
+          title: 'Alert',
+          html: `${this.translateService.instant(
+            'common.file.errors.notSupporedType'
+          )} ${
+            checkExt.reject.length > 0
+              ? '<br/>(' + checkExt.reject.join(',') + ')'
+              : ''
+          }`
+        }
+      });
+
+      return;
+    }
+
     for (const fileUploadItem of fileUploadItems) {
       let thumbnail: File;
       if (
@@ -1127,6 +1193,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             this.translateService.instant('common.file.errors.failToUpload'),
             this.translateService.instant('common.file.errors.label')
           );
+
+          if (!!this.fileUploadQueue) {
+            this.fileUploadQueue.onUploadComplete();
+          }
         },
         () => {
           this.fileUploadQueue.onUploadComplete();

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.html

@@ -11,6 +11,7 @@
       [detail]="data.detail"
       [detailContents]="data.detailContents"
       [curReceiverList]="data.receiverList"
+      [fileAllowSize]="fileAllowSize"
       (send)="onSend($event)"
       (selectReceiver)="onSelectReceiver($event)"
       (cancel)="onCancel()"

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.ts

@@ -7,13 +7,11 @@ import {
   DetailResponse,
   DetailContent,
   MessageApiService,
-  DetailReceiver,
   MessageType
 } from '@ucap-webmessenger/api-message';
 
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { NGXLogger } from 'ngx-logger';
-import { MessageStatusCode } from '@ucap-webmessenger/api';
 import {
   WriteComponent as UCapMessageWriteComponent,
   Message,
@@ -25,10 +23,17 @@ import {
   CreateChatDialogData,
   CreateChatDialogResult
 } from '../chat/create-chat.dialog.component';
-import { UserSelectDialogType, EnvironmentsInfo } from '@app/types';
+import {
+  UserSelectDialogType,
+  EnvironmentsInfo,
+  KEY_VER_INFO
+} from '@app/types';
 import { take } from 'rxjs/operators';
 import { UserInfoSS } from '@ucap-webmessenger/protocol-query';
 import { TranslateService } from '@ngx-translate/core';
+import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+import { environment } from '../../../../../environments/environment';
 
 export interface MessageWriteDialogData {
   loginRes: LoginResponse;
@@ -57,6 +62,10 @@ export class MessageWriteDialogComponent implements OnInit {
   @ViewChild('messageWrite', { static: true })
   messageWrite: UCapMessageWriteComponent;
 
+  sessionVerInfo: VersionInfo2Response;
+
+  fileAllowSize: number;
+
   isModify = false;
 
   constructor(
@@ -68,11 +77,21 @@ export class MessageWriteDialogComponent implements OnInit {
     private messageApiService: MessageApiService,
     private snackBarService: SnackBarService,
     private translateService: TranslateService,
+    private sessionStorageService: SessionStorageService,
     private logger: NGXLogger,
     private dialogService: DialogService
   ) {}
 
   ngOnInit(): void {
+    this.sessionVerInfo = this.sessionStorageService.get<VersionInfo2Response>(
+      KEY_VER_INFO
+    );
+
+    this.fileAllowSize =
+      !!this.sessionVerInfo && this.sessionVerInfo.fileAllowSize
+        ? this.sessionVerInfo.fileAllowSize
+        : environment.productConfig.CommonSetting.defaultFileAllowSize;
+
     if (!!this.data.detail && !!this.data.detail.msgInfo) {
       this.isModify = true;
     }

projects/ucap-webmessenger-app/src/assets/i18n/en.json

@@ -350,12 +350,13 @@
       "errors": {
         "label": "File errors",
         "failToUpload": "File upload failed.",
-        "failToSave": "File save failed.",
+        "failToSave": "File save failed. Please 'Save As'.",
-        "failToSaveSomeOfAll": "Some of file(s) save failed",
+        "failToSaveSomeOfAll": "Some of file(s) save failed. Please 'Save As'.",
         "failToSpecifyPath": "Specifing of save path failed.",
         "expired": "This file has expired",
         "noPreview": "This file does not support preview.",
-        "notSupporedType": "File format is not supported."
+        "notSupporedType": "File format is not supported.",
+        "oversize": "You cannot upload files larger than {{size}} megabytes."
       }
     },
     "clipboard": {

projects/ucap-webmessenger-app/src/assets/i18n/ko.json

@@ -329,8 +329,8 @@
       "size": "파일 크기",
       "download": "파일 다운로드",
       "delete": "파일 삭제",
-      "save": "파일 저장",
+      "save": "저장",
-      "saveAs": "파일을 다른 이름으로 저장",
+      "saveAs": "다른 이름으로 저장",
       "saveAll": "파일 모두 저장",
       "downloadSelected": "선택된 파일 다운로드",
       "openDownloadFolder": "다운로드 폴더 열기",
@@ -350,12 +350,13 @@
       "errors": {
         "label": "파일 에러",
         "failToUpload": "파일 업로드에 실패하였습니다.",
-        "failToSave": "파일 저장에 실패하였습니다.",
+        "failToSave": "파일 저장에 실패하였습니다. '다른 이름으로 저장' 하십시요.",
-        "failToSaveSomeOfAll": "파일 저장 중 일부 파일이 실패하였습니다.",
+        "failToSaveSomeOfAll": "파일 저장 중 일부 파일이 실패하였습니다. '다른 이름으로 저장' 하십시요.",
         "failToSpecifyPath": "저장경로 지정에 실패하였습니다.",
         "expired": "기간이 만료된 파일입니다",
         "noPreview": "미리보기를 지원하지 않는 파일입니다.",
-        "notSupporedType": "지원하지 않는 파일형식입니다."
+        "notSupporedType": "지원하지 않는 파일형식입니다.",
+        "oversize": "{{maxSize}}MB 이상 파일을 업로드 할 수 없습니다."
       }
     },
     "clipboard": {

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -237,13 +237,13 @@ $daesang-grey: (
     color: mat-color($warn, 800);
   }
   .border-primary-color {
-    border: 1px solid mat-color($primary);
+    border-color: 1px solid mat-color($primary);
   }
   .border-accent-bright {
     border-color: mat-color($accent, 300);
   }
   .border-accent-color {
-    border: 1px solid mat-color($accent);
+    border-color: 1px solid mat-color($accent);
   }
   .stroke-accent-darkest {
     stroke: mat-color($accent, 800);
@@ -420,9 +420,9 @@ $daesang-grey: (
     }
   }
   .translationForm {
-    background-color: mat-color($accent, 200, 0.5);
+    background-color: mat-color($accent, 200, 0.4);
   }
   .translation-preview {
-    background-color: mat-color($accent, 800, 0.8);
+    background-color: mat-color($accent, 900, 0.8);
   }
 }

projects/ucap-webmessenger-app/src/environments/environment.daesang.dev.ts

@@ -64,6 +64,8 @@ export const environment: Environment = {
       }
     },
     CommonSetting: {
+      defaultFileAllowSize: 100,
+
       editableProfileImage: false,
 
       useMyDeptGroup: true,

projects/ucap-webmessenger-app/src/environments/environment.daesang.prod.ts

@@ -64,6 +64,8 @@ export const environment: Environment = {
       }
     },
     CommonSetting: {
+      defaultFileAllowSize: 100,
+
       editableProfileImage: false,
 
       useMyDeptGroup: true,

projects/ucap-webmessenger-app/src/environments/environment.dev.ts

@@ -64,6 +64,8 @@ export const environment: Environment = {
       }
     },
     CommonSetting: {
+      defaultFileAllowSize: 100,
+
       editableProfileImage: true,
 
       useMyDeptGroup: false,

projects/ucap-webmessenger-app/src/environments/environment.prod.ts

@@ -64,6 +64,8 @@ export const environment: Environment = {
       }
     },
     CommonSetting: {
+      defaultFileAllowSize: 100,
+
       editableProfileImage: true,
 
       useMyDeptGroup: false,

projects/ucap-webmessenger-app/src/environments/environment.type.ts

@@ -64,6 +64,9 @@ export interface Environment {
     defaultSettings: Settings;
 
     CommonSetting: {
+      /** 파일업로드 제한 사이즈 (mb) */
+      defaultFileAllowSize: number;
+
       /** 내 프로필 이미지 수정 가능 여부 */
       editableProfileImage: boolean;
 

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass-translation.component.scss

@@ -0,0 +1,62 @@
+.translation-main {
+  flex-direction: column;
+  text-align: left;
+
+  .original {
+    padding: 14px;
+  }
+  .translation {
+    padding: 10px;
+    border-top: 1px solid #dddddd;
+  }
+}
+
+.btn-box {
+  width: 100%;
+  height: 40px;
+  border-top: 1px solid #dddddd;
+  display: flex;
+  ul {
+    width: 100%;
+    li {
+      width: 50%;
+      height: 100%;
+      display: inline-block;
+      text-align: center;
+      align-items: center;
+      font-size: 13px;
+      border-right: 1px solid #dddddd;
+      &:last-child {
+        border-right: none;
+      }
+      .mat-button {
+        width: 100%;
+        height: 100%;
+        display: block;
+        padding: 0px 6px 4px;
+      }
+    }
+    &.expired {
+      li {
+        width: 100%;
+        white-space: nowrap;
+        color: #999999;
+        align-items: center;
+        line-height: 40px;
+      }
+    }
+  }
+}
+
+.translation-main {
+  .language {
+    padding: 0px 6px 4px;
+    background-color: #222222;
+    border-radius: 4px;
+    font-size: 1em;
+    color: #fff;
+    margin-top: -4px;
+    margin-right: 6px;
+    transform: translateY(-2px);
+  }
+}

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.scss

@@ -1,5 +1,7 @@
 .translation-main {
+  flex-direction: column;
   text-align: left;
+
   .original {
     padding: 14px;
   }

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

@@ -82,7 +82,9 @@ $meBox-bg: #ffffff;
     }
   }
   &.searched {
-    color: red;
+    .bubble {
+      color: red;
+    }
   }
 }
 

projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts

@@ -11,7 +11,13 @@ import {
   Input
 } from '@angular/core';
 
-import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
+import {
+  ucapAnimations,
+  DialogService,
+  AlertDialogResult,
+  AlertDialogComponent,
+  AlertDialogData
+} from '@ucap-webmessenger/ui';
 
 import { NGXLogger } from 'ngx-logger';
 
@@ -36,7 +42,8 @@ import {
 } from '../dialogs/schedule-send.dialog.component';
 import { RoleCode } from '@ucap-webmessenger/protocol-authentication';
 import { EmployeeType } from '@ucap-webmessenger/protocol-room';
-import { contentTracing } from 'electron';
+import { TranslateService } from '@ngx-translate/core';
+import { CommonApiService } from '@ucap-webmessenger/api-common';
 
 const ATTR_FILE = 'UCAP_ATTR_FILE';
 
@@ -79,19 +86,18 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit {
   detailContents?: string;
   @Input()
   isModify = false;
+  @Input()
+  fileAllowSize: number;
 
   @Output()
   send = new EventEmitter<Message | MessageModify>();
-
   @Output()
   cancel = new EventEmitter<void>();
-
   @Output()
   selectReceiver = new EventEmitter<UserInfo[]>();
 
   @ViewChild('editor', { static: true })
   editor: ElementRef<HTMLDivElement>;
-
   @ViewChild('fileInput', { static: true })
   fileInput: ElementRef<HTMLInputElement>;
 
@@ -106,6 +112,8 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit {
     private formBuilder: FormBuilder,
     private dialogService: DialogService,
     private changeDetectorRef: ChangeDetectorRef,
+    private translateService: TranslateService,
+    private commonApiService: CommonApiService,
     private logger: NGXLogger
   ) {}
 
@@ -157,6 +165,10 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit {
     this.fileInput.nativeElement.onchange = async () => {
       const fileList: FileList = self.fileInput.nativeElement.files;
 
+      if (!this.validUploadFile(fileList)) {
+        return;
+      }
+
       for (let i = 0; i < fileList.length; i++) {
         const file = fileList.item(i);
 
@@ -179,6 +191,10 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit {
     this.fileInput.nativeElement.onchange = () => {
       const fileList: FileList = this.fileInput.nativeElement.files;
 
+      if (!this.validUploadFile(fileList)) {
+        return;
+      }
+
       if (!self.attachmentList) {
         self.attachmentList = [];
       }
@@ -194,6 +210,65 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit {
     };
   }
 
+  validUploadFile(fileList: FileList): boolean {
+    let valid = true;
+    if (this.fileAllowSize > 0) {
+      for (let i = 0; i < fileList.length; i++) {
+        const file = fileList.item(i);
+        if (file.size > this.fileAllowSize * 1024 * 1024) {
+          valid = false;
+          break;
+        }
+      }
+      if (!valid) {
+        this.dialogService.open<
+          AlertDialogComponent,
+          AlertDialogData,
+          AlertDialogResult
+        >(AlertDialogComponent, {
+          width: '360px',
+          data: {
+            title: '',
+            message: this.translateService.instant(
+              'common.file.errors.oversize',
+              {
+                maxSize: this.fileAllowSize
+              }
+            )
+          }
+        });
+
+        return valid;
+      }
+    }
+
+    const checkExt = this.commonApiService.acceptableExtensionForFileTalk(
+      FileUtil.getExtensions(fileList)
+    );
+    if (!checkExt.accept) {
+      this.dialogService.open<
+        AlertDialogComponent,
+        AlertDialogData,
+        AlertDialogResult
+      >(AlertDialogComponent, {
+        data: {
+          title: 'Alert',
+          html: `${this.translateService.instant(
+            'common.file.errors.notSupporedType'
+          )} ${
+            checkExt.reject.length > 0
+              ? '<br/>(' + checkExt.reject.join(',') + ')'
+              : ''
+          }`
+        }
+      });
+
+      return valid;
+    }
+
+    return valid;
+  }
+
   onPasteEditor(event: ClipboardEvent) {
     const text = document.createTextNode(
       event.clipboardData.getData('text/plain')

projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss

@@ -20,7 +20,7 @@
   position: relative;
   padding: 20px;
   text-align: right;
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(45, 58, 74, 0.8);
   img {
     margin-right: 40px;
   }

projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html

@@ -7,15 +7,20 @@
   "
   class="translation-preview"
 >
-  <span class="translation-section">
+  <div class="translation-section">
-    {{ translationPreviewInfo.previewInfo.translation }}
+    <span class="translate-text">
-  </span>
+      {{ translationPreviewInfo.previewInfo.translation }}
-  <div class="btns">
+    </span>
     <button
       mat-stroked-button
+      class="btn-translation-send"
       (click)="onClickSendTranslationMessage(translationPreviewInfo)"
     >
-      {{ 'chat.send' | translate }}
+      <!--{{ 'chat.send' | translate }}-->
+      <svg _ngcontent-smu-c52="" fill="none" height="20" stroke="currentColor" stroke-linecap="butt" stroke-linejoin="round"
+        stroke-width="2" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg">
+        <path _ngcontent-smu-c52="" d="M12 19V6M5 12l7-7 7 7"></path>
+      </svg>
     </button>
     <button
       class="btn-close-translatebox bg-accent-dark"
@@ -39,6 +44,7 @@
       </svg>
     </button>
   </div>
+
   <!--<span class="btn-close">
     <button
       mat-button

projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss

@@ -3,38 +3,52 @@
   display: flex;
   flex-flow: row;
   justify-items: flex-end;
-  align-items: center;
   color: #ffffff;
   .translation-section {
     display: flex;
     flex: 1 1 auto;
     font-size: 1.1em;
-    padding: 0 20px 0 40px;
+
-  }
+    .translate-text {
-  .btns {
+      margin: 10px 10px 10px 30px;
-    display: flex;
+      max-height: 100px;
-    flex-flow: row;
+      word-break: break-all;
-    margin-left: auto;
+      white-space: pre-wrap;
-    height: 100%;
+      overflow-y: auto;
-    button {
+      display: flex;
-      &.btn-send {
+      flex: 1 1 auto;
-        width: 80px;
+    }
-        background-color: #ffffff;
+    .btn-translation-send {
-        color: #333333;
+      /* min-width: 80px;
-      }
+      background-color: rgb(255, 255, 255,0.1);
-      &.btn-close-translatebox {
+      border-radius: 0;
-        width: 3em;
+      border: none;*/
-        height: 100%;
+      background-color: #ffffff;
-        stroke: #ffffff;
+      color: #333333;
-        border: none;
+      border-radius: 0;
-        display: flex;
+      width: 40px;
-        justify-content: center;
+      height: 40px;
-        justify-items: center;
+      border-radius: 50%;
-        margin-left: auto;
+      margin-right: 20px;
+      padding: 0;
+      min-width: 40px;
+      align-self: center;
+    }
+    .btn-close-translatebox {
+      height: 100%;
+      stroke: #ffffff;
+      border: none;
+      display: flex;
+      justify-content: center;
+      justify-items: center;
+      margin-left: auto;
+      svg {
+        width: 40px;
       }
     }
   }
 }
+
 ::ng-deep .translationForm {
   position: relative;
   display: flex;
@@ -60,6 +74,13 @@
     margin-right: 20px;
     .mat-form-field-wrapper {
       width: 100%;
+      line-height: 0.8em;
+      .mat-form-field-infix {
+        padding: 0.2em 0 0;
+      }
+    }
+    .mat-form-field-underline {
+      bottom: 0.8em;
     }
   }
   .mat-slide-toggle {