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"
      class="message-container"
    >
      <div
        fxFlex
        fxLayout="column"
        fxLayoutAlign=" stretch"
        class="message-info"
      >
        <div class="profile">
          <span class="profile-img-mask">
            <img />
          </span>
          <span
            *ngIf="messageInfo.type === MessageType.Receive"
            class="people sender bg-accent-color"
            alt="보낸사람"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 20 20"
              stroke="currentColor"
              fill="none"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <line class="st0" x1="5.8" y1="14.2" x2="14.2" y2="5.8" />
              <polyline class="st0" points="5.8,5.8 14.2,5.8 14.2,14.2 " />
            </svg>
          </span>
          <span
            *ngIf="messageInfo.type !== MessageType.Receive"
            class="people receiver bg-accent-color"
            alt="받는사람"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 20 20"
              stroke="currentColor"
              fill="none"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <line class="st0" x1="14.2" y1="5.8" x2="5.8" y2="14.2" />
              <polyline class="st0" points="14.2,14.2 5.8,14.2 5.8,5.8 " />
            </svg>
          </span>
          <span class="name">{{ getSendReceiverNames() }}</span>
        </div>
        <div class="title text-accent-darkest">
          {{ messageInfo.title }}
          <span class="btn-menu ">
            <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="date">
          <span
            *ngIf="messageInfo.type === MessageType.Receive"
            class="label bg-warn-color "
            >받은시간</span
          >
          <span
            *ngIf="messageInfo.type === MessageType.Send"
            class="label bg-warn-color "
            >보낸시간</span
          >
          <span
            *ngIf="messageInfo.type === MessageType.Reservation"
            class="label bg-warn-color "
            >발송예정시간</span
          >
          <span *ngIf="messageInfo.type !== MessageType.Reservation">{{
            messageInfo.regDate | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
          }}</span>
          <span *ngIf="messageInfo.type === MessageType.Reservation">{{
            messageInfo.reservationTime | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
          }}</span>
        </div>
        <perfect-scrollbar>
          <div class="contents">
            <ul>
              <li *ngFor="let cont of contents" class="message-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 | ucapDate: '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>