next-ucap-messenger/projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.html

<perfect-scrollbar class="scrollbar">
  <table
    mat-table
    matSort
    [dataSource]="sortedData"
    (matSortChange)="sortData($event)"
  >
    <ng-container matColumnDef="profileImage">
      <th mat-header-cell *matHeaderCellDef class="profileImage">
        {{ 'search.fieldProfile' | translate }}
      </th>
      <td mat-cell *matCellDef="let element" class="profileImage">
        <div class="table-item">
          <span
            class="presence"
            [ngClass]="getPresence(element, PresenceType.PC)"
            [matTooltip]="getPresenceMsg(element)"
            matTooltipPosition="after"
          ></span>
          <span class="thumbnail-mask">
            <img
              class="thumbnail"
              ucapImage
              [base]="profileImageRoot"
              [path]="element.profileImageFile"
              [default]="'assets/images/img_nophoto_50.png'"
              (click)="onClickOpenProfile($event, element.seq)"
            />
          </span>
          <span
            *ngIf="getPresence(element, PresenceType.MOBILE) === 'mobileOn'"
            class="text-accent-color marker-mobile-state"
          >
            <mat-icon>phone_android</mat-icon>
          </span>
        </div>
      </td>
    </ng-container>
    <ng-container matColumnDef="profileInfo">
      <th mat-header-cell *matHeaderCellDef class="profileInfo">
        <div>
          <span mat-sort-header="name">
            {{ 'search.fieldName' | translate }}
          </span>
          <span mat-sort-header="grade">
            {{ 'search.fieldGrade' | translate }}
          </span>
        </div>
        <div mat-sort-header="dept">
          {{ 'search.fieldDeptartment' | translate }}
        </div>
      </th>
      <td mat-cell *matCellDef="let element" class="profileInfo">
        <div class="baseInfo">
          <span
            *ngIf="getWorkstatusInfo(element, 'style').length > 0"
            class="work-status"
            [ngClass]="getWorkstatusInfo(element, 'style')"
          >
            {{ getWorkstatusInfo(element, 'text') }}
          </span>
          <span class="name">
            {{ element.name }}
          </span>
          <span class="grade">
            {{ element.grade }}
          </span>
        </div>
        <div class="deptName">
          {{ element.deptName }}
        </div>
      </td>
    </ng-container>
    <ng-container matColumnDef="company_hpNumber">
      <th mat-header-cell *matHeaderCellDef>
        <div mat-sort-header="company">
          {{ 'search.fieldCompany' | translate }}
        </div>
        <div mat-sort-header="hpNumber">
          {{ 'search.fieldHandphone' | translate }}
        </div>
      </th>
      <td mat-cell *matCellDef="let element">
        <div class="companyName">
          {{ element.companyName }}
        </div>
        <div class="hpNumber">
          {{ element.hpNumber | ucapStringFormatterPhone }}
        </div>
      </td>
    </ng-container>
    <ng-container matColumnDef="workplace_lineNumber">
      <th mat-header-cell *matHeaderCellDef>
        <div mat-sort-header="workplace">
          {{ 'search.fieldWorkPlace' | translate }}
        </div>
        <div mat-sort-header="lineNumber">
          {{ 'search.fieldOfficePhoneNumber' | translate }}
        </div>
      </th>
      <td mat-cell *matCellDef="let element">
        <div class="workplace">
          {{ element.workplace }}
        </div>
        <div class="lineNumber">
          {{ element.lineNumber | ucapStringFormatterPhone }}
        </div>
      </td>
    </ng-container>
    <ng-container matColumnDef="responsibilities_email">
      <th mat-header-cell *matHeaderCellDef>
        <div mat-sort-header="responsibilities">
          {{ 'search.fieldResponsibilities' | translate }}
        </div>
        <div mat-sort-header="email">
          {{ 'search.fieldEmail' | translate }}
        </div>
      </th>
      <td mat-cell *matCellDef="let element">
        <div class="responsibilities">
          {{ element.responsibilities }}
        </div>
        <div class="email">
          {{ element.email }}
        </div>
      </td>
    </ng-container>
    <ng-container matColumnDef="checkable">
      <th mat-header-cell *matHeaderCellDef>
        <mat-checkbox
          #checkbox
          [checked]="getCheckedAllUser()"
          (change)="onCheckAllUser(checkbox.checked)"
          (click)="$event.stopPropagation()"
        >
        </mat-checkbox>
      </th>
      <td mat-cell *matCellDef="let element">
        <mat-checkbox
          #checkbox
          [checked]="getCheckedAllUser()"
          (change)="onCheckAllUser(checkbox.checked)"
          (click)="$event.stopPropagation()"
        >
        </mat-checkbox>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
</perfect-scrollbar>
<div
  class="no-search-result"
  fxFlexFill
  *ngIf="!sortedData || 0 === sortedData.length"
>
  {{ 'common.noSearchResult' | translate }}
</div>