snackbar 에 html 태그 넣을 수 있도록 기능추가.

projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.ts

@@ -12,7 +12,11 @@ import { FileEventJson } from '@ucap-webmessenger/protocol-event';
 import { DeviceType, FileUtil, MimeUtil } from '@ucap-webmessenger/core';
 import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
 import { take, map, finalize, tap } from 'rxjs/operators';
-import { SnackBarService } from '@ucap-webmessenger/ui';
+import {
+  SnackBarService,
+  AlertSnackbarComponent,
+  AlertSnackbarData
+} from '@ucap-webmessenger/ui';
 import { FileDownloadItem } from '@ucap-webmessenger/api';
 import { CommonApiService } from '@ucap-webmessenger/api-common';
 import { TranslateService } from '@ngx-translate/core';
@@ -112,21 +116,35 @@ export class FileViewerDialogComponent implements OnInit, OnDestroy {
                       }
                     );
                   } else {
-                    this.snackBarService.open(
+                    this.snackBarService.openFromComponent<
-                      this.translateService.instant(
+                      AlertSnackbarComponent,
+                      AlertSnackbarData
+                    >(AlertSnackbarComponent, {
+                      data: {
+                        html: this.translateService.instant(
                           'common.file.errors.failToSave'
                         ),
-                      this.translateService.instant('common.file.errors.label')
+                        buttonText: this.translateService.instant(
-                    );
+                          'common.file.errors.label'
+                        )
+                      }
+                    });
                   }
                 })
                 .catch(reason => {
-                  this.snackBarService.open(
+                  this.snackBarService.openFromComponent<
-                    this.translateService.instant(
+                    AlertSnackbarComponent,
+                    AlertSnackbarData
+                  >(AlertSnackbarComponent, {
+                    data: {
+                      html: this.translateService.instant(
                         'common.file.errors.failToSave'
                       ),
-                    this.translateService.instant('common.file.errors.label')
+                      buttonText: this.translateService.instant(
-                  );
+                        'common.file.errors.label'
+                      )
+                    }
+                  });
                 });
             })
             .catch(reason => {

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

@@ -20,7 +20,9 @@ import {
   AlertDialogData,
   AlertDialogResult,
   FileUploadQueueComponent,
-  StringUtil
+  StringUtil,
+  AlertSnackbarComponent,
+  AlertSnackbarData
 } from '@ucap-webmessenger/ui';
 import { Store, select } from '@ngrx/store';
 import { NGXLogger } from 'ngx-logger';
@@ -1015,21 +1017,35 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
                       }
                     );
                   } else {
-                    this.snackBarService.open(
+                    this.snackBarService.openFromComponent<
-                      this.translateService.instant(
+                      AlertSnackbarComponent,
+                      AlertSnackbarData
+                    >(AlertSnackbarComponent, {
+                      data: {
+                        html: this.translateService.instant(
                           'common.file.errors.failToSave'
                         ),
-                      this.translateService.instant('common.file.errors.label')
+                        buttonText: this.translateService.instant(
-                    );
+                          'common.file.errors.label'
+                        )
+                      }
+                    });
                   }
                 })
                 .catch(reason => {
-                  this.snackBarService.open(
+                  this.snackBarService.openFromComponent<
-                    this.translateService.instant(
+                    AlertSnackbarComponent,
+                    AlertSnackbarData
+                  >(AlertSnackbarComponent, {
+                    data: {
+                      html: this.translateService.instant(
                         'common.file.errors.failToSave'
                       ),
-                    this.translateService.instant('common.file.errors.label')
+                      buttonText: this.translateService.instant(
-                  );
+                        'common.file.errors.label'
+                      )
+                    }
+                  });
                 });
             })
             .catch(reason => {
@@ -1239,6 +1255,12 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
                     (message as Info<string>).sentMessage
                   )
                 ) {
+                  this.snackBarService.open(
+                    this.translateService.instant(
+                      'common.clipboard.results.copied'
+                    ),
+                    '확인'
+                  );
                   this.snackBarService.open(
                     this.translateService.instant(
                       'common.clipboard.results.copied'

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts

@@ -9,7 +9,6 @@ import { Store, select } from '@ngrx/store';
 
 import * as AppStore from '@app/store';
 import { tap, map, take, finalize } from 'rxjs/operators';
-import { Info, FileEventJson } from '@ucap-webmessenger/protocol-event';
 import { FileUtil, MimeUtil, DeviceType } from '@ucap-webmessenger/core';
 import { CommonApiService } from '@ucap-webmessenger/api-common';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
@@ -23,7 +22,11 @@ import {
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
 import { NGXLogger } from 'ngx-logger';
-import { SnackBarService } from '@ucap-webmessenger/ui';
+import {
+  SnackBarService,
+  AlertSnackbarComponent,
+  AlertSnackbarData
+} from '@ucap-webmessenger/ui';
 import { FileDownloadItem } from '@ucap-webmessenger/api';
 import { ModuleConfig } from '@ucap-webmessenger/api-common';
 import { _MODULE_CONFIG } from 'projects/ucap-webmessenger-api-common/src/lib/config/token';
@@ -247,21 +250,35 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
                       }
                     );
                   } else {
-                    this.snackBarService.open(
+                    this.snackBarService.openFromComponent<
-                      this.translateService.instant(
+                      AlertSnackbarComponent,
+                      AlertSnackbarData
+                    >(AlertSnackbarComponent, {
+                      data: {
+                        html: this.translateService.instant(
                           'common.file.errors.failToSave'
                         ),
-                      this.translateService.instant('common.file.errors.label')
+                        buttonText: this.translateService.instant(
-                    );
+                          'common.file.errors.label'
+                        )
+                      }
+                    });
                   }
                 })
                 .catch(reason => {
-                  this.snackBarService.open(
+                  this.snackBarService.openFromComponent<
-                    this.translateService.instant(
+                    AlertSnackbarComponent,
+                    AlertSnackbarData
+                  >(AlertSnackbarComponent, {
+                    data: {
+                      html: this.translateService.instant(
                         'common.file.errors.failToSave'
                       ),
-                    this.translateService.instant('common.file.errors.label')
+                      buttonText: this.translateService.instant(
-                  );
+                        'common.file.errors.label'
+                      )
+                    }
+                  });
                 });
             })
             .catch(reason => {

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts

@@ -24,7 +24,9 @@ import {
   ConfirmDialogComponent,
   ConfirmDialogResult,
   ConfirmDialogData,
-  DateOptions
+  DateOptions,
+  AlertSnackbarComponent,
+  AlertSnackbarData
 } from '@ucap-webmessenger/ui';
 import { CommonApiService } from '@ucap-webmessenger/api-common';
 import { EventType } from '@ucap-webmessenger/protocol-event';
@@ -291,21 +293,35 @@ export class FileBoxComponent implements OnInit, OnDestroy {
                       }
                     );
                   } else {
-                    this.snackBarService.open(
+                    this.snackBarService.openFromComponent<
-                      this.translateService.instant(
+                      AlertSnackbarComponent,
+                      AlertSnackbarData
+                    >(AlertSnackbarComponent, {
+                      data: {
+                        html: this.translateService.instant(
                           'common.file.errors.failToSave'
                         ),
-                      this.translateService.instant('common.file.errors.label')
+                        buttonText: this.translateService.instant(
-                    );
+                          'common.file.errors.label'
+                        )
+                      }
+                    });
                   }
                 })
                 .catch(reason => {
-                  this.snackBarService.open(
+                  this.snackBarService.openFromComponent<
-                    this.translateService.instant(
+                    AlertSnackbarComponent,
+                    AlertSnackbarData
+                  >(AlertSnackbarComponent, {
+                    data: {
+                      html: this.translateService.instant(
                         'common.file.errors.failToSave'
                       ),
-                    this.translateService.instant('common.file.errors.label')
+                      buttonText: this.translateService.instant(
-                  );
+                        'common.file.errors.label'
+                      )
+                    }
+                  });
                 });
             })
             .catch(reason => {

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

@@ -16,7 +16,9 @@ import {
   SnackBarService,
   AlertDialogComponent,
   AlertDialogResult,
-  AlertDialogData
+  AlertDialogData,
+  AlertSnackbarComponent,
+  AlertSnackbarData
 } from '@ucap-webmessenger/ui';
 import {
   DetailResponse,
@@ -400,9 +402,18 @@ export class MessageDetailDialogComponent implements OnInit {
                       'common.file.errors.failToSaveSomeOfAll'
                     );
                   }
-                  this.snackBarService.open(errMsg, '', {
+                  this.snackBarService.openFromComponent<
+                    AlertSnackbarComponent,
+                    AlertSnackbarData
+                  >(AlertSnackbarComponent, {
                     duration: 8000,
-                    verticalPosition: 'bottom'
+                    verticalPosition: 'bottom',
+                    data: {
+                      html: errMsg,
+                      buttonText: this.translateService.instant(
+                        'common.file.errors.label'
+                      )
+                    }
                   });
                 } else {
                   // 성공종료.

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

@@ -350,8 +350,8 @@
       "errors": {
         "label": "File errors",
         "failToUpload": "File upload failed.",
-        "failToSave": "File save failed. Please 'Save As'.",
+        "failToSave": "File save failed.<br/>Please 'Save As'.",
-        "failToSaveSomeOfAll": "Some of file(s) save failed. Please 'Save As'.",
+        "failToSaveSomeOfAll": "Some of file(s) save failed.<br/>Please 'Save As'.",
         "failToSpecifyPath": "Specifing of save path failed.",
         "expired": "This file has expired",
         "noPreview": "This file does not support preview.",

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

@@ -350,8 +350,8 @@
       "errors": {
         "label": "파일 에러",
         "failToUpload": "파일 업로드에 실패하였습니다.",
-        "failToSave": "파일 저장에 실패하였습니다. '다른 이름으로 저장' 하십시요.",
+        "failToSave": "파일 저장에 실패하였습니다.<br/>'다른 이름으로 저장' 하십시요.",
-        "failToSaveSomeOfAll": "파일 저장 중 일부 파일이 실패하였습니다. '다른 이름으로 저장' 하십시요.",
+        "failToSaveSomeOfAll": "파일 저장 중 일부 파일이 실패하였습니다.<br/>'다른 이름으로 저장' 하십시요.",
         "failToSpecifyPath": "저장경로 지정에 실패하였습니다.",
         "expired": "기간이 만료된 파일입니다",
         "noPreview": "미리보기를 지원하지 않는 파일입니다.",

projects/ucap-webmessenger-ui/src/lib/services/snack-bar.service.ts

@@ -6,6 +6,7 @@ import {
   MatSnackBarRef,
   SimpleSnackBar
 } from '@angular/material';
+import { ComponentType } from '@angular/cdk/portal';
 
 @Injectable({
   providedIn: 'root'
@@ -20,4 +21,11 @@ export class SnackBarService {
   ): MatSnackBarRef<SimpleSnackBar> {
     return this.matSnackBar.open(message, action, config);
   }
+
+  public openFromComponent<T, D = any>(
+    componentRef: ComponentType<T>,
+    config?: MatSnackBarConfig<D>
+  ): MatSnackBarRef<T> {
+    return this.matSnackBar.openFromComponent<T>(componentRef, config);
+  }
 }

projects/ucap-webmessenger-ui/src/lib/snackbars/alert.snackbar.component.html

@@ -0,0 +1,18 @@
+<div fxFlex fxLayout="row" class="mat-simple-snackbar ng-star-inserted">
+  <span fxFlex #messageContainer></span>
+  <div
+    fxFlex="nogrow"
+    fxFlexAlign="center"
+    class="mat-simple-snackbar-action ng-star-inserted"
+  >
+    <button mat-stroked-button (click)="onClickConfirm()">
+      <ng-container
+        *ngIf="data.buttonText; then buttonText; else default"
+      ></ng-container>
+      <ng-template #buttonText>{{ data.buttonText }}</ng-template>
+      <ng-template #default>{{
+        'common.messages.confirm' | translate
+      }}</ng-template>
+    </button>
+  </div>
+</div>

projects/ucap-webmessenger-ui/src/lib/snackbars/alert.snackbar.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertSnackbarComponent } from './alert.snackbar.component';
+
+describe('ui::AlertSnackbarComponent', () => {
+  let component: AlertSnackbarComponent;
+  let fixture: ComponentFixture<AlertSnackbarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AlertSnackbarComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlertSnackbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-ui/src/lib/snackbars/alert.snackbar.component.ts

@@ -0,0 +1,48 @@
+import {
+  Component,
+  OnInit,
+  Inject,
+  ViewChild,
+  ElementRef
+} from '@angular/core';
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MAT_SNACK_BAR_DATA,
+  MatSnackBarRef
+} from '@angular/material';
+
+export interface AlertSnackbarData {
+  html: string;
+  buttonText?: string;
+}
+
+// tslint:disable-next-line: no-empty-interface
+export interface AlertSnackbarResult {}
+
+@Component({
+  selector: 'ucap-ui-alert-snackbar',
+  templateUrl: './alert.snackbar.component.html',
+  styleUrls: ['./alert.snackbar.component.scss']
+})
+export class AlertSnackbarComponent implements OnInit {
+  @ViewChild('messageContainer', { static: true })
+  messageContainer: ElementRef;
+
+  tempAgeLimits = [];
+
+  constructor(
+    public dialogRef: MatSnackBarRef<AlertSnackbarComponent>,
+    @Inject(MAT_SNACK_BAR_DATA) public data: AlertSnackbarData
+  ) {}
+
+  ngOnInit(): void {
+    if (!!this.data.html) {
+      this.messageContainer.nativeElement.innerHTML = this.data.html;
+    }
+  }
+
+  onClickConfirm(): void {
+    this.dialogRef.dismiss();
+  }
+}

projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts

@@ -75,6 +75,7 @@ import {
 } from './pipes/string.pipe';
 import { ClickDebounceDirective } from './directives/click-debounce.directive';
 import { TranslationSectionComponent } from './components/translation-section.component';
+import { AlertSnackbarComponent } from './snackbars/alert.snackbar.component';
 
 const COMPONENTS = [
   FileUploadQueueComponent,
@@ -94,7 +95,11 @@ const COMPONENTS = [
   SoundViewerComponent,
   VideoViewerComponent
 ];
-const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent];
+const DIALOGS = [
+  AlertDialogComponent,
+  ConfirmDialogComponent,
+  AlertSnackbarComponent
+];
 const DIRECTIVES = [
   ClickOutsideDirective,
   FileUploadForDirective,

projects/ucap-webmessenger-ui/src/public-api.ts

@@ -37,6 +37,8 @@ export * from './lib/services/translate.service';
 export * from './lib/services/date.service';
 export * from './lib/services/paginator-intl.service';
 
+export * from './lib/snackbars/alert.snackbar.component';
+
 export * from './lib/types/file-viewer.type';
 
 export * from './lib/utils/string.util';