272 lines
8.6 KiB
HTML
272 lines
8.6 KiB
HTML
<div fxLayout="column" class="rightDrawer-filebox">
|
|
<div class="rightDrawer-tab">
|
|
<mat-tab-group
|
|
mat-stretch-tabs
|
|
animationDuration="0ms"
|
|
(selectedIndexChange)="onSelectedIndexChange($event)"
|
|
>
|
|
<mat-tab label="{{ 'chat.typeReceived' | translate }}"></mat-tab>
|
|
<mat-tab label="{{ 'chat.typeSent' | translate }}"></mat-tab>
|
|
</mat-tab-group>
|
|
</div>
|
|
<div fxFlex="1 1 200px" class="select-filebox bg-accent-brightest">
|
|
<ng-container *ngIf="!selectedFile">
|
|
<div class="empty-msg">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="36"
|
|
height="36"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M13 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V9l-7-7z"
|
|
/>
|
|
<path d="M13 3v6h6" />
|
|
</svg>
|
|
<span>{{ 'common.file.selectFiles' | translate }}</span>
|
|
</div>
|
|
</ng-container>
|
|
<ng-container *ngIf="selectedFile">
|
|
<div class="select-flie">
|
|
<div
|
|
[ngClass]="[
|
|
'mime-icon',
|
|
'light',
|
|
'ico-' + getExtention(selectedFile.info.name)
|
|
]"
|
|
>
|
|
<div class="ico"></div>
|
|
</div>
|
|
<ul>
|
|
<li class="name">{{ selectedFile.info.name }}</li>
|
|
<li>
|
|
<span class="text-accent-color"
|
|
>{{ 'common.file.size' | translate }} :</span
|
|
>
|
|
{{ selectedFile.info.size | ucapBytes }}
|
|
</li>
|
|
<li>
|
|
<span class="text-accent-color"
|
|
>{{ 'chat.validityPeriod' | translate }} :</span
|
|
>
|
|
{{ selectedFile.info.sendDate | ucapDate: 'YYYY.MM.DD' }}
|
|
<span *ngIf="loginRes.fileRetentionPeriod > 0">
|
|
~
|
|
{{
|
|
selectedFile.info.sendDate
|
|
| ucapDate: 'YYYY.MM.DD':fileRetentionPeriodOptions
|
|
}}
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="select-file-option">
|
|
<span
|
|
matTooltip="{{ 'common.file.download' | translate }}"
|
|
class="text-accent-darkest"
|
|
(click)="onClickDownload(selectedFile)"
|
|
>
|
|
<mat-progress-spinner
|
|
*ngIf="selectedFile.fileDownloadItem.downloadingProgress$ | async"
|
|
mode="determinate"
|
|
diameter="30"
|
|
strokeWidth="2"
|
|
[value]="selectedFile.fileDownloadItem.downloadingProgress$ | async"
|
|
style="position: absolute;"
|
|
></mat-progress-spinner>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span
|
|
matTooltip="{{ 'chat.forwardFileToMe' | translate }}"
|
|
class="text-accent-darkest"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
(click)="onClickForwardMe(selectedFile)"
|
|
>
|
|
<path
|
|
d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3"
|
|
/>
|
|
<circle cx="12" cy="10" r="3" />
|
|
<circle cx="12" cy="12" r="10" />
|
|
</svg>
|
|
</span>
|
|
<span
|
|
matTooltip="{{ 'chat.forwardFileTo' | translate }}"
|
|
class="text-accent-darkest"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
(click)="onClickForward(selectedFile)"
|
|
>
|
|
<g fill="none" fill-rule="evenodd">
|
|
<path
|
|
d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
<span
|
|
matTooltip="{{ 'common.file.delete' | translate }}"
|
|
class="text-accent-darkest"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
(click)="onClickDelete(selectedFile)"
|
|
>
|
|
<path d="M20 11.08V8l-6-6H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h6" />
|
|
<path d="M14 3v5h5M15.88 20.12l4.24-4.24M15.88 15.88l4.24 4.24" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
<div fxFlex="0 0 auto" class="table-box">
|
|
<perfect-scrollbar class="album-scrollbar">
|
|
<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 class="infos">
|
|
{{ 'common.file.name' | translate }}
|
|
</th>
|
|
<td mat-cell *matCellDef="let element" class="file-info">
|
|
<div class="file-name">
|
|
{{ element.info.name }}
|
|
</div>
|
|
<div class="download-period text-accent-color">
|
|
<!--{{ element.info.size | ucapBytes }}-->
|
|
{{ element.info.sendDate | ucapDate: 'YYYY.MM.DD' }}
|
|
<span *ngIf="loginRes.fileRetentionPeriod > 0">
|
|
~
|
|
{{
|
|
element.info.sendDate
|
|
| ucapDate: 'YYYY.MM.DD':fileRetentionPeriodOptions
|
|
}}
|
|
</span>
|
|
</div>
|
|
<div
|
|
*ngIf="element.fileDownloadItem.downloadingProgress$ | async"
|
|
class="progress"
|
|
>
|
|
<mat-progress-bar
|
|
mode="determinate"
|
|
[value]="element.fileDownloadItem.downloadingProgress$ | async"
|
|
></mat-progress-bar>
|
|
</div>
|
|
</td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="sendDate" class="date">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>
|
|
{{ 'chat.sentDate' | translate }}
|
|
</th>
|
|
<td mat-cell *matCellDef="let element">
|
|
<!--{{ element.info.sendDate | ucapDate: 'YYYY.MM.DD' }}-->
|
|
{{ element.info.size | ucapBytes }}
|
|
</td>
|
|
</ng-container>
|
|
<tr
|
|
mat-header-row
|
|
*matHeaderRowDef="displayedColumns; sticky: true"
|
|
></tr>
|
|
<tr
|
|
mat-row
|
|
*matRowDef="let row; columns: displayedColumns"
|
|
(click)="onClickRow(row)"
|
|
></tr>
|
|
</table>
|
|
</perfect-scrollbar>
|
|
</div>
|
|
<div class="footer-fix">
|
|
<mat-paginator
|
|
[pageSize]="10"
|
|
[pageSizeOptions]="[5, 10, 20]"
|
|
showFirstLastButtons
|
|
></mat-paginator>
|
|
|
|
<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"
|
|
(click)="onClickDownloadAll()"
|
|
>
|
|
{{ 'common.file.downloadSelected' | translate }}
|
|
</button>
|
|
<button
|
|
mat-flat-button
|
|
class="mat-primary"
|
|
(click)="onClickOpenDownloadFolder()"
|
|
>
|
|
{{ 'common.file.openDownloadFolder' | translate }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|