add Mass talk detail View

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

@@ -19,6 +19,11 @@ import { CommonApiService } from '@ucap-webmessenger/api-common';
 import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
 import { EnvironmentsInfo, KEY_ENVIRONMENTS_INFO } from '@app/types';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+import {
+  DialogService,
+  AlertDialogComponent,
+  AlertDialogData
+} from '@ucap-webmessenger/ui';
 
 @Injectable()
 export class Effects {
@@ -52,9 +57,25 @@ export class Effects {
         exhaustMap(req => {
           return this.commonApiService.massTalkDownload(req).pipe(
             map(res => {
-              this.logger.debug(res);
               if (res.statusCode === StatusCode.Success) {
                 this.store.dispatch(massTalkDownloadSuccess(res));
+
+                const result = this.dialogService.open<
+                  AlertDialogComponent,
+                  AlertDialogData
+                >(
+                  AlertDialogComponent,
+
+                  {
+                    width: '100%',
+                    height: '500px',
+                    disableClose: false,
+                    data: {
+                      title: '전체보기',
+                      html: `<pre>` + res.content + `</pre>`
+                    }
+                  }
+                );
               } else {
                 this.store.dispatch(massTalkDownloadFailure({ error: res }));
               }
@@ -71,6 +92,7 @@ export class Effects {
     private actions$: Actions,
     private commonApiService: CommonApiService,
     private sessionStorageService: SessionStorageService,
+    private dialogService: DialogService,
     private store: Store<any>,
     private logger: NGXLogger
   ) {}

projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html

@@ -4,16 +4,12 @@
     <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
   </mat-card-header>
   <mat-card-content>
-    <p class="notice">
+    <div #messageContainer class="notice">
       {{ data.message }}
-    </p>
+    </div>
   </mat-card-content>
   <mat-card-actions class="button-farm flex-row">
-    <button
+    <button mat-stroked-button (click)="onClickConfirm(false)" class="mat-primary">
-      mat-stroked-button
-      (click)="onClickConfirm(false)"
-      class="mat-primary"
-    >
       Confirm
     </button>
   </mat-card-actions>

projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.ts

@@ -1,9 +1,16 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Inject,
+  ViewChild,
+  ElementRef
+} from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 
 export interface AlertDialogData {
   title: string;
   message?: string;
+  html?: string;
 }
 
 // tslint:disable-next-line: no-empty-interface
@@ -15,6 +22,9 @@ export interface AlertDialogResult {}
   styleUrls: ['./alert.dialog.component.scss']
 })
 export class AlertDialogComponent implements OnInit {
+  @ViewChild('messageContainer', { static: true })
+  messageContainer: ElementRef;
+
   tempAgeLimits = [];
 
   constructor(
@@ -22,7 +32,11 @@ export class AlertDialogComponent implements OnInit {
     @Inject(MAT_DIALOG_DATA) public data: AlertDialogData
   ) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    if (!!this.data.html) {
+      this.messageContainer.nativeElement.innerHTML = this.data.html;
+    }
+  }
 
   onClickConfirm(): void {
     this.dialogRef.close({});