<ng-container *ngIf="pageEvalution==''">
<app-page-header [pathTitle]="pathTitle"></app-page-header>
<div class="bg-card-white">
</div>
<div class="block-main-content">
<div class="font-size-18px font-weight-700 pt-1.5rem text-primary px-2rem">
ประเมินผลประจำปี {{currentDate.getFullYear()}}
</div>
<div class="pt-0.75rem">
<div class=" px-2rem" [ngClass]="{'border-gray-200 border-b': subordinate.dataList.length}">
<nav class=" flex space-x-2 rtl:space-x-reverse">
<a *ngFor="let item of subordinate.dataList; let i=index ; let f= first"
class="border justify-center rounded-top-4px hs-tab-active:!bg-primary hs-tab-active:text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center hover:text-gray-900"
[class.active]="f" href="javascript:void(0);" [id]="'card-type-item-'+(i+1)"
[attr.data-hs-tab]="'#underline-'+(i+1)" [attr.aria-controls]="'underline-'+(i+1)"
(click)="selectDataList(item)">
รอบการประเมินที่ {{i+1}}/{{subordinate.dataList.length}}
</a>
</nav>
</div>
</div>
<div class="pt-50px pb-2rem" *ngIf="subordinate.dataList.length">
<div *ngFor="let item of subordinate.dataList; let i=index;let f=first" [id]="'underline-'+(i+1)"
role="tabpanel" [class.hidden]="!f">
<div class="header-title-type p-0 px-2rem">
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
style="height: 40px;" [(ngModel)]="search" (ngModelChange)="searchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="w-full min-height-50px justify-between items-center py-2">
<div class="px-2rem py-3 bg-soft-secondary font-size-18px font-weight-700 text-primary">
ประเมินสมรรถนะ
</div>
</div>
<div class=" px-2rem">
<div class="overflow-auto table-bordered rounded-t-md">
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<div class="overflow-auto shadow-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัสพนักงาน','ชื่อพนักงาน','ตำเเหน่งงาน','ประเมิน','เเผนพัฒนา','PMS','ผลประเมิน','เกรด','สถานะ','สถานะผู้ประเมิน']; let f = first; let l = last; let i = index">
<th scope="col"
class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l||'ประเมิน'||'เเผนพัฒนา'||'PMS'">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0"
*ngIf="!l&&!f&&!i">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg"
width="50" height="16" fill="currentColor"
viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="subordinate.loading">
<tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]"
class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!subordinate.loading&&!subordinateFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!subordinate.loading&&subordinateFilter().length">
<tr *ngFor="let item of subordinateFilter();let i = index">
<td class="text-center" style="font-size: 12px; width: 150px;">
{{item.apsassessy.employeeId}}
</td>
<td style="font-size: 12px; width: 175px;">
{{item.apsassessy.thFullName}}
</td>
<td style="font-size: 12px;">{{item.apsassessy.position.tdesc}}</td>
<td class="text-center">
<div class="flex">
<button type="button" class="ti-btn rounded-sm "
*ngFor="let type of item.typeList"
[class.ti-btn-soft-secondary]="type.statusType == 'employee'"
[class.ti-btn-soft-warning]="type.statusType != 'employee'&&type.statusType != 'Boss_finish'"
[class.ti-btn-soft-success]="type.statusType == 'Boss_finish'"
style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;"
(click)="selectSubordinate(item,type.competencyTypeId,subordinate.select?.evaluationRoundId);pageEvalution='evaluation'">
{{type.shortName}}
</button>
</div>
</td>
<td class="text-center">
<!-- <button type="button" class="ti-btn rounded-sm ti-btn-soft-dark"
style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;">
IDP
</button> -->
</td>
<td class="text-center">
<!-- <button type="button" class="ti-btn rounded-sm ti-btn-soft-success"
style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;">
ประเมิน
</button> -->
</td>
<td class="text-center" style="font-size: 12px;">{{item.sumScore}}</td>
<td class="text-center" style="font-size: 12px;">{{item.gread}}</td>
<td class="text-center" style="font-size: 12px;">
<!-- {{item.masfromStatusType.tdesc}} -->
</td>
<td class="text-center" style="font-size: 12px;">
{{item.apsapproveType.tdesc}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<nav class="pagination-style-3 my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&¤tPage!=1&¤tPage!=2&¤tPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
class="ri-more-line"></i>
</a>
</ng-container>
<ng-container
*ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==page.length-2&¤tPage!=page.length&¤tPage!=page.length-1&¤tPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{subordinateFilter().length<10
?subordinateFilter().length: (currentPage==page.length ? ((currentPage * 10) -
((currentPage * 10) - subordinateFilter().length) ) :(currentPage * 10) ) }} of
{{subordinateFilter().length}} items</span>
</ul>
</nav>
</div>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="pageEvalution=='idp'">
<app-idp-evalution (sendPageEvalution)="pageEvalution=$event"></app-idp-evalution>
</ng-container>
<ng-container *ngIf="pageEvalution=='pms'">
<app-pms-evalution (sendPageEvalution)="pageEvalution=$event"></app-pms-evalution>
</ng-container>
<ng-container *ngIf="pageEvalution=='evaluation'">
<app-evaluation [pathTitle]="['การประเมินผล', 'ประเมินโดยหัวหน้า','ประเมิน']"
(sendReturnPath)="pageEvalution='' ; pathTitle = ['การประเมินผล', 'ประเมินโดยหัวหน้า']"
[evaluationRoundId]="formEvaluation.evaluationRoundId" [evaluaterId]="formEvaluation.evaluaterId"
[evaluateeId]="formEvaluation.evaluateeId"
[competencyTypeId]="formEvaluation.competencyTypeId"></app-evaluation>
</ng-container>