next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html

<div class="message-box container">
  <div class="current-head">
    <h3>{{ 'message.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="{{ 'message.placeholderForSearch' | translate }}"
            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>
  </div>
  <div class="message-section" [style.display]="isSearch ? 'none' : 'block'">
    <mat-tab-group
      #tabs
      mat-stretch-tabs
      animationDuration="0ms"
      [selectedIndex]="0"
      (selectedIndexChange)="onSelectedIndexChange($event)"
      class="message-tab"
    >
      <mat-tab [label]="MessageType.Receive">
        <ng-template mat-tab-label>
          {{ 'message.type.messageTypeReceiving' | translate }}
        </ng-template>
        <perfect-scrollbar
          fxFlex="1 1 auto"
          *ngIf="!!(messageRetrieveList$ | async)"
        >
          <ucap-message-list-item
            *ngFor="let message of messageRetrieveList$ | async"
            [message]="message"
            (click)="onClickDetail(message)"
            class="message-item"
          ></ucap-message-list-item>
        </perfect-scrollbar>
        <div
          class="no-search-result"
          fxFlexFill
          *ngIf="
            !(messageRetrieveList$ | async) ||
            0 === (messageRetrieveList$ | async).length
          "
        >
          {{ 'common.noResult' | translate }}
        </div>
      </mat-tab>
      <mat-tab [label]="MessageType.Send">
        <ng-template mat-tab-label>
          {{ 'message.type.messageTypeOutgoing' | translate }}
        </ng-template>
        <perfect-scrollbar
          fxFlex="1 1 auto"
          *ngIf="!!(messageSendList$ | async)"
        >
          <ucap-message-list-item
            *ngFor="let message of messageSendList$ | async"
            [message]="message"
            (click)="onClickDetail(message)"
            class="message-item"
          ></ucap-message-list-item>
        </perfect-scrollbar>
        <div
          class="no-search-result"
          fxFlexFill
          *ngIf="
            !(messageSendList$ | async) ||
            0 === (messageSendList$ | async).length
          "
        >
          {{ 'common.noResult' | translate }}
        </div>
      </mat-tab>
      <mat-tab [label]="MessageType.Reservation">
        <ng-template mat-tab-label>
          {{ 'message.type.messageTypeReservation' | translate }}
        </ng-template>
        <perfect-scrollbar
          fxFlex="1 1 auto"
          *ngIf="!!(messageReservationList$ | async)"
        >
          <ucap-message-list-item
            *ngFor="let message of messageReservationList$ | async"
            [message]="message"
            (click)="onClickDetail(message)"
            class="message-item"
          ></ucap-message-list-item>
        </perfect-scrollbar>
        <div
          class="no-search-result"
          fxFlexFill
          *ngIf="
            !(messageReservationList$ | async) ||
            0 === (messageReservationList$ | async).length
          "
        >
          {{ 'common.noResult' | translate }}
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>

  <div class="message-section" [style.display]="isSearch ? 'block' : 'none'">
    <div class="search-sub">
      <form [formGroup]="fgSearchType" class="w-100-p">
        <mat-form-field style="width: 100px;">
          <mat-select
            value="A"
            formControlName="searchMessageType"
            (selectionChange)="onChangeSelection($event)"
          >
            <mat-option
              *ngFor="let messageType of messageTypeList"
              [value]="messageType.name"
            >
              {{ messageType.displayName }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-radio-group
          formControlName="searchMessageSearchType"
          aria-label="Select an searchType"
          (change)="onChangeSearchType($event)"
        >
          <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>
        </mat-radio-group>
      </form>
    </div>
    <div style="height: calc(100% - 65.5px)">
      <perfect-scrollbar
        fxFlex="1 1 auto"
        *ngIf="!!(messageSearchList$ | async)"
      >
        <ucap-message-list-item
          *ngFor="let message of messageSearchList$ | async"
          [message]="message"
          (click)="onClickDetail(message)"
          class="message-item"
        ></ucap-message-list-item>
      </perfect-scrollbar>
      <div
        class="no-search-result"
        fxFlexFill
        *ngIf="
          !(messageSearchList$ | async) ||
          0 === (messageSearchList$ | async).length
        "
      >
        {{ 'common.noSearchResult' | translate }}
      </div>
    </div>
  </div>
</div>