앨범함 다운로드 기능 구현.

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

@@ -1,14 +1,16 @@
 <div fxLayout="column" class="rightDrawer-albumbox">
   <div>
-    <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
+    <mat-tab-group
+      mat-stretch-tabs
+      animationDuration="0ms"
+      (selectedIndexChange)="onSelectedIndexChange($event)"
+    >
       <mat-tab label="Image"></mat-tab>
       <mat-tab label="Video"></mat-tab>
     </mat-tab-group>
   </div>
   <div fxFlex="1 1 240px" class="select-filebox bg-accent-brightest">
-    <!--<ng-container *ngIf="!selectedFile">-->
     <ng-container *ngIf="!selectedFile">
-      <!--이미지 빈화면-->
       <div class="empty-msg" *ngIf="currentTabIndex === 0">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -20,6 +22,7 @@
           stroke-width="1.5"
           stroke-linecap="butt"
           stroke-linejoin="round"
+          aria-label="image"
         >
           <rect x="3" y="3" width="18" height="18" rx="2" />
           <circle cx="8.5" cy="8.5" r="1.5" />
@@ -27,7 +30,7 @@
         </svg>
         <span>Select File.</span>
       </div>
-      <!--비디오 빈화면-->
+
       <div class="empty-msg" *ngIf="currentTabIndex === 1">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -39,6 +42,7 @@
           stroke-width="1.5"
           stroke-linecap="butt"
           stroke-linejoin="round"
+          aria-label="video"
         >
           <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
           <line x1="7" y1="2" x2="7" y2="22"></line>
@@ -89,6 +93,12 @@
       >
         <dl>
           <dt>
+            <div
+              *ngIf="fileInfo.fileDownloadItem.downloadingProgress$ | async"
+              class="spinner"
+            >
+              <span class="mdi mdi-spin mdi-loading mdi-48px"></span>
+            </div>
             <div
               *ngIf="
                 !!fileInfo.eventInfo &&
@@ -146,6 +156,7 @@
       mat-flat-button
       [disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
       class="mat-primary"
+      (click)="onClickDownloadAll()"
     >
       Download All
     </button>

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

@@ -23,56 +23,56 @@
   }
 }
 
-.select-filebox{
+.select-filebox {
-  display:flex;
+  display: flex;
   flex-flow: column;
-  margin:10px;
+  margin: 10px;
-  padding:10px;
+  padding: 10px;
-  border:1px solid #cccccc;
+  border: 1px solid #cccccc;
   border-radius: 4px;
-  .select-file{
+  .select-file {
     color: #212121;
     border-bottom: 1px dotted #dddddd;
-    text-align:center;
+    text-align: center;
-    padding-bottom:10px;
+    padding-bottom: 10px;
   }
-  ul{
+  ul {
-    padding-top:10px;
+    padding-top: 10px;
-    li{
+    li {
       @include ellipsis(1);
-      &.name{
+      &.name {
-        font-weight:600;
+        font-weight: 600;
       }
     }
   }
-  .empty-msg{
+  .empty-msg {
-    display:inline-flex;
+    display: inline-flex;
     flex-flow: column;
-    margin:auto 0;
+    margin: auto 0;
     align-items: center;
     justify-content: center;
-    color:#999999;
+    color: #999999;
-    span{
+    span {
-      padding:6px;
+      padding: 6px;
     }
   }
 }
 
-.search-list{
+.search-list {
-  display:flex;
+  display: flex;
-  padding:0 10px;
+  padding: 0 10px;
   height: calc(100% - 450px);
   overflow-y: auto;
   flex-wrap: wrap;
 
   .img-item {
     cursor: pointer;
-    margin-bottom:10px;
+    margin-bottom: 10px;
-    margin-right:9px;
+    margin-right: 9px;
     position: relative;
     height: 150px;
-    dl{
+    dl {
-      dt{
+      dt {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -81,43 +81,59 @@
         background-color: #efefef;
         border: 1px dotted #cccccc;
         box-sizing: border-box;
-        img{
+        img {
-          width:100%;
+          width: 100%;
-          height:100%;
+          height: 100%;
         }
       }
-      dd{
+      dd {
-        .btn-download{
+        .btn-download {
-        margin-left:auto;
+          margin-left: auto;
         }
       }
     }
-    &:nth-child(3n+0){
+    &:nth-child(3n + 0) {
-      margin-right:0;
+      margin-right: 0;
     }
   }
 }
 
-::ng-deep .album-scrollbar{
+::ng-deep .album-scrollbar {
-  .ps{
+  .ps {
-    .ps-content{
+    .ps-content {
-      display:flex;
+      display: flex;
       flex-flow: wrap;
     }
   }
 }
 .preview-image,
-.preview-video{
+.preview-video {
   max-height: 140px;
 }
 
 .btn-box {
-  position:absolute;
+  position: absolute;
-  bottom:0;
+  bottom: 0;
-  height:50px;
+  height: 50px;
-  margin-bottom:10px;
+  margin-bottom: 10px;
-  width:100%;
+  width: 100%;
   button {
     margin: 5px;
   }
 }
+
+.spinner {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  padding: 15px 0;
+  background: rgb(255, 255, 255, 0.6);
+  display: table;
+  text-align: center;
+
+  span {
+    display: table-cell;
+    vertical-align: middle;
+    color: #666666;
+  }
+}

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

@@ -1,5 +1,4 @@
-import { Component, OnInit, ViewChild, OnDestroy, Inject } from '@angular/core';
+import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
-import { MatPaginator, MatTableDataSource } from '@angular/material';
 import {
   FileInfo,
   FileDownloadInfo,
@@ -9,14 +8,9 @@ import { Subscription, combineLatest } from 'rxjs';
 import { Store, select } from '@ngrx/store';
 
 import * as AppStore from '@app/store';
-import * as ChatStore from '@app/store/messenger/chat';
+import { tap, map, take, finalize } from 'rxjs/operators';
-import { tap, map } from 'rxjs/operators';
+import { Info, FileEventJson } from '@ucap-webmessenger/protocol-event';
-import {
+import { FileUtil, MimeUtil, DeviceType } from '@ucap-webmessenger/core';
-  Info,
-  EventJson,
-  FileEventJson
-} from '@ucap-webmessenger/protocol-event';
-import { FileUtil } from '@ucap-webmessenger/core';
 import { CommonApiService } from '@ucap-webmessenger/api-common';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
@@ -26,11 +20,14 @@ import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { KEY_VER_INFO } from '@app/types/ver-info.type';
 import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
 import { NGXLogger } from 'ngx-logger';
+import { SnackBarService } from '@ucap-webmessenger/ui';
+import { FileDownloadItem } from '@ucap-webmessenger/api';
 
 export interface FileInfoTotal {
   info: FileInfo;
   checkInfo: FileDownloadInfo[];
   eventInfo?: Info<FileEventJson>;
+  fileDownloadItem: FileDownloadItem;
 }
 
 @Component({
@@ -58,8 +55,9 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
     private commonApiService: CommonApiService,
+    private snackBarService: SnackBarService,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
-    private loggger: NGXLogger
+    private logger: NGXLogger
   ) {
     this.loginRes = this.sessionStorageService.get<LoginResponse>(
       KEY_LOGIN_RES_INFO
@@ -113,7 +111,8 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
                 checkInfo => checkInfo.seq === fileInfo.seq
               ),
               eventInfo:
-                events.length > 0 ? (events[0] as Info<FileEventJson>) : null
+                events.length > 0 ? (events[0] as Info<FileEventJson>) : null,
+              fileDownloadItem: new FileDownloadItem()
             });
           });
 
@@ -197,7 +196,61 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
   }
 
   onClickDownload(fileInfo: FileInfoTotal) {
-    console.log(fileInfo);
+    this.commonApiService
+      .fileTalkDownload({
+        userSeq: this.loginRes.userSeq,
+        deviceType: DeviceType.PC,
+        token: this.loginRes.tokenString,
+        attachmentsSeq: fileInfo.info.seq,
+        fileDownloadItem: fileInfo.fileDownloadItem
+      })
+      .pipe(
+        take(1),
+        map(async rawBlob => {
+          const mimeType = MimeUtil.getMimeFromExtension(
+            FileUtil.getExtension(fileInfo.info.name)
+          );
+          const blob = rawBlob.slice(0, rawBlob.size, mimeType);
+
+          FileUtil.fromBlobToBuffer(blob)
+            .then(buffer => {
+              this.nativeService
+                .saveFile(buffer, fileInfo.info.name, mimeType)
+                .then(result => {
+                  if (!!result) {
+                    this.snackBarService.open(
+                      `파일이 경로[${result}]에 저장되었습니다.`,
+                      '',
+                      {
+                        duration: 3000,
+                        verticalPosition: 'bottom'
+                      }
+                    );
+                  } else {
+                    this.snackBarService.open('파일 저장에 실패하였습니다.');
+                  }
+                })
+                .catch(reason => {
+                  this.snackBarService.open('파일 저장에 실패하였습니다.');
+                });
+            })
+            .catch(reason => {
+              this.logger.error('download', reason);
+            });
+        }),
+        finalize(() => {
+          setTimeout(() => {
+            fileInfo.fileDownloadItem.downloadingProgress$ = undefined;
+          }, 1000);
+        })
+      )
+      .subscribe();
+  }
+
+  onClickDownloadAll(): void {
+    this.selectedFileList.forEach(fileInfo => {
+      this.onClickDownload(fileInfo);
+    });
   }
 
   onClickOpenDownloadFolder(): void {
@@ -210,7 +263,7 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
         }
       })
       .catch(reason => {
-        this.loggger.error(reason);
+        this.logger.error(reason);
       });
   }
 }

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

@@ -1,6 +1,10 @@
 <div fxLayout="column" class="rightDrawer-filebox">
   <div class="rightDrawer-tab">
-    <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
+    <mat-tab-group
+      mat-stretch-tabs
+      animationDuration="0ms"
+      (selectedIndexChange)="onSelectedIndexChange($event)"
+    >
       <mat-tab label="Receive"></mat-tab>
       <mat-tab label="Send"></mat-tab>
     </mat-tab-group>

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

@@ -17,10 +17,12 @@ import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
 import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
 import { NGXLogger } from 'ngx-logger';
+import { FileDownloadItem } from '@ucap-webmessenger/api';
 
 export interface FileInfoTotal {
   info: FileInfo;
   checkInfo: FileDownloadInfo[];
+  fileDownloadItem: FileDownloadItem;
 }
 
 @Component({
@@ -50,7 +52,7 @@ export class FileBoxComponent implements OnInit, OnDestroy {
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
-    private loggger: NGXLogger
+    private logger: NGXLogger
   ) {
     this.loginRes = this.sessionStorageService.get<LoginResponse>(
       KEY_LOGIN_RES_INFO
@@ -89,7 +91,8 @@ export class FileBoxComponent implements OnInit, OnDestroy {
               info: fileInfo,
               checkInfo: fileInfoCheckList.filter(
                 checkInfo => checkInfo.seq === fileInfo.seq
-              )
+              ),
+              fileDownloadItem: new FileDownloadItem()
             });
           });
 
@@ -217,6 +220,12 @@ export class FileBoxComponent implements OnInit, OnDestroy {
     this.selectedFile = row;
   }
 
+  onClickDownloadAll(): void {
+    // this.selectedFileList.forEach(fileInfo => {
+    //   this.onClickDownload(fileInfo);
+    // });
+  }
+
   onClickOpenDownloadFolder(): void {
     this.nativeService
       .openDefaultDownloadFolder()
@@ -227,7 +236,7 @@ export class FileBoxComponent implements OnInit, OnDestroy {
         }
       })
       .catch(reason => {
-        this.loggger.error(reason);
+        this.logger.error(reason);
       });
   }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts

@@ -16,7 +16,8 @@ import {
   MatRippleModule,
   MatSortModule,
   MatTooltipModule,
-  MatSidenavModule
+  MatSidenavModule,
+  MatProgressSpinnerModule
 } from '@angular/material';
 
 import { MatSelectModule } from '@angular/material/select';
@@ -75,6 +76,7 @@ import { DIALOGS } from './dialogs';
     MatMenuModule,
     MatListModule,
     MatProgressBarModule,
+    MatProgressSpinnerModule,
     MatTabsModule,
     MatToolbarModule,
     MatChipsModule,