159 lines
5.0 KiB
HTML
Raw Normal View History

<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>