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

<mat-card class="confirm-card mat-elevation-z">
  <mat-card-header
    cdkDrag
    cdkDragRootElement=".cdk-overlay-pane"
    cdkDragHandle
    class="card-header"
  >
    <mat-card-title>{{ 'search.label' | translate }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <div fxLayout="column" class="rightDrawer-notice">
      <div fxFlex="1 1 80px" 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">
                  {{ element.name }}
                </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>
              </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="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="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>
  </mat-card-content>
  <!-- <mat-card-actions *ngIf="!hideAction" class="button-farm flex-row">
    <button
      mat-stroked-button
      (click)="onClickChoice(false)"
      class="mat-primary"
    >
      {{ 'common.messages.no' | translate }}
    </button>
    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
      {{ 'common.messages.yes' | translate }}
    </button>
  </mat-card-actions> -->
</mat-card>