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

<div fxLayout="column" fxFlex="1 1 auto" 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)"
          >-->
          <th mat-header-cell *matHeaderCellDef #header class="profile" >
            {{ 'search.fieldProfile' | translate }}
          </th>
          <td mat-cell *matCellDef ="let element">
            <!--
            {{ getPresence(element, PresenceType.PC) }}
            {{ getPresence(element, PresenceType.MOBILE) }}
          -->
            <div class="profile">
              <span
                class="presence pcOn"
                [ngClass]="getPresence(PresenceType.PC)"
              ></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 class="text-accent-color marker-mobile-state">
                <mat-icon>phone_android</mat-icon>
              </span>
            </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>
              <!-- morning-off: 오전 afternoon-off: 오후 day-off: 휴가 long-time: 장기 leave-of-absence: 휴직-->
              <span class="work-status morning-off">
                {{ getWorkstatus(element) }}</span
              >
              <span class="name">
                {{ element.name }}
              </span>
            </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>