<ng-container *ngIf="!onEdit">
<app-page-header [pathTitle]="pathTitle"></app-page-header>
<div class="bg-card-white">
</div>
<div class="block-main-content">
<ng-container *ngTemplateOutlet="selfEvaluation"></ng-container>
</div>
</ng-container>
<ng-template #selfEvaluation>
<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': appraisalCompentency.dataList.length}">
<nav class=" flex space-x-2 rtl:space-x-reverse">
<a *ngFor="let item of appraisalCompentency.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)="selectAppraisalCompentency(item)">
รอบการประเมินที่ {{i+1}}/{{appraisalCompentency.dataList.length}}
</a>
</nav>
</div>
<div class="pt-50px" *ngIf="appraisalCompentency.dataList.length">
<div *ngFor="let item of appraisalCompentency.dataList; let i=index ; let f= first"
[id]="'underline-'+(i+1)" role="tabpanel" [class.hidden]="!f">
<div class="pb-2">
<div class="w-full min-height-50px justify-between items-center pb-2">
<div class="px-2rem py-3 bg-soft-secondary font-size-18px font-weight-700 text-primary">
ข้อมูลพนักงาน
</div>
</div>
<div class="p-2 grid grid-cols-12">
<div class="col-span-2"></div>
<div class="col-span-1 text-secondary">รหัสพนักงาน</div>
<div class="col-span-2">{{evaluatee.data.employeeId}}</div>
<div class="col-span-1 text-secondary">ชื่อ - สกุล</div>
<div class="col-span-6">{{evaluatee.data.thFullName}}</div>
</div>
<div class="p-2 grid grid-cols-12">
<div class="col-span-2"></div>
<div class="col-span-1 text-secondary">ตำเเหน่ง</div>
<div class="col-span-2">{{evaluatee.data.position.tdesc}}</div>
<div class="col-span-1 text-secondary">ฝ่าย</div>
<div class="col-span-6">{{evaluatee.data.bu1.tdesc}}</div>
</div>
<div class="p-2 grid grid-cols-12">
<div class="col-span-2"></div>
<div class="col-span-1 text-secondary">แผนก</div>
<div class="col-span-2">{{evaluatee.data.bu2.tdesc}}</div>
<div class="col-span-1 text-secondary">ส่วน</div>
<div class="col-span-6">{{evaluatee.data.bu3.tdesc}}</div>
</div>
<div class="p-2 grid grid-cols-12">
<div class="col-span-2"></div>
<div class="col-span-1 text-secondary">ส่วนย่อย 1</div>
<div class="col-span-2">{{evaluatee.data.bu4.tdesc}}</div>
<div class="col-span-1 text-secondary">ส่วนย่อย 2</div>
<div class="col-span-6">{{evaluatee.data.bu5.tdesc}}</div>
</div>
</div>
<div class="pb-2">
<div class="w-full min-height-50px justify-between items-center pb-2">
<div class="px-2rem py-3 bg-soft-secondary font-size-18px font-weight-700 text-primary">
รายละเอียดประเมินสมรรถนะ
</div>
</div>
<div class="overflow-auto rounded-top-0.65rem px-2rem p-2">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead class="height-50px">
<tr class="font-size-12px">
<ng-container
*ngFor="let item of ['รหัส','ชื่อเอกสาร','วันที่เริ่มต้น','วันที่สิ้นสุด','สถานะ','การจัดการ']; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="appraisalCompentency.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="!appraisalCompentency.loading&&!appraisalCompentencyFilter(i).length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!appraisalCompentency.loading&&appraisalCompentencyFilter(i).length">
<tr
*ngFor="let masfromEvaluationAssessment1 of appraisalCompentencyFilter(i);let i = index">
<td class="flex justify-center items-center">
{{masfromEvaluationAssessment1.competencyType.shortName}}
</td>
<td>
{{masfromEvaluationAssessment1.competencyType.tdesc}}
</td>
<td *ngIf="appraisalCompentency.select">
{{convertDate(appraisalCompentency.select.masfromEvaluationRound.apsPeriodStart)}}
</td>
<td *ngIf="appraisalCompentency.select">
{{convertDate(appraisalCompentency.select.masfromEvaluationRound.apsPeriodEnd)}}
</td>
<td>
{{masfromEvaluationAssessment1.masfromStatusType.tdesc}}
</td>
<td class="flex justify-center items-center">
<button type="button" class="ti-btn rounded-sm " (click)="selectCompentencyForm(masfromEvaluationAssessment1.competencyType.competencyTypeId);onEdit = true ;
pathTitle = ['การประเมินผล', 'ประเมินตนเอง','ประเมินผล']"
[class.ti-btn-soft-secondary]="masfromEvaluationAssessment1.masfromStatusType.code == 'employee'"
[class.ti-btn-soft-warning]="masfromEvaluationAssessment1.masfromStatusType.code != 'employee'&&masfromEvaluationAssessment1.masfromStatusType.code != 'Boss_finish'"
[class.ti-btn-soft-success]="masfromEvaluationAssessment1.masfromStatusType.code == 'Boss_finish'">
ประเมิน
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="pb-2">
<div class="w-full min-height-50px justify-between items-center pb-2">
<div class="px-2rem py-3 bg-soft-secondary font-size-18px font-weight-700 text-primary">
รายละเอียดประเมินผลงานการปฏิบัติงาน
</div>
</div>
<div class="overflow-auto rounded-top-0.65rem px-2rem p-2">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead class="height-50px">
<tr class="font-size-12px">
<ng-container
*ngFor="let item of ['รหัส','ชื่อเอกสาร','วันที่เริ่มต้น','วันที่สิ้นสุด','สถานะ','การจัดการ']; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="appraisalPms.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="!appraisalPms.loading&&!appraisalPmsFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!appraisalPms.loading&&appraisalPmsFilter().length">
<!-- <tr *ngFor="let item of appraisalPmsFilter();let i = index">
<td class="flex justify-center items-center">
{{item.data.masfromEvaluationRound.evaluationRoundId}}
</td>
<td>
{{item.data.masfromEvaluationRound.tdesc}}
</td>
<td>
{{convertDate(item.data.masfromEvaluationRound.apsPeriodStart)}}
</td>
<td>
{{convertDate(item.data.masfromEvaluationRound.apsPeriodEnd)}}
</td>
<td>
{{item.data.masfromStatusType.tdesc}}
</td>
<td class="flex justify-center items-center">
<span class="rounded-md bg-success text-white px-3 py-1 cursor-pointer">
ประเมิน
</span>
</td>
</tr> -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</ng-template>
<ng-container *ngIf="onEdit">
<app-evaluation [pathTitle]="['การประเมินผล', 'ประเมินตนเอง','ประเมิน']"
(sendReturnPath)="getAppraisalCompentencyList();onEdit = false ; pathTitle = ['การประเมินผล', 'ประเมินตนเอง']"
[evaluationRoundId]="appraisalCompentency.select?.masfromEvaluationRound?.evaluationRoundId || ''"
[evaluaterId]="evaluatee.data.employeeId" [evaluateeId]="evaluatee.data.employeeId"
[competencyTypeId]="competencyTypeId"></app-evaluation>
</ng-container>