next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.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-frame">
    <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">
  <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)="onClickContextMenu('SELECT_ROOM', room)"
      (contextmenu)="onContextMenuChat($event, room)"
      class="ucap-clickable"
    >
    </ucap-room-list-item>
  </perfect-scrollbar>
  <!-- <cdk-virtual-scroll-viewport
    #cvsvChatList
    itemSize="60"
    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="60"
    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">
  <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.exitFromRoom' | translate }}
    </button>
  </ng-template>
</mat-menu>