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(