next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html

<mat-card class="confirm-card mat-elevation-z">
  <mat-card-header>
    <mat-card-title>
      <ng-container [ngSwitch]="messageInfo.type">
        <span *ngSwitchCase="MessageType.Receive">받은 쪽지</span>
        <span *ngSwitchCase="MessageType.Send">보낸 쪽지</span>
        <span *ngSwitchCase="MessageType.Reservation">예약 쪽지</span>
      </ng-container>
    </mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <mat-drawer-container autosize [hasBackdrop]="true">
      <div fxFlex fxLayout="column" fxLayoutAlign=" stretch">
        <div class="title">
          {{ messageInfo.title }}
          <span>
            <button
              mat-icon-button
              aria-label="message menu"
              class="message-menu"
              #messageMenuTrigger="matMenuTrigger"
              [matMenuTriggerFor]="messageMenu"
              (ucapClickOutside)="messageMenuTrigger.closeMenu()"
            >
              <mat-icon>more_vert</mat-icon>
            </button>
          </span>
        </div>
        <div class="info">
          <ul>
            <li>
              <span
                *ngIf="messageInfo.type === MessageType.Receive"
                class="label"
                >보낸사람</span
              >
              <span
                *ngIf="messageInfo.type !== MessageType.Receive"
                class="label"
                >받는사람</span
              >
              <span>{{ getSendReceiverNames() }}</span>
            </li>
            <li>
              <span
                *ngIf="messageInfo.type === MessageType.Receive"
                class="label"
                >받은시간</span
              >
              <span *ngIf="messageInfo.type === MessageType.Send" class="label"
                >보낸시간</span
              >
              <span
                *ngIf="messageInfo.type === MessageType.Reservation"
                class="label"
                >발송예정시간</span
              >
              <span *ngIf="messageInfo.type !== MessageType.Reservation">{{
                messageInfo.regDate
                  | dateToStringFormat: 'YYYY.MM.dd (KS) a/p HH:mm'
              }}</span>
              <span *ngIf="messageInfo.type === MessageType.Reservation">{{
                messageInfo.reservationTime
                  | dateToStringFormat: 'YYYY.MM.dd (KS) a/p HH:mm'
              }}</span>
            </li>
          </ul>
        </div>
        <perfect-scrollbar>
          <div class="contents">
            <ul>
              <li *ngFor="let cont of contents">
                <pre *ngIf="cont.resType === ContentType.Text">{{
                  cont.resContent
                }}</pre>
                <img
                  *ngIf="cont.resType === ContentType.Image"
                  [src]="cont.imageSrc"
                  class="thumbnail"
                />
              </li>
            </ul>
          </div>
        </perfect-scrollbar>
        <div *ngIf="attachFile && attachFile.length > 0" class="attachFile">
          <div>
            <div class="title">
              <span *ngIf="isExpiredAttachFile">기간이 만료된 파일입니다</span>
              <button
                mat-stroked-button
                class="mat-primary"
                (click)="downloadAttachFileAll()"
              >
                모두저장
              </button>
            </div>

            <ul>
              <li *ngFor="let file of attachFile">
                <div>
                  <span class="mdi" [ngClass]="getFileStatusIcon(file)"></span>
                  <span>{{ file.resContent }}</span>
                  <span>{{ file.resSize | ucapBytes }}</span>
                  <a>
                    <span
                      class="mdi mdi-download"
                      *ngIf="file.activeYn"
                      (click)="downloadAttachFileSingle(file)"
                    ></span>
                  </a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <mat-drawer #rightDrawer mode="over" position="end" class="rightDrawer">
        <mat-tab-group
          mat-stretch-tabs
          animationDuration="0ms"
          [selectedIndex]="0"
        >
          <mat-tab>
            <ng-template mat-tab-label>
              읽은 사람 {{ getReadUserCount(true) }}
            </ng-template>
            <mat-list>
              <ng-container *ngFor="let user of receivers">
                <mat-list-item *ngIf="user.readYn">
                  <span>{{ user.userName }}</span>
                  <span>{{
                    user.readDate | dateToStringFormat: 'YYYY-MM-DD HH:mm:ss'
                  }}</span>
                </mat-list-item>
              </ng-container>
            </mat-list>
          </mat-tab>
          <mat-tab>
            <ng-template mat-tab-label>
              읽지 않은 사람 {{ getReadUserCount(true) }}
            </ng-template>
            <ul>
              <div>
                전체선택
                <mat-checkbox
                  #checkbox
                  (change)="
                    checkbox.checked
                      ? unReadUsers.selectAll()
                      : unReadUsers.deselectAll()
                  "
                  (click)="$event.stopPropagation()"
                >
                </mat-checkbox>
              </div>
              <mat-selection-list #unReadUsers>
                <ng-container *ngFor="let user of receivers">
                  <mat-list-option *ngIf="!user.readYn" [value]="user.userSeq">
                    <span>{{ user.userName }}</span>
                  </mat-list-option>
                </ng-container>
              </mat-selection-list>
              <div>
                <button
                  mat-stroked-button
                  [disabled]="unReadUsers.selectedOptions.selected.length === 0"
                  (click)="
                    cancelSendMessageForUsers(
                      unReadUsers.selectedOptions.selected
                    )
                  "
                  class="mat-primary"
                >
                  발송취소
                </button>
              </div>
            </ul>
          </mat-tab>
        </mat-tab-group>
      </mat-drawer>
    </mat-drawer-container>
  </mat-card-content>
  <!-- <mat-card-actions class="button-farm flex-row">
    <button mat-stroked-button (click)="onClickConfirm()" class="mat-primary">
      Confirm
    </button>
  </mat-card-actions> -->
</mat-card>

<mat-menu
  #messageMenu="matMenu"
  xPosition="after"
  yPosition="below"
  [hasBackdrop]="false"
>
  <button
    mat-menu-item
    *ngIf="messageInfo.type === MessageType.Send"
    (click)="onClickMessageMenu('MESSAGE_READ')"
  >
    <span>읽음확인</span>
  </button>
  <button
    mat-menu-item
    *ngIf="messageInfo.type === MessageType.Reservation"
    (click)="onClickMessageMenu('MESSAGE_CANCEL')"
  >
    <span>발송취소</span>
  </button>
  <button
    mat-menu-item
    *ngIf="messageInfo.type === MessageType.Reservation"
    (click)="onClickMessageMenu('MESSAGE_UPDATE')"
  >
    <span>수정</span>
  </button>
  <button
    mat-menu-item
    *ngIf="
      messageInfo.type === MessageType.Send ||
      messageInfo.type === MessageType.Receive
    "
    (click)="onClickMessageMenu('MESSAGE_DEL')"
  >
    <span>삭제</span>
  </button>
</mat-menu>