파일함 정리 / 앨범함 데이터 연동.

This commit is contained in:
leejinho 2019-11-12 14:08:14 +09:00
parent 8fec0e15f2
commit e15d8c592e
11 changed files with 454 additions and 79 deletions

View File

@ -1 +1,7 @@
<p>album-box works!</p>
<div>
<ul>
<li *ngFor="let fileInfo of fileInfoTotal">
{{ fileInfo.info.name }} / {{ fileInfo.info.size }}
</li>
</ul>
</div>

View File

@ -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<any>) {}
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();
}
}
}

View File

@ -1 +1,102 @@
<p>file-box works!</p>
<div fxLayout="column">
<div fxFlex="1 1 300px">
<ng-container *ngIf="!selectedFile">
Select File.
</ng-container>
<ng-container *ngIf="selectedFile">
<div
[ngClass]="[
'mime-icon',
'light',
'ico-' + getExtention(selectedFile.info.name)
]"
>
<div class="ico"></div>
</div>
<ul>
<li>name : {{ selectedFile.info.name }}</li>
<li>size : {{ selectedFile.info.size | ucapBytes }}</li>
<li>
date :
{{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
</li>
</ul>
</ng-container>
</div>
<div fxFlex="1 1 auto">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="check">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox
#checkboxAll
[checked]="getCheckAllUser()"
(change)="onCheckAllkUser(checkboxAll.checked)"
(click)="$event.stopPropagation()"
>
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let element">
<mat-checkbox
#checkbox
[checked]="getCheckUser(element)"
(change)="onCheckUser(checkbox.checked, element)"
(click)="$event.stopPropagation()"
>
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let element">{{ element.info.name }}</td>
</ng-container>
<ng-container matColumnDef="size">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Size</th>
<td mat-cell *matCellDef="let element">
{{ element.info.size | ucapBytes }}
</td>
</ng-container>
<ng-container matColumnDef="sendDate">
<th mat-header-cell *matHeaderCellDef mat-sort-header>sendDate</th>
<td mat-cell *matCellDef="let element">
{{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
</td>
</ng-container>
<ng-container matColumnDef="receivedUserCount">
<th mat-header-cell *matHeaderCellDef mat-sort-header>receivedUser</th>
<td mat-cell *matCellDef="let element">
{{ element.info.receivedUserCount }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns"
(click)="onClickRow(row)"
></tr>
</table>
<mat-paginator
[pageSize]="10"
[pageSizeOptions]="[5, 10, 20]"
showFirstLastButtons
></mat-paginator>
</div>
<div
fxFlex="1 1 50px"
fxLayout="row"
fxLayoutAlign="center center"
class="btn-box"
>
<button
mat-flat-button
[disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
class="mat-primary"
>
Download All
</button>
<button mat-flat-button class="mat-primary">
Open Folder
</button>
</div>
</div>

View File

@ -0,0 +1,14 @@
table {
width: 100%;
}
.mat-row:hover {
background: rgba(0, 0, 0, 0.04);
cursor: pointer;
}
.btn-box {
button {
margin: 5px;
}
}

View File

@ -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<FileInfoTotal>();
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<any>) {}
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;
}
}

View File

@ -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 {}

View File

@ -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();
});
});

View File

@ -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');
}
}
}

View File

@ -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();
});
});

View File

@ -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<UCapUiModule> {
return {
ngModule: UCapUiModule,
providers: [...SERVICES]
providers: [...SERVICES],
};
}
}

View File

@ -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(