279 lines
9.1 KiB
HTML
279 lines
9.1 KiB
HTML
<mat-card class="confirm-card mat-elevation-z">
|
|
<mat-card-header>
|
|
<mat-card-title>
|
|
<ng-container [ngSwitch]="messageInfo.type">
|
|
<span *ngSwitchCase="MessageType.Receive">{{
|
|
'message.messageTypeReceiving' | translate
|
|
}}</span>
|
|
<span *ngSwitchCase="MessageType.Send">{{
|
|
'message.messageTypeOutgoing' | translate
|
|
}}</span>
|
|
<span *ngSwitchCase="MessageType.Reservation">{{
|
|
'message.messageTypeReservation' | translate
|
|
}}</span>
|
|
</ng-container>
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<mat-drawer-container
|
|
autosize
|
|
[hasBackdrop]="true"
|
|
class="message-container"
|
|
>
|
|
<div
|
|
fxFlex
|
|
fxLayout="column"
|
|
fxLayoutAlign=" stretch"
|
|
class="message-info"
|
|
>
|
|
<div class="profile">
|
|
<span class="profile-img-mask">
|
|
<img />
|
|
</span>
|
|
<span
|
|
*ngIf="messageInfo.type === MessageType.Receive"
|
|
class="people sender bg-accent-color"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<line class="st0" x1="5.8" y1="14.2" x2="14.2" y2="5.8" />
|
|
<polyline class="st0" points="5.8,5.8 14.2,5.8 14.2,14.2 " />
|
|
</svg>
|
|
</span>
|
|
<span
|
|
*ngIf="messageInfo.type !== MessageType.Receive"
|
|
class="people receiver bg-accent-color"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<line class="st0" x1="14.2" y1="5.8" x2="5.8" y2="14.2" />
|
|
<polyline class="st0" points="14.2,14.2 5.8,14.2 5.8,5.8 " />
|
|
</svg>
|
|
</span>
|
|
<span class="name">{{ getSendReceiverNames() }}</span>
|
|
</div>
|
|
<div class="title text-accent-darkest">
|
|
{{ messageInfo.title }}
|
|
<span class="btn-menu ">
|
|
<button
|
|
mat-icon-button
|
|
aria-label="message menu"
|
|
class="message-menu"
|
|
#messageMenuTrigger="matMenuTrigger"
|
|
[matMenuTriggerFor]="messageMenu"
|
|
(ucapClickOutside)="messageMenuTrigger.closeMenu()"
|
|
>
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
<div class="date">
|
|
<span
|
|
*ngIf="messageInfo.type === MessageType.Receive"
|
|
class="label bg-warn-color "
|
|
>{{ 'message.receivedTime' | translate }}</span
|
|
>
|
|
<span
|
|
*ngIf="messageInfo.type === MessageType.Send"
|
|
class="label bg-warn-color "
|
|
>{{ 'message.sendingTime' | translate }}</span
|
|
>
|
|
<span
|
|
*ngIf="messageInfo.type === MessageType.Reservation"
|
|
class="label bg-warn-color "
|
|
>{{ 'message.reservationTime' | translate }}</span
|
|
>
|
|
<span *ngIf="messageInfo.type !== MessageType.Reservation">{{
|
|
messageInfo.regDate | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
|
|
}}</span>
|
|
<span *ngIf="messageInfo.type === MessageType.Reservation">{{
|
|
messageInfo.reservationTime | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
|
|
}}</span>
|
|
</div>
|
|
<perfect-scrollbar>
|
|
<div class="contents">
|
|
<ul>
|
|
<li *ngFor="let cont of contents" class="message-contents">
|
|
<pre *ngIf="cont.resType === ContentType.Text">{{
|
|
cont.resContent
|
|
}}</pre>
|
|
<img
|
|
*ngIf="cont.resType === ContentType.Image"
|
|
[src]="cont.imageSrc"
|
|
class="thumbnail"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</perfect-scrollbar>
|
|
<div *ngIf="attachFile && attachFile.length > 0" class="attachFile">
|
|
<div>
|
|
<div class="title">
|
|
<span *ngIf="isExpiredAttachFile">{{
|
|
'common.file.errors.expired' | translate
|
|
}}</span>
|
|
<button
|
|
mat-stroked-button
|
|
class="mat-primary"
|
|
(click)="downloadAttachFileAll()"
|
|
>
|
|
{{ 'common.file.saveAll' | translate }}
|
|
</button>
|
|
</div>
|
|
|
|
<ul>
|
|
<li *ngFor="let file of attachFile">
|
|
<div>
|
|
<span class="mdi" [ngClass]="getFileStatusIcon(file)"></span>
|
|
<span>{{ file.resContent }}</span>
|
|
<span>{{ file.resSize | ucapBytes }}</span>
|
|
<a>
|
|
<span
|
|
class="mdi mdi-download"
|
|
*ngIf="file.activeYn"
|
|
(click)="downloadAttachFileSingle(file)"
|
|
></span>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<mat-drawer #rightDrawer mode="over" position="end" class="rightDrawer">
|
|
<mat-tab-group
|
|
mat-stretch-tabs
|
|
animationDuration="0ms"
|
|
[selectedIndex]="0"
|
|
>
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
{{ 'message.countOfReadUser' | translate }}
|
|
{{ getReadUserCount(true) }}
|
|
</ng-template>
|
|
<mat-list>
|
|
<ng-container *ngFor="let user of receivers">
|
|
<mat-list-item *ngIf="user.readYn">
|
|
<span>{{ user.userName }}</span>
|
|
<span>{{
|
|
user.readDate | ucapDate: 'YYYY-MM-DD HH:mm:ss'
|
|
}}</span>
|
|
</mat-list-item>
|
|
</ng-container>
|
|
</mat-list>
|
|
</mat-tab>
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
{{ 'message.countOfUnreadUser' | translate }}
|
|
{{ getReadUserCount(false) }}
|
|
</ng-template>
|
|
<ul>
|
|
<div>
|
|
{{ 'common.messages.selectAll' | translate }}
|
|
<mat-checkbox
|
|
#checkbox
|
|
(change)="onUnreadUserCheckAll(checkbox.checked)"
|
|
(click)="$event.stopPropagation()"
|
|
>
|
|
</mat-checkbox>
|
|
</div>
|
|
<mat-selection-list
|
|
#unReadUsers
|
|
(selectionChange)="
|
|
onUnreadUserSelectionChange(
|
|
unReadUsers.selectedOptions.selected
|
|
)
|
|
"
|
|
>
|
|
<ng-container *ngFor="let user of receivers">
|
|
<mat-list-option
|
|
*ngIf="!user.readYn"
|
|
[value]="user.userSeq"
|
|
[disabled]="user.cancelYn"
|
|
[selected]="isSelectedUnreadUser(user)"
|
|
>
|
|
<span>{{ user.userName }}</span>
|
|
</mat-list-option>
|
|
</ng-container>
|
|
</mat-selection-list>
|
|
<div>
|
|
<button
|
|
mat-stroked-button
|
|
[disabled]="unReadUsers.selectedOptions.selected.length === 0"
|
|
(click)="cancelSendMessageForUsers()"
|
|
class="mat-primary"
|
|
>
|
|
{{ 'message.cancelSending' | translate }}
|
|
</button>
|
|
</div>
|
|
</ul>
|
|
</mat-tab>
|
|
</mat-tab-group>
|
|
</mat-drawer>
|
|
</mat-drawer-container>
|
|
</mat-card-content>
|
|
<!-- <mat-card-actions class="button-farm flex-row">
|
|
<button mat-stroked-button (click)="onClickConfirm()" class="mat-primary">
|
|
Confirm
|
|
</button>
|
|
</mat-card-actions> -->
|
|
</mat-card>
|
|
|
|
<mat-menu
|
|
#messageMenu="matMenu"
|
|
xPosition="after"
|
|
yPosition="below"
|
|
[hasBackdrop]="false"
|
|
>
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="messageInfo.type === MessageType.Send"
|
|
(click)="onClickMessageMenu('MESSAGE_READ')"
|
|
>
|
|
<span>{{ 'message.detailOfViewers' | translate }}</span>
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="messageInfo.type === MessageType.Reservation"
|
|
(click)="onClickMessageMenu('MESSAGE_CANCEL')"
|
|
>
|
|
<span>{{ 'message.cancelReservation' | translate }}</span>
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="messageInfo.type === MessageType.Reservation"
|
|
(click)="onClickMessageMenu('MESSAGE_UPDATE')"
|
|
>
|
|
<span>{{ 'common.messages.modify' | translate }}</span>
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="
|
|
messageInfo.type === MessageType.Send ||
|
|
messageInfo.type === MessageType.Receive
|
|
"
|
|
(click)="onClickMessageMenu('MESSAGE_DEL')"
|
|
>
|
|
<span>{{ 'common.messages.remove' | translate }}</span>
|
|
</button>
|
|
</mat-menu>
|