파일함 테이블 레이아웃 변경

This commit is contained in:
leejinho 2019-11-14 08:30:59 +09:00
parent 01b59d9bfb
commit 0fb8a56a90
2 changed files with 16 additions and 28 deletions

View File

@ -52,28 +52,24 @@
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th> <th mat-header-cell *matHeaderCellDef mat-sort-header class="infos">
<td mat-cell *matCellDef="let element">{{ element.info.name }}</td> Name
</ng-container> </th>
<ng-container matColumnDef="size">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Size</th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
{{ element.info.size | ucapBytes }} <div>
{{ element.info.name }}
</div>
<div>
{{ element.info.size | ucapBytes }}
</div>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="sendDate"> <ng-container matColumnDef="sendDate" class="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header>sendDate</th> <th mat-header-cell *matHeaderCellDef mat-sort-header>sendDate</th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
{{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
</td> </td>
</ng-container> </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-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr <tr
mat-row mat-row

View File

@ -3,7 +3,7 @@ import { MatPaginator, MatTableDataSource, MatSort } from '@angular/material';
import { import {
FileInfo, FileInfo,
FileDownloadInfo, FileDownloadInfo,
FileType, FileType
} from '@ucap-webmessenger/protocol-file'; } from '@ucap-webmessenger/protocol-file';
import { Subscription, combineLatest } from 'rxjs'; import { Subscription, combineLatest } from 'rxjs';
import { Store, select } from '@ngrx/store'; import { Store, select } from '@ngrx/store';
@ -24,16 +24,10 @@ export interface FileInfoTotal {
@Component({ @Component({
selector: 'app-layout-chat-right-drawer-file-box', selector: 'app-layout-chat-right-drawer-file-box',
templateUrl: './file-box.component.html', templateUrl: './file-box.component.html',
styleUrls: ['./file-box.component.scss'], styleUrls: ['./file-box.component.scss']
}) })
export class FileBoxComponent implements OnInit, OnDestroy { export class FileBoxComponent implements OnInit, OnDestroy {
displayedColumns: string[] = [ displayedColumns: string[] = ['check', 'name', 'sendDate'];
'check',
'name',
'size',
'sendDate',
'receivedUserCount',
];
dataSource = new MatTableDataSource<FileInfoTotal>(); dataSource = new MatTableDataSource<FileInfoTotal>();
fileInfoTotal: FileInfoTotal[]; fileInfoTotal: FileInfoTotal[];
@ -69,7 +63,7 @@ export class FileBoxComponent implements OnInit, OnDestroy {
select( select(
AppStore.MessengerSelector.EventSelector.selectAllFileInfoCheckList AppStore.MessengerSelector.EventSelector.selectAllFileInfoCheckList
) )
), )
]) ])
.pipe( .pipe(
tap(() => (this.fileInfoTotal = [])), tap(() => (this.fileInfoTotal = [])),
@ -91,7 +85,7 @@ export class FileBoxComponent implements OnInit, OnDestroy {
info: fileInfo, info: fileInfo,
checkInfo: fileInfoCheckList.filter( checkInfo: fileInfoCheckList.filter(
checkInfo => checkInfo.seq === fileInfo.seq checkInfo => checkInfo.seq === fileInfo.seq
), )
}); });
}); });
@ -108,10 +102,8 @@ export class FileBoxComponent implements OnInit, OnDestroy {
return item.info.size; return item.info.size;
case 'sendDate': case 'sendDate':
return item.info.sendDate; return item.info.sendDate;
case 'receivedUserCount':
return item.info.receivedUserCount;
default: default:
return item[property]; return item.info[property];
} }
}; };
this.dataSource.sort = this.sort; this.dataSource.sort = this.sort;