next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html

<div fxLayout="column" class="rightDrawer-filebox">
  <div class="rightDrawer-tab">
    <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
      <mat-tab label="Receive"></mat-tab>
      <mat-tab label="Send"></mat-tab>
    </mat-tab-group>
  </div>
  <div fxFlex="1 1 200px" class="select-filebox bg-accent-brightest">
    <ng-container *ngIf="!selectedFile"  >
      Select File.
    </ng-container>
    <ng-container *ngIf="selectedFile">
      <div class="select-flie">
        <div
          [ngClass]="[
            'mime-icon',
            'light',
            'ico-' + getExtention(selectedFile.info.name)
          ]"
        >
          <div class="ico"></div>
        </div>
        <ul>
          <li class="name">name : {{ selectedFile.info.name }}</li>
          <li>size : {{ selectedFile.info.size | ucapBytes }}</li>
          <li>
            date :
            {{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
          </li>
        </ul>
      </div>
      <div>
        아이콘
      </div>
    </ng-container>
  </div>
  <div fxFlex="0 0 auto" class="table-box">
    <table mat-table [dataSource]="dataSource" matSort>
      <ng-container matColumnDef="check">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox
            #checkboxAll
            [checked]="getCheckAllUser()"
            (change)="onCheckAllkUser(checkboxAll.checked)"
            (click)="$event.stopPropagation()"
          >
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let element">
          <mat-checkbox
            #checkbox
            [checked]="getCheckUser(element)"
            (change)="onCheckUser(checkbox.checked, element)"
            (click)="$event.stopPropagation()"
          >
          </mat-checkbox>
        </td>
      </ng-container>
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header class="infos">
          Name
        </th>
        <td mat-cell *matCellDef="let element" class="file-info">
          <div class="file-name">
            {{ element.info.name }}
          </div>
          <div class="download-period text-accent-color">
            <!--{{ element.info.size | ucapBytes }}-->
            {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} ~ 2020.01.23
          </div>
        </td>
      </ng-container>
      <ng-container matColumnDef="sendDate" class="date">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>sendDate</th>
        <td mat-cell *matCellDef="let element">
          <!--{{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}-->
          {{ element.info.size | ucapBytes }}
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr
        mat-row
        *matRowDef="let row; columns: displayedColumns"
        (click)="onClickRow(row)"
      ></tr>
    </table>
  </div>
  <div class="footer-fix">
    <mat-paginator
      [pageSize]="10"
      [pageSizeOptions]="[5, 10, 20]"
      showFirstLastButtons
    ></mat-paginator>

    <div
      fxFlex="1 1 50px"
      fxLayout="row"
      fxLayoutAlign="center center"
      class="btn-box"
    >
      <button
        mat-flat-button
        [disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
        class="mat-primary"
      >
        Download All
      </button>
      <button mat-flat-button class="mat-primary">
        Open Folder
      </button>
    </div>
    </div>
</div>