From 7e38da271756db6bb35c69123a397365344f7ba1 Mon Sep 17 00:00:00 2001 From: leejinho Date: Thu, 5 Dec 2019 17:42:13 +0900 Subject: [PATCH] =?UTF-8?q?=EC=95=A8=EB=B2=94=ED=95=A8=20=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=EB=A1=9C=EB=93=9C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../right-drawer/album-box.component.html | 19 +++- .../right-drawer/album-box.component.scss | 104 ++++++++++-------- .../right-drawer/album-box.component.ts | 81 +++++++++++--- .../right-drawer/file-box.component.html | 6 +- .../right-drawer/file-box.component.ts | 15 ++- .../messenger/messenger.layout.module.ts | 4 +- 6 files changed, 162 insertions(+), 67 deletions(-) diff --git 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 index 61ff2f34..0a2ba851 100644 --- 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 @@
- +
- -
@@ -27,7 +30,7 @@ Select File.
- +
@@ -89,6 +93,12 @@ >
+
0 ? 'false' : 'true'" class="mat-primary" + (click)="onClickDownloadAll()" > Download All diff --git 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 index f2c853d9..04c74d81 100644 --- 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; + } +} diff --git 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 index 62e67ebc..40b9c8cb 100644 --- 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; + fileDownloadItem: FileDownloadItem; } @Component({ @@ -58,8 +55,9 @@ export class AlbumBoxComponent implements OnInit, OnDestroy { private store: Store, 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( 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) : null + events.length > 0 ? (events[0] as Info) : 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); }); } } diff --git 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 index d1460725..58079e3f 100644 --- 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 @@
- + diff --git 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 index 463bfdba..8d65597d 100644 --- 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, private sessionStorageService: SessionStorageService, @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService, - private loggger: NGXLogger + private logger: NGXLogger ) { this.loginRes = this.sessionStorageService.get( 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); }); } } diff --git 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 index f3243daf..fc7072c2 100644 --- 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,