next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
2019-10-29 19:06:25 +09:00

152 lines
4.3 KiB
HTML

<!--<div class="app-layout-chat-left-sidenav-chat-header list-search">
<form [formGroup]="fgSearch">
<mat-form-field class="w-100-p searchbox" 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 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)"
/>
<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
*ngIf="!isSearch"
class="app-layout-chat-left-sidenav-chat-list"
perfectScrollbar
>
<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>
<!-- <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"
perfectScrollbar
>
<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>
<!-- <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"
(ucapUiClickOutside)="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>