<app-page-header [pathTitle]="pathTitle"></app-page-header>
<div class="bg-card-white">
</div>
<div class="block-main-content" *ngIf="appraisalCompentency.data">
<div class="pb-2rem px-2rem pt-1.5rem w-full min-height-50px justify-between items-center">
<div class="flex">
<button type="button" class="ti-btn ti-btn-outline ti-btn-outline-light h-20px m-0 shadow-md text-blue-500"
(click)="returnPath()">
<i class="ti ti-chevron-left"></i>
ย้อนกลับ
</button>
<div class="font-size-18px font-weight-700 align-center text-primary pl-1rem">
ประเมินผลประจำปี {{currentDate.getFullYear()}}
</div>
</div>
</div>
<div class="pb-2rem px-2rem">
<div class="font-size-18px font-weight-700 text-primary">
แบบประเมินสมรรถนะพนักงาน {{currentDate.getFullYear()}}
</div>
</div>
<div class="pb-2rem px-2rem">
<div class="p-2 grid grid-cols-6 gap-3">
<div class="grid-cols-1">
<div class="text-gray-400">เครื่องมือประเมิน</div>
<div class="text-gray-400">O = แบบสังเกต</div>
<div class="text-gray-400">P = แบบการปฏิบัติงาน</div>
<div class="text-gray-400">D = การบันทึก/เอกสาร</div>
<div class="text-gray-400">I = การสัมภาษณ์</div>
<div class="text-gray-400">T = แบบทดสอบ</div>
</div>
<div class="grid-cols-1">
<div class="text-gray-400">คำชี้แจง</div>
<div class="text-gray-400">- ใช้วิธีประเมินโดย ผู้บังคับบัญชา = 100 %</div>
</div>
<div class="col-span-3 grid-cols-1">
<div class="text-gray-400">ระดับความสามารถ (Target Degree)</div>
<div class="text-gray-400">ระดับ 1 = ไม่มีความรู้พื้นฐานเลย ขาดทักษะในงาน</div>
<div class="text-gray-400">ระดับ 2 = มีความรู้ในงานบ้างแต่ยังไม่สามารถ ประยุกต์ใช้ในงานได้</div>
<div class="text-gray-400">ระดับ 3 = นำความรู้มาประยุกต์ใช้ในงานได้ ปฏิบัติงานเองได้ด้วยตัวเอง
แก้ไขปัญหาหน้างานได้</div>
<div class="text-gray-400">ระดับ 4 = สอนผู้อื่นได้ มีความคล่องตัว เชื่อมโยง ความรู้ในงานได้</div>
<div class="text-gray-400">ระดับ 5 = มีความชำนาญ เชี่ยวชาญ เป็นที่ยอมรับ ในองค์กร</div>
</div>
</div>
</div>
<div class="pb-2rem px-2rem">
<div class="overflow-auto rounded-top-0.65rem">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover2">
<thead class="height-50px">
<tr class="font-size-12px">
<ng-container
*ngFor="let item of ['ลำดับที่','รหัสสมรรถนะ','ชื่อสมรรถนะ','Behavior Indicator (BI)','เครื่องมือประเมิน\n(ตัวย่อ)\n(O,P,D,I,T)']">
<th scope="col" rowspan="2"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700 ">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
<th scope="col" colspan="5"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
ระดับความสามารถ (Target Degree)
</th>
</tr>
<tr class="font-size-12px">
<ng-container *ngFor="let item of [5,4,3,2,1]">
<th scope="col"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
{{item}}
</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().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!appraisalCompentency.loading&&appraisalCompentencyFilter().length">
<ng-container *ngFor="let item2 of appraisalCompentencyFilter();let i = index">
<tr *ngFor="let bi of item2.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList;let i2 = index;let f = first"
(mouseenter)="hoveredCode = item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyCourseId"
(mouseleave)="hoveredCode = null"
[ngClass]="{ 'table-hover2': item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyCourseId === hoveredCode ,'border-none':!f }">
<td class="align-start text-center">
<ng-container *ngIf="f">
{{i+1}}
</ng-container>
</td>
<td class="align-start text-center">
<ng-container *ngIf="f">
{{item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}
</ng-container>
</td>
<td class="align-start !white-space-normal">
<ng-container *ngIf="f">
{{item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.tdesc}}
</ng-container>
</td>
<td class="align-start !white-space-normal">
{{bi.behavioralIndicators}}
</td>
<td class="align-center text-center">
{{bi.assessmentId}}
</td>
<td class="align-center text-center" *ngFor="let value of [5,4,3,2,1]; let i3=index">
<input type="radio" [name]="'radio'+i+''+i2" class="ti-form-radio"
[id]="'radio'+i+''+i2+''+i3" [class.cursor-pointer]="canEdit"
[class.cursor-not-allowed]="!canEdit" [value]="value" [disabled]="!canEdit"
[(ngModel)]="bi.competencyBehavioral.scoreTopicExpectation"
(ngModelChange)="calnumberCheck()">
</td>
</tr>
</ng-container>
</tbody>
</table>
</div>
</div>
<div class="pb-1rem px-2rem">
<div class="py-2 grid grid-cols-11">
<div class="col-span-8">ระดับความสามารถ (Target Degree)</div>
<div class="col-span-3 grid grid-cols-5">
<div class="col-span-1 text-center" *ngFor="let item of [5,4,3,2,1]">{{item}}</div>
</div>
</div>
<div class="py-2 grid grid-cols-11">
<div class="col-span-8">รวมจำนวนเครื่องหมายแต่ละช่อง (1)</div>
<div class="col-span-3 grid grid-cols-5">
<div class="col-span-1 text-center">
{{appraisalCompentency.data.masfromEvaluationAssessment1lList[0].numberCheck5}}</div>
<div class="col-span-1 text-center">
{{appraisalCompentency.data.masfromEvaluationAssessment1lList[0].numberCheck4}}</div>
<div class="col-span-1 text-center">
{{appraisalCompentency.data.masfromEvaluationAssessment1lList[0].numberCheck3}}</div>
<div class="col-span-1 text-center">
{{appraisalCompentency.data.masfromEvaluationAssessment1lList[0].numberCheck2}}</div>
<div class="col-span-1 text-center">
{{appraisalCompentency.data.masfromEvaluationAssessment1lList[0].numberCheck1}}</div>
</div>
</div>
<div class="py-2 grid grid-cols-11">
<div class="col-span-8">ตัวคูณคะแนนในแต่ละช่อง (2)</div>
<div class="col-span-3 grid grid-cols-5">
<div class="col-span-1 text-center">{{setting.data.settingScore5}}</div>
<div class="col-span-1 text-center">{{setting.data.settingScore4}}</div>
<div class="col-span-1 text-center">{{setting.data.settingScore3}}</div>
<div class="col-span-1 text-center">{{setting.data.settingScore2}}</div>
<div class="col-span-1 text-center">{{setting.data.settingScore1}}</div>
</div>
</div>
<div class="py-2 grid grid-cols-11">
<div class="col-span-8">ถ่วงน้ำหนักผลรวม 1X2</div>
<div class="col-span-3 grid grid-cols-5">
<div class="col-span-1 text-center" *ngFor="let item of [5,4,3,2,1]">{{calWeightScore(item)}}</div>
</div>
</div>
<div class="py-2 grid grid-cols-11">
<div class="col-span-8">คะแนนรวมหลังถ่วงน้ำ</div>
<div class="col-span-3 grid grid-cols-5">
<div class="col-span-5 text-center">
{{appraisalCompentency.data.masfromEvaluationAssessment1lList[0].weightedTotal}}</div>
</div>
</div>
<div class="py-2 grid grid-cols-11">
<div class="col-span-8">คะแนนเฉลี่ยคิดเป็น</div>
<div class="col-span-3 grid grid-cols-5">
<div class="col-span-5 text-center">
{{showNumber(appraisalCompentency.data.masfromEvaluationAssessment1lList[0].averageScore)}}
</div>
</div>
</div>
</div>
<div class="pb-2rem px-2rem">
<div class="overflow-auto rounded-top-0.65rem">
<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 ['เกณฑ์การให้คะแนนการประประเมิน Check Sheet E01','ผลประเมิน (A)','สรุปผล Gap'];let f = first ;let l = last">
<th scope="col" [attr.rowspan]="f?'1':'2'" [attr.colspan]="f?'2':'1'"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700 ">{{ item }}</span>
<div *ngIf="!f&&!l" class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
<th *ngIf="f" scope="col" rowspan="2"
class="relative bg-soft-secondary text-primary !text-center !p-0">
<div class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
<tr class="font-size-12px">
<ng-container *ngFor="let item of ['เกณฑ์การให้คะแนน','เงื่อนไข']">
<th scope="col"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
{{item}}
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="checkSheet.length">
<tr *ngFor="let item of checkSheet;let i = index">
<td class="align-start" rowspan="2">
<div *ngFor="let item2 of item.score">
<span>{{item2}} </span><br>
</div>
</td>
<td class="align-start" rowspan="2">
<div *ngFor="let item2 of item.condition">
<span>{{item2}} </span><br>
</div>
</td>
<td class="!p-0"></td>
<td class="align-start text-center">
{{calAverage(appraisalCompentency.data.masfromEvaluationAssessment1lList[0].averageScore)}}
</td>
<td class="align-start text-center">
{{calGap(appraisalCompentency.data.masfromEvaluationAssessment1lList[0].averageScore)}}
</td>
</tr>
<tr>
<td class="align-start !white-space-normal" colspan="4">
หมายเหตุ<br>
ผลการประเมินอาจมีการเปลี่ยนแปลงเงื่อนไขข้อ 1-3 เนื่องจากมีคะแนนต่ำกว่าเกณฑ์ในบางข้อ
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="py-1rem px-2rem">
<div class="py-2 grid grid-cols-7 gap-3">
<div class="col-span-1">ผู้ถูกประเมิน</div>
<div class="col-span-1">
{{appraisalCompentency.data.apsassessy.thFullName}}</div>
<div class="col-span-1">
<input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none "
[checked]="appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsassessyStatus=='2'">
<label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
</div>
<div class="col-span-2">
<textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
[class.!bg-input-readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='0'||!canEdit"
[readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='0'||!canEdit"
[(ngModel)]="appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsassessyComment"></textarea>
<span class="pt-2">
วันที่ :
{{convertDate(appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsassessyDate)}}
</span>
</div>
</div>
<div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalCompentency.data.apsapprove1.employeeId">
<div class="col-span-1">
{{appraisalCompentency.data.apsapprove2.employeeId?'ผู้ประเมิน1':'ผู้อนุมัติ'}}
</div>
<div class="col-span-1">
{{appraisalCompentency.data.apsapprove1.thFullName}}</div>
<div class="col-span-1">
<input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
[checked]="appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove1Status=='2'">
<label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
</div>
<div class="col-span-2">
<textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
[class.!bg-input-readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='1'||!canEdit"
[readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='1'||!canEdit"
[(ngModel)]="appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove1Comment"></textarea>
<span class="pt-2">
วันที่ :
{{convertDate(appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove1Date)}}
</span>
</div>
</div>
<div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalCompentency.data.apsapprove2.employeeId">
<div class="col-span-1">
{{appraisalCompentency.data.apsapprove3.employeeId?'ผู้ประเมิน2':'ผู้อนุมัติ'}}
</div>
<div class="col-span-1">
{{appraisalCompentency.data.apsapprove2.thFullName}}</div>
<div class="col-span-1">
<input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
[checked]="appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove2Status=='2'">
<label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
</div>
<div class="col-span-2">
<textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
[class.!bg-input-readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='2'||!canEdit"
[readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='2'||!canEdit"
[(ngModel)]="appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove2Comment"></textarea>
<span class="pt-2">
วันที่ :
{{convertDate(appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove2Date)}}
</span>
</div>
</div>
<div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalCompentency.data.apsapprove3.employeeId">
<div class="col-span-1">
{{appraisalCompentency.data.apsapprove4.employeeId?'ผู้ประเมิน3':'ผู้อนุมัติ'}}
</div>
<div class="col-span-1">
{{appraisalCompentency.data.apsapprove3.thFullName}}</div>
<div class="col-span-1">
<input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
[checked]="appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove3Status=='2'">
<label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
</div>
<div class="col-span-2">
<textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
[class.!bg-input-readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='3'||!canEdit"
[readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='3'||!canEdit"
[(ngModel)]="appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove3Comment"></textarea>
<span class="pt-2">
วันที่ :
{{convertDate(appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove3Date)}}
</span>
</div>
</div>
<div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalCompentency.data.apsapprove4.employeeId">
<div class="col-span-1">
{{appraisalCompentency.data.apsapprove5.employeeId?'ผู้ประเมิน4':'ผู้อนุมัติ'}}
</div>
<div class="col-span-1">
{{appraisalCompentency.data.apsapprove4.thFullName}}</div>
<div class="col-span-1">
<input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
[checked]="appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove4Status=='2'">
<label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
</div>
<div class="col-span-2">
<textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
[class.!bg-input-readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='4'||!canEdit"
[readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='4'||!canEdit"
[(ngModel)]="appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove4Comment"></textarea>
<span class="pt-2">
วันที่ :
{{convertDate(appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove4Date)}}
</span>
</div>
</div>
<div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalCompentency.data.apsapprove5.employeeId">
<div class="col-span-1">
ผู้อนุมัติ
</div>
<div class="col-span-1">
{{appraisalCompentency.data.apsapprove5.thFullName}}</div>
<div class="col-span-1">
<input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
[checked]="appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove5Status=='2'">
<label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
</div>
<div class="col-span-2">
<textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
[class.!bg-input-readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='5'||!canEdit"
[readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='5'||!canEdit"
[(ngModel)]="appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove5Comment"></textarea>
<span class="pt-2">
วันที่ :
{{convertDate(appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove5Date)}}
</span>
</div>
</div>
</div>
<div class="flex justify-center mb-1rem pb-2rem" *ngIf="canEdit">
<button type="submit" class="ti-btn ti-btn-success mx-2rem" (click)="save('draft')">
บันทึกร่าง
</button>
<button type="submit" class="ti-btn ti-btn-success mx-2rem" (click)="save()">
บันทึกข้อมูล
</button>
</div>
</div>