134 lines
4.0 KiB
HTML
134 lines
4.0 KiB
HTML
<div>
|
|
<div class="current-head">
|
|
<h3>{{ 'chat.label' | translate }}</h3>
|
|
<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>
|
|
<div class="list-search">
|
|
<div class="searchbox">
|
|
<form [formGroup]="fgSearch" class="w-100-p">
|
|
<mat-form-field floatLabel="never">
|
|
<input
|
|
matInput
|
|
#inputSearch
|
|
type="text"
|
|
maxlength="20"
|
|
placeholder="{{ 'chat.searchRoomByName' | translate }}"
|
|
value=""
|
|
formControlName="searchInput"
|
|
[matAutocomplete]="auto"
|
|
(keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
|
|
/>
|
|
<mat-autocomplete #auto="matAutocomplete">
|
|
<mat-option
|
|
*ngFor="
|
|
let filteredRecommendedWord of filteredRecommendedWordList
|
|
"
|
|
[value]="filteredRecommendedWord"
|
|
>
|
|
{{ filteredRecommendedWord }}
|
|
</mat-option>
|
|
</mat-autocomplete>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="!isSearch" class="app-layout-chat-left-sidenav-chat-list">
|
|
<cdk-virtual-scroll-viewport
|
|
#cvsvChatList
|
|
itemSize="80"
|
|
perfectScrollbar
|
|
fxFlexFill
|
|
>
|
|
<ucap-room-list-item
|
|
*cdkVirtualFor="let room of roomList"
|
|
[loginRes]="loginRes"
|
|
[roomInfo]="room"
|
|
[roomUserInfo]="getRoomUserList(room)"
|
|
[sessionVerinfo]="sessionVerinfo"
|
|
(click)="onClickContextMenu('SELECT_ROOM', room)"
|
|
(contextmenu)="onContextMenuChat($event, room)"
|
|
class="ucap-clickable"
|
|
>
|
|
</ucap-room-list-item>
|
|
</cdk-virtual-scroll-viewport>
|
|
</div>
|
|
<div *ngIf="!!isSearch" class="app-layout-chat-left-sidenav-chat-list search">
|
|
<perfect-scrollbar fxFlex="1 1 auto">
|
|
<ucap-room-list-item
|
|
*ngFor="let room of searchRoomList"
|
|
[loginRes]="loginRes"
|
|
[roomInfo]="room"
|
|
[roomUserInfo]="getRoomUserList(room)"
|
|
[sessionVerinfo]="sessionVerinfo"
|
|
(click)="onClickContextMenu('SELECT_ROOM', room)"
|
|
(contextmenu)="onContextMenuChat($event, room)"
|
|
>
|
|
</ucap-room-list-item>
|
|
</perfect-scrollbar>
|
|
<!-- <cdk-virtual-scroll-viewport
|
|
itemSize="20"
|
|
class="app-layout-chat-left-sidenav-chat-list-viewport"
|
|
>
|
|
<ucap-room-list-item
|
|
*cdkVirtualFor="let room of getRoomList()"
|
|
[loginRes]="loginRes"
|
|
[roomInfo]="room"
|
|
[roomUserInfo]="getRoomUserList(room)"
|
|
[sessionVerinfo]="sessionVerinfo"
|
|
(click)="onSelectedRoom(room)"
|
|
(contextmenu)="onContextMenuChat($event, room)"
|
|
>
|
|
</ucap-room-list-item>
|
|
</cdk-virtual-scroll-viewport> -->
|
|
</div>
|
|
|
|
<div
|
|
style="visibility: hidden; position: fixed"
|
|
[style.left]="chatContextMenuPosition.x"
|
|
[style.top]="chatContextMenuPosition.y"
|
|
#chatContextMenuTrigger="matMenuTrigger"
|
|
[matMenuTriggerFor]="chatContextMenu"
|
|
></div>
|
|
<mat-menu
|
|
#chatContextMenu="matMenu"
|
|
[hasBackdrop]="false"
|
|
(ucapClickOutside)="chatContextMenuTrigger.closeMenu()"
|
|
>
|
|
<ng-template matMenuContent let-roomInfo="roomInfo">
|
|
<button mat-menu-item (click)="onClickContextMenu('SELECT_ROOM', roomInfo)">
|
|
{{ 'chat.openRoom' | translate }}
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
(click)="onClickContextMenu('TOGGLE_ALARM', roomInfo)"
|
|
>
|
|
{{
|
|
(roomInfo.receiveAlarm
|
|
? 'chat.turnOffRoomAlert'
|
|
: 'chat.turnOnRoomAlert'
|
|
) | translate
|
|
}}
|
|
</button>
|
|
<button mat-menu-item (click)="onClickContextMenu('EXIT_ROOM', roomInfo)">
|
|
{{ 'chat.leaveFromRoom' | translate }}
|
|
</button>
|
|
</ng-template>
|
|
</mat-menu>
|