From 2f684ffdb2e6dfabbbf1ee5269eae9dbea21c5de Mon Sep 17 00:00:00 2001 From: leejinho Date: Tue, 12 Nov 2019 17:10:11 +0900 Subject: [PATCH] =?UTF-8?q?=ED=8C=8C=EC=9D=BC=ED=95=A8=20/=20=EC=95=A8?= =?UTF-8?q?=EB=B2=94=ED=95=A8=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?= =?UTF-8?q?=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../right-drawer/album-box.component.html | 109 +++++++++++++- .../right-drawer/album-box.component.scss | 24 ++++ .../right-drawer/album-box.component.ts | 133 +++++++++++++++++- .../right-drawer/file-box.component.html | 6 + .../right-drawer/file-box.component.ts | 34 ++++- 5 files changed, 292 insertions(+), 14 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 657fa6b7..89549d79 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,7 +1,104 @@ -
- +
+
+ + + + +
+
+ + Select File. + + + + +
    +
  • name : {{ selectedFile.info.name }}
    • +
  • size : {{ selectedFile.info.size | ucapBytes }}
    • +
  • + date : + {{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} +
    • +
+ +
+
+
+
+
+
+ + + + +
+
+
+ +
+
+ + + + + + + +
+
+
+
+
+ + +
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 e69de29b..c3c22de5 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 @@ -0,0 +1,24 @@ +.album-box { + height: 100%; + overflow: hidden; + + .search-list { + overflow: auto; + } +} + +.img-item { + cursor: pointer; + max-width: 150px; + min-width: 150px; +} + +.preview-image { + max-height: 300px; +} + +.btn-box { + button { + margin: 5px; + } +} 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 246a0eb3..4c0a9cf0 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 @@ -3,7 +3,7 @@ import { MatPaginator, MatTableDataSource } from '@angular/material'; import { FileInfo, FileDownloadInfo, - FileType + FileType, } from '@ucap-webmessenger/protocol-file'; import { Subscription, combineLatest } from 'rxjs'; import { Store, select } from '@ngrx/store'; @@ -11,23 +11,62 @@ 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 { CommonApiService } from '@ucap-webmessenger/api-common'; +import { LoginResponse } from '@ucap-webmessenger/protocol-authentication'; +import { SessionStorageService } from '@ucap-webmessenger/web-storage'; +import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type'; +import { EnvironmentsInfo, KEY_ENVIRONMENTS_INFO } from '@app/types'; +import { VersionInfo2Response } from '@ucap-webmessenger/api-public'; +import { KEY_VER_INFO } from '@app/types/ver-info.type'; export interface FileInfoTotal { info: FileInfo; checkInfo: FileDownloadInfo[]; + eventInfo?: Info; } @Component({ selector: 'app-layout-chat-right-drawer-album-box', templateUrl: './album-box.component.html', - styleUrls: ['./album-box.component.scss'] + styleUrls: ['./album-box.component.scss'], }) export class AlbumBoxComponent implements OnInit, OnDestroy { + filteredList: FileInfoTotal[] = []; fileInfoTotal: FileInfoTotal[]; fileInfoList: FileInfo[]; fileInfoListSubscription: Subscription; - constructor(private store: Store) {} + selectedFile: FileInfoTotal; + selectedFileList: FileInfoTotal[] = []; + + loginRes: LoginResponse; + environmentsInfo: EnvironmentsInfo; + sessionVerinfo: VersionInfo2Response; + + FileType = FileType; + currentTabIndex = 0; + + constructor( + private store: Store, + private sessionStorageService: SessionStorageService, + private commonApiService: CommonApiService + ) { + this.loginRes = this.sessionStorageService.get( + KEY_LOGIN_RES_INFO + ); + this.environmentsInfo = this.sessionStorageService.get( + KEY_ENVIRONMENTS_INFO + ); + this.sessionVerinfo = this.sessionStorageService.get( + KEY_VER_INFO + ); + } ngOnInit() { this.fileInfoListSubscription = combineLatest([ @@ -39,11 +78,14 @@ export class AlbumBoxComponent implements OnInit, OnDestroy { select( AppStore.MessengerSelector.EventSelector.selectAllFileInfoCheckList ) - ) + ), + this.store.pipe( + select(AppStore.MessengerSelector.EventSelector.selectAllInfoList) + ), ]) .pipe( tap(() => (this.fileInfoTotal = [])), - tap(([roomInfo, fileInfoList, fileInfoCheckList]) => { + tap(([roomInfo, fileInfoList, fileInfoCheckList, eventList]) => { this.fileInfoList = fileInfoList.filter(fileInfo => { if ( fileInfo.roomSeq === roomInfo.roomSeq && @@ -57,13 +99,21 @@ export class AlbumBoxComponent implements OnInit, OnDestroy { }); this.fileInfoList.map(fileInfo => { + const events = eventList.filter( + event => event.seq === fileInfo.eventSeq + ); + this.fileInfoTotal.push({ info: fileInfo, checkInfo: fileInfoCheckList.filter( checkInfo => checkInfo.seq === fileInfo.seq - ) + ), + eventInfo: + events.length > 0 ? (events[0] as Info) : null, }); }); + + this.onSelectedIndexChange(this.currentTabIndex); }) ) .subscribe(); @@ -74,4 +124,75 @@ export class AlbumBoxComponent implements OnInit, OnDestroy { this.fileInfoListSubscription.unsubscribe(); } } + + getExtention(name: string): string { + return FileUtil.getExtension(name); + } + + getImageUrl(fileInfo: FileInfoTotal): string { + return this.commonApiService.urlForFileTalkDownload( + { + userSeq: this.loginRes.userSeq, + deviceType: this.environmentsInfo.deviceType, + token: this.loginRes.tokenString, + attachmentsSeq: fileInfo.info.seq, + }, + this.sessionVerinfo.downloadUrl + ); + } + + onSelectedIndexChange(index: number) { + this.selectedFile = null; + this.currentTabIndex = index; + if (this.currentTabIndex === 0) { + // Image + this.filteredList = this.fileInfoTotal.filter( + fileInfo => fileInfo.info.type === FileType.Image + ); + } else { + // Video + this.filteredList = this.fileInfoTotal.filter( + fileInfo => fileInfo.info.type === FileType.Video + ); + } + } + + onClickImage(event: MouseEvent, fileInfo: FileInfoTotal) { + if (!!event) { + event.preventDefault(); + event.stopPropagation(); + } + + this.selectedFile = fileInfo; + } + + getCheckItem(fileInfo: FileInfoTotal) { + if (this.selectedFileList) { + if ( + this.selectedFileList.filter( + info => info.info.seq === fileInfo.info.seq + ).length > 0 + ) { + return true; + } else { + return false; + } + } else { + return false; + } + } + onCheckItem(value: boolean, fileInfo: FileInfoTotal) { + if (value) { + this.onClickImage(undefined, fileInfo); + this.selectedFileList.push(fileInfo); + } else { + this.selectedFileList = this.selectedFileList.filter( + info => info.info.seq !== fileInfo.info.seq + ); + } + } + + onClickDownload(fileInfo: FileInfoTotal) { + console.log(fileInfo); + } } 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 47495f6c..2e3a5ced 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,4 +1,10 @@
+
+ + + + +
Select File. 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 8b80853a..2f2a2d29 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 @@ -12,6 +12,9 @@ import * as AppStore from '@app/store'; import * as ChatStore from '@app/store/messenger/chat'; import { tap, map } from 'rxjs/operators'; import { FileUtil } from '@ucap-webmessenger/core'; +import { LoginResponse } from '@ucap-webmessenger/protocol-authentication'; +import { SessionStorageService } from '@ucap-webmessenger/web-storage'; +import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type'; export interface FileInfoTotal { info: FileInfo; @@ -40,10 +43,21 @@ export class FileBoxComponent implements OnInit, OnDestroy { selectedFile: FileInfoTotal; selectedFileList: FileInfoTotal[] = []; + loginRes: LoginResponse; + + currentTabIndex = 0; + @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @ViewChild(MatSort, { static: true }) sort: MatSort; - constructor(private store: Store) {} + constructor( + private store: Store, + private sessionStorageService: SessionStorageService + ) { + this.loginRes = this.sessionStorageService.get( + KEY_LOGIN_RES_INFO + ); + } ngOnInit() { this.fileInfoListSubscription = combineLatest([ @@ -81,7 +95,7 @@ export class FileBoxComponent implements OnInit, OnDestroy { }); }); - this.dataSource.data = this.fileInfoTotal; + this.onSelectedIndexChange(this.currentTabIndex); }) ) .subscribe(); @@ -114,6 +128,22 @@ export class FileBoxComponent implements OnInit, OnDestroy { return FileUtil.getExtension(name); } + onSelectedIndexChange(index: number) { + this.selectedFile = null; + this.currentTabIndex = index; + if (this.currentTabIndex === 0) { + // Receive + this.dataSource.data = this.fileInfoTotal.filter( + fileInfo => fileInfo.info.senderSeq !== this.loginRes.userSeq + ); + } else { + // send + this.dataSource.data = this.fileInfoTotal.filter( + fileInfo => fileInfo.info.senderSeq === this.loginRes.userSeq + ); + } + } + getCheckAllUser() { const data = this.dataSource .sortData(this.dataSource.data, this.sort)