2019-11-13 15:42:30 +09:00
|
|
|
<div class="message-box container">
|
2019-11-22 17:25:51 +09:00
|
|
|
<div class="current-head">
|
2020-01-06 17:05:36 +09:00
|
|
|
<h3>{{ 'message.label' | translate }}</h3>
|
2019-11-22 17:25:51 +09:00
|
|
|
<div class="btn-box">
|
|
|
|
<!-- <button mat-icon-button>
|
|
|
|
<mat-icon>timer</mat-icon>
|
|
|
|
</button>
|
|
|
|
<button mat-icon-button>
|
|
|
|
<mat-icon> add_comment</mat-icon>
|
|
|
|
</button> -->
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-01-16 17:58:11 +09:00
|
|
|
<div class="list-search-frame">
|
2019-11-15 10:49:41 +09:00
|
|
|
<div class="searchbox">
|
|
|
|
<form [formGroup]="fgSearch" class="w-100-p">
|
|
|
|
<mat-form-field floatLabel="never">
|
|
|
|
<input
|
|
|
|
matInput
|
|
|
|
#inputSearch
|
|
|
|
type="text"
|
|
|
|
maxlength="20"
|
2020-01-06 17:05:36 +09:00
|
|
|
placeholder="{{ 'message.placeholderForSearch' | translate }}"
|
2019-11-15 10:49:41 +09:00
|
|
|
value=""
|
|
|
|
formControlName="searchInput"
|
|
|
|
(keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
|
|
|
|
/>
|
|
|
|
<button
|
|
|
|
mat-button
|
|
|
|
matSuffix
|
|
|
|
mat-icon-button
|
|
|
|
aria-label="Clear"
|
|
|
|
(click)="inputSearch.value = ''; onClickSearchCancel()"
|
|
|
|
>
|
|
|
|
<mat-icon>close</mat-icon>
|
|
|
|
</button>
|
|
|
|
</mat-form-field>
|
|
|
|
</form>
|
|
|
|
</div>
|
2019-11-14 17:43:45 +09:00
|
|
|
</div>
|
2020-01-14 08:26:27 +09:00
|
|
|
<div class="message-section" [style.display]="isSearch ? 'none' : 'block'">
|
2019-11-14 17:43:45 +09:00
|
|
|
<mat-tab-group
|
2019-11-22 17:25:51 +09:00
|
|
|
#tabs
|
2019-11-14 17:43:45 +09:00
|
|
|
mat-stretch-tabs
|
|
|
|
animationDuration="0ms"
|
2019-11-22 17:25:51 +09:00
|
|
|
[selectedIndex]="0"
|
2019-11-14 17:43:45 +09:00
|
|
|
(selectedIndexChange)="onSelectedIndexChange($event)"
|
2020-01-10 18:54:14 +09:00
|
|
|
class="message-tab"
|
2019-11-14 17:43:45 +09:00
|
|
|
>
|
2019-11-22 17:25:51 +09:00
|
|
|
<mat-tab [label]="MessageType.Receive">
|
2019-11-14 17:43:45 +09:00
|
|
|
<ng-template mat-tab-label>
|
2020-02-03 13:32:28 +09:00
|
|
|
{{ 'message.type.messageTypeReceiving' | translate }}
|
2019-11-14 17:43:45 +09:00
|
|
|
</ng-template>
|
2020-01-31 17:16:50 +09:00
|
|
|
<perfect-scrollbar
|
|
|
|
fxFlex="1 1 auto"
|
|
|
|
*ngIf="!!(messageRetrieveList$ | async)"
|
|
|
|
>
|
2020-01-10 18:54:14 +09:00
|
|
|
<ucap-message-list-item
|
|
|
|
*ngFor="let message of messageRetrieveList$ | async"
|
|
|
|
[message]="message"
|
|
|
|
(click)="onClickDetail(message)"
|
|
|
|
class="message-item"
|
|
|
|
></ucap-message-list-item>
|
|
|
|
</perfect-scrollbar>
|
2020-01-31 17:16:50 +09:00
|
|
|
<div
|
|
|
|
class="no-search-result"
|
|
|
|
fxFlexFill
|
|
|
|
*ngIf="
|
|
|
|
!(messageRetrieveList$ | async) ||
|
|
|
|
0 === (messageRetrieveList$ | async).length
|
|
|
|
"
|
|
|
|
>
|
|
|
|
{{ 'common.noResult' | translate }}
|
|
|
|
</div>
|
2019-11-14 17:43:45 +09:00
|
|
|
</mat-tab>
|
2019-11-22 17:25:51 +09:00
|
|
|
<mat-tab [label]="MessageType.Send">
|
2019-11-14 17:43:45 +09:00
|
|
|
<ng-template mat-tab-label>
|
2020-02-03 13:32:28 +09:00
|
|
|
{{ 'message.type.messageTypeOutgoing' | translate }}
|
2019-11-14 17:43:45 +09:00
|
|
|
</ng-template>
|
2020-01-31 17:16:50 +09:00
|
|
|
<perfect-scrollbar
|
|
|
|
fxFlex="1 1 auto"
|
|
|
|
*ngIf="!!(messageSendList$ | async)"
|
|
|
|
>
|
2020-01-10 18:54:14 +09:00
|
|
|
<ucap-message-list-item
|
|
|
|
*ngFor="let message of messageSendList$ | async"
|
|
|
|
[message]="message"
|
|
|
|
(click)="onClickDetail(message)"
|
|
|
|
class="message-item"
|
|
|
|
></ucap-message-list-item>
|
|
|
|
</perfect-scrollbar>
|
2020-01-31 17:16:50 +09:00
|
|
|
<div
|
|
|
|
class="no-search-result"
|
|
|
|
fxFlexFill
|
|
|
|
*ngIf="
|
|
|
|
!(messageSendList$ | async) ||
|
|
|
|
0 === (messageSendList$ | async).length
|
|
|
|
"
|
|
|
|
>
|
|
|
|
{{ 'common.noResult' | translate }}
|
|
|
|
</div>
|
2019-11-14 17:43:45 +09:00
|
|
|
</mat-tab>
|
2019-11-22 17:25:51 +09:00
|
|
|
<mat-tab [label]="MessageType.Reservation">
|
2019-11-14 17:43:45 +09:00
|
|
|
<ng-template mat-tab-label>
|
2020-02-03 13:32:28 +09:00
|
|
|
{{ 'message.type.messageTypeReservation' | translate }}
|
2019-11-14 17:43:45 +09:00
|
|
|
</ng-template>
|
2020-01-31 17:16:50 +09:00
|
|
|
<perfect-scrollbar
|
|
|
|
fxFlex="1 1 auto"
|
|
|
|
*ngIf="!!(messageReservationList$ | async)"
|
|
|
|
>
|
2020-01-10 18:54:14 +09:00
|
|
|
<ucap-message-list-item
|
|
|
|
*ngFor="let message of messageReservationList$ | async"
|
|
|
|
[message]="message"
|
|
|
|
(click)="onClickDetail(message)"
|
|
|
|
class="message-item"
|
|
|
|
></ucap-message-list-item>
|
|
|
|
</perfect-scrollbar>
|
2020-01-31 17:16:50 +09:00
|
|
|
<div
|
|
|
|
class="no-search-result"
|
|
|
|
fxFlexFill
|
|
|
|
*ngIf="
|
|
|
|
!(messageReservationList$ | async) ||
|
|
|
|
0 === (messageReservationList$ | async).length
|
|
|
|
"
|
|
|
|
>
|
|
|
|
{{ 'common.noResult' | translate }}
|
|
|
|
</div>
|
2019-11-14 17:43:45 +09:00
|
|
|
</mat-tab>
|
|
|
|
</mat-tab-group>
|
|
|
|
</div>
|
2020-01-10 18:54:14 +09:00
|
|
|
|
2020-01-23 10:03:48 +09:00
|
|
|
<div class="message-section" [style.display]="isSearch ? 'block' : 'none'">
|
2019-11-25 15:48:54 +09:00
|
|
|
<div class="search-sub">
|
|
|
|
<form [formGroup]="fgSearchType" class="w-100-p">
|
2020-01-23 10:03:48 +09:00
|
|
|
<mat-form-field style="width: 100px;">
|
2019-11-26 17:54:37 +09:00
|
|
|
<mat-select
|
2020-02-03 13:32:28 +09:00
|
|
|
value="A"
|
2019-11-26 17:54:37 +09:00
|
|
|
formControlName="searchMessageType"
|
|
|
|
(selectionChange)="onChangeSelection($event)"
|
|
|
|
>
|
2020-02-03 13:32:28 +09:00
|
|
|
<mat-option
|
|
|
|
*ngFor="let messageType of messageTypeList"
|
|
|
|
[value]="messageType.name"
|
|
|
|
>
|
|
|
|
{{ messageType.displayName }}
|
|
|
|
</mat-option>
|
2019-11-25 15:48:54 +09:00
|
|
|
</mat-select>
|
|
|
|
</mat-form-field>
|
|
|
|
<mat-radio-group
|
|
|
|
formControlName="searchMessageSearchType"
|
|
|
|
aria-label="Select an searchType"
|
|
|
|
(change)="onChangeSearchType($event)"
|
|
|
|
>
|
2020-01-06 17:05:36 +09:00
|
|
|
<mat-radio-button [value]="MessageSearchType.Name" [checked]="true">{{
|
|
|
|
'message.searchTypeName' | translate
|
|
|
|
}}</mat-radio-button>
|
|
|
|
<mat-radio-button [value]="MessageSearchType.Title">{{
|
|
|
|
'message.searchTypeTitle' | translate
|
|
|
|
}}</mat-radio-button>
|
|
|
|
<mat-radio-button [value]="MessageSearchType.Contents">{{
|
|
|
|
'message.searchTypeContent' | translate
|
|
|
|
}}</mat-radio-button>
|
2019-11-25 15:48:54 +09:00
|
|
|
</mat-radio-group>
|
|
|
|
</form>
|
|
|
|
</div>
|
2020-01-23 10:03:48 +09:00
|
|
|
<div style="height: calc(100% - 65.5px)">
|
2020-01-31 17:16:50 +09:00
|
|
|
<perfect-scrollbar
|
|
|
|
fxFlex="1 1 auto"
|
|
|
|
*ngIf="!!(messageSearchList$ | async)"
|
|
|
|
>
|
2020-01-23 10:03:48 +09:00
|
|
|
<ucap-message-list-item
|
|
|
|
*ngFor="let message of messageSearchList$ | async"
|
|
|
|
[message]="message"
|
|
|
|
(click)="onClickDetail(message)"
|
|
|
|
class="message-item"
|
|
|
|
></ucap-message-list-item>
|
|
|
|
</perfect-scrollbar>
|
2020-01-31 17:16:50 +09:00
|
|
|
<div
|
|
|
|
class="no-search-result"
|
|
|
|
fxFlexFill
|
|
|
|
*ngIf="
|
|
|
|
!(messageSearchList$ | async) ||
|
|
|
|
0 === (messageSearchList$ | async).length
|
|
|
|
"
|
|
|
|
>
|
|
|
|
{{ 'common.noSearchResult' | translate }}
|
|
|
|
</div>
|
2019-11-25 15:48:54 +09:00
|
|
|
</div>
|
|
|
|
</div>
|
2019-11-13 15:42:30 +09:00
|
|
|
</div>
|