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

<div fxLayout="column">
  <div>
    <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 300px">
    <ng-container *ngIf="!selectedFile">
      Select File.
    </ng-container>
    <ng-container *ngIf="selectedFile">
      <div
        [ngClass]="[
          'mime-icon',
          'light',
          'ico-' + getExtention(selectedFile.info.name)
        ]"
      >
        <div class="ico"></div>
      </div>
      <ul>
        <li>name : {{ selectedFile.info.name }}</li>
        <li>size : {{ selectedFile.info.size | ucapBytes }}</li>
        <li>
          date :
          {{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
        </li>
      </ul>
    </ng-container>
  </div>
  <div fxFlex="1 1 auto">
    <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">
          <div>
            {{ element.info.name }}
          </div>
          <div>
            {{ element.info.size | ucapBytes }}
          </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' }}
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr
        mat-row
        *matRowDef="let row; columns: displayedColumns"
        (click)="onClickRow(row)"
      ></tr>
    </table>

    <mat-paginator
      [pageSize]="10"
      [pageSizeOptions]="[5, 10, 20]"
      showFirstLastButtons
    ></mat-paginator>
  </div>
  <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>