From e15d8c592e31ae472639646ff3930e8059c38bbe Mon Sep 17 00:00:00 2001 From: leejinho Date: Tue, 12 Nov 2019 14:08:14 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=ED=8C=8C=EC=9D=BC=ED=95=A8=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC=20/=20=EC=95=A8=EB=B2=94=ED=95=A8=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=97=B0=EB=8F=99.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../right-drawer/album-box.component.html | 8 +- .../right-drawer/album-box.component.ts | 73 ++++++- .../right-drawer/file-box.component.html | 103 +++++++++- .../right-drawer/file-box.component.scss | 14 ++ .../right-drawer/file-box.component.ts | 186 +++++++++++++++++- .../messenger/messenger.layout.module.ts | 16 +- .../src/lib/pipes/dates.pipe.spec.ts | 11 -- .../src/lib/pipes/dates.pipe.ts | 17 +- .../src/lib/pipes/linefeed.pipe.spec.ts | 11 -- .../src/lib/ucap-ui.module.ts | 20 +- .../src/lib/utils/string.util.ts | 74 +++---- 11 files changed, 454 insertions(+), 79 deletions(-) delete mode 100644 projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.spec.ts delete mode 100644 projects/ucap-webmessenger-ui/src/lib/pipes/linefeed.pipe.spec.ts 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 26983003..657fa6b7 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 +1,7 @@ -

album-box works!

+
+ +
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 e4737472..246a0eb3 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,12 +1,77 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core'; +import { MatPaginator, MatTableDataSource } from '@angular/material'; +import { + FileInfo, + FileDownloadInfo, + FileType +} from '@ucap-webmessenger/protocol-file'; +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'; + +export interface FileInfoTotal { + info: FileInfo; + checkInfo: FileDownloadInfo[]; +} @Component({ selector: 'app-layout-chat-right-drawer-album-box', templateUrl: './album-box.component.html', styleUrls: ['./album-box.component.scss'] }) -export class AlbumBoxComponent implements OnInit { - constructor() {} +export class AlbumBoxComponent implements OnInit, OnDestroy { + fileInfoTotal: FileInfoTotal[]; + fileInfoList: FileInfo[]; + fileInfoListSubscription: Subscription; - ngOnInit() {} + constructor(private store: Store) {} + + ngOnInit() { + this.fileInfoListSubscription = combineLatest([ + this.store.pipe(select(AppStore.MessengerSelector.RoomSelector.roomInfo)), + this.store.pipe( + select(AppStore.MessengerSelector.EventSelector.selectAllFileInfoList) + ), + this.store.pipe( + select( + AppStore.MessengerSelector.EventSelector.selectAllFileInfoCheckList + ) + ) + ]) + .pipe( + tap(() => (this.fileInfoTotal = [])), + tap(([roomInfo, fileInfoList, fileInfoCheckList]) => { + this.fileInfoList = fileInfoList.filter(fileInfo => { + if ( + fileInfo.roomSeq === roomInfo.roomSeq && + (fileInfo.type === FileType.Image || + fileInfo.type === FileType.Video) + ) { + return true; + } else { + return false; + } + }); + + this.fileInfoList.map(fileInfo => { + this.fileInfoTotal.push({ + info: fileInfo, + checkInfo: fileInfoCheckList.filter( + checkInfo => checkInfo.seq === fileInfo.seq + ) + }); + }); + }) + ) + .subscribe(); + } + + ngOnDestroy(): void { + if (!!this.fileInfoListSubscription) { + this.fileInfoListSubscription.unsubscribe(); + } + } } 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 e361c50b..47495f6c 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 +1,102 @@ -

file-box works!

+
+
+ + Select File. + + +
+
+
+
    +
  • name : {{ selectedFile.info.name }}
    • +
  • size : {{ selectedFile.info.size | ucapBytes }}
    • +
  • + date : + {{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} +
    • +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + Name{{ element.info.name }}Size + {{ element.info.size | ucapBytes }} + sendDate + {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} + receivedUser + {{ element.info.receivedUserCount }} +
+ + +
+
+ + +
+
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss index e69de29b..a6c2e8f4 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss @@ -0,0 +1,14 @@ +table { + width: 100%; +} + +.mat-row:hover { + background: rgba(0, 0, 0, 0.04); + cursor: pointer; +} + +.btn-box { + button { + margin: 5px; + } +} 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 dd06f32f..8b80853a 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 @@ -1,12 +1,188 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core'; +import { MatPaginator, MatTableDataSource, MatSort } from '@angular/material'; +import { + FileInfo, + FileDownloadInfo, + FileType, +} from '@ucap-webmessenger/protocol-file'; +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 { FileUtil } from '@ucap-webmessenger/core'; + +export interface FileInfoTotal { + info: FileInfo; + checkInfo: FileDownloadInfo[]; +} @Component({ selector: 'app-layout-chat-right-drawer-file-box', templateUrl: './file-box.component.html', - styleUrls: ['./file-box.component.scss'] + styleUrls: ['./file-box.component.scss'], }) -export class FileBoxComponent implements OnInit { - constructor() {} +export class FileBoxComponent implements OnInit, OnDestroy { + displayedColumns: string[] = [ + 'check', + 'name', + 'size', + 'sendDate', + 'receivedUserCount', + ]; + dataSource = new MatTableDataSource(); - ngOnInit() {} + fileInfoTotal: FileInfoTotal[]; + fileInfoList: FileInfo[]; + fileInfoListSubscription: Subscription; + + selectedFile: FileInfoTotal; + selectedFileList: FileInfoTotal[] = []; + + @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; + @ViewChild(MatSort, { static: true }) sort: MatSort; + + constructor(private store: Store) {} + + ngOnInit() { + this.fileInfoListSubscription = combineLatest([ + this.store.pipe(select(AppStore.MessengerSelector.RoomSelector.roomInfo)), + this.store.pipe( + select(AppStore.MessengerSelector.EventSelector.selectAllFileInfoList) + ), + this.store.pipe( + select( + AppStore.MessengerSelector.EventSelector.selectAllFileInfoCheckList + ) + ), + ]) + .pipe( + tap(() => (this.fileInfoTotal = [])), + tap(([roomInfo, fileInfoList, fileInfoCheckList]) => { + this.fileInfoList = fileInfoList.filter(fileInfo => { + if ( + fileInfo.roomSeq === roomInfo.roomSeq && + (fileInfo.type === FileType.File || + fileInfo.type === FileType.Sound) + ) { + return true; + } else { + return false; + } + }); + + this.fileInfoList.map(fileInfo => { + this.fileInfoTotal.push({ + info: fileInfo, + checkInfo: fileInfoCheckList.filter( + checkInfo => checkInfo.seq === fileInfo.seq + ), + }); + }); + + this.dataSource.data = this.fileInfoTotal; + }) + ) + .subscribe(); + + this.dataSource.sortingDataAccessor = (item, property) => { + switch (property) { + case 'name': + return item.info.name; + case 'size': + return item.info.size; + case 'sendDate': + return item.info.sendDate; + case 'receivedUserCount': + return item.info.receivedUserCount; + default: + return item[property]; + } + }; + this.dataSource.sort = this.sort; + this.dataSource.paginator = this.paginator; + } + + ngOnDestroy(): void { + if (!!this.fileInfoListSubscription) { + this.fileInfoListSubscription.unsubscribe(); + } + } + + getExtention(name: string): string { + return FileUtil.getExtension(name); + } + + getCheckAllUser() { + const data = this.dataSource + .sortData(this.dataSource.data, this.sort) + .filter((u, i) => i >= this.paginator.pageSize * this.paginator.pageIndex) + .filter((u, i) => i < this.paginator.pageSize); + if ( + data.filter( + dInfo => + this.selectedFileList.filter( + fileInfo => fileInfo.info.seq === dInfo.info.seq + ).length === 0 + ).length > 0 + ) { + return false; + } else { + return true; + } + } + onCheckAllkUser(value: boolean) { + const data = this.dataSource + .sortData(this.dataSource.data, this.sort) + .filter((u, i) => i >= this.paginator.pageSize * this.paginator.pageIndex) + .filter((u, i) => i < this.paginator.pageSize); + + if (!!data && data.length > 0) { + if (value) { + this.selectedFileList.push( + ...data.filter(dInfo => + this.selectedFileList.filter( + fileInfo => fileInfo.info.seq !== dInfo.info.seq + ) + ) + ); + } else { + this.selectedFileList = this.selectedFileList.filter( + fileInfo => + !( + data.filter(dInfo => dInfo.info.seq === fileInfo.info.seq) + .length > 0 + ) + ); + } + } + } + getCheckUser(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; + } + } + onCheckUser(value: boolean, fileInfo: FileInfoTotal) { + if (value) { + this.selectedFileList.push(fileInfo); + } else { + this.selectedFileList = this.selectedFileList.filter( + info => info.info.seq !== fileInfo.info.seq + ); + } + } + onClickRow(row: FileInfoTotal) { + this.selectedFile = row; + } } 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 a766d9e8..97a30216 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 @@ -22,7 +22,13 @@ import { MatTabsModule } from '@angular/material/tabs'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; -import { MatCheckboxModule } from '@angular/material'; +import { + MatCheckboxModule, + MatTableModule, + MatPaginatorModule, + MatRippleModule, + MatSortModule, +} from '@angular/material'; import { MatListModule } from '@angular/material/list'; import { MatChipsModule } from '@angular/material/chips'; @@ -70,6 +76,10 @@ import { DIALOGS } from './dialogs'; MatCheckboxModule, MatRadioModule, MatSelectModule, + MatTableModule, + MatSortModule, + MatPaginatorModule, + MatRippleModule, PerfectScrollbarModule, @@ -80,10 +90,10 @@ import { DIALOGS } from './dialogs'; UCapUiGroupModule, UCapUiOrganizationModule, - AppCommonLayoutModule + AppCommonLayoutModule, ], exports: [...COMPONENTS, ...DIALOGS], declarations: [...COMPONENTS, ...DIALOGS], - entryComponents: [...DIALOGS] + entryComponents: [...DIALOGS], }) export class AppMessengerLayoutModule {} diff --git a/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.spec.ts b/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.spec.ts deleted file mode 100644 index c854451b..00000000 --- a/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.spec.ts +++ /dev/null @@ -1,11 +0,0 @@ -/* tslint:disable:no-unused-variable */ - -import { TestBed, async } from '@angular/core/testing'; -import { DatesPipe } from './dates.pipe'; - -describe('Pipe: Datese', () => { - it('create an instance', () => { - let pipe = new DatesPipe(); - expect(pipe).toBeTruthy(); - }); -}); diff --git a/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts b/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts index 51252580..2ed825bc 100644 --- a/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts +++ b/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts @@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'; import { StringUtil } from '../utils/string.util'; @Pipe({ - name: 'dateToStringChatList' + name: 'dateToStringChatList', }) export class DateToStringForChatRoomListPipe implements PipeTransform { transform(value: any): string { @@ -36,3 +36,18 @@ export class DateToStringForChatRoomListPipe implements PipeTransform { } } } + +@Pipe({ + name: 'dateToStringFormat', +}) +export class DateToStringFormatPipe implements PipeTransform { + transform(value: any, format?: string): string { + const date = new Date(value.toString()); + + if (!!format) { + return StringUtil.dateFormat(date, format); + } else { + return StringUtil.dateFormat(date, 'YYYY.MM.DD'); + } + } +} diff --git a/projects/ucap-webmessenger-ui/src/lib/pipes/linefeed.pipe.spec.ts b/projects/ucap-webmessenger-ui/src/lib/pipes/linefeed.pipe.spec.ts deleted file mode 100644 index 36d41f53..00000000 --- a/projects/ucap-webmessenger-ui/src/lib/pipes/linefeed.pipe.spec.ts +++ /dev/null @@ -1,11 +0,0 @@ -/* tslint:disable:no-unused-variable */ - -import { TestBed, async } from '@angular/core/testing'; -import { LinefeedPipe } from './linefeed.pipe'; - -describe('Pipe: Linefeede', () => { - it('create an instance', () => { - let pipe = new LinefeedPipe(); - expect(pipe).toBeTruthy(); - }); -}); diff --git a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts index fb3aebea..e536581a 100644 --- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts +++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts @@ -39,7 +39,10 @@ import { ConfirmDialogComponent } from './dialogs/confirm.dialog.component'; import { BytesPipe } from './pipes/bytes.pipe'; import { LinefeedToHtmlPipe, HtmlToLinefeedPipe } from './pipes/linefeed.pipe'; -import { DateToStringForChatRoomListPipe } from './pipes/dates.pipe'; +import { + DateToStringForChatRoomListPipe, + DateToStringFormatPipe, +} from './pipes/dates.pipe'; import { SecondsToMinutesPipe } from './pipes/seconds-to-minutes.pipe'; const COMPONENTS = [ @@ -51,26 +54,27 @@ const COMPONENTS = [ DocumentViewerComponent, ImageViewerComponent, SoundViewerComponent, - VideoViewerComponent + VideoViewerComponent, ]; const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent]; const DIRECTIVES = [ ClickOutsideDirective, FileUploadForDirective, - ImageDirective + ImageDirective, ]; const PIPES = [ BytesPipe, LinefeedToHtmlPipe, HtmlToLinefeedPipe, DateToStringForChatRoomListPipe, - SecondsToMinutesPipe + DateToStringFormatPipe, + SecondsToMinutesPipe, ]; const SERVICES = [ BottomSheetService, ClipboardService, DialogService, - SnackBarService + SnackBarService, ]; @NgModule({ @@ -86,17 +90,17 @@ const SERVICES = [ MatSnackBarModule, MatToolbarModule, MatTooltipModule, - DragDropModule + DragDropModule, ], exports: [...COMPONENTS, ...DIRECTIVES, ...PIPES], declarations: [...COMPONENTS, ...DIALOGS, ...DIRECTIVES, ...PIPES], - entryComponents: [...DIALOGS] + entryComponents: [...DIALOGS], }) export class UCapUiModule { public static forRoot(): ModuleWithProviders { return { ngModule: UCapUiModule, - providers: [...SERVICES] + providers: [...SERVICES], }; } } diff --git a/projects/ucap-webmessenger-ui/src/lib/utils/string.util.ts b/projects/ucap-webmessenger-ui/src/lib/utils/string.util.ts index f348f5af..af71eb99 100644 --- a/projects/ucap-webmessenger-ui/src/lib/utils/string.util.ts +++ b/projects/ucap-webmessenger-ui/src/lib/utils/string.util.ts @@ -2,7 +2,7 @@ import { EventType, EventJson, FileEventJson, - MassTextEventJson + MassTextEventJson, } from '@ucap-webmessenger/protocol-event'; import { FileType } from '@ucap-webmessenger/protocol-file'; @@ -79,7 +79,7 @@ export class StringUtil { '수요일', '목요일', '금요일', - '토요일' + '토요일', ]; const weekKorShortName = ['일', '월', '화', '수', '목', '금', '토']; @@ -91,56 +91,62 @@ export class StringUtil { 'Wednesday', 'Thursday', 'Friday', - 'Saturday' + 'Saturday', ]; const weekEngShortName = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; - return f.replace(/(yyyy|yy|MM|dd|KS|KL|ES|EL|HH|hh|mm|ss|a\/p)/gi, $1 => { - switch ($1) { - case 'yyyy': - return date.getFullYear().toString(); // 년 (4자리) + return f.replace( + /(YYYY|yyyy|YY|yy|MM|DD|dd|KS|KL|ES|EL|HH|hh|mm|ss|a\/p)/gi, + $1 => { + switch ($1) { + case 'YYYY': + case 'yyyy': + return date.getFullYear().toString(); // 년 (4자리) - case 'yy': - return StringUtil.zeroFill(date.getFullYear() % 1000, 2); // 년 (2자리) + case 'YY': + case 'yy': + return StringUtil.zeroFill(date.getFullYear() % 1000, 2); // 년 (2자리) - case 'MM': - return StringUtil.zeroFill(date.getMonth() + 1, 2); // 월 (2자리) + case 'MM': + return StringUtil.zeroFill(date.getMonth() + 1, 2); // 월 (2자리) - case 'dd': - return StringUtil.zeroFill(date.getDate(), 2); // 일 (2자리) + case 'DD': + case 'dd': + return StringUtil.zeroFill(date.getDate(), 2); // 일 (2자리) - case 'KS': - return weekKorShortName[date.getDay()]; // 요일 (짧은 한글) + case 'KS': + return weekKorShortName[date.getDay()]; // 요일 (짧은 한글) - case 'KL': - return weekKorName[date.getDay()]; // 요일 (긴 한글) + case 'KL': + return weekKorName[date.getDay()]; // 요일 (긴 한글) - case 'ES': - return weekEngShortName[date.getDay()]; // 요일 (짧은 영어) + case 'ES': + return weekEngShortName[date.getDay()]; // 요일 (짧은 영어) - case 'EL': - return weekEngName[date.getDay()]; // 요일 (긴 영어) + case 'EL': + return weekEngName[date.getDay()]; // 요일 (긴 영어) - case 'HH': - return StringUtil.zeroFill(date.getHours(), 2); // 시간 (24시간 기준, 2자리) + case 'HH': + return StringUtil.zeroFill(date.getHours(), 2); // 시간 (24시간 기준, 2자리) - case 'hh': - return StringUtil.zeroFill(date.getHours() % 12, 2); // 시간 (12시간 기준, 2자리) + case 'hh': + return StringUtil.zeroFill(date.getHours() % 12, 2); // 시간 (12시간 기준, 2자리) - case 'mm': - return StringUtil.zeroFill(date.getMinutes(), 2); // 분 (2자리) + case 'mm': + return StringUtil.zeroFill(date.getMinutes(), 2); // 분 (2자리) - case 'ss': - return StringUtil.zeroFill(date.getSeconds(), 2); // 초 (2자리) + case 'ss': + return StringUtil.zeroFill(date.getSeconds(), 2); // 초 (2자리) - case 'a/p': - return date.getHours() < 12 ? '오전' : '오후'; // 오전/오후 구분 + case 'a/p': + return date.getHours() < 12 ? '오전' : '오후'; // 오전/오후 구분 - default: - return $1; + default: + return $1; + } } - }); + ); } public static convertFinalEventMessage( From 2f684ffdb2e6dfabbbf1ee5269eae9dbea21c5de Mon Sep 17 00:00:00 2001 From: leejinho Date: Tue, 12 Nov 2019 17:10:11 +0900 Subject: [PATCH 2/3] =?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 @@ -
-
    -
  • - {{ fileInfo.info.name }} / {{ fileInfo.info.size }} -
    • -
+
+
+ + + + +
+
+ + 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) From 3227747a8dcbce3c1b6cdcc44272bd030ee2b7df Mon Sep 17 00:00:00 2001 From: leejinho Date: Tue, 12 Nov 2019 18:10:38 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=EB=8C=80=ED=99=94=EB=B0=A9=20=EC=B0=B8?= =?UTF-8?q?=EC=97=AC=EC=9E=90=20=EB=AA=A9=EB=A1=9D=20=EB=B3=B4=EA=B8=B0=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/messages.component.html | 3 + .../components/messages.component.ts | 127 +++++++------ .../components/right-drawer.component.html | 6 + .../components/right-drawer.component.ts | 19 +- .../components/right-drawer/index.ts | 7 +- .../room-user-list.component.html | 25 +++ .../room-user-list.component.scss | 15 ++ .../room-user-list.component.spec.ts | 25 +++ .../right-drawer/room-user-list.component.ts | 168 ++++++++++++++++++ .../components/main.page.component.html | 1 + .../src/app/types/right-drawer.type.ts | 3 +- 11 files changed, 336 insertions(+), 63 deletions(-) create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.spec.ts create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.ts diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html index 9a1f51b2..03e79699 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html @@ -92,6 +92,9 @@ + diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts index 2c3e2a0a..b6dfa404 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts @@ -6,7 +6,7 @@ import { ElementRef, AfterViewInit, Output, - EventEmitter + EventEmitter, } from '@angular/core'; import { ucapAnimations, @@ -20,7 +20,7 @@ import { AlertDialogData, AlertDialogResult, FileUploadQueueComponent, - StringUtil + StringUtil, } from '@ucap-webmessenger/ui'; import { Store, select } from '@ngrx/store'; import { NGXLogger } from 'ngx-logger'; @@ -33,7 +33,7 @@ import { isRecallable, InfoResponse, EventJson, - FileEventJson + FileEventJson, } from '@ucap-webmessenger/protocol-event'; import * as AppStore from '@app/store'; @@ -47,36 +47,36 @@ import { EnvironmentsInfo, KEY_ENVIRONMENTS_INFO, UserSelectDialogType, - RightDrawer + RightDrawer, } from '@app/types'; import { RoomInfo, UserInfo, RoomType } from '@ucap-webmessenger/protocol-room'; import { tap, take, map, catchError } from 'rxjs/operators'; import { FileInfo, - FormComponent as UCapUiChatFormComponent + FormComponent as UCapUiChatFormComponent, } from '@ucap-webmessenger/ui-chat'; import { KEY_VER_INFO } from '@app/types/ver-info.type'; import { VersionInfo2Response } from '@ucap-webmessenger/api-public'; import { MatMenuTrigger, MatSnackBarRef, - SimpleSnackBar + SimpleSnackBar, } from '@angular/material'; import { CommonApiService, FileUploadItem, FileTalkSaveRequest, - FileTalkSaveResponse + FileTalkSaveResponse, } from '@ucap-webmessenger/api-common'; import { CreateChatDialogComponent, CreateChatDialogData, - CreateChatDialogResult + CreateChatDialogResult, } from '../dialogs/chat/create-chat.dialog.component'; import { FileViewerDialogComponent, FileViewerDialogData, - FileViewerDialogResult + FileViewerDialogResult, } from '@app/layouts/common/dialogs/file-viewer.dialog.component'; import { CONST, FileUtil } from '@ucap-webmessenger/core'; import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar'; @@ -84,12 +84,12 @@ import { StatusCode } from '@ucap-webmessenger/api'; import { EditChatRoomDialogComponent, EditChatRoomDialogResult, - EditChatRoomDialogData + EditChatRoomDialogData, } from '../dialogs/chat/edit-chat-room.dialog.component'; import { SelectGroupDialogComponent, SelectGroupDialogResult, - SelectGroupDialogData + SelectGroupDialogData, } from '../dialogs/group/select-group.dialog.component'; import { GroupDetailData } from '@ucap-webmessenger/protocol-sync'; @@ -97,7 +97,7 @@ import { GroupDetailData } from '@ucap-webmessenger/protocol-sync'; selector: 'app-layout-messenger-messages', templateUrl: './messages.component.html', styleUrls: ['./messages.component.scss'], - animations: ucapAnimations + animations: ucapAnimations, }) export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { @Output() @@ -379,7 +379,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { // duration: 3000, verticalPosition: 'bottom', horizontalPosition: 'center', - panelClass: ['chat-snackbar-class'] + panelClass: ['chat-snackbar-class'], }); this.snackBarPreviewEvent.onAction().subscribe(() => { this.setEventMoreInit(); @@ -420,7 +420,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { EventStore.info({ roomSeq: this.roomInfo.roomSeq, baseSeq: seq, - requestCount: CONST.EVENT_INFO_READ_COUNT + requestCount: CONST.EVENT_INFO_READ_COUNT, }) ); } @@ -438,8 +438,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { width: '360px', data: { title: 'Alert', - message: `대화내용을 입력해주세요.` - } + message: `대화내용을 입력해주세요.`, + }, }); return; } @@ -453,8 +453,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { roomSeq: this.roomInfo.roomSeq, eventType: EventType.MassText, // sentMessage: message.replace(/\n/gi, '\r\n') - sentMessage: message - } + sentMessage: message, + }, }) ); } else { @@ -464,8 +464,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { req: { roomSeq: this.roomInfo.roomSeq, eventType: EventType.Character, - sentMessage: message - } + sentMessage: message, + }, }) ); } @@ -479,7 +479,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { onMassDetail(value: number) { this.store.dispatch( ChatStore.selectedMassDetail({ - massEventSeq: value + massEventSeq: value, }) ); } @@ -492,7 +492,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { FileViewerDialogResult >(FileViewerDialogComponent, { position: { - top: '30px' + top: '30px', }, maxWidth: '100vw', maxHeight: '100vh', @@ -505,8 +505,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { downloadUrl: this.sessionVerInfo.downloadUrl, deviceType: this.environmentsInfo.deviceType, token: this.loginRes.tokenString, - userSeq: this.loginRes.userSeq - } + userSeq: this.loginRes.userSeq, + }, }); } @@ -532,7 +532,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { const info = { senderSeq: this.loginRes.userSeq, - roomSeq: this.roomInfo.roomSeq + roomSeq: this.roomInfo.roomSeq, }; const allObservables: Observable[] = []; @@ -553,7 +553,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { 'rv', 'ts', 'webm', - 'wmv' + 'wmv', ].indexOf(FileUtil.getExtension(fileUploadItem.file.name)) ) { thumbnail = await FileUtil.thumbnail(fileUploadItem.file); @@ -568,7 +568,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { file: fileUploadItem.file, fileName: fileUploadItem.file.name, thumb: thumbnail, - fileUploadItem + fileUploadItem, }; allObservables.push( @@ -600,8 +600,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { req: { roomSeq: info.roomSeq, eventType: EventType.File, - sentMessage: res.returnJson - } + sentMessage: res.returnJson, + }, }) ); } @@ -627,7 +627,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { this.messageContextMenuTrigger.menu.focusFirstItem('mouse'); this.messageContextMenuTrigger.menuData = { message: params.message, - loginRes: this.loginRes + loginRes: this.loginRes, }; this.messageContextMenuTrigger.openMenu(); } @@ -647,7 +647,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { this.snackBarService.open('클립보드에 복사되었습니다.', '', { duration: 3000, verticalPosition: 'top', - horizontalPosition: 'center' + horizontalPosition: 'center', }); } } @@ -659,7 +659,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { userSeq: this.loginRes.userSeq, deviceType: this.environmentsInfo.deviceType, token: this.loginRes.tokenString, - eventMassSeq: message.seq + eventMassSeq: message.seq, }) .pipe(take(1)) .subscribe(res => { @@ -670,7 +670,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { { duration: 3000, verticalPosition: 'top', - horizontalPosition: 'center' + horizontalPosition: 'center', } ); } @@ -694,8 +694,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { data: { type: UserSelectDialogType.MessageForward, title: 'MessageForward', - ignoreRoom: [this.roomInfo] - } + ignoreRoom: [this.roomInfo], + }, }); if (!!result && !!result.choice && result.choice) { @@ -719,10 +719,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { req: { roomSeq: '-999', eventType: message.type, - sentMessage: message.sentMessage + sentMessage: message.sentMessage, }, trgtUserSeqs: userSeqs, - trgtRoomSeq: roomSeq + trgtRoomSeq: roomSeq, }) ); } @@ -738,9 +738,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { req: { roomSeq: '-999', eventType: message.type, - sentMessage: message.sentMessage + sentMessage: message.sentMessage, }, - trgtUserSeqs: [this.loginRes.talkWithMeBotSeq] + trgtUserSeqs: [this.loginRes.talkWithMeBotSeq], }) ); } @@ -756,15 +756,15 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { width: '220px', data: { title: 'Delete', - html: `선택한 메시지를 삭제하시겠습니까?
삭제된 메시지는 내 대화방에서만 적용되며 상대방의 대화방에서는 삭제되지 않습니다.` - } + html: `선택한 메시지를 삭제하시겠습니까?
삭제된 메시지는 내 대화방에서만 적용되며 상대방의 대화방에서는 삭제되지 않습니다.`, + }, }); if (!!result && !!result.choice && result.choice) { this.store.dispatch( EventStore.del({ roomSeq: this.roomInfo.roomSeq, - eventSeq: message.seq + eventSeq: message.seq, }) ); } @@ -780,8 +780,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { width: '220px', data: { title: 'ReCall', - html: `해당 대화를 회수하시겠습니까?
상대방 대화창에서도 회수됩니다.` - } + html: `해당 대화를 회수하시겠습니까?
상대방 대화창에서도 회수됩니다.`, + }, }); if (!!result && !!result.choice && result.choice) { @@ -789,7 +789,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { EventStore.cancel({ roomSeq: this.roomInfo.roomSeq, eventSeq: message.seq, - deviceType: this.environmentsInfo.deviceType + deviceType: this.environmentsInfo.deviceType, }) ); } @@ -806,7 +806,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { { this.store.dispatch( ChatStore.selectedRightDrawer({ - req: RightDrawer.AlbumBox + req: RightDrawer.AlbumBox, }) ); } @@ -815,7 +815,16 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { { this.store.dispatch( ChatStore.selectedRightDrawer({ - req: RightDrawer.FileBox + req: RightDrawer.FileBox, + }) + ); + } + break; + case 'OPEN_ROOM_USER': + { + this.store.dispatch( + ChatStore.selectedRightDrawer({ + req: RightDrawer.RoomUser, }) ); } @@ -833,8 +842,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { title: 'Edit Chat Member', curRoomUser: this.userInfoList.filter( user => user.seq !== this.loginRes.userSeq - ) - } + ), + }, }); if (!!result && !!result.choice && result.choice) { @@ -856,8 +865,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { RoomStore.inviteOrOpen({ req: { divCd: 'Invite', - userSeqs - } + userSeqs, + }, }) ); } @@ -873,8 +882,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { >(SelectGroupDialogComponent, { width: '600px', data: { - title: 'Group Select' - } + title: 'Group Select', + }, }); if (!!result && !!result.choice && result.choice) { @@ -891,7 +900,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { this.store.dispatch( SyncStore.updateGroupMember({ oldGroup, - trgtUserSeq + trgtUserSeq, }) ); } @@ -908,8 +917,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { width: '600px', data: { title: 'Edit Chat Room', - roomInfo: this.roomInfo - } + roomInfo: this.roomInfo, + }, }); if (!!result && !!result.choice && result.choice) { @@ -926,8 +935,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { roomName, receiveAlarm: roomInfo.receiveAlarm, syncAll: - roomNameChangeTarget.toUpperCase() === 'ALL' ? true : false - } + roomNameChangeTarget.toUpperCase() === 'ALL' ? true : false, + }, }) ); @@ -939,7 +948,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { this.store.dispatch( RoomStore.updateTimeRoomInterval({ roomSeq: roomInfo.roomSeq, - timerInterval: timeRoomInterval + timerInterval: timeRoomInterval, }) ); } diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html index 0337b70b..979983c7 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html @@ -4,4 +4,10 @@ + + + diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts index 0b0f4893..e0712a21 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts @@ -1,18 +1,33 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { RightDrawer } from '@app/types'; +import { UserInfo } from '@ucap-webmessenger/protocol-room'; +import { + UserInfoSS, + UserInfoF, + UserInfoDN, +} from '@ucap-webmessenger/protocol-query'; @Component({ selector: 'app-layout-messenger-right-drawer', templateUrl: './right-drawer.component.html', - styleUrls: ['./right-drawer.component.scss'] + styleUrls: ['./right-drawer.component.scss'], }) export class RightDrawerComponent implements OnInit { @Input() selectedRightDrawer: RightDrawer; + @Output() + openProfile = new EventEmitter< + UserInfo | UserInfoSS | UserInfoF | UserInfoDN + >(); + RightDrawer = RightDrawer; constructor() {} ngOnInit() {} + + onClickOpenProfile(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) { + this.openProfile.emit(userInfo); + } } diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/index.ts index dc7431d2..b10fa90c 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/index.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/index.ts @@ -1,4 +1,9 @@ import { FileBoxComponent } from './file-box.component'; import { AlbumBoxComponent } from './album-box.component'; +import { RoomUserListComponent } from './room-user-list.component'; -export const RIGHT_DRAWER_COMPONENTS = [FileBoxComponent, AlbumBoxComponent]; +export const RIGHT_DRAWER_COMPONENTS = [ + FileBoxComponent, + AlbumBoxComponent, + RoomUserListComponent, +]; diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html new file mode 100644 index 00000000..df71280d --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html @@ -0,0 +1,25 @@ +
+
+ + +
+
+ + +
+
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss new file mode 100644 index 00000000..4269c3e8 --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss @@ -0,0 +1,15 @@ +.list { + width: 300px; + height: 100%; + overflow: hidden; + + .search-list { + overflow: auto; + } +} + +.btn-box { + button { + margin: 5px; + } +} diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.spec.ts new file mode 100644 index 00000000..2509f62a --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RoomUserListComponent } from './room-user-list.component'; + +describe('RoomUserListComponent', () => { + let component: RoomUserListComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RoomUserListComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RoomUserListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.ts new file mode 100644 index 00000000..560935c2 --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.ts @@ -0,0 +1,168 @@ +import { + Component, + OnInit, + OnDestroy, + Output, + EventEmitter, +} from '@angular/core'; +import { Subscription } from 'rxjs'; +import { Store, select } from '@ngrx/store'; +import { tap, map } from 'rxjs/operators'; + +import * as AppStore from '@app/store'; +import * as SyncStore from '@app/store/messenger/sync'; +import * as RoomStore from '@app/store/messenger/room'; + +import { UserInfo } from '@ucap-webmessenger/protocol-room'; +import { VersionInfo2Response } from '@ucap-webmessenger/api-public'; +import { SessionStorageService } from '@ucap-webmessenger/web-storage'; +import { KEY_VER_INFO } from '@app/types/ver-info.type'; +import { DialogService } from '@ucap-webmessenger/ui'; +import { + SelectGroupDialogComponent, + SelectGroupDialogResult, + SelectGroupDialogData, +} from '../../dialogs/group/select-group.dialog.component'; +import { GroupDetailData } from '@ucap-webmessenger/protocol-sync'; +import { + CreateChatDialogComponent, + CreateChatDialogResult, + CreateChatDialogData, +} from '../../dialogs/chat/create-chat.dialog.component'; +import { UserSelectDialogType } from '@app/types'; +import { LoginResponse } from '@ucap-webmessenger/protocol-authentication'; +import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type'; + +@Component({ + selector: 'app-layout-chat-right-drawer-room-user-list', + templateUrl: './room-user-list.component.html', + styleUrls: ['./room-user-list.component.scss'], +}) +export class RoomUserListComponent implements OnInit, OnDestroy { + @Output() + openProfile = new EventEmitter(); + + userInfoList: UserInfo[]; + userInfoListSubscription: Subscription; + + loginRes: LoginResponse; + sessionVerinfo: VersionInfo2Response; + + constructor( + private store: Store, + private sessionStorageService: SessionStorageService, + private dialogService: DialogService + ) { + this.loginRes = this.sessionStorageService.get( + KEY_LOGIN_RES_INFO + ); + this.sessionVerinfo = this.sessionStorageService.get( + KEY_VER_INFO + ); + } + + ngOnInit() { + this.userInfoListSubscription = this.store + .pipe( + select(AppStore.MessengerSelector.RoomSelector.selectUserinfolist), + tap(userInfoList => { + this.userInfoList = userInfoList; + }) + ) + .subscribe(); + } + + ngOnDestroy(): void { + if (!!this.userInfoListSubscription) { + this.userInfoListSubscription.unsubscribe(); + } + } + + getStatusBulkInfo(buddy: UserInfo) { + return this.store.pipe( + select( + AppStore.MessengerSelector.StatusSelector.selectEntitiesStatusBulkInfo + ), + map(statusBulkInfo => + !!statusBulkInfo ? statusBulkInfo[buddy.seq] : undefined + ) + ); + } + + onClickOpenProfile(userInfo: UserInfo) { + this.openProfile.emit(userInfo); + } + + async onClickAddMember() { + const result = await this.dialogService.open< + CreateChatDialogComponent, + CreateChatDialogData, + CreateChatDialogResult + >(CreateChatDialogComponent, { + width: '600px', + data: { + type: UserSelectDialogType.EditChatMember, + title: 'Edit Chat Member', + curRoomUser: this.userInfoList.filter( + user => user.seq !== this.loginRes.userSeq + ), + }, + }); + + if (!!result && !!result.choice && result.choice) { + const userSeqs: number[] = []; + if (!!result.selectedUserList && result.selectedUserList.length > 0) { + result.selectedUserList.map(user => { + userSeqs.push(user.seq); + }); + } + + if (userSeqs.length > 0) { + // include me + userSeqs.push(this.loginRes.userSeq); + + this.store.dispatch( + RoomStore.inviteOrOpen({ + req: { + divCd: 'Invite', + userSeqs, + }, + }) + ); + } + } + } + + async onClickAddGroup() { + const result = await this.dialogService.open< + SelectGroupDialogComponent, + SelectGroupDialogData, + SelectGroupDialogResult + >(SelectGroupDialogComponent, { + width: '600px', + data: { + title: 'Group Select', + }, + }); + + if (!!result && !!result.choice && result.choice) { + if (!!result.group) { + const oldGroup: GroupDetailData = result.group; + const trgtUserSeq: number[] = []; + result.group.userSeqs.map(seq => trgtUserSeq.push(seq)); + this.userInfoList + .filter(v => result.group.userSeqs.indexOf(v.seq) < 0) + .forEach(user => { + trgtUserSeq.push(user.seq); + }); + + this.store.dispatch( + SyncStore.updateGroupMember({ + oldGroup, + trgtUserSeq, + }) + ); + } + } + } +} diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html index dff20e2b..a2c6940b 100644 --- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html +++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html @@ -28,6 +28,7 @@ > diff --git a/projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts b/projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts index 52f5e317..6f76b5cc 100644 --- a/projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts +++ b/projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts @@ -1,4 +1,5 @@ export enum RightDrawer { + RoomUser = 'ROOM_USER', FileBox = 'FILE_BOX', - AlbumBox = 'ALBUM_BOX' + AlbumBox = 'ALBUM_BOX', }