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

2019-12-05 17:42:13 +09:00 · 2019-12-05 17:42:13 +09:00 · 7e38da2717
commit 7e38da2717
parent 298ccfb045
6 changed files with 162 additions and 67 deletions
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
@ -23,56 +23,56 @@
  }
 }

-.select-filebox{
-  display:flex;
+.select-filebox {
+  display: flex;
  flex-flow: column;
-  margin:10px;
-  padding:10px;
-  border:1px solid #cccccc;
+  margin: 10px;
+  padding: 10px;
+  border: 1px solid #cccccc;
  border-radius: 4px;
-  .select-file{
+  .select-file {
    color: #212121;
    border-bottom: 1px dotted #dddddd;
-    text-align:center;
-    padding-bottom:10px;
+    text-align: center;
+    padding-bottom: 10px;
  }
-  ul{
-    padding-top:10px;
-    li{
+  ul {
+    padding-top: 10px;
+    li {
      @include ellipsis(1);
-      &.name{
-        font-weight:600;
+      &.name {
+        font-weight: 600;
      }
    }
  }
-  .empty-msg{
-    display:inline-flex;
+  .empty-msg {
+    display: inline-flex;
    flex-flow: column;
-    margin:auto 0;
+    margin: auto 0;
    align-items: center;
    justify-content: center;
-    color:#999999;
-    span{
-      padding:6px;
+    color: #999999;
+    span {
+      padding: 6px;
    }
  }
 }

-.search-list{
-  display:flex;
-  padding:0 10px;
+.search-list {
+  display: flex;
+  padding: 0 10px;
  height: calc(100% - 450px);
  overflow-y: auto;
  flex-wrap: wrap;

  .img-item {
    cursor: pointer;
-    margin-bottom:10px;
-    margin-right:9px;
+    margin-bottom: 10px;
+    margin-right: 9px;
    position: relative;
    height: 150px;
-    dl{
-      dt{
+    dl {
+      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{
-          width:100%;
-          height:100%;
+        img {
+          width: 100%;
+          height: 100%;
        }
      }
-      dd{
-        .btn-download{
-        margin-left:auto;
+      dd {
+        .btn-download {
+          margin-left: auto;
        }
      }
    }
-    &:nth-child(3n+0){
-      margin-right:0;
+    &:nth-child(3n + 0) {
+      margin-right: 0;
    }
  }
 }

-::ng-deep .album-scrollbar{
-  .ps{
-    .ps-content{
-      display:flex;
+::ng-deep .album-scrollbar {
+  .ps {
+    .ps-content {
+      display: flex;
      flex-flow: wrap;
    }
  }
 }
 .preview-image,
-.preview-video{
+.preview-video {
  max-height: 140px;
 }

 .btn-box {
-  position:absolute;
-  bottom:0;
-  height:50px;
-  margin-bottom:10px;
-  width:100%;
+  position: absolute;
+  bottom: 0;
+  height: 50px;
+  margin-bottom: 10px;
+  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;
+  }
+}
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts
+++ b/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 { MatPaginator, MatTableDataSource } from '@angular/material';
+import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
 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 } from 'rxjs/operators';
-import {
-  Info,
-  EventJson,
-  FileEventJson
-} from '@ucap-webmessenger/protocol-event';
-import { FileUtil } from '@ucap-webmessenger/core';
+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';
 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);
      });
  }
 }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts
+++ b/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);
      });
  }
 }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
+++ b/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,