next-ucap-messenger/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html

<div fxLayout="column" class="rightDrawer-notice">
  <div  class="search-area">
    <ucap-integrated-search-form
      [searchWord]="!!searchWord ? searchWord : ''"
      (search)="onSearch($event)"
    >
    </ucap-integrated-search-form>
  </div>
  <div style="position: relative;">
    <div
      *ngIf="searchingProcessing"
      style="position: absolute; width: 100%; z-index: 101;"
    >
      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    </div>
  </div>
  <div fxFlex="0 0 auto" class="table-box">
    <perfect-scrollbar class="search-scrollbar">
      <table mat-table [dataSource]="searchUserInfos">
        <ng-container matColumnDef="profile">
          <th
            mat-header-cell
            *matHeaderCellDef
            #header
            class="profile"
            (mousedown)="resizeTable($event, header)"
          >
            {{ 'search.fieldProfile' | translate }}
          </th>
          <td mat-cell *matCellDef="let element">
            <div class="profile thumbnail-mask">
              <img
                class="thumbnail"
                ucapImage
                [base]="profileImageRoot"
                [path]="element.profileImageFile"
                [default]="'assets/images/img_nophoto_50.png'"
                (click)="onClickOpenProfile($event, element.seq)"
              />
            </div>

          </td>
        </ng-container>
        <ng-container matColumnDef="name">
          <th
            mat-header-cell
            *matHeaderCellDef
            #header
            class="name"
            (mousedown)="resizeTable($event, header)"
          >
            {{ 'search.fieldName' | translate }}
          </th>
          <td mat-cell *matCellDef="let element">
            <div class="name">
              {{ element.name }}
            </div>
            <div class="status">
              {{ getPresence(element, PresenceType.PC) }} /
              {{ getPresence(element, PresenceType.MOBILE) }} /
              {{ getWorkstatus(element) }}
            </div>
          </td>
        </ng-container>

        <ng-container matColumnDef="grade">
          <th mat-header-cell *matHeaderCellDef #header class="grade" (mousedown)="resizeTable($event, header)">
            {{ 'search.fieldGrade' | translate }}
          </th>
          <td mat-cell *matCellDef="let element" class="grade">
            <div class="grade">
              {{ element.grade }}
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="deptName">
          <th
            mat-header-cell
            *matHeaderCellDef
            #header
            class="deptName"
            (mousedown)="resizeTable($event, header)"
          >
            {{ 'search.fieldDeptartment' | translate }}
          </th>
          <td mat-cell *matCellDef="let element">
            <div class="deptName">
              {{ element.deptName }}
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="companyName">
          <th
            mat-header-cell
            *matHeaderCellDef
            #header
            class="companyName"
            (mousedown)="resizeTable($event, header)"
          >
            {{ 'search.fieldCompany' | translate }}
          </th>
          <td mat-cell *matCellDef="let element">
            <div class="companyName">
              {{ element.companyName }}
            </div>
          </td>
        </ng-container>

        <ng-container matColumnDef="lineNumber">
          <th
            mat-header-cell
            *matHeaderCellDef
            #header
            class="lineNumber"
            (mousedown)="resizeTable($event, header)"
          >
            {{ 'search.fieldOfficePhoneNumber' | translate }}
          </th>
          <td mat-cell *matCellDef="let element" class="lineNumber">
            <div class="lineNumber">
              {{ element.lineNumber }}
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="hpNumber">
          <th
            mat-header-cell
            *matHeaderCellDef
            #header
            class="hpNumber"
            (mousedown)="resizeTable($event, header)"
          >
            {{ 'search.fieldHandphone' | translate }}
          </th>
          <td mat-cell *matCellDef="let element" class="hpNumber">
            <div class="hpNumber">
              {{ element.hpNumber }}
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="email">
          <th
            mat-header-cell
            *matHeaderCellDef
            #header
            class="email"
            (mousedown)="resizeTable($event, header)"
          >
            {{ 'search.fieldEmail' | translate }}
          </th>
          <td mat-cell *matCellDef="let element" class="email">
            <div class="email">
              {{ element.email }}
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="responsibilities">
          <th
            mat-header-cell
            *matHeaderCellDef
            #header
            class="responsibilities"
            (mousedown)="resizeTable($event, header)"
          >
            {{ 'search.fieldResponsibilities' | translate }}
          </th>
          <td mat-cell *matCellDef="let element" class="responsibilities">
            <div class="responsibilities">
              {{ element.responsibilities }}
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="workplace">
          <th
            mat-header-cell
            *matHeaderCellDef
            #header
            class="workplace"
            (mousedown)="resizeTable($event, header)"
          >
            {{ 'search.fieldWorkPlace' | translate }}
          </th>
          <td mat-cell *matCellDef="let element" class="workplace">
            <div class="workplace">
              {{ element.workplace }}
            </div>
          </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>
  <div class="footer-fix">
    <mat-paginator
      [length]="totalCount"
      [pageSize]="pageListCount"
      [pageSizeOptions]="[10, 20, 30]"
      (page)="onChangePage($event)"
      showFirstLastButtons
    ></mat-paginator>
  </div>
</div>