next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
2019-11-05 18:12:31 +09:00

135 lines
4.1 KiB
HTML

<div>
<div class="current-head">
<h3>대화</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="대화방 이름 검색"
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">
<perfect-scrollbar fxFlex="1 1 auto">
<ucap-room-list-item
*ngFor="let room of roomList"
[loginRes]="loginRes"
[roomInfo]="room"
[roomUserInfo]="getRoomUserList(room)"
[sessionVerinfo]="sessionVerinfo"
(click)="onSelectedRoom(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 *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)="onSelectedRoom(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)="onSelectedRoom(roomInfo)">
대화방 열기
</button>
<button mat-menu-item (click)="onClickToggleAlarm(roomInfo)">
대화방 알람 {{ roomInfo.receiveAlarm ? '끄기' : '켜기' }}
</button>
<button mat-menu-item (click)="onClickExit(roomInfo)">
대화방 나가기
</button>
</ng-template>
</mat-menu>