Skip to content

M
mySkill-x
Commit 9724ea47 by Nattana Chaiyamat
Options

แบบประเมินสมรรถนะ

parent 7961588b
Showing with 1607 additions and 3048 deletions
src/app/components/dashboard/dashboard-routing.module.ts
......@@ -38,7 +38,6 @@ import { EvaluationFactorsComponent } from '../performance-management-evaluation
import { GradeRegistrationComponent } from '../competency-assessment/grade-registration/grade-registration.component';
import { SettingPerformanceEvalutionComponent } from '../performance-management-evaluation/setting-performance-evalution/setting-performance-evalution.component';
import { SelfEvaluationComponent } from '../performance-evaluation/self-evaluation/self-evaluation.component';
import { IdpEvalutionComponent } from '../performance-evaluation/idp-evaluation/idp-evalution.component';
import { PmsGradeRegistrationComponent } from '../performance-management-evaluation/pms-grade-registration/pms-pms-grade-registration.component';
import { DayTypeRegistryComponent } from '../company-components/day-type-registry/day-type-registry.component';
import { TimeAttendanceComponent } from '../performance-management-evaluation/time-attendance/time-attendance.component';
......
src/app/components/dashboard/dashboard.module.ts
......@@ -109,9 +109,7 @@ import { SettingPerformanceEvalutionComponent } from '../performance-management-
import { AssessmentSystemConfigurationComponent } from '../performance-management-evaluation/setting-performance-evalution/assessment-system-configuration/assessment-system-configuration.component';
import { SelfEvaluationComponent } from '../performance-evaluation/self-evaluation/self-evaluation.component';
import { CompanyRegistrationPageComponent } from '../company-components/company-registration/company-registration-page/company-registration-page.component';
import { IdpEvalutionComponent } from '../performance-evaluation/idp-evaluation/idp-evalution.component';
import { PmsEvalutionComponent } from '../performance-evaluation/pms-evaluation/pms-evalution.component';
import { EvaluationComponent } from '../performance-evaluation/evaluation/evaluation.component';
import { CompanyService } from 'src/app/shared/services/company.service';
import { CompetencytypeService } from 'src/app/shared/services/competencytype.service';
import { CompetencytopicService } from 'src/app/shared/services/competencytopic.service';
......@@ -293,10 +291,8 @@ export class CustomDateAdapter extends NativeDateAdapter {
SettingPerformanceEvalutionComponent,
AssessmentSystemConfigurationComponent,
SelfEvaluationComponent,
IdpEvalutionComponent,
CompanyRegistrationPageComponent,
PmsEvalutionComponent,
EvaluationComponent,
ManageUserComponent,
PmsGradeRegistrationComponent,
PmsGradeManagementComponent,
......
src/app/components/performance-evaluation/evaluation/evaluation.component.html deleted 100644 → 0
<app-page-header [pathTitle]="pathTitle"></app-page-header>
<div class="bg-card-white">
</div>
<div class="block-main-content">
<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>
<ng-container *ngIf="appraisalCompentency.data">
<div class="pb-2rem px-2rem">
<div class="font-size-18px font-weight-700 text-primary">
แบบประเมินสมรรถนะพนักงาน
</div>
</div>
<div class="pb-2rem">
<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-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.competencyIndicatorsCourses0.competencyTopic.competencyTopicId"
(mouseleave)="hoveredCode = null"
[ngClass]="{ 'table-hover2': item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId === 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.competencyTopic.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">
{{showNumber(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-hover2">
<thead class="height-50px">
<tr class="font-size-12px">
<ng-container
*ngFor="let item of ['เกณฑ์การให้คะแนนการประเมิน','ผลประเมิน (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>
</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" (mouseenter)="hoveredCode2 = 'true'"
(mouseleave)="hoveredCode2 = null" [ngClass]="{ 'table-hover2': 'true' === hoveredCode2 }">
<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="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 (mouseenter)="hoveredCode2 = 'true'" (mouseleave)="hoveredCode2 = null"
[ngClass]="{ 'table-hover2': 'true' === hoveredCode2 }">
<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'||!canSave"
[readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='0'||!canSave"
[(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'||!canSave"
[readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='1'||!canSave"
[(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'||!canSave"
[readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='2'||!canSave"
[(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'||!canSave"
[readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='3'||!canSave"
[(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'||!canSave"
[readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='4'||!canSave"
[(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'||!canSave"
[readonly]="!appraisalCompentency.data||appraisalCompentency.data.currentStep!='5'||!canSave"
[(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="canSave">
<button *ngIf="appraisalCompentency.data.checkStep!='0'&&appraisalCompentency.data.checkStep!='1'"
type="submit" class="ti-btn ti-btn-danger mx-2rem" (click)="save('noApprove')">
ไม่อนุมัติ
</button>
<button type="submit" class="ti-btn ti-btn-success mx-2rem" (click)="save('draft')">
บันทึกร่าง
</button>
<button type="submit" class="ti-btn ti-btn-secondary mx-2rem" (click)="save('approve')">
<ng-container *ngIf="appraisalCompentency.data.checkStep=='0'">
ยืนยันข้อมูล
</ng-container>
<ng-container *ngIf="appraisalCompentency.data.checkStep!='0'">
อนุมัติ
</ng-container>
</button>
</div>
</ng-container>
</div>
\ No newline at end of file
src/app/components/performance-evaluation/evaluation/evaluation.component.ts deleted 100644 → 0
import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { AppraisalCompentencyModel2 } from 'src/app/shared/model/appraisal-competency.model';
import { EmployeeModel, MyEmployeeModel } from 'src/app/shared/model/employee.model';
import { SettingAssessmentModel, MySettingAssessmentModel } from 'src/app/shared/model/setting-assessment.model';
import { AppraisalService } from 'src/app/shared/services/appraisal.service';
import { EmployeeService } from 'src/app/shared/services/employee.service';
import { SettingAssessmentService } from 'src/app/shared/services/setting-assessment.service';
import Swal from 'sweetalert2';
@Component({
selector: 'app-evaluation',
templateUrl: './evaluation.component.html',
styleUrls: ['./evaluation.component.scss']
})
export class EvaluationComponent implements OnInit {
@Input() pathTitle: string[] = []
@Input() evaluationRoundId = ""
@Input() evaluateeId = ""
@Input() evaluaterId = ""
@Input() competencyTypeId = ""
@Output() sendReturnPath: EventEmitter<any> = new EventEmitter<any>();
canEdit = false
canSave = false
hoveredCode: string | null = null;
hoveredCode2: string | null = null;
currentDate = new Date()
appraisalCompentency: { loading: boolean, data?: AppraisalCompentencyModel2 } = { loading: false, data: undefined }
setting: { loading: boolean, data: SettingAssessmentModel } = { loading: false, data: new MySettingAssessmentModel() }
checkSheet: {
score: string[],
condition: string[]
}[] = [{
score: ["หากได้คะแนน 90 - 100% ถือว่า Gap +1", "หากได้คะแนน 80 - 89% ถือว่า ไม่มี Gap", "หากได้คะแนน 60 - 79% ถือว่า Gap - 1", "หากได้คะแนน 40 - 59% ถือว่า Gap -2", "หากได้คะแนน 0 - 39% ถือว่า Gap - 3"],
condition: ["1.หากได้คะแนนสูงกว่า 80% แต่มี 3 2 หรือ 1 ด้วย ถือว่า Gap -1", "2.หากได้คะแนนต่ำกว่า 80% แต่มี 4 และ 5 ให้คิด Gap ตาม %", "3.คะแนนต่ำกว่า 80% แต่มี 2 และ 1 ให้คิด Gap ตาม %"],
}]
evaluatee: { loading: boolean, data: EmployeeModel } = { loading: false, data: new MyEmployeeModel() }
constructor(private appraisalService: AppraisalService,
private employeeService: EmployeeService,
private cdr: ChangeDetectorRef,
private settingAssessmentService: SettingAssessmentService
) {
}
ngOnInit(): void {
this.getAppraisalCompentencyForm()
this.getSettingList()
this.getEvaluatee()
}
getEvaluatee() {
this.evaluatee.loading = true
this.employeeService.getWorkingById(this.evaluateeId).subscribe({
next: response => {
this.evaluatee.data = new MyEmployeeModel(response)
this.evaluatee.loading = false
this.cdr.detectChanges()
}, error: error => {
this.evaluatee.loading = false
this.cdr.detectChanges()
}
})
}
getSettingList() {
this.setting.loading = true
this.settingAssessmentService.get().subscribe({
next: response => {
this.setting.data = new MySettingAssessmentModel(response)
this.setting.loading = false
this.cdr.detectChanges()
}, error: error => {
this.setting.loading = false
this.cdr.detectChanges()
}
})
}
getAppraisalCompentencyForm() {
this.appraisalCompentency.loading = true
this.appraisalService.getFormCompentencyById(this.evaluationRoundId, this.evaluateeId, this.competencyTypeId).subscribe({
next: response => {
this.appraisalCompentency.data = JSON.parse(JSON.stringify(response))
if (this.appraisalCompentency.data?.masfromEvaluationAssessment1lList[0]) {
this.canSave = (this.appraisalCompentency.data.currentStep == this.appraisalCompentency.data.checkStep) && this.appraisalCompentency.data.masfromStatusType.code != 'Boss_finish' && this.appraisalCompentency.data.masfromStatusType.code != 'Not_evaluating_yet'
this.canEdit = (this.appraisalCompentency.data.currentStep == this.appraisalCompentency.data.checkStep && (+(this.appraisalCompentency.data.checkStep) <= 1)) && this.appraisalCompentency.data.masfromStatusType.code != 'Boss_finish' && this.appraisalCompentency.data.masfromStatusType.code != 'Not_evaluating_yet'
switch (this.appraisalCompentency.data?.currentStep) {
case ("0"): {
if (this.canSave) {
this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsassessyDate = this.currentDate.toISOString().split('T')[0];
}
break
}
case ("1"): {
if (this.canSave) {
this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove1Date = this.currentDate.toISOString().split('T')[0];
}
break
}
case ("2"): {
if (this.canSave) {
this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove2Date = this.currentDate.toISOString().split('T')[0];
}
break
}
case ("3"): {
if (this.canSave) {
this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove3Date = this.currentDate.toISOString().split('T')[0];
}
break
}
case ("4"): {
if (this.canSave) {
this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove4Date = this.currentDate.toISOString().split('T')[0];
}
break
}
case ("5"): {
if (this.canSave) {
this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove5Date = this.currentDate.toISOString().split('T')[0];
}
break
}
default: { return }
}
}
this.calnumberCheck()
this.appraisalCompentency.loading = false
this.cdr.detectChanges()
}, error: error => {
this.appraisalCompentency.loading = false
this.cdr.detectChanges()
}
})
}
appraisalCompentencyFilter() {
return this.appraisalCompentency.data?.masfromEvaluationAssessment1lList[0].masfromEvaluationAssessment2List || []
}
calnumberCheck() {
if (this.appraisalCompentency.data?.masfromEvaluationAssessment1lList[0]) {
this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].numberCheck1 = this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].masfromEvaluationAssessment2List.map((x: any) => x.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList.filter((y: any) => y.competencyBehavioral.scoreTopicExpectation == 1).length).reduce((acc: any, num: any) => acc + num, 0)
this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].numberCheck2 = this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].masfromEvaluationAssessment2List.map((x: any) => x.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList.filter((y: any) => y.competencyBehavioral.scoreTopicExpectation == 2).length).reduce((acc: any, num: any) => acc + num, 0)
this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].numberCheck3 = this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].masfromEvaluationAssessment2List.map((x: any) => x.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList.filter((y: any) => y.competencyBehavioral.scoreTopicExpectation == 3).length).reduce((acc: any, num: any) => acc + num, 0)
this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].numberCheck4 = this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].masfromEvaluationAssessment2List.map((x: any) => x.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList.filter((y: any) => y.competencyBehavioral.scoreTopicExpectation == 4).length).reduce((acc: any, num: any) => acc + num, 0)
this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].numberCheck5 = this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].masfromEvaluationAssessment2List.map((x: any) => x.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList.filter((y: any) => y.competencyBehavioral.scoreTopicExpectation == 5).length).reduce((acc: any, num: any) => acc + num, 0)
this.calWeightTotal()
}
this.cdr.detectChanges()
}
calWeightScore(numberCheck: number) {
if (this.appraisalCompentency.data?.masfromEvaluationAssessment1lList[0]) {
switch (numberCheck) {
case (1): {
return this.showNumber((this.setting.data.settingScore1) * this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].numberCheck1)
}
case (2): {
return this.showNumber((this.setting.data.settingScore2) * this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].numberCheck2)
}
case (3): {
return this.showNumber((this.setting.data.settingScore3) * this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].numberCheck3)
}
case (4): {
return this.showNumber((this.setting.data.settingScore4) * this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].numberCheck4)
}
case (5): {
return this.showNumber((this.setting.data.settingScore5) * this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].numberCheck5)
}
default: { return }
}
}
return
}
calWeightTotal() {
if (this.appraisalCompentency.data?.masfromEvaluationAssessment1lList[0]) {
this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].weightedTotal = 0
this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].weightedTotal = +(((this.calWeightScore(1) ?? 0) + (this.calWeightScore(2) ?? 0) + (this.calWeightScore(3) ?? 0) + (this.calWeightScore(4) ?? 0) + (this.calWeightScore(5) ?? 0)).toFixed(2))
this.cdr.detectChanges()
this.calAverageScore()
}
}
calAverageScore() {
if (this.appraisalCompentency.data?.masfromEvaluationAssessment1lList[0]) {
const length = this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].masfromEvaluationAssessment2List.map((x: any) => x.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList.length).reduce((acc: any, num: any) => acc + num, 0)
const max = Math.max(...[+(this.setting.data.settingScore5),
+(this.setting.data.settingScore4),
+(this.setting.data.settingScore3),
+(this.setting.data.settingScore2),
+(this.setting.data.settingScore1)])
const total = length * max
if (total) {
this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].averageScore = 0
this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].averageScore = this.showNumber((this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].weightedTotal * 100) / total)
this.cdr.detectChanges()
}
}
}
calAverage(score: number | string) {
const roundedScore = this.showNumber(score) % 1 <= 0.5 ? Math.floor(this.showNumber(score)) : Math.round(this.showNumber(score));
if (roundedScore >= 90 && roundedScore <= 100) {
return "5";
} else if (roundedScore >= 80 && roundedScore <= 89) {
return "4";
} else if (roundedScore >= 60 && roundedScore <= 79) {
return "3";
} else if (roundedScore >= 40 && roundedScore <= 59) {
return "2";
} else {
return "1";
}
}
calGap(score: number | string) {
if (this.appraisalCompentency.data?.masfromEvaluationAssessment1lList[0]) {
const roundedScore = this.showNumber(score) % 1 <= 0.5 ? Math.floor(this.showNumber(score)) : Math.round(this.showNumber(score));
if (roundedScore >= 90 && roundedScore <= 100) {
if (this.appraisalCompentency.data?.masfromEvaluationAssessment1lList[0].numberCheck1 || this.appraisalCompentency.data?.masfromEvaluationAssessment1lList[0].numberCheck2 || this.appraisalCompentency.data?.masfromEvaluationAssessment1lList[0].numberCheck3) {
return "-1";
}
return "+1";
} else if (roundedScore >= 80 && roundedScore <= 89) {
if (this.appraisalCompentency.data?.masfromEvaluationAssessment1lList[0].numberCheck1 || this.appraisalCompentency.data?.masfromEvaluationAssessment1lList[0].numberCheck2 || this.appraisalCompentency.data?.masfromEvaluationAssessment1lList[0].numberCheck3) {
return "-1";
}
return "0";
} else if (roundedScore >= 60 && roundedScore <= 79) {
return "-1";
} else if (roundedScore >= 40 && roundedScore <= 59) {
return "-2";
} else {
return "-3";
}
}
return
}
convertDate(dateInput?: string | Date): string {
let date = new Date()
if (dateInput) {
if (typeof dateInput === 'string') {
const [year, month, day] = dateInput.split('-').map(Number);
date = new Date(year, month - 1, day);
} else {
date = dateInput
}
} else {
return ''
}
return date?.toLocaleDateString('th-TH', { day: 'numeric', month: 'long', year: 'numeric' }) || ''
}
showNumber(text: number | string) {
const num = Number(text);
return isNaN(num) ? 0 : +(+num.toFixed(2));
}
returnPath() {
this.sendReturnPath.emit()
}
save(status: 'approve' | 'noApprove' | 'draft') {
let title = ''
let text = ''
let confirmButtonText = ''
let approveStatus = '0'
if (status == 'draft') {
title = 'บันทึกแบบร่าง'
text = 'คุณต้องการบันทึกแบบร่างของการประเมินนี้ใช่หรือไม่'
confirmButtonText = 'ยืนยันการบันทึก'
approveStatus = '1'
} else if (status == 'approve') {
approveStatus = '2'
if (this.appraisalCompentency?.data?.checkStep == '0') {
title = 'ยืนยันข้อมูล'
text = 'คุณต้องการยืนยันข้อมูลการประเมินนี้ใช่หรือไม่'
confirmButtonText = 'ยืนยันการบันทึก'
} else {
title == 'อนุมัติ'
text = 'คุณต้องการอนุมัติข้อมูลการประเมินนี้ใช่หรือไม่'
confirmButtonText = 'ยืนยันการอนุมัติ'
}
} else if (status == 'noApprove') {
approveStatus = '0'
title == 'ไม่อนุมัติ'
text = 'คุณต้องการไม่อนุมัติข้อมูลการประเมินนี้ใช่หรือไม่'
confirmButtonText = 'ยืนยันการไม่อนุมัติ'
}
Swal.fire({
iconHtml: `
<div class="flex items-center justify-center rounded-full !h-80px !w-80px" style="background-color: #E8F8EE;">
<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="39" height="39" fill="#D2D2D2"/>
<g id="Component">
<g id="alert cart">
<g id="mdi:file-export">
<circle cx="22.5" cy="19.5" r="33.5" fill="#E8F8EE"/>
<path d="M9.75 3.25C8.88805 3.25 8.0614 3.59241 7.4519 4.2019C6.84241 4.8114 6.5 5.63805 6.5 6.5V32.5C6.5 33.362 6.84241 34.1886 7.4519 34.7981C8.0614 35.4076 8.88805 35.75 9.75 35.75H29.25C30.112 35.75 30.9386 35.4076 31.5481 34.7981C32.1576 34.1886 32.5 33.362 32.5 32.5V13L22.75 3.25M21.125 5.6875L30.0625 14.625H21.125M14.5113 19.8575H26V31.3463L22.555 27.9013L17.9563 32.5L13.3575 27.9013L17.9563 23.3188"
fill="#1DBE5A"/>
</g>
</g>
</g>
</svg>
</div>
`,
title: title,
text: text,
showCancelButton: true,
confirmButtonText: confirmButtonText,
cancelButtonText: 'ย้อนกลับ',
customClass: {
title: '!swal2-title-mt-20px',
actions: '!swal2-actions-mt-20px',
icon: '!swal2-icon-no-border',
confirmButton: '!swal2-button-bg-green',
cancelButton: '!swal2-button-bg-gray',
},
}).then((result) => {
if (result.isConfirmed && this.appraisalCompentency) {
this.saveApi(approveStatus)
} else if (result.dismiss === Swal.DismissReason.cancel) {
Swal.fire({
title: 'ยกเลิก!',
text: 'การบันทึกถูกยกเลิก',
icon: 'error',
customClass: {
confirmButton: '!swal2-button-bg-danger',
}
})
}
})
}
saveApi(approveStatus: string) {
let body = this.appraisalCompentency.data
switch (this.appraisalCompentency.data?.currentStep) {
case ("0"): {
body = {
...this.appraisalCompentency.data, masfromEvaluationAssessment1lList: [{
...this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0],
apsassessyStatus: approveStatus
}]
}
break
}
case ("1"): {
body = {
...this.appraisalCompentency.data, masfromEvaluationAssessment1lList: [{
...this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0],
apsapprove1Status: approveStatus
}]
}
break
}
case ("2"): {
body = {
...this.appraisalCompentency.data, masfromEvaluationAssessment1lList: [{
...this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0],
apsapprove1Status: approveStatus == '0' ? approveStatus : this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove1Status,
apsapprove2Status: approveStatus
}]
}
break
}
case ("3"): {
body = {
...this.appraisalCompentency.data, masfromEvaluationAssessment1lList: [{
...this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0],
apsapprove2Status: approveStatus == '0' ? approveStatus : this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove2Status,
apsapprove3Status: approveStatus
}]
}
break
}
case ("4"): {
body = {
...this.appraisalCompentency.data, masfromEvaluationAssessment1lList: [{
...this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0],
apsapprove3Status: approveStatus == '0' ? approveStatus : this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove3Status,
apsapprove4Status: approveStatus
}]
}
break
}
case ("5"): {
body = {
...this.appraisalCompentency.data, masfromEvaluationAssessment1lList: [{
...this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0],
apsapprove4Status: approveStatus == '0' ? approveStatus : this.appraisalCompentency.data.masfromEvaluationAssessment1lList[0].apsapprove4Status,
apsapprove5Status: approveStatus
}]
}
break
}
default: { return }
}
this.appraisalService.postCompetency(body).subscribe({
next: response => {
if (response.success) {
Swal.fire({
title: 'บันทึกสำเร็จ!',
text: 'การประเมินของคุณถูกบันทึกแล้ว',
icon: 'success',
customClass: {
confirmButton: '!swal2-button-bg-green',
}
});
this.getAppraisalCompentencyForm()
} else {
Swal.fire({
title: 'ยกเลิก!',
text: 'การบันทึกถูกยกเลิก',
icon: 'error',
customClass: {
confirmButton: '!swal2-button-bg-danger',
}
});
}
}, error: error => {
Swal.fire({
title: 'ยกเลิก!',
text: 'การบันทึกถูกยกเลิก',
icon: 'error',
customClass: {
confirmButton: '!swal2-button-bg-danger',
}
});
}
})
}
}
src/app/components/performance-evaluation/idp-evaluation/idp-evalution.component.html deleted 100644 → 0
<app-page-header [pathTitle]="pathTitle"></app-page-header>
<div class="bg-card-white">
</div>
<div class="block-main-content">
<ng-container *ngTemplateOutlet="idpEvaluation"></ng-container>
</div>
<ng-template #idpEvaluation>
<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">
ประเมินสมรรถนะ
</div>
</div>
</div>
<ng-container *ngIf="formIdp.data">
<div class="pb-2rem px-2rem">
<div class="font-size-18px font-weight-700 text-primary">
แผนพัฒนาบุคคลากรรายบุคคล
</div>
</div>
<div class="pb-2rem px-2rem">
<div class="font-size-18px font-weight-700 text-gray-500">
ส่วนที่ 1: ข้อมูลทั่วไป
</div>
</div>
<div class="pb-2rem px-2rem">
<div class="grid grid-cols-6">
<div class="col-span-6 grid grid-cols-6">
<div class="col-span-3 border p-2 pb-4">
<span>ผู้ใต้บังคับบัญชา</span>
</div>
<div class="col-span-3 border p-2 pb-4">
<span>ผู้บังคับบัญชา</span>
</div>
</div>
<div class="col-span-6 grid grid-cols-6">
<div class="col-span-3 grid grid-cols-4">
<div class="col-span-1 p-2 border pb-4">
<span>ชื่อ-สกุล</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>{{formIdp.data.apsassessy.thFullName || ""}}</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>ตำแหน่ง</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>{{formIdp.data.apsassessy.position.tdesc || ""}}</span>
</div>
</div>
<div class="col-span-3 grid grid-cols-4">
<div class="col-span-1 p-2 border pb-4">
<span>ชื่อ-สกุล</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>{{formIdp.data.boss.thFullName || ""}}</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>ตำแหน่ง</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>{{formIdp.data.boss.position.tdesc || ""}}</span>
</div>
</div>
</div>
<div class="col-span-6 grid grid-cols-6">
<div class="col-span-3 grid grid-cols-4">
<div class="col-span-1 p-2 border pb-4">
<span>งาน</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>{{formIdp.data.apsassessy.job.tdesc || ""}}</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>ฝ่าย</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>{{formIdp.data.apsassessy.bu1.tdesc || ""}}</span>
</div>
</div>
<div class="col-span-3 grid grid-cols-4">
<div class="col-span-1 p-2 border pb-4">
<span>งาน</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>{{formIdp.data.boss.job.tdesc || ""}}</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>ฝ่าย</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>{{formIdp.data.boss.bu1.tdesc || ""}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="pb-2rem px-2rem">
<div class="font-size-18px font-weight-700 text-gray-500">
ส่วนที่ 2: แนวทางการพัฒนา
</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">
<th scope="col" rowspan="3"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700 ">{{'สมรรถนะที่พัฒนา\n(Competency)'}}</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>
<th scope="col" rowspan="3"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700 ">
{{'ประเด็นตัวชี้พฤติกรรมที่ต้องพัฒนา\n(Behavior Indicators : BIs)'}}
</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>
<th scope="col" colspan="3"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700 ">เครื่องมือพัฒนา</span>
</th>
<th scope="col" rowspan="3"
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>
<th scope="col" colspan="2" rowspan="2"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700 ">หลักสูตรพัฒนาตาม CDR</span>
</th>
<th scope="col" rowspan="3"
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>
<th scope="col" rowspan="3"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700 ">ระยะเวลาที่พัฒนา</span>
</th>
</tr>
<tr class="font-size-12px">
<th scope="col"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
70
</th>
<th scope="col"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
20
</th>
<th scope="col"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
10
</th>
</tr>
<tr class="font-size-12px">
<th scope="col"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
OJT/Job Assignment
</th>
<th scope="col"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
Coach/Mentor
</th>
<th scope="col"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
Training
</th>
<th scope="col"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
รหัส
</th>
<th scope="col"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
ชื่อหลักสูตร
</th>
</tr>
</thead>
<tbody *ngIf="!formIdp.data.competencyIndicatorsCourses1.length">
<tr class="hover:table-hover2-hover">
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="formIdp.data.competencyIndicatorsCourses1.length">
<ng-container *ngFor=" let data of formIdp.data.competencyIndicatorsCourses1;let i = index">
<tr (mouseenter)="hoveredCode = data.indicatorsCourses0.competencyTopic.competencyTopicId"
(mouseleave)="hoveredCode = null"
[ngClass]="{ 'table-hover2': data.indicatorsCourses0.competencyTopic.competencyTopicId === hoveredCode }">
<td class="align-start">
{{i+1}}. {{data.indicatorsCourses0.competencyTopic.competencyTopicId}}
</td>
<td class="align-start !white-space-normal"
[class.bg-table-gray]="!data.idpDevelopmentPlan||!data.behavioralIndicators||!data.behavioralIndicators.length">
<ng-container *ngIf="data.idpDevelopmentPlan">
<div class="mb-3" *ngFor="let bis of data.behavioralIndicators;let i2 = index">
{{i2+1}}. {{bis.behavioralIndicators }}
</div>
</ng-container>
</td>
<td class="align-start text-center"
[class.bg-table-gray]="!data.idpDevelopmentPlan||!data.idpDevelopmentPlan.ojtJobAssignment">
<ng-container
*ngIf="data.idpDevelopmentPlan&&data.idpDevelopmentPlan.ojtJobAssignment">
<i class="ti ti-check fs-xxl !fw-b"></i>
</ng-container>
</td>
<td class="align-start text-center"
[class.bg-table-gray]="!data.idpDevelopmentPlan||!data.idpDevelopmentPlan.coachMentor">
<ng-container *ngIf="data.idpDevelopmentPlan&&data.idpDevelopmentPlan.coachMentor">
<i class="ti ti-check fs-xxl !fw-b"></i>
</ng-container>
</td>
<td class="align-start text-center"
[class.bg-table-gray]="!data.idpDevelopmentPlan||!data.idpDevelopmentPlan.training">
<ng-container *ngIf="data.idpDevelopmentPlan&&data.idpDevelopmentPlan.training">
<i class="ti ti-check fs-xxl !fw-b"></i>
</ng-container>
</td>
<td class="!p-0"></td>
<td class="align-start text-center"
[class.bg-table-gray]="canEdit?(!data.idpDevelopmentPlan?.training||(formIdp.data.masfromEvaluationIdp.idpStatus!='1' && !data.competencyCourse)):!data.competencyCourse">
<ng-container *ngIf="data.idpDevelopmentPlan&&data.idpDevelopmentPlan.training">
<div class="flex !items-center"
*ngFor="let competencyCourse of data.competencyCourse"
style="min-height: 100px;">
<i class="ti ti-book fs-xxl !fw-b"></i><br>
{{competencyCourse.competencyCourseId }}
</div>
</ng-container>
</td>
<td class="align-start text-center !white-space-normal"
[class.bg-table-gray]="canEdit?(!data.idpDevelopmentPlan?.training||(formIdp.data.masfromEvaluationIdp.idpStatus!='1' && !data.competencyCourse)):!data.competencyCourse">
<ng-container *ngIf="data.idpDevelopmentPlan&&data.idpDevelopmentPlan.training">
<ng-container
*ngFor="let competencyCourse of data.competencyCourse;let l = index;let last=last">
<div class="flex !items-center" style="min-height: 100px;">
{{competencyCourse.tdesc}}
<span class="ciricon border cursor-pointer" *ngIf="canEdit&&formIdp.data.masfromEvaluationIdp.idpStatus=='1'"
(click)="deleteCompetencyCourse(i,l)">
<i class="ri-close-line text-red-500"></i>
</span>
</div>
<button
*ngIf="last&&canEdit&&formIdp.data.masfromEvaluationIdp.idpStatus=='1'"
type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
(click)="openCompetencycourseDialog(i) ">
<i class="ri-add-line"></i>
Add
</button>
</ng-container>
</ng-container>
<ng-container
*ngIf="canEdit&&!data.competencyCourse?.length&&formIdp.data.masfromEvaluationIdp.idpStatus=='1'&&data.idpDevelopmentPlan?.training">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
(click)="openCompetencycourseDialog(i) ">
<i class="ri-add-line"></i>
Add
</button>
</ng-container>
</td>
<td class="!p-0"></td>
<td class="align-start text-center !white-space-normal"
[class.bg-table-gray]="!formIdp.data.masfromEvaluationRound.apsPeriodStart &&!formIdp.data.masfromEvaluationRound.apsPeriodEnd">
<ng-container
*ngIf="formIdp.data.masfromEvaluationRound.apsPeriodStart &&formIdp.data.masfromEvaluationRound.apsPeriodEnd">
จาก&nbsp;
</ng-container>
{{convertDateFormat(formIdp.data.masfromEvaluationRound.apsPeriodStart)}}
<ng-container
*ngIf="formIdp.data.masfromEvaluationRound.apsPeriodStart &&formIdp.data.masfromEvaluationRound.apsPeriodEnd">
&nbsp;ถึง&nbsp;
</ng-container>
{{convertDateFormat(formIdp.data.masfromEvaluationRound.apsPeriodEnd)}}
</td>
</tr>
</ng-container>
</tbody>
</table>
</div>
</div>
<div class="py-1rem px-2rem">
<div class="py-2 grid grid-cols-6 gap-3">
<div class="col-span-6">หมายเหตุ : กรณี HR จัดอบรมให้ต้องเป็นไปตามเกณฑ์ที่ส่วนกลางกำหนดขึ้น</div>
<div class="col-span-6 grid grid-cols-6 gap-2">
<div class="grid col-span-1 grid-cols-6 gap-2">
<div class="col-span-1">
<input type="checkbox" class="ti-form-checkbox" id="idpStatus-0" (click)="resetFormIdp()"
[class.pointer-events-none]="formIdp.data.masfromEvaluationIdp.idpStatus=='0'||!canEdit ||formIdp.data.checkStep!='1'"
name="idpStatus" (change)="formIdp.data.masfromEvaluationIdp.idpStatus='0'"
[checked]="formIdp.data.masfromEvaluationIdp.idpStatus=='0'">
</div>
<div class="col-span-5">
<label for="idpStatus-0" class="text-sm text-gray-500"
[class.pointer-events-none]="formIdp.data.masfromEvaluationIdp.idpStatus=='0'||!canEdit ||formIdp.data.checkStep!='1'">
IDP มาตรฐาน
</label>
</div>
</div>
<div class="grid col-span-1 grid-cols-6 gap-2">
<div class="col-span-1">
<input type="checkbox" class="ti-form-checkbox" id="idpStatus-1"
[class.pointer-events-none]="formIdp.data.masfromEvaluationIdp.idpStatus=='1'||!canEdit ||formIdp.data.checkStep!='1'"
name="idpStatus" (change)="formIdp.data.masfromEvaluationIdp.idpStatus='1'"
[checked]="formIdp.data.masfromEvaluationIdp.idpStatus=='1'">
</div>
<div class="col-span-5">
<label for="idpStatus-1" class="text-sm text-gray-500"
[class.pointer-events-none]="formIdp.data.masfromEvaluationIdp.idpStatus=='1'||!canEdit ||formIdp.data.checkStep!='1'">
IDP ปรับแก้ไข
</label>
</div>
</div>
</div>
</div>
</div>
<div class="py-1rem px-2rem">
<div class="py-2 grid grid-cols-7 gap-3">
<div class="col-span-1">
{{formIdp.data.apsapprove2.employeeId?'ผู้ประเมิน1':'ผู้อนุมัติ'}}
</div>
<div class="col-span-1">
{{formIdp.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]="formIdp.data.masfromEvaluationIdp.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]="!formIdp.data||formIdp.data.currentStep!='1'||!canSave"
[readonly]="!formIdp.data||formIdp.data.currentStep!='1'||!canSave"
[(ngModel)]="formIdp.data.masfromEvaluationIdp.apsapprove1Comment"></textarea>
<span class="pt-2">
วันที่ :
{{convertDate(formIdp.data.masfromEvaluationIdp.apsapprove1Date)}}
</span>
</div>
</div>
<div class="py-2 grid grid-cols-7 gap-3" *ngIf="formIdp.data.apsapprove2.employeeId">
<div class="col-span-1">
{{formIdp.data.apsapprove3.employeeId?'ผู้ประเมิน2':'ผู้อนุมัติ'}}
</div>
<div class="col-span-1">
{{formIdp.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]="formIdp.data.masfromEvaluationIdp.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]="!formIdp.data||formIdp.data.currentStep!='2'||!canSave"
[readonly]="!formIdp.data||formIdp.data.currentStep!='2'||!canSave"
[(ngModel)]="formIdp.data.masfromEvaluationIdp.apsapprove2Comment"></textarea>
<span class="pt-2">
วันที่ :
{{convertDate(formIdp.data.masfromEvaluationIdp.apsapprove2Date)}}
</span>
</div>
</div>
<div class="py-2 grid grid-cols-7 gap-3" *ngIf="formIdp.data.apsapprove3.employeeId">
<div class="col-span-1">
{{formIdp.data.apsapprove4.employeeId?'ผู้ประเมิน3':'ผู้อนุมัติ'}}
</div>
<div class="col-span-1">
{{formIdp.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]="formIdp.data.masfromEvaluationIdp.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]="!formIdp.data||formIdp.data.currentStep!='3'||!canSave"
[readonly]="!formIdp.data||formIdp.data.currentStep!='3'||!canSave"
[(ngModel)]="formIdp.data.masfromEvaluationIdp.apsapprove3Comment"></textarea>
<span class="pt-2">
วันที่ :
{{convertDate(formIdp.data.masfromEvaluationIdp.apsapprove3Date)}}
</span>
</div>
</div>
<div class="py-2 grid grid-cols-7 gap-3" *ngIf="formIdp.data.apsapprove4.employeeId">
<div class="col-span-1">
{{formIdp.data.apsapprove5.employeeId?'ผู้ประเมิน4':'ผู้อนุมัติ'}}
</div>
<div class="col-span-1">
{{formIdp.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]="formIdp.data.masfromEvaluationIdp.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]="!formIdp.data||formIdp.data.currentStep!='4'||!canSave"
[readonly]="!formIdp.data||formIdp.data.currentStep!='4'||!canSave"
[(ngModel)]="formIdp.data.masfromEvaluationIdp.apsapprove4Comment"></textarea>
<span class="pt-2">
วันที่ :
{{convertDate(formIdp.data.masfromEvaluationIdp.apsapprove4Date)}}
</span>
</div>
</div>
<div class="py-2 grid grid-cols-7 gap-3" *ngIf="formIdp.data.apsapprove5.employeeId">
<div class="col-span-1">
ผู้อนุมัติ
</div>
<div class="col-span-1">
{{formIdp.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]="formIdp.data.masfromEvaluationIdp.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]="!formIdp.data||formIdp.data.currentStep!='5'||!canSave"
[readonly]="!formIdp.data||formIdp.data.currentStep!='5'||!canSave"
[(ngModel)]="formIdp.data.masfromEvaluationIdp.apsapprove5Comment"></textarea>
<span class="pt-2">
วันที่ :
{{convertDate(formIdp.data.masfromEvaluationIdp.apsapprove5Date)}}
</span>
</div>
</div>
</div>
<div class="flex justify-center mb-1rem pb-2rem" *ngIf="canSave">
<button *ngIf="formIdp.data.checkStep!='0'&&formIdp.data.checkStep!='1'" type="submit"
class="ti-btn ti-btn-danger mx-2rem" (click)="save('noApprove')">
ไม่อนุมัติ
</button>
<button type="submit" class="ti-btn ti-btn-success mx-2rem" (click)="save('draft')">
บันทึกร่าง
</button>
<button type="submit" class="ti-btn ti-btn-secondary mx-2rem" (click)="save('approve')">
<ng-container *ngIf="formIdp.data.checkStep=='0'">
ยืนยันข้อมูล
</ng-container>
<ng-container *ngIf="formIdp.data.checkStep!='0'">
อนุมัติ
</ng-container>
</button>
</div>
</ng-container>
</ng-template>
<ng-template #competencycourseModal let-modal>
<h3 mat-dialog-title>
ข้อมูลหลักสูตรพัฒนาตาม CDR
</h3>
<mat-dialog-content>
<div class="flex justify-end pb-1rem">
<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"
[(ngModel)]="competencycourseTable.search" (ngModelChange)="onCompetencycourseSearch()">
<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>
<div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<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">
<span class="text-sm">{{ 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="!filterCompetencycourse().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="filterCompetencycourse().length">
<tr *ngFor="let item of filterCompetencycourse() | slice:((competencycourseTable.currentPage-1) * competencycourseTable.pageSize) : (((competencycourseTable.currentPage-1) * competencycourseTable.pageSize) + competencycourseTable.pageSize);let i = index"
class="cursor-pointer" (click)="addCompetencycourse(item);closeCompetencycourseDialog()">
<td class="flex justify-center">
{{((competencycourseTable.currentPage-1) * competencycourseTable.pageSize)+(i+1)}}
</td>
<td>{{item.competencyCourseId}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
</tr>
</tbody>
</table>
</div>
<app-pagination [totalItems]="filterCompetencycourse().length" [pageSize]="competencycourseTable.pageSize"
(pageChange)="competencycourseTable.currentPage = $event"
(pageSizeChange)="competencycourseTable.pageSize = $event;competencycourseTable.currentPage = 1"></app-pagination>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button type="button" mat-button [mat-dialog-close]
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
ย้อนกลับ
</button>
</mat-dialog-actions>
</ng-template>
\ No newline at end of file
src/app/components/performance-evaluation/idp-evaluation/idp-evalution.component.scss deleted 100644 → 0
.ciricon {
height: 12px; /* กำหนดความสูงของวงกลม */
width: 12px; /* กำหนดความกว้างของวงกลม */
background-color: #ffffff;
font-weight: bold;
display: flex; /* ใช้ Flexbox */
justify-content: center; /* จัดตำแหน่งแนวนอนให้กึ่งกลาง */
align-items: center; /* จัดตำแหน่งแนวตั้งให้กึ่งกลาง */
border-radius: 2px; /* ทำให้เป็นวงกลม */
}
src/app/components/performance-evaluation/idp-evaluation/idp-evalution.component.ts deleted 100644 → 0
import { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { CompetencycourseMiniModel, MyCompetencycourseMiniModel } from 'src/app/shared/model/competencycourse-mini.model';
import { IdpFormModel } from 'src/app/shared/model/idp-form.model';
import { CompetencycourseService } from 'src/app/shared/services/competencycourse.service';
import { EmployeeService } from 'src/app/shared/services/employee.service';
import { EvaluationIdpService } from 'src/app/shared/services/evaluation-Idp.service';
import Swal from 'sweetalert2';
interface table {
currentPage: number,
page: number[],
search: string,
pageSize: number
}
@Component({
selector: 'app-idp-evalution',
templateUrl: './idp-evalution.component.html',
styleUrls: ['./idp-evalution.component.scss']
})
export class IdpEvalutionComponent {
@Input() pathTitle: string[] = []
@Input() evaluationRoundId = ""
@Input() evaluateeId = ""
@Input() evaluaterId = ""
@Output() sendReturnPath: EventEmitter<any> = new EventEmitter<any>();
currentDate = new Date()
hoveredCode: string | null = null;
formIdp: { loading: boolean, data?: IdpFormModel } = { loading: false, data: undefined }
originalformIdp?: IdpFormModel
canEdit = false
canSave = false
competencycourse: { loading: boolean, data: CompetencycourseMiniModel[] } = { loading: false, data: [] }
competencycourseTable: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: "",
pageSize: 10
}
competencycourseIndex = -1
@ViewChild("competencycourseModal") competencycourseModal: any;
dialogRefCompetencycourseModal: any
constructor(private evaluationIdpService: EvaluationIdpService,
private employeeService: EmployeeService,
private competencycourseService: CompetencycourseService,
private cdr: ChangeDetectorRef,
private dialog: MatDialog
) {
}
ngOnInit(): void {
this.getFormIdp()
this.getCompetencycourseMiniList()
}
getCompetencycourseMiniList() {
this.competencycourse.loading = false
this.competencycourseService.getMiniList().subscribe({
next: response => {
this.competencycourse.data = response.map(x => new MyCompetencycourseMiniModel(x))
this.competencycourse.loading = false
this.cdr.detectChanges()
}, error: error => {
this.competencycourse.loading = false
this.cdr.detectChanges()
}
})
}
openCompetencycourseDialog(index: number) {
this.competencycourseIndex = index
this.dialogRefCompetencycourseModal = this.dialog.open(this.competencycourseModal, {
width: '800px',
})
}
closeCompetencycourseDialog() {
this.dialogRefCompetencycourseModal.close()
}
addCompetencycourse(data: CompetencycourseMiniModel) {
if (this.formIdp.data) {
if (this.formIdp.data.competencyIndicatorsCourses1[this.competencycourseIndex].competencyCourse) {
this.formIdp.data.competencyIndicatorsCourses1[this.competencycourseIndex].competencyCourse.push(new MyCompetencycourseMiniModel(data))
} else {
this.formIdp.data.competencyIndicatorsCourses1[this.competencycourseIndex]['competencyCourse'] = [new MyCompetencycourseMiniModel(data)]
}
this.cdr.detectChanges()
}
}
deleteCompetencyCourse(index: number, removeIndex: number) {
if (this.formIdp.data) {
this.formIdp.data.competencyIndicatorsCourses1[index].competencyCourse.splice(removeIndex, 1)
}
}
onCompetencycourseSearch() {
this.competencycourseTable.currentPage = 1
this.competencycourseTable.page = Array.from({ length: Math.ceil(this.filterCompetencycourse().length / 10) }, (_, i) => i + 1);
}
filterCompetencycourse() {
return this.competencycourse.data.filter(x => x.competencyCourseId.toLowerCase().includes(this.competencycourseTable.search.toLowerCase()) ||
x.tdesc.toLowerCase().includes(this.competencycourseTable.search.toLowerCase()) ||
x.edesc.toLowerCase().includes(this.competencycourseTable.search.toLowerCase()))
}
resetFormIdp() {
if (this.originalformIdp && this.formIdp.data) {
this.formIdp.data.competencyIndicatorsCourses1 = JSON.parse(JSON.stringify(this.originalformIdp.competencyIndicatorsCourses1))
}
}
getFormIdp() {
this.formIdp.loading = true
this.evaluationIdpService.getFormIdp(this.evaluationRoundId, this.evaluateeId).subscribe({
next: response => {
this.formIdp.data = JSON.parse(JSON.stringify(response))
this.originalformIdp = JSON.parse(JSON.stringify(response))
if (this.formIdp.data) {
this.canSave = (this.formIdp.data.currentStep == this.formIdp.data.checkStep) && (this.formIdp.data.masfromStatusType.code != 'Boss_finish' && this.formIdp.data.masfromStatusType.code != 'Not_evaluating_yet')
this.canEdit = (this.formIdp.data.currentStep == this.formIdp.data.checkStep && (+(this.formIdp.data.checkStep) <= 1)) && (this.formIdp.data.masfromStatusType.code != 'Boss_finish' && this.formIdp.data.masfromStatusType.code != 'Not_evaluating_yet')
}
switch (this.formIdp.data?.currentStep) {
case ("0"): {
if (this.canEdit) {
this.formIdp.data.masfromEvaluationIdp.apsassessyDate = this.currentDate.toISOString().split('T')[0];
}
break
}
case ("1"): {
if (this.canEdit) {
this.formIdp.data.masfromEvaluationIdp.apsapprove1Date = this.currentDate.toISOString().split('T')[0];
}
break
}
case ("2"): {
if (this.canEdit) {
this.formIdp.data.masfromEvaluationIdp.apsapprove2Date = this.currentDate.toISOString().split('T')[0];
}
break
}
case ("3"): {
if (this.canEdit) {
this.formIdp.data.masfromEvaluationIdp.apsapprove3Date = this.currentDate.toISOString().split('T')[0];
}
break
}
case ("4"): {
if (this.canEdit) {
this.formIdp.data.masfromEvaluationIdp.apsapprove4Date = this.currentDate.toISOString().split('T')[0];
}
break
}
case ("5"): {
if (this.canEdit) {
this.formIdp.data.masfromEvaluationIdp.apsapprove5Date = this.currentDate.toISOString().split('T')[0];
}
break
}
default: { return }
}
this.formIdp.data.masfromEvaluationIdp.idpStatus = this.formIdp.data.masfromEvaluationIdp.idpStatus ? this.formIdp.data.masfromEvaluationIdp.idpStatus : '0'
this.formIdp.loading = false
this.cdr.detectChanges()
}, error: error => {
this.formIdp.loading = false
this.cdr.detectChanges()
}
})
}
returnPath() {
this.sendReturnPath.emit()
}
convertDate(dateInput?: string | Date): string {
let date = new Date()
if (dateInput) {
if (typeof dateInput === 'string') {
const [year, month, day] = dateInput.split('-').map(Number);
date = new Date(year, month - 1, day);
} else {
date = dateInput
}
}
return date?.toLocaleDateString('th-TH', { day: 'numeric', month: 'long', year: 'numeric' }) || ''
}
convertDateFormat(dateString: string): string {
const [year, month, day] = dateString.split("-");
return `${day}-${month}-${year}`;
}
save(status: 'approve' | 'noApprove' | 'draft') {
let title = ''
let text = ''
let confirmButtonText = ''
let approveStatus = '0'
if (status == 'draft') {
title = 'บันทึกแบบร่าง'
text = 'คุณต้องการบันทึกแบบร่างของการประเมินนี้ใช่หรือไม่'
confirmButtonText = 'ยืนยันการบันทึก'
approveStatus = '1'
} else if (status == 'approve') {
approveStatus = '2'
if (this.formIdp?.data?.checkStep == '0') {
title = 'ยืนยันข้อมูล'
text = 'คุณต้องการยืนยันข้อมูลการประเมินนี้ใช่หรือไม่'
confirmButtonText = 'ยืนยันการบันทึก'
} else {
title == 'อนุมัติ'
text = 'คุณต้องการอนุมัติข้อมูลการประเมินนี้ใช่หรือไม่'
confirmButtonText = 'ยืนยันการอนุมัติ'
}
} else if (status == 'noApprove') {
approveStatus = '0'
title == 'ไม่อนุมัติ'
text = 'คุณต้องการไม่อนุมัติข้อมูลการประเมินนี้ใช่หรือไม่'
confirmButtonText = 'ยืนยันการไม่อนุมัติ'
}
Swal.fire({
iconHtml: `
<div class="flex items-center justify-center rounded-full !h-80px !w-80px" style="background-color: #E8F8EE;">
<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="39" height="39" fill="#D2D2D2"/>
<g id="Component">
<g id="alert cart">
<g id="mdi:file-export">
<circle cx="22.5" cy="19.5" r="33.5" fill="#E8F8EE"/>
<path d="M9.75 3.25C8.88805 3.25 8.0614 3.59241 7.4519 4.2019C6.84241 4.8114 6.5 5.63805 6.5 6.5V32.5C6.5 33.362 6.84241 34.1886 7.4519 34.7981C8.0614 35.4076 8.88805 35.75 9.75 35.75H29.25C30.112 35.75 30.9386 35.4076 31.5481 34.7981C32.1576 34.1886 32.5 33.362 32.5 32.5V13L22.75 3.25M21.125 5.6875L30.0625 14.625H21.125M14.5113 19.8575H26V31.3463L22.555 27.9013L17.9563 32.5L13.3575 27.9013L17.9563 23.3188"
fill="#1DBE5A"/>
</g>
</g>
</g>
</svg>
</div>
`,
title: title,
text: text,
showCancelButton: true,
confirmButtonText: confirmButtonText,
cancelButtonText: 'ย้อนกลับ',
customClass: {
title: '!swal2-title-mt-20px',
actions: '!swal2-actions-mt-20px',
icon: '!swal2-icon-no-border',
confirmButton: '!swal2-button-bg-green',
cancelButton: '!swal2-button-bg-gray',
},
}).then((result) => {
if (result.isConfirmed && this.formIdp) {
this.saveApi(approveStatus)
} else if (result.dismiss === Swal.DismissReason.cancel) {
Swal.fire({
title: 'ยกเลิก!',
text: 'การบันทึกถูกยกเลิก',
icon: 'error',
customClass: {
confirmButton: '!swal2-button-bg-danger',
}
})
}
})
}
saveApi(approveStatus: string) {
let body = this.formIdp.data
switch (this.formIdp.data?.currentStep) {
case ("0"): {
body = {
...this.formIdp.data, masfromEvaluationIdp: {
...this.formIdp.data.masfromEvaluationIdp,
apsassessyStatus: approveStatus
}
}
break
}
case ("1"): {
body = {
...this.formIdp.data, masfromEvaluationIdp: {
...this.formIdp.data.masfromEvaluationIdp,
apsapprove1Status: approveStatus
}
}
break
}
case ("2"): {
body = {
...this.formIdp.data, masfromEvaluationIdp: {
...this.formIdp.data.masfromEvaluationIdp,
apsapprove1Status: approveStatus == '0' ? approveStatus : this.formIdp.data.masfromEvaluationIdp.apsapprove1Status,
apsapprove2Status: approveStatus
}
}
break
}
case ("3"): {
body = {
...this.formIdp.data, masfromEvaluationIdp: {
...this.formIdp.data.masfromEvaluationIdp,
apsapprove2Status: approveStatus == '0' ? approveStatus : this.formIdp.data.masfromEvaluationIdp.apsapprove2Status,
apsapprove3Status: approveStatus
}
}
break
}
case ("4"): {
body = {
...this.formIdp.data, masfromEvaluationIdp: {
...this.formIdp.data.masfromEvaluationIdp,
apsapprove3Status: approveStatus == '0' ? approveStatus : this.formIdp.data.masfromEvaluationIdp.apsapprove3Status,
apsapprove4Status: approveStatus
}
}
break
}
case ("5"): {
body = {
...this.formIdp.data, masfromEvaluationIdp: {
...this.formIdp.data.masfromEvaluationIdp,
apsapprove4Status: approveStatus == '0' ? approveStatus : this.formIdp.data.masfromEvaluationIdp.apsapprove4Status,
apsapprove5Status: approveStatus
}
}
break
}
default: { return }
}
this.evaluationIdpService.postIdp(body).subscribe({
next: response => {
if (response.success) {
Swal.fire({
title: 'บันทึกสำเร็จ!',
text: 'การประเมินของคุณถูกบันทึกแล้ว',
icon: 'success',
customClass: {
confirmButton: '!swal2-button-bg-green',
}
});
this.getFormIdp()
} else {
Swal.fire({
title: 'ยกเลิก!',
text: 'การบันทึกถูกยกเลิก',
icon: 'error',
customClass: {
confirmButton: '!swal2-button-bg-danger',
}
});
}
}, error: error => {
Swal.fire({
title: 'ยกเลิก!',
text: 'การบันทึกถูกยกเลิก',
icon: 'error',
customClass: {
confirmButton: '!swal2-button-bg-danger',
}
});
}
})
}
}
src/app/components/performance-evaluation/pms-form-employee/pms-competency/pms-competency.component.html
<div class="flex w-full">
<div class="ltr:border-r rtl:border-l border-gray-200 dark:border-white/10" style="width: 5rem">
<nav class="flex flex-col space-y-2 whitespace-nowrap" aria-label="Tabs" [attr.data-hs-tabs-vertical]="true">
<button *ngFor="let appraisalCompentency of appraisalCompentencyList ;let i=index"
(click)="getAppraisalCompentencyForm(i)" [class.active]="currentTap==appraisalCompentency.comType" type="button"
class="hs-tab-active:bg-primary ltr:hs-tab-active:border-r-transparent rtl:hs-tab-active:border-l-transparent hs-tab-active:text-white dark:hs-tab-active:bg-transparent ltr:dark:hs-tab-active:border-r-gray-800 rtl:dark:hs-tab-active:border-l-gray-800 dark:hs-tab-active:text-primary -mr-px py-2 px-3 inline-flex items-center gap-2 text-sm font-medium text-center border text-gray-500 ltr:rounded-l-lg rtl:rounded-r-lg hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 !p-2"
[id]="'hs-tab-js-vertical-item-'+i" [attr.data-hs-tab]="'#hs-tab-js-vertical-'+i"
[attr.aria-controls]="'hs-tab-js-vertical-'+i">
<div class="w-full flex items-center " style="justify-content :space-between;">
<ng-container *ngTemplateOutlet="newCompetency"></ng-container>
<!-- <ng-container *ngTemplateOutlet="competency"></ng-container> -->
<ng-template #newCompetency>
<div class="flex flex-col gap-2">
<div class="flex flex-row gap-2">
<ng-container *ngFor="let appraisalCompentency of appraisalCompentencyList ;let i=index">
<button type="button" class="flex justify-center !items-center border bg-white p-2 text-center"
style="border-radius:20px;width: 100px"
(click)="getAppraisalCompentencyForm(i);currentTap=appraisalCompentency.comType"
[ngClass]="{'!bg-primary text-white':currentTap==appraisalCompentency.comType}">
{{appraisalCompentency.comType}}
<span class="d-flex align-items-center justify-content-center rounded-circle text-white"
[class.bg-danger]="formRemain(i)" [class.bg-success]="!formRemain(i)">
&nbsp;
<span class="flex align-center justify-center rounded-circle text-white" [class.bg-danger]="formRemain(i)"
[class.bg-success]="!formRemain(i)">
<ng-container *ngIf="formRemain(i)">
{{formRemain(i)}}
</ng-container>
<i *ngIf="!formRemain(i)" class="ti ti-check"></i>
</span>
</button>
</ng-container>
<div class="flex justify-around !items-center border bg-white p-2 text-right"
style="border-radius:20px;width: 100px;margin-left: auto;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));">
<i class="bg-white cursor-pointer border ti ti-chevron-down"
style="padding: 1px;border-radius:5px;font-size:27px" (click)="allBiOpen(true)"></i>
<i class="bg-white cursor-pointer border ti ti-chevron-up" style="padding: 1px;border-radius:5px;font-size:27px"
(click)="allBiOpen(false)"></i>
</div>
</div>
<div class="flex flex-col gap-2">
<ng-container *ngFor="let item2 of appraisalCompentencyFilter();let i = index;let f= first">
<button type="button" class="p-4 w-full bg-secondary text-white text-left" (click)="scrollToTable($event)"
style="border-radius:20px"
(click)="biOpen.set(item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId, !biOpen.get(item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId))">
<span class="absolute -translate-y-1/5 rounded-circle text-white" [class.bg-danger]="inFormRemain(item2)"
[class.bg-success]="!inFormRemain(item2)">
<ng-container *ngIf="inFormRemain(item2)">
{{inFormRemain(item2)}}
</ng-container>
<i *ngIf="!inFormRemain(item2)" class="ti ti-check"></i>
</span>
<span style="padding-left:50px">
{{item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}
</span>
&nbsp;
<span>
{{item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.tdesc}}
</span>
</button>
<ng-container
*ngIf="biOpen.get(item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId)">
<table style="table-layout: fixed; width: 100%;">
<thead class="border-b border-gray-200">
<tr style="height:35px">
<th scope="col">Behavior Indicator (BI)</th>
<th scope="col">เครื่องมือ
<div class="hs-tooltip ti-main-tooltip [--trigger:hover]">
<a class="hs-tooltip-toggle ti-main-tooltip-toggle" href="javascript:;">
<i class="ti ti-help-circle"></i>
<div class="hs-tooltip-content ti-main-tooltip-content border-secondary" role="tooltip">
<div class="flex flex-col">
<div>เครื่องมือประเมิน</div>
<div class="text-start">O = แบบสังเกต</div>
<div class="text-start">P = แบบการปฏิบัติงาน</div>
<div class="text-start">D = การบันทึก/เอกสาร</div>
<div class="text-start">I = การสัมภาษณ์</div>
<div class="text-start">T = แบบทดสอบ</div>
</div>
</div>
</a>
</div>
</th>
<th scope="col" style="width: 500px;">ระดับความสามารถ
<div class="hs-tooltip ti-main-tooltip [--trigger:hover]">
<a class="hs-tooltip-toggle ti-main-tooltip-toggle" href="javascript:;">
<i class="ti ti-help-circle"></i>
<div class="hs-tooltip-content ti-main-tooltip-content border-secondary" role="tooltip">
<div class="flex flex-col">
<div>ระดับความสามารถ (Target Degree)</div>
<div class="text-start">
ระดับ 1 = ไม่มีความรู้พื้นฐานเลย ขาดทักษะในงาน</div>
<div class="text-start">
ระดับ 2 = มีความรู้ในงานบ้างแต่ยังไม่สามารถ ประยุกต์ใช้ในงานได้
</div>
<div class="text-start">
ระดับ 3 = นำความรู้มาประยุกต์ใช้ในงานได้ ปฏิบัติงานเองได้ด้วยตัวเองแก้ไขปัญหาหน้างานได้
</div>
<div class="text-start">
ระดับ 4 = สอนผู้อื่นได้ มีความคล่องตัว เชื่อมโยง ความรู้ในงานได้
</div>
<div class="text-start">
ระดับ 5 = มีความชำนาญ เชี่ยวชาญ เป็นที่ยอมรับ ในองค์กร
</div>
</div>
</div>
</a>
</div>
</th>
</tr>
</thead>
<tbody>
<ng-container
*ngFor="let bi of item2.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList;let i2 = index;let f = first">
<tr class="border-b border-gray-200">
<td class="py-2" style="vertical-align: top">{{bi.behavioralIndicators}}</td>
<td class="py-2 text-center" style="vertical-align: top">{{bi.assessmentId}}</td>
<td class="py-2 text-center" style="vertical-align: top">
<div class="flex flex-row justify-center gap-2 mb-2">
<ng-container *ngFor="let item of [1,2,3,4,5];let f = first">
<button type="button" class="p-4 border !border-soft-secondary text-soft-secondary bg-white"
style="border-radius:5px"
(mouseenter)="biScore.set(bi.behavioralIndicators+bi.assessmentId,item)"
(mouseleave)="biScore.clear()"
(click)="bi.competencyBehavioral.scoreTopicExpectation=item;calnumberCheck()" [ngClass]="{'!border-secondary !text-secondary':bi.competencyBehavioral.scoreTopicExpectation>=item||(biScore.get(bi.behavioralIndicators+bi.assessmentId) ?? 0)>=item,
'pointer-events-none':!canEdit}">
{{item}}
</button>
</ng-container>
</div>
<div style="height: 20px;">
<span *ngIf="biScore.get(bi.behavioralIndicators+bi.assessmentId)" class="text-secondary">
{{scoreDescriptions[(biScore.get(bi.behavioralIndicators+bi.assessmentId) ?? 0) - 1] }}
</span>
</div>
</td>
</tr>
</ng-container>
</tbody>
</table>
</ng-container>
</ng-container>
</div>
<div class="w-1/2 flex flex-col gap-2" *ngIf="appraisalCompentencyList.length">
<div class="w-full font-size-18px font-weight-700 mt-2rem">
ค่าถ่วงน้ำหนักของความสามารถในแต่ละระดับ
</div>
<div class="w-full flex flex-col gap-2 mt-2">
<div class="w-full flex flex-row gap-2">
<div class="flex-1 text-center font-size-18px font-weight-700" *ngFor="let item of [5,4,3,2,1]">
{{item}}</div>
</div>
</button>
</nav>
</div>
<div class="flex-1 w-full">
<div *ngFor="let appraisalCompentency of appraisalCompentencyList ;let i=index" [id]="'hs-tab-js-vertical-'+i"
role="tabpanel" [class.hidden]="currentTap!=appraisalCompentency.comType"
[attr.aria-labelledby]="'hs-tab-js-vertical-item-'+i">
<div class="hs-accordion-group w-full" *ngIf="appraisalCompentency">
<ng-container>
<div class="pb-2rem px-2rem text-center">
<div class="font-size-18px font-weight-700 text-primary">
แบบประเมินสมรรถนะพนักงาน
<div class="w-full flex flex-row gap-2">
<div *ngFor="let item of [5,4,3,2,1]" class="flex-1 border border-secondary text-center align-center"
style="border-radius:5px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
{{calWeightScore(item)}}
</div>
</div>
</div>
<div class="w-full mt-2 flex justify-center">
<div class="w-3/4 flex flex-row gap-2">
<div class="flex-1 font-size-18px font-weight-700 text-right align-center">
คะแนนเฉลี่ย
</div>
<div class="flex-1 flex justify-center">
<div class="w-3/4 border border-secondary text-center align-center"
style="border-radius:5px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
{{showNumber(appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].averageScore)}}
</div>
</div>
<div class="pb-2rem px-2rem">
<div class="p-2 flex" style="justify-content :space-between;">
<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 class="flex-1 font-size-18px font-weight-700 text-right align-center">
ผล Gap
</div>
<div class="flex-1 flex justify-center">
<div class="w-3/4 border border-secondary text-center align-center"
style="border-radius:5px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
{{calGap(appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].averageScore)}}
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
<ng-template #competency>
<div class="flex w-full">
<div class="ltr:border-r rtl:border-l border-gray-200 dark:border-white/10" style="width: 5rem">
<nav class="flex flex-col space-y-2 whitespace-nowrap" aria-label="Tabs" [attr.data-hs-tabs-vertical]="true">
<button *ngFor="let appraisalCompentency of appraisalCompentencyList ;let i=index"
(click)="getAppraisalCompentencyForm(i)" [class.active]="currentTap==appraisalCompentency.comType"
type="button"
class="hs-tab-active:bg-primary ltr:hs-tab-active:border-r-transparent rtl:hs-tab-active:border-l-transparent hs-tab-active:text-white dark:hs-tab-active:bg-transparent ltr:dark:hs-tab-active:border-r-gray-800 rtl:dark:hs-tab-active:border-l-gray-800 dark:hs-tab-active:text-primary -mr-px py-2 px-3 inline-flex items-center gap-2 text-sm font-medium text-center border text-gray-500 ltr:rounded-l-lg rtl:rounded-r-lg hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 !p-2"
[id]="'hs-tab-js-vertical-item-'+i" [attr.data-hs-tab]="'#hs-tab-js-vertical-'+i"
[attr.aria-controls]="'hs-tab-js-vertical-'+i">
<div class="w-full flex items-center " style="justify-content :space-between;">
{{appraisalCompentency.comType}}
<span class="d-flex align-items-center justify-content-center rounded-circle text-white"
[class.bg-danger]="formRemain(i)" [class.bg-success]="!formRemain(i)">
<ng-container *ngIf="formRemain(i)">
{{formRemain(i)}}
</ng-container>
<i *ngIf="!formRemain(i)" class="ti ti-check"></i>
</span>
</div>
</button>
</nav>
</div>
<div class="flex-1 w-full">
<div *ngFor="let appraisalCompentency of appraisalCompentencyList ;let i=index" [id]="'hs-tab-js-vertical-'+i"
role="tabpanel" [class.hidden]="currentTap!=appraisalCompentency.comType"
[attr.aria-labelledby]="'hs-tab-js-vertical-item-'+i">
<div class="hs-accordion-group w-full" *ngIf="appraisalCompentency">
<ng-container>
<div class="pb-2rem px-2rem text-center">
<div class="font-size-18px font-weight-700 text-primary">
แบบประเมินสมรรถนะพนักงาน
</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 class="pb-2rem px-2rem">
<div class="p-2 flex" style="justify-content :space-between;">
<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>
<div class="pb-2rem px-2rem">
<div *ngIf="appraisalCompentencyFilter().length">
<div class="hs-accordion-group w-full" data-hs-accordion-always-open>
<ng-container *ngFor="let item2 of appraisalCompentencyFilter();let i = index;let f= first">
<div
class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
[id]="'hs-primary-heading-'+i">
<button (click)="scrollToTable($event)"
class="hs-accordion-toggle hs-accordion-active:text-white hs-accordion-active:bg-secondary group py-4 px-5 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-white dark:text-gray-200 dark:hover:text-white/80"
[attr.aria-controls]="'hs-primary-collapse-'+i" type="button">
<span class="d-flex align-items-center justify-content-center rounded-circle text-white"
[class.bg-danger]="inFormRemain(item2)" [class.bg-success]="!inFormRemain(item2)">
<ng-container *ngIf="inFormRemain(item2)">
{{inFormRemain(item2)}}
</ng-container>
<i *ngIf="!inFormRemain(item2)" class="ti ti-check"></i>
</span>
<span>
{{item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}
:
{{item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.tdesc}}
</span>
<svg
class="hs-accordion-active:hidden hs-accordion-active:text-white hs-accordion-active:group-hover:text-white block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-white/70"
width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg
class="hs-accordion-active:block hs-accordion-active:text-white hs-accordion-active:group-hover:text-white hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-white/70"
width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div [id]="'hs-primary-collapse-'+i"
class="hs-accordion-content hidden !w-full overflow-hidden transition-[height] duration-300"
[attr.aria-labelledby]="'hs-primary-heading-'+i">
<div class="box-body">
<div class="space-y-4">
<ng-container
*ngFor="let bi of item2.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList;let i2 = index;let f = first">
<div class="p-4 border border-gray-200 dark:border-white/10 rounded-sm">
<div class="grid grid-cols-12 gap-6 space-y-4">
<div class="col-span-12 my-auto">
<p class="text-base mb-1 font-semibold">
{{bi.behavioralIndicators}}&nbsp;{{bi.assessmentId}}
</p>
</div>
<div class="col-span-12">
<div class="space-y-2">
<div class="grid grid-cols-12 gap-6 space-y-4 md:text-end">
<div class="col-span-12 my-auto">
<div class="flex items-center justify-center">
<div id="stars-busytext">
<bar-rating [ngClass]="{ 'no-interaction': !canEdit }"
[ngStyle]="{'opacity':bi.competencyBehavioral.scoreTopicExpectation?1:0.8}"
[rate]="bi.competencyBehavioral.scoreTopicExpectation" [max]="5"
[theme]="'square'"
[(ngModel)]="bi.competencyBehavioral.scoreTopicExpectation"
(ngModelChange)="calnumberCheck()"></bar-rating>
<div class="pb-2rem px-2rem">
<div *ngIf="appraisalCompentencyFilter().length">
<div class="hs-accordion-group w-full" data-hs-accordion-always-open>
<ng-container *ngFor="let item2 of appraisalCompentencyFilter();let i = index;let f= first">
<div
class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
[id]="'hs-primary-heading-'+i">
<button (click)="scrollToTable($event)"
class="hs-accordion-toggle hs-accordion-active:text-white hs-accordion-active:bg-secondary group py-4 px-5 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-white dark:text-gray-200 dark:hover:text-white/80"
[attr.aria-controls]="'hs-primary-collapse-'+i" type="button">
<span class="d-flex align-items-center justify-content-center rounded-circle text-white"
[class.bg-danger]="inFormRemain(item2)" [class.bg-success]="!inFormRemain(item2)">
<ng-container *ngIf="inFormRemain(item2)">
{{inFormRemain(item2)}}
</ng-container>
<i *ngIf="!inFormRemain(item2)" class="ti ti-check"></i>
</span>
<span>
{{item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}
:
{{item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.tdesc}}
</span>
<svg
class="hs-accordion-active:hidden hs-accordion-active:text-white hs-accordion-active:group-hover:text-white block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-white/70"
width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg
class="hs-accordion-active:block hs-accordion-active:text-white hs-accordion-active:group-hover:text-white hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-white/70"
width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div [id]="'hs-primary-collapse-'+i"
class="hs-accordion-content hidden !w-full overflow-hidden transition-[height] duration-300"
[attr.aria-labelledby]="'hs-primary-heading-'+i">
<div class="box-body">
<div class="space-y-4">
<ng-container
*ngFor="let bi of item2.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList;let i2 = index;let f = first">
<div class="p-4 border border-gray-200 dark:border-white/10 rounded-sm">
<div class="grid grid-cols-12 gap-6 space-y-4">
<div class="col-span-12 my-auto">
<p class="text-base mb-1 font-semibold">
{{bi.behavioralIndicators}}&nbsp;{{bi.assessmentId}}
</p>
</div>
<div class="col-span-12">
<div class="space-y-2">
<div class="grid grid-cols-12 gap-6 space-y-4 md:text-end">
<div class="col-span-12 my-auto">
<div class="flex items-center justify-center">
<div id="stars-busytext">
<bar-rating [ngClass]="{ 'no-interaction': !canEdit }"
[ngStyle]="{'opacity':bi.competencyBehavioral.scoreTopicExpectation?1:0.8}"
[rate]="bi.competencyBehavioral.scoreTopicExpectation" [max]="5"
[theme]="'square'"
[(ngModel)]="bi.competencyBehavioral.scoreTopicExpectation"
(ngModelChange)="calnumberCheck()"></bar-rating>
</div>
</div>
</div>
</div>
......@@ -124,282 +300,126 @@
</div>
</div>
</div>
</div>
</ng-container>
</ng-container>
</div>
</div>
</div>
</div>
</div>
</ng-container>
</ng-container>
</div>
</div>
</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 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>
<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.masfromEvaluationAssessment1lList[0].numberCheck5}}</div>
<div class="col-span-1 text-center">
{{appraisalCompentency.masfromEvaluationAssessment1lList[0].numberCheck4}}</div>
<div class="col-span-1 text-center">
{{appraisalCompentency.masfromEvaluationAssessment1lList[0].numberCheck3}}</div>
<div class="col-span-1 text-center">
{{appraisalCompentency.masfromEvaluationAssessment1lList[0].numberCheck2}}</div>
<div class="col-span-1 text-center">
{{appraisalCompentency.masfromEvaluationAssessment1lList[0].numberCheck1}}</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.masfromEvaluationAssessment1lList[0].numberCheck5}}</div>
<div class="col-span-1 text-center">
{{appraisalCompentency.masfromEvaluationAssessment1lList[0].numberCheck4}}</div>
<div class="col-span-1 text-center">
{{appraisalCompentency.masfromEvaluationAssessment1lList[0].numberCheck3}}</div>
<div class="col-span-1 text-center">
{{appraisalCompentency.masfromEvaluationAssessment1lList[0].numberCheck2}}</div>
<div class="col-span-1 text-center">
{{appraisalCompentency.masfromEvaluationAssessment1lList[0].numberCheck1}}</div>
</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 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>
<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 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>
<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.masfromEvaluationAssessment1lList[0].weightedTotal)}}
<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.masfromEvaluationAssessment1lList[0].weightedTotal)}}
</div>
</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.masfromEvaluationAssessment1lList[0].averageScore)}}
<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.masfromEvaluationAssessment1lList[0].averageScore)}}
</div>
</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 ['เกณฑ์การให้คะแนนการประเมิน','ผลประเมิน (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>
</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" (mouseenter)="hoveredCode2 = 'true'"
(mouseleave)="hoveredCode2 = null" [ngClass]="{ 'table-hover2': 'true' === hoveredCode2 }">
<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="align-start text-center">
{{calAverage(appraisalCompentency.masfromEvaluationAssessment1lList[0].averageScore)}}
</td>
<td class="align-start text-center">
{{calGap(appraisalCompentency.masfromEvaluationAssessment1lList[0].averageScore)}}
</td>
</tr>
<tr (mouseenter)="hoveredCode2 = 'true'" (mouseleave)="hoveredCode2 = null"
[ngClass]="{ 'table-hover2': 'true' === hoveredCode2 }">
<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.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.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||appraisalCompentency.currentStep!='0'||!canSave"
[readonly]="!appraisalCompentency||appraisalCompentency.currentStep!='0'||!canSave"
[(ngModel)]="appraisalCompentency.masfromEvaluationAssessment1lList[0].apsassessyComment"></textarea>
<span class="pt-2">
วันที่ :
{{convertDate(appraisalCompentency.masfromEvaluationAssessment1lList[0].apsassessyDate)}}
</span>
</div>
</div>
<div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalCompentency.apsapprove1.employeeId">
<div class="col-span-1">
{{appraisalCompentency.apsapprove2.employeeId?'ผู้ประเมิน1':'ผู้อนุมัติ'}}
</div>
<div class="col-span-1">
{{appraisalCompentency.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.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||appraisalCompentency.currentStep!='1'||!canSave"
[readonly]="!appraisalCompentency||appraisalCompentency.currentStep!='1'||!canSave"
[(ngModel)]="appraisalCompentency.masfromEvaluationAssessment1lList[0].apsapprove1Comment"></textarea>
<span class="pt-2">
วันที่ :
{{convertDate(appraisalCompentency.masfromEvaluationAssessment1lList[0].apsapprove1Date)}}
</span>
</div>
</div>
<div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalCompentency.apsapprove2.employeeId">
<div class="col-span-1">
{{appraisalCompentency.apsapprove3.employeeId?'ผู้ประเมิน2':'ผู้อนุมัติ'}}
</div>
<div class="col-span-1">
{{appraisalCompentency.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.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||appraisalCompentency.currentStep!='2'||!canSave"
[readonly]="!appraisalCompentency||appraisalCompentency.currentStep!='2'||!canSave"
[(ngModel)]="appraisalCompentency.masfromEvaluationAssessment1lList[0].apsapprove2Comment"></textarea>
<span class="pt-2">
วันที่ :
{{convertDate(appraisalCompentency.masfromEvaluationAssessment1lList[0].apsapprove2Date)}}
</span>
</div>
</div>
<div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalCompentency.apsapprove3.employeeId">
<div class="col-span-1">
{{appraisalCompentency.apsapprove4.employeeId?'ผู้ประเมิน3':'ผู้อนุมัติ'}}
</div>
<div class="col-span-1">
{{appraisalCompentency.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.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||appraisalCompentency.currentStep!='3'||!canSave"
[readonly]="!appraisalCompentency||appraisalCompentency.currentStep!='3'||!canSave"
[(ngModel)]="appraisalCompentency.masfromEvaluationAssessment1lList[0].apsapprove3Comment"></textarea>
<span class="pt-2">
วันที่ :
{{convertDate(appraisalCompentency.masfromEvaluationAssessment1lList[0].apsapprove3Date)}}
</span>
</div>
</div>
<div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalCompentency.apsapprove4.employeeId">
<div class="col-span-1">
{{appraisalCompentency.apsapprove5.employeeId?'ผู้ประเมิน4':'ผู้อนุมัติ'}}
</div>
<div class="col-span-1">
{{appraisalCompentency.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.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||appraisalCompentency.currentStep!='4'||!canSave"
[readonly]="!appraisalCompentency||appraisalCompentency.currentStep!='4'||!canSave"
[(ngModel)]="appraisalCompentency.masfromEvaluationAssessment1lList[0].apsapprove4Comment"></textarea>
<span class="pt-2">
วันที่ :
{{convertDate(appraisalCompentency.masfromEvaluationAssessment1lList[0].apsapprove4Date)}}
</span>
</div>
</div>
<div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalCompentency.apsapprove5.employeeId">
<div class="col-span-1">
ผู้อนุมัติ
</div>
<div class="col-span-1">
{{appraisalCompentency.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.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||appraisalCompentency.currentStep!='5'||!canSave"
[readonly]="!appraisalCompentency||appraisalCompentency.currentStep!='5'||!canSave"
[(ngModel)]="appraisalCompentency.masfromEvaluationAssessment1lList[0].apsapprove5Comment"></textarea>
<span class="pt-2">
วันที่ :
{{convertDate(appraisalCompentency.masfromEvaluationAssessment1lList[0].apsapprove5Date)}}
</span>
<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 ['เกณฑ์การให้คะแนนการประเมิน','ผลประเมิน (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>
</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" (mouseenter)="hoveredCode2 = 'true'"
(mouseleave)="hoveredCode2 = null" [ngClass]="{ 'table-hover2': 'true' === hoveredCode2 }">
<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="align-start text-center">
{{calAverage(appraisalCompentency.masfromEvaluationAssessment1lList[0].averageScore)}}
</td>
<td class="align-start text-center">
{{calGap(appraisalCompentency.masfromEvaluationAssessment1lList[0].averageScore)}}
</td>
</tr>
<tr (mouseenter)="hoveredCode2 = 'true'" (mouseleave)="hoveredCode2 = null"
[ngClass]="{ 'table-hover2': 'true' === hoveredCode2 }">
<td class="align-start !white-space-normal" colspan="4">
หมายเหตุ<br>
ผลการประเมินอาจมีการเปลี่ยนแปลงเงื่อนไขข้อ 1-3 เนื่องจากมีคะแนนต่ำกว่าเกณฑ์ในบางข้อ
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="flex justify-center mb-1rem pb-2rem" *ngIf="canSave">
<button *ngIf="appraisalCompentency.checkStep!='0'&&appraisalCompentency.checkStep!='1'" type="submit"
class="ti-btn ti-btn-danger mx-2rem" (click)="save('noApprove')">
ไม่อนุมัติ
</button>
<button type="submit" class="ti-btn ti-btn-success mx-2rem" (click)="save('draft')">
บันทึกร่าง
</button>
<button type="submit" class="ti-btn ti-btn-secondary mx-2rem" (click)="save('approve')">
<ng-container *ngIf="appraisalCompentency.checkStep=='0'">
ยืนยันข้อมูล
</ng-container>
<ng-container *ngIf="appraisalCompentency.checkStep!='0'">
อนุมัติ
</ng-container>
</button>
</div> -->
</ng-container>
</ng-container>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
</ng-template>
\ No newline at end of file
src/app/components/performance-evaluation/pms-form-employee/pms-competency/pms-competency.component.ts
......@@ -37,7 +37,16 @@ export class PmsCompetencyComponent {
condition: ["1.หากได้คะแนนสูงกว่า 80% แต่มี 3 2 หรือ 1 ด้วย ถือว่า Gap -1", "2.หากได้คะแนนต่ำกว่า 80% แต่มี 4 และ 5 ให้คิด Gap ตาม %", "3.คะแนนต่ำกว่า 80% แต่มี 2 และ 1 ให้คิด Gap ตาม %"],
}]
scoreDescriptions = [
'ไม่มีความรู้พื้นฐานเลย ขาดทักษะในงาน',
'มีความรู้ในงานบ้างแต่ยังไม่สามารถ ประยุกต์ใช้ในงานได้',
'นำความรู้มาประยุกต์ใช้ในงานได้ ปฏิบัติงานเองได้ด้วยตัวเองแก้ไขปัญหาหน้างานได้',
'สอนผู้อื่นได้ มีความคล่องตัว เชื่อมโยง ความรู้ในงานได้',
'มีความชำนาญ เชี่ยวชาญ เป็นที่ยอมรับ ในองค์กร'
];
evaluatee: { loading: boolean, data: EmployeeModel } = { loading: false, data: new MyEmployeeModel() }
biOpen: Map<string, boolean> = new Map<string, boolean>()
biScore: Map<string, number> = new Map<string, number>()
constructor(private appraisalService: AppraisalService,
private employeeService: EmployeeService,
private cdr: ChangeDetectorRef,
......@@ -85,6 +94,10 @@ export class PmsCompetencyComponent {
if (this.appraisalCompentencyList.length) {
this.appraisalCompentencyIndex = index
this.currentTap = this.appraisalCompentencyList[this.appraisalCompentencyIndex].comType
this.biOpen.clear()
this.appraisalCompentencyFilter().forEach(x => {
this.biOpen.set(x.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId, false)
})
this.cdr.detectChanges()
switch (this.currentStep) {
case ("0"): {
......@@ -238,176 +251,6 @@ export class PmsCompetencyComponent {
this.sendReturnPath.emit()
}
save(status: 'approve' | 'noApprove' | 'draft') {
let title = ''
let text = ''
let confirmButtonText = ''
let approveStatus = '0'
if (status == 'draft') {
title = 'บันทึกแบบร่าง'
text = 'คุณต้องการบันทึกแบบร่างของการประเมินนี้ใช่หรือไม่'
confirmButtonText = 'ยืนยันการบันทึก'
approveStatus = '1'
} else if (status == 'approve') {
approveStatus = '2'
if (this.appraisalCompentencyList[this.appraisalCompentencyIndex].checkStep == '0') {
title = 'ยืนยันข้อมูล'
text = 'คุณต้องการยืนยันข้อมูลการประเมินนี้ใช่หรือไม่'
confirmButtonText = 'ยืนยันการบันทึก'
} else {
title == 'อนุมัติ'
text = 'คุณต้องการอนุมัติข้อมูลการประเมินนี้ใช่หรือไม่'
confirmButtonText = 'ยืนยันการอนุมัติ'
}
} else if (status == 'noApprove') {
approveStatus = '0'
title == 'ไม่อนุมัติ'
text = 'คุณต้องการไม่อนุมัติข้อมูลการประเมินนี้ใช่หรือไม่'
confirmButtonText = 'ยืนยันการไม่อนุมัติ'
}
Swal.fire({
iconHtml: `
<div class="flex items-center justify-center rounded-full !h-80px !w-80px" style="background-color: #E8F8EE;">
<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="39" height="39" fill="#D2D2D2"/>
<g id="Component">
<g id="alert cart">
<g id="mdi:file-export">
<circle cx="22.5" cy="19.5" r="33.5" fill="#E8F8EE"/>
<path d="M9.75 3.25C8.88805 3.25 8.0614 3.59241 7.4519 4.2019C6.84241 4.8114 6.5 5.63805 6.5 6.5V32.5C6.5 33.362 6.84241 34.1886 7.4519 34.7981C8.0614 35.4076 8.88805 35.75 9.75 35.75H29.25C30.112 35.75 30.9386 35.4076 31.5481 34.7981C32.1576 34.1886 32.5 33.362 32.5 32.5V13L22.75 3.25M21.125 5.6875L30.0625 14.625H21.125M14.5113 19.8575H26V31.3463L22.555 27.9013L17.9563 32.5L13.3575 27.9013L17.9563 23.3188"
fill="#1DBE5A"/>
</g>
</g>
</g>
</svg>
</div>
`,
title: title,
text: text,
showCancelButton: true,
confirmButtonText: confirmButtonText,
cancelButtonText: 'ย้อนกลับ',
customClass: {
title: '!swal2-title-mt-20px',
actions: '!swal2-actions-mt-20px',
icon: '!swal2-icon-no-border',
confirmButton: '!swal2-button-bg-green',
cancelButton: '!swal2-button-bg-gray',
},
}).then((result) => {
if (result.isConfirmed && this.appraisalCompentencyList[this.appraisalCompentencyIndex]) {
this.saveApi(approveStatus)
} else if (result.dismiss === Swal.DismissReason.cancel) {
Swal.fire({
title: 'ยกเลิก!',
text: 'การบันทึกถูกยกเลิก',
icon: 'error',
customClass: {
confirmButton: '!swal2-button-bg-danger',
}
})
}
})
}
saveApi(approveStatus: string) {
let body = this.appraisalCompentencyList[this.appraisalCompentencyIndex]
switch (this.appraisalCompentencyList[this.appraisalCompentencyIndex]?.currentStep) {
case ("0"): {
body = {
...this.appraisalCompentencyList[this.appraisalCompentencyIndex], masfromEvaluationAssessment1lList: [{
...this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0],
apsassessyStatus: approveStatus
}]
}
break
}
case ("1"): {
body = {
...this.appraisalCompentencyList[this.appraisalCompentencyIndex], masfromEvaluationAssessment1lList: [{
...this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0],
apsapprove1Status: approveStatus
}]
}
break
}
case ("2"): {
body = {
...this.appraisalCompentencyList[this.appraisalCompentencyIndex], masfromEvaluationAssessment1lList: [{
...this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0],
apsapprove1Status: approveStatus == '0' ? approveStatus : this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].apsapprove1Status,
apsapprove2Status: approveStatus
}]
}
break
}
case ("3"): {
body = {
...this.appraisalCompentencyList[this.appraisalCompentencyIndex], masfromEvaluationAssessment1lList: [{
...this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0],
apsapprove2Status: approveStatus == '0' ? approveStatus : this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].apsapprove2Status,
apsapprove3Status: approveStatus
}]
}
break
}
case ("4"): {
body = {
...this.appraisalCompentencyList[this.appraisalCompentencyIndex], masfromEvaluationAssessment1lList: [{
...this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0],
apsapprove3Status: approveStatus == '0' ? approveStatus : this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].apsapprove3Status,
apsapprove4Status: approveStatus
}]
}
break
}
case ("5"): {
body = {
...this.appraisalCompentencyList[this.appraisalCompentencyIndex], masfromEvaluationAssessment1lList: [{
...this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0],
apsapprove4Status: approveStatus == '0' ? approveStatus : this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].apsapprove4Status,
apsapprove5Status: approveStatus
}]
}
break
}
default: { return }
}
// this.appraisalService.postCompetency(body).subscribe({
// next: response => {
// if (response.success) {
// Swal.fire({
// title: 'บันทึกสำเร็จ!',
// text: 'การประเมินของคุณถูกบันทึกแล้ว',
// icon: 'success',
// customClass: {
// confirmButton: '!swal2-button-bg-green',
// }
// });
// this.getAppraisalCompentencyForm(0)
// } else {
// Swal.fire({
// title: 'ยกเลิก!',
// text: 'การบันทึกถูกยกเลิก',
// icon: 'error',
// customClass: {
// confirmButton: '!swal2-button-bg-danger',
// }
// });
// }
// }, error: error => {
// Swal.fire({
// title: 'ยกเลิก!',
// text: 'การบันทึกถูกยกเลิก',
// icon: 'error',
// customClass: {
// confirmButton: '!swal2-button-bg-danger',
// }
// });
// }
// })
}
inFormRemain(data: MasfromEvaluationAssessment2List) {
const remain = data.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList.filter(x => x.competencyBehavioral.scoreTopicExpectation == 0).length
return remain
......@@ -438,4 +281,9 @@ export class PmsCompetencyComponent {
});
}
allBiOpen(status: boolean) {
this.biOpen.forEach((_, key) => {
this.biOpen.set(key, status)
})
}
}
src/app/components/performance-evaluation/pms-form-employee/pms-form-employee.component.html
<app-page-header *ngIf="evaluationForm=='sup'" [pathTitle]="['การประเมินผล', 'ประเมินโดยหัวหน้า']"></app-page-header>
<div class="bg-card-white">
</div>
<div class="block-main-content">
<ng-container *ngTemplateOutlet="evaluation"></ng-container>
</div>
<ng-container *ngTemplateOutlet="evaluation"></ng-container>
<ng-template #evaluation>
<div *ngIf="evaluationForm=='sup'"
class="pb-2rem px-2rem pt-1.5rem w-full min-height-50px justify-between items-center">
<div *ngIf="evaluationForm=='sup'" class="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"
<button type="button"
class="ti-btn ti-btn-outline ti-btn-outline-light h-20px m-0 shadow-md text-blue-500 bg-white"
(click)="returnPath()">
<i class="ti ti-chevron-left"></i>
ย้อนกลับ
</button>
<div class="font-size-18px font-weight-700 align-center text-primary pl-1rem">
<div class="font-size-18px font-weight-700 align-center hover:text-primary pl-1rem hover:text-gray-900">
ประเมินผล PMS
</div>
</div>
</div>
<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': compentency.dataList.length}">
<nav class=" flex space-x-2 rtl:space-x-reverse">
<a *ngFor="let item of compentency.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)">
{{item.tdesc}}
</a>
</nav>
</div>
</div>
<div class="pt-50px" *ngIf="compentency.dataList.length">
<div *ngFor="let item of compentency.dataList; let i=index;let f=first" [id]="'underline-'+(i+1)" role="tabpanel"
[class.hidden]="!f">
<div class="relative pt-0.75rem">
<div class="flex relative before:bg-black/50 before:absolute before:w-full before:h-full">
<img [src]="url2 ? url2 : './assets/img/png-images/2.png'" alt="" class="h-[500px] w-full rounded-sm"
id="profile-img2" />
<span
class="absolute top-5 ltr:right-5 rtl:left-5 flex p-3 rounded-sm ring-1 ring-black/10 text-white bg-black/10 leading-none">
<i class="ri ri-pencil-line ltr:mr-2 rtl:ml-2"></i>
<span>เลือกผู้ประเมิน</span>
<input (change)="onSelectFile2($event)" type="file" name="photo"
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" id="profile-change2" />
</span>
<div class=" pt-1.5rem">
<div class="flex flex-row gap-2">
<div class="flex flex-col gap-2 w-1/4">
<div class="w-full mb-2">
<div class="font-size-18px font-weight-700 text-primary">
ประเมินผลประจำปี {{currentDate.getFullYear()}}
</div>
</div>
<div class="absolute top-28 inset-x-0 text-center space-y-3">
<div class="flex justify-center w-full">
<div class="relative cursor-pointer">
<img [src]="url1 ? url1 : './assets/img/users/1.jpg'"
class="w-24 h-24 rounded-full ring-4 ring-white/10 mx-auto" id="profile-img" alt="profile-img" />
<span
class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white/10 text-white bg-white/10 dark:bg-bgdark leading-none cursor-pointer">
<i class="ri ri-pencil-line cursor-pointer"></i>
<input (change)="onSelectFile1($event)" type="file"
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" id="profile-change" />
</span>
<div class="w-full" *ngIf="compentency.data">
<div class="box m-0" style="border-radius:20px">
<div class="box-body py-2">
<div class="flex flex-row gap-2"
[ngStyle]="{'justify-content': compentency.data.pms.gradeScore?'space-between':'center'}">
<div [ngClass]="{'w-full': !compentency.data.pms.gradeScore,'w-1/2':compentency.data.pms.gradeScore}">
<img src="./assets/img/users/defaultperson.jpg"
class="w-24 h-24 rounded-full ring-4 ring-white/10 mx-auto" id="profile-img" alt="profile-img" />
</div>
<div *ngIf="compentency.data.pms.gradeScore" class="w-1/2 flex" style="align-self: center;">
{{compentency.data.pms.gradeScore? "GRADE : " + compentency.data.pms.gradeScore : ''}}
</div>
</div>
</div>
</div>
<div class="text-white">
<h2 class="text-base font-semibold">{{evaluatee.data.thFullName}}</h2>
<p class="text-xs text-white/50">{{evaluatee.data.email}}</p>
</div>
<div class="flex space-x-2 rtl:space-x-reverse text-center justify-center">
<div id="stars-hover">
<div class="cont">
<div class="stars">
<!-- <bar-rating [(rate)]="starRate" [max]="5" [theme]="'stars'"></bar-rating>
<button type="button" aria-label="button"
class="ti-btn ti-btn-soft-success py-1 px-2 ltr:!ml-3 rtl:!mr-3 mt-1 " id="rater-reset-button">
<i>Grade: A</i>
</button> -->
</div>
</div>
<div class="w-full">
<div class="box m-0" style="border-radius:20px">
<div class="box-header">
<div class="flex justify-between">
<h5 class="box-title">ข้อมูลพนักงาน</h5>
</div>
</div>
<div class="box-body py-2">
<table class="ti-custom-table border-0 ellipsis-text">
<tbody>
<tr class="!border-0">
<td class="font-medium !p-2">รหัสพนักงาน</td>
<td class="!p-2">:</td>
<td class="font-medium !p-2">
{{evaluatee.data.employeeId}}
</td>
</tr>
<tr class="!border-0">
<td class="font-medium !p-2">ตำเเหน่ง</td>
<td class="!p-2">:</td>
<td class="font-medium !p-2 !text-warp">
{{evaluatee.data.position.tdesc}}
</td>
</tr>
<tr class="!border-0">
<td class="font-medium !p-2">ฝ่าย</td>
<td class="!p-2">:</td>
<td class="font-medium !p-2 !text-warp">
{{evaluatee.data.bu1.tdesc}}
</td>
</tr>
<tr class="!border-0">
<td class="font-medium !p-2">แผนก</td>
<td class="!p-2">:</td>
<td class="font-medium !p-2 !text-warp">
{{evaluatee.data.bu2.tdesc}}
</td>
</tr>
<tr class="!border-0">
<td class="font-medium !p-2">ส่วน</td>
<td class="!p-2">:</td>
<td class="font-medium !p-2 !text-warp">
{{evaluatee.data.bu3.tdesc}}
</td>
</tr>
<tr class="!border-0">
<td class="font-medium !p-2">ส่วนย่อย 1</td>
<td class="!p-2">:</td>
<td class="font-medium !p-2 !text-warp">
{{evaluatee.data.bu4.tdesc}}
</td>
</tr>
<tr class="!border-0">
<td class="font-medium !p-2">ส่วนย่อย 2</td>
<td class="!p-2">:</td>
<td class="font-medium !p-2 !text-warp">
{{evaluatee.data.bu5.tdesc}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="main-content -mt-28">
<div class="grid grid-cols-12 gap-x-6">
<div class="col-span-12 xxl:col-span-3">
<div class="box">
<div class="box-header">
<div class="flex justify-between">
<h5 class="box-title">ข้อมูลพนักงาน</h5>
</div>
</div>
<div class="box-body py-2">
<div class="xl:overflow-hidden overflow-x-auto">
<table class="ti-custom-table border-0 ellipsis-text">
<tbody>
<tr class="">
<td class="font-medium !p-2">ตำเเหน่ง</td>
<td class="!p-2">:</td>
<td class="font-medium !p-2">
{{evaluatee.data.position.tdesc}}
</td>
</tr>
<tr class="!border-0">
<td class="font-medium !p-2">ฝ่าย</td>
<td class="!p-2">:</td>
<td class="font-medium !p-2">
{{evaluatee.data.bu1.tdesc}}
</td>
</tr>
<tr class="!border-0">
<td class="font-medium !p-2">แผนก</td>
<td class="!p-2">:</td>
<td class="font-medium !p-2">
{{evaluatee.data.bu2.tdesc}}
</td>
</tr>
<tr class="!border-0">
<td class="font-medium !p-2">ส่วน</td>
<td class="!p-2">:</td>
<td class="font-medium !p-2">
{{evaluatee.data.bu3.tdesc}}
</td>
</tr>
<tr class="!border-0">
<td class="font-medium !p-2">ส่วนย่อย 1</td>
<td class="!p-2">:</td>
<td class="font-medium !p-2">
{{evaluatee.data.bu4.tdesc}}
</td>
</tr>
<tr class="!border-0">
<td class="font-medium !p-2">ส่วนย่อย 2</td>
<td class="!p-2">:</td>
<td class="font-medium !p-2">
{{evaluatee.data.bu5.tdesc}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-full" *ngIf="compentency.data">
<div class="box m-0" style="border-radius:20px">
<div class="box-header">
<div class="flex justify-between">
<h5 class="box-title">สถานะการประเมิน</h5>
</div>
<div class="box">
<div class="box-header">
<div class="flex justify-between">
<h5 class="box-title">สถานะการประเมิน</h5>
</div>
<div class="box-body space-y-4 text-center">
<ng-container
*ngFor="let apsEmp of ['apsassessy','apsapprove1','apsapprove2','apsapprove3','apsapprove4','apsapprove5']; let i=index ; let f=first">
<div class="flex flex-row" *ngIf="returnField(compentency.data,apsEmp+'.thFullName')">
<div class="mx-auto relative">
<div class="h-full flex items-center justify-center pb-4" style="width: 32px;">
<div class="h-full w-[3px] bg-gray-100 pointer-events-none"></div>
</div>
<div class="absolute rounded-full text-center align-center" style="justify-items:center;top:-5px">
<span class="d-flex align-items-center justify-content-center rounded-circle text-white"
[class]="assessmentStatusClass(compentency.data.currentStep,i,returnField(compentency.data,apsEmp+'.status'))">
<i
[class]="assessmentStatusIcon(compentency.data.currentStep,i,returnField(compentency.data,apsEmp+'.status'))"></i>
</span>
</div>
</div>
</div>
<div class="box-body space-y-4 text-center">
<ng-container
*ngFor="let apsEmp of ['apsassessy','apsapprove1','apsapprove2','apsapprove3','apsapprove4','apsapprove5']; let i=index ; let f=first">
<div class="flex flex-row" *ngIf="returnField(item,apsEmp+'.thFullName')">
<div class="mx-auto relative">
<div class="h-full flex items-center justify-center pb-4" style="width: 32px;">
<div class="h-full w-[3px] bg-gray-100 pointer-events-none"></div>
</div>
<div class="absolute rounded-full text-center align-center"
style="justify-items:center;top:-5px">
<span class="d-flex align-items-center justify-content-center rounded-circle text-white"
[class]="assessmentStatusClass(item.currentStep,i,returnField(item,apsEmp+'.status'))">
<i
[class]="assessmentStatusIcon(item.currentStep,i,returnField(item,apsEmp+'.status'))"></i>
<div class="flex w-full pb-4">
<div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
<div class="sm:flex">
<h3 class="text-start my-auto text-gray-500 dark:text-white/70" style="line-height: 1.5">
<span class="text-dark dark:text-white">
<ng-container *ngIf="i==0">
ผู้รับการประเมิน
</ng-container>
<ng-container *ngIf="i==1&&returnField(compentency.data,'apsapprove'+(i+1)+'.thFullName')">
ผู้ประเมิน
</ng-container>
<ng-container *ngIf="i==1&&!returnField(compentency.data,'apsapprove'+(i+1)+'.thFullName')">
ผู้อนุมัติลำดับที่ 1
</ng-container>
<ng-container *ngIf="i>1&&!returnField(compentency.data,'apsapprove'+(i+1)+'.thFullName')">
ผู้อนุมัติลำดับที่ {{i-1}}
</ng-container>
</span>
</div>
</div>
<div class="flex w-full pb-4">
<div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
<div class="sm:flex">
<h3 class="text-start my-auto text-gray-500 dark:text-white/70" style="line-height: 1.5">
<span class="text-dark dark:text-white">
<ng-container *ngIf="f">
ผู้รับการประเมิน
</ng-container>
<ng-container *ngIf="!f&&returnField(item,'apsassessy'+(i+1)+'.thFullName')">
ผู้ประเมิน{{i}}
</ng-container>
<ng-container *ngIf="!f&&!returnField(item,'apsassessy'+(i+1)+'.thFullName')">
ผู้อนุมัติ
</ng-container>
</span>
<br>
<span class="text-dark dark:text-white">
{{returnField(item,apsEmp+'.thFullName')}}
</span>
<br>
<p class="text-xs text-gray-500 dark:text-white/70">
{{assessmentStatusText(item.currentStep,i,returnField(item,apsEmp+'.status'))}}
</p>
</h3>
</div>
</div>
<br>
<span class="text-dark dark:text-white">
{{returnField(compentency.data,apsEmp+'.thFullName')}}
</span>
<br>
<p class="text-xs text-gray-500 dark:text-white/70">
{{assessmentStatusText(compentency.data.currentStep,i,returnField(compentency.data,apsEmp+'.status'))}}
</p>
</h3>
</div>
</div>
</ng-container>
</div>
</div>
</ng-container>
</div>
</div>
</div>
<div class="w-full" *ngIf="commentAllFilter().length">
<div class="box m-0" style="border-radius:20px">
<div class="box-header">
<div class="flex justify-between">
<h5 class="box-title">Timeline</h5>
</div>
<div class="box" *ngIf="commentAllFilter().length">
<div class="box-header">
<div class="flex justify-between">
<h5 class="box-title">Timeline</h5>
</div>
<div class="box-body space-y-4 text-center">
<div class="flex flex-row" *ngFor="let item of commentAllFilter(); let i=index">
<div class="mx-auto relative">
<div class="h-full flex items-center justify-center pb-4" style="width: 32px;">
<div class="h-full w-[3px] bg-gray-100 pointer-events-none"></div>
</div>
<div class="absolute rounded-full text-center align-center" style="justify-items:center;top:-5px">
<span class="d-flex align-items-center justify-content-center rounded-circle text-white"
[class]="statusCompetencyClass(item.statusType)">
<i [class]="statusCompetencyIcon(item.statusType)"></i>
</span>
</div>
</div>
<div class="box-body space-y-4 text-center">
<div class="flex flex-row" *ngFor="let item of commentAllFilter(); let i=index">
<div class="mx-auto relative">
<div class="h-full flex items-center justify-center pb-4" style="width: 32px;">
<div class="h-full w-[3px] bg-gray-100 pointer-events-none"></div>
</div>
<div class="absolute rounded-full text-center align-center"
style="justify-items:center;top:-5px">
<span class="d-flex align-items-center justify-content-center rounded-circle text-white"
[class]="statusCompetencyClass(item.statusType)">
<i [class]="statusCompetencyIcon(item.statusType)"></i>
<div class="flex w-full pb-4">
<div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
<div class="w-full">
<h3 class="text-start my-auto text-gray-500 dark:text-white/70" style="line-height: 1.5">
<span class="text-dark dark:text-white" style="white-space: nowrap;">
{{item.thFullName}}
</span>
</div>
</div>
<div class="flex w-full pb-4">
<div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
<div class="w-full">
<h3 class="text-start my-auto text-gray-500 dark:text-white/70" style="line-height: 1.5">
<span class="text-dark dark:text-white" style="white-space: nowrap;">
{{item.thFullName}}
</span>
<br>
<div style="display: flex;justify-content :space-between;">
<p class="text-xs text-gray-500 dark:text-white/70">
{{statusCompetencyText(item.statusType)}}
</p>
<p class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs">
{{convertDate(item.commentDate)}}
</p>
</div>
</h3>
</div>
<div *ngIf="item.comment"
class="border border-gray-200 bg-gray-50 dark:bg-black/20 dark:border-white/10 p-4 rounded-sm">
<p class="text-start text-xs text-gray-500 dark:text-white/70" style="line-height: 1.5">
{{item.comment}}
<br>
<div style="display: flex;justify-content :space-between;">
<p class="text-xs text-gray-500 dark:text-white/70">
{{statusCompetencyText(item.statusType)}}
</p>
<p class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs">
{{convertDate(item.commentDate)}}
</p>
</div>
</div>
</h3>
</div>
<div *ngIf="item.comment"
class="border border-gray-200 bg-gray-50 dark:bg-black/20 dark:border-white/10 p-4 rounded-sm">
<p class="text-start text-xs text-gray-500 dark:text-white/70" style="line-height: 1.5">
{{item.comment}}
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-12 xxl:col-span-9">
<div class="box">
<div class="box-header">
<nav class="sm:flex sm:space-x-2 space-y-2 sm:space-y-0 rtl:space-x-reverse block" aria-label="Tabs"
role="tablist">
<button type="button" [class.active]="currentTap==''"
class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
id="profile-item-1" data-hs-tab="#profile-1" aria-controls="profile-1" role="tab">
ข้อมูลการประเมิน
</button>
<button type="button" [class.active]="currentTap!='idp'&&currentTap!='pms'&&currentTap!=''"
(click)="currentTapChange()"
class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
id="profile-item-2" data-hs-tab="#profile-2" aria-controls="profile-2" role="tab">
แบบประเมินสมรรถนะ
<span class="d-flex align-items-center justify-content-center rounded-circle text-white"
[class.bg-danger]="compentencyFormRemain" [class.bg-success]="!compentencyFormRemain">
<ng-container *ngIf="compentencyFormRemain">
{{compentencyFormRemain}}
</ng-container>
<i *ngIf="!compentencyFormRemain" class="ti ti-check"></i>
</span>
</button>
<button type="button" [class.active]="currentTap=='pms'"
class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
id="profile-item-3" data-hs-tab="#profile-3" aria-controls="profile-3" role="tab">
แบบประเมินประสิทธิภาพ
<span class="d-flex align-items-center justify-content-center rounded-circle text-white"
[class.bg-danger]="kpiFormRemain" [class.bg-success]="!kpiFormRemain">
<ng-container *ngIf="kpiFormRemain">
{{kpiFormRemain}}
</ng-container>
<i *ngIf="!kpiFormRemain" class="ti ti-check"></i>
</span>
</button>
<button *ngIf="evaluationForm=='sup'" type="button" [class.active]="currentTap=='idp'"
class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
id="profile-item-4" data-hs-tab="#profile-4" aria-controls="profile-4" role="tab">
แผนพัฒนาบุคคลากร
</button>
<button type="button" [class.active]="currentTap=='2'"
class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
id="profile-item-4" data-hs-tab="#profile-5" aria-controls="profile-5" role="tab">
สรุปคะแนนและข้อเสนอแนะ
</button>
</nav>
</div>
<div class="box-body">
<div id="profile-1" [class.hidden]="currentTap!=''" role="tabpanel" aria-labelledby="profile-item-1">
<app-pms-information></app-pms-information>
</div>
<div id="profile-2" [class.hidden]="currentTap=='idp'||currentTap=='pms'||currentTap==''"
role="tabpanel" aria-labelledby="profile-item-2">
<ng-container *ngIf="compentency.data&&evaluaterId&&evaluateeId">
<app-pms-competency [currentTap]="currentTap"
[appraisalCompentencyList]="compentency.data.competency" [evaluaterId]="evaluaterId"
[evaluateeId]="evaluateeId" [canEdit]="canEdit" [currentStep]="compentency.data.currentStep"
[dateIso]="dateIso" (compentencyFormRemain)="compentencyFormRemain=$event"
(compentencyForm)="compentency.data.competency=$event"></app-pms-competency>
</ng-container>
</div>
<div id="profile-3" [class.hidden]="currentTap!='pms'" class="text-center" role="tabpanel"
aria-labelledby="profile-item-3">
<ng-container *ngIf="compentency.data&&evaluateeId&&evaluaterId">
<app-pms-kpi [appraisalPms]="compentency.data.pms" [evaluaterId]="evaluaterId"
[evaluateeId]="evaluateeId" [canEdit]="canEdit" [currentStep]="compentency.data.currentStep"
[dateIso]="dateIso" (kpiFormRemain)="kpiFormRemain=$event"
(kpiForm)="compentency.data.pms=$event"></app-pms-kpi>
</ng-container>
</div>
<div id="profile-4" [class.hidden]="currentTap!='idp'" class="text-center" role="tabpanel"
aria-labelledby="profile-item-4">
<ng-container *ngIf="compentency.data&&evaluateeId&&evaluaterId">
<app-pms-idp [appraisalIdp]="compentency.data.idp" [evaluaterId]="evaluaterId"
[evaluateeId]="evaluateeId" [canEdit]="canEdit" [currentStep]="compentency.data.currentStep"
[dateIso]="dateIso" (idpForm)="compentency.data.idp=$event"></app-pms-idp>
</ng-container>
</div>
<div id="profile-5" [class.hidden]="currentTap!='2'" class="text-center" role="tabpanel"
aria-labelledby="profile-item-5">
<app-pms-summary></app-pms-summary>
</div>
</div>
<div *ngIf="compentency.data&&canSave" class="box-footer text-end space-x-3 rtl:space-x-reverse">
<div class="p-4 space-y-3 border-t border-gray-200 dark:border-white/10">
<textarea type="text" class="ti-form-input" rows="4" placeholder="ใส่ Comment ที่นี่"
[(ngModel)]="comment"></textarea>
</div>
<button (click)="save('approve')" class="ti-btn m-0 ti-btn-soft-secondary"
[disabled]="compentencyFormRemain||kpiFormRemain"
[class.ti-btn-disabled]="compentencyFormRemain||kpiFormRemain">
<i class="ri-save-3-fill"></i>
<ng-container *ngIf="compentency.data.currentStep == '0'">
ยืนยันข้อมูล
</div>
</div>
</div>
<div class="flex flex-col w-3/4 gap-2">
<div class="w-full mb-2 flex">
<div class="w-3/4 flex flex-row gap-2">
<ng-container *ngFor="let item of compentency.dataList; let i=index ; let f= first">
<div class="font-size-18px font-weight-700">
<span class="cursor-pointer"
[ngClass]="{'text-secondary border-secondary border-b':compentency.data?.tdesc==item.tdesc,'hover:text-gray-900':!(compentency.data?.tdesc==item.tdesc)}"
(click)="selectDataList(item)">
{{item.tdesc}}
</span>
</div>
</ng-container>
</div>
<div class="w-1/4">
<div class="font-size-18px font-weight-700 text-primary">
สถานะผู้ประเมิน&nbsp;:&nbsp;{{currentStepText()}}
</div>
</div>
</div>
<div class="w-full">
<div class="box m-0" style="border-radius:20px">
<div class="box-header">
<div class="flex gap-2">
<button type="button" class="flex-1 border bg-white p-2 text-center" style="border-radius:20px"
(click)="currentTap='ข้อมูลการประเมิน'"
[ngClass]="{'!bg-primary text-white':currentTap=='ข้อมูลการประเมิน'}">
ข้อมูลการประเมิน
</button>
<button type="button" class="flex-1 flex justify-center !items-center border bg-white p-2 text-center"
style="border-radius:20px" (click)="currentTap='แบบประเมินสมรรถนะ'"
[ngClass]="{'!bg-primary text-white':currentTap=='แบบประเมินสมรรถนะ'}">
แบบประเมินสมรรถนะ
&nbsp;
<span class="d-flex align-items-center justify-content-center rounded-circle text-white"
[class.bg-danger]="compentencyFormRemain" [class.bg-success]="!compentencyFormRemain">
<ng-container *ngIf="compentencyFormRemain">
{{compentencyFormRemain}}
</ng-container>
<ng-container *ngIf="compentency.data.currentStep != '0'">
อนุมัติ
<i *ngIf="!compentencyFormRemain" class="ti ti-check"></i>
</span>
</button>
<button type="button" class="flex-1 flex justify-center !items-center border bg-white p-2 text-center"
style="border-radius:20px" (click)="currentTap='ประเมินผลการปฏิบัติงาน'"
[ngClass]="{'!bg-primary text-white':currentTap=='ประเมินผลการปฏิบัติงาน'}">
ประเมินผลการปฏิบัติงาน
&nbsp;
<span class="d-flex align-items-center justify-content-center rounded-circle text-white"
[class.bg-danger]="kpiFormRemain" [class.bg-success]="!kpiFormRemain">
<ng-container *ngIf="kpiFormRemain">
{{kpiFormRemain}}
</ng-container>
</button>
<button (click)="save('draft')" class="ti-btn m-0 ti-btn-soft-success"
*ngIf="compentency.data.currentStep == '0'||compentency.data.currentStep == '1'">
<i class="ri-draft-fill"></i>
บันทึกร่าง
</button>
<button (click)="save('noApprove')" class="ti-btn m-0 ti-btn-soft-danger"
*ngIf="compentency.data.currentStep != '0' && compentency.data.currentStep != '1'">
<i class="ri-reply-fill"></i>
ไม่อนุมัติ
</button>
</div>
<i *ngIf="!kpiFormRemain" class="ti ti-check"></i>
</span>
</button>
<button type="button" class="flex-1 border bg-white p-2 text-center" style="border-radius:20px"
(click)="currentTap='สรุปคะแนนและข้อเสนอแนะ'"
[ngClass]="{'!bg-primary text-white':currentTap=='สรุปคะแนนและข้อเสนอแนะ'}">
สรุปคะแนนและข้อเสนอแนะ
</button>
<button *ngIf="evaluationForm=='sup'" type="button" class="flex-1 border bg-white p-2 text-center"
style="border-radius:20px" (click)="currentTap='แผนพัฒนาบุคคลากร'"
[ngClass]="{'!bg-primary text-white':currentTap=='แผนพัฒนาบุคคลากร'}">
แผนพัฒนาบุคคลากร
</button>
</div>
</div>
<div class="box-body">
<ng-container *ngIf="currentTap=='ข้อมูลการประเมิน'">
<app-pms-information></app-pms-information>
</ng-container>
<ng-container *ngIf="currentTap=='แบบประเมินสมรรถนะ'&&compentency.data&&evaluaterId&&evaluateeId">
<app-pms-competency [currentTap]="currentTap" [appraisalCompentencyList]="compentency.data.competency"
[evaluaterId]="evaluaterId" [evaluateeId]="evaluateeId" [canEdit]="canEdit"
[currentStep]="compentency.data.currentStep" [dateIso]="dateIso"
(compentencyFormRemain)="compentencyFormRemain=$event"
(compentencyForm)="compentency.data.competency=$event"></app-pms-competency>
</ng-container>
<ng-container *ngIf="currentTap=='ประเมินผลการปฏิบัติงาน'&&compentency.data&&evaluateeId&&evaluaterId">
<ng-container *ngIf="compentency.data&&evaluateeId&&evaluaterId">
<app-pms-kpi [appraisalPms]="compentency.data.pms" [currentTap]="currentTap"
[evaluaterId]="evaluaterId" [evaluateeId]="evaluateeId" [canEdit]="canEdit"
[currentStep]="compentency.data.currentStep" [dateIso]="dateIso"
(kpiFormRemain)="kpiFormRemain=$event" (kpiForm)="compentency.data.pms=$event"></app-pms-kpi>
</ng-container>
</ng-container>
<ng-container *ngIf="currentTap=='สรุปคะแนนและข้อเสนอแนะ'&&compentency.data&&evaluateeId&&evaluaterId">
<app-pms-kpi [appraisalPms]="compentency.data.pms" [currentTap]="currentTap" [evaluaterId]="evaluaterId"
[evaluateeId]="evaluateeId" [canEdit]="canEdit" [currentStep]="compentency.data.currentStep"
[dateIso]="dateIso" (kpiFormRemain)="kpiFormRemain=$event"
(kpiForm)="compentency.data.pms=$event"></app-pms-kpi>
</ng-container>
<ng-container *ngIf="currentTap=='แผนพัฒนาบุคคลากร'&&compentency.data&&evaluateeId&&evaluaterId">
<app-pms-idp [appraisalIdp]="compentency.data.idp" [evaluaterId]="evaluaterId"
[evaluateeId]="evaluateeId" [canEdit]="canEdit" [currentStep]="compentency.data.currentStep"
[dateIso]="dateIso" (idpForm)="compentency.data.idp=$event"></app-pms-idp>
</ng-container>
</div>
<div *ngIf="compentency.data&&canSave" class="box-footer text-end space-x-3 rtl:space-x-reverse">
<div class="py-4 space-y-3 border-t border-gray-200 dark:border-white/10">
<textarea type="text" class="ti-form-input" rows="4" placeholder="ใส่ Comment ที่นี่"
[(ngModel)]="comment"></textarea>
</div>
<button (click)="save('approve')" class="ti-btn m-0 ti-btn-soft-secondary"
[disabled]="compentencyFormRemain||kpiFormRemain"
[class.ti-btn-disabled]="compentencyFormRemain||kpiFormRemain">
<i class="ri-save-3-fill"></i>
<ng-container *ngIf="compentency.data.currentStep == '0'">
ยืนยันข้อมูล
</ng-container>
<ng-container *ngIf="compentency.data.currentStep != '0'">
อนุมัติ
</ng-container>
</button>
<button (click)="save('draft')" class="ti-btn m-0 ti-btn-soft-success"
*ngIf="compentency.data.currentStep == '0'||compentency.data.currentStep == '1'">
<i class="ri-draft-fill"></i>
บันทึกร่าง
</button>
<button (click)="save('noApprove')" class="ti-btn m-0 ti-btn-soft-danger"
*ngIf="compentency.data.currentStep != '0' && compentency.data.currentStep != '1'">
<i class="ri-reply-fill"></i>
ไม่อนุมัติ
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
\ No newline at end of file
</ng-template>
<div class="hidden" *ngIf="compentency.data">
<app-pms-competency [appraisalCompentencyList]="compentency.data.competency"
(compentencyFormRemain)="compentencyFormRemain=$event"></app-pms-competency>
<app-pms-kpi [appraisalPms]="compentency.data.pms" (kpiFormRemain)="kpiFormRemain=$event"></app-pms-kpi>
</div>
\ No newline at end of file
src/app/components/performance-evaluation/pms-form-employee/pms-form-employee.component.ts
......@@ -13,7 +13,7 @@ import Swal from 'sweetalert2';
styleUrls: ['./pms-form-employee.component.scss']
})
export class PmsFormEmployeeComponent {
@Input() currentTap = ""
@Input() currentTap = "ข้อมูลการประเมิน"
@Input() evaluateeId = ""
@Input() evaluaterId = ""
@Input() evaluationForm: 'self' | 'sup' = "self"
......@@ -50,6 +50,28 @@ export class PmsFormEmployeeComponent {
currentDate = new Date()
comment = ""
currentStepText = () => {
if (this.compentency.data) {
if (this.compentency.data.apsassessy.employeeId == this.evaluaterId) {
return "ผู้รับการประเมิน"
} else if (this.compentency.data.apsapprove1.employeeId == this.evaluaterId) {
if (this.compentency.data.apsapprove2.employeeId) {
return "ผู้ประเมิน"
}
return "ผู้อนุมัติลำดับที่ 1"
} else if (this.compentency.data.apsapprove2.employeeId == this.evaluaterId) {
return "ผู้อนุมัติลำดับที่ 1"
} else if (this.compentency.data.apsapprove3.employeeId == this.evaluaterId) {
return "ผู้อนุมัติลำดับที่ 2"
} else if (this.compentency.data.apsapprove4.employeeId == this.evaluaterId) {
return "ผู้อนุมัติลำดับที่ 3"
} else if (this.compentency.data.apsapprove5.employeeId == this.evaluaterId) {
return "ผู้อนุมัติลำดับที่ 4"
}
}
return ""
}
statusCompetencyText = (status: string) => {
if (status === "no access") {
return "ยังไม่ถึงขั้นตอนดำเนินการ"
......@@ -65,7 +87,6 @@ export class PmsFormEmployeeComponent {
return ""
}
}
statusCompetencyClass = (status: string) => {
if (status === "no access") {
return "bg-mute"
......@@ -241,11 +262,15 @@ export class PmsFormEmployeeComponent {
}
selectDataList(data: CompetencyModel) {
this.compentency.data = data
this.compentency.data.commentAll.sort((a, b) => new Date(b.commentDate).getTime() - new Date(a.commentDate).getTime());
this.canSave = this.compentency.data.statusType == "pending" || this.compentency.data.statusType == "evaluating"
this.canDraft = +this.compentency.data.currentStep <= 1 && (this.compentency.data.statusType == "pending" || this.compentency.data.statusType == "evaluating")
this.canEdit = +this.compentency.data.currentStep <= 1 && (this.compentency.data.statusType == "pending" || this.compentency.data.statusType == "evaluating")
this.compentency.data = JSON.parse(JSON.stringify(data))
if (this.compentency.data) {
this.currentTap = "ข้อมูลการประเมิน"
this.compentency.data.commentAll.sort((a, b) => new Date(b.commentDate).getTime() - new Date(a.commentDate).getTime());
this.canSave = this.compentency.data.statusType == "pending" || this.compentency.data.statusType == "evaluating"
this.canDraft = +this.compentency.data.currentStep <= 1 && (this.compentency.data.statusType == "pending" || this.compentency.data.statusType == "evaluating")
this.canEdit = +this.compentency.data.currentStep <= 1 && (this.compentency.data.statusType == "pending" || this.compentency.data.statusType == "evaluating")
this.cdr.detectChanges()
}
}
getEvaluatee() {
......@@ -263,11 +288,6 @@ export class PmsFormEmployeeComponent {
}
currentTapChange() {
if (this.compentency.data?.competency.length) {
this.currentTap = this.compentency.data?.competency[0].comType || ''
}
}
onSelectFile1(event: any) {
if (event.target && event.target.files && event.target.files[0]) {
const reader = new FileReader();
......
src/app/components/performance-evaluation/pms-form-employee/pms-kpi/pms-kpi.component.html
......@@ -3,121 +3,22 @@
<ng-template #pmsEvaluation>
<ng-container *ngIf="appraisalPms">
<div class="pb-2rem px-2rem">
<div class="font-size-18px font-weight-700 text-primary">
JOB PERFORMANCE EVALUATION FORM
</div>
</div>
<div class="pb-1rem px-2rem">
<div class="grid grid-cols-6">
<div class="col-span-6 grid grid-cols-6">
<div class="col-span-3 border p-2 pb-4">
<span>ผู้รับการประเมิน (Employee)</span>
</div>
<div class="col-span-3 border p-2 pb-4">
<span>ผู้ประเมิน (Evaluator)</span>
</div>
</div>
<div class="col-span-6 grid grid-cols-6">
<div class="col-span-3 grid grid-cols-4">
<div class="col-span-1 p-2 border pb-4">
<span>ชื่อ-สกุล</span>
</div>
<div class="col-span-3 p-2 border pb-4">
<span>
{{appraisalPms.apsassessy.prefix.tdesc || ""}}
{{appraisalPms.apsassessy.thFullName || ""}}</span>
</div>
</div>
<div class="col-span-3 grid grid-cols-4">
<div class="col-span-1 p-2 border pb-4">
<span>ชื่อ-สกุล</span>
</div>
<div class="col-span-3 p-2 border pb-4">
<span *ngIf="appraisalPms.apsapprove1.prefix">{{appraisalPms.apsapprove1.prefix.tdesc ||
""}}
{{appraisalPms.apsapprove1.thFullName || ""}}</span>
</div>
</div>
</div>
<div class="col-span-6 grid grid-cols-6">
<div class="col-span-3 grid grid-cols-4">
<div class="col-span-1 p-2 border pb-4">
<span>รหัส (ID)</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>{{appraisalPms.apsassessy.employeeId || ""}}</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>ตำแหน่ง (Position)</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>{{appraisalPms.apsassessy.position.tdesc || ""}}</span>
</div>
</div>
<div class="col-span-3 grid grid-cols-4">
<div class="col-span-1 p-2 border pb-4">
<span>รหัส (ID)</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>{{appraisalPms.apsapprove1.employeeId || ""}}</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>ตำแหน่ง (Position)</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span *ngIf="appraisalPms.apsapprove1.position">
{{appraisalPms.apsapprove1.position.tdesc || ""}}
</span>
</div>
</div>
</div>
<div class="col-span-6 grid grid-cols-6">
<div class="col-span-3 grid grid-cols-4">
<div class="col-span-1 p-2 border pb-4">
<span>ฝ่าย (Department)</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>{{appraisalPms.apsassessy.bu1.tdesc || ""}}</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>แผนก (Section)</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>{{appraisalPms.apsassessy.bu2.tdesc || ""}}</span>
</div>
</div>
<div class="col-span-3 grid grid-cols-4">
<div class="col-span-1 p-2 border pb-4">
<span>ฝ่าย (Department)</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span *ngIf="appraisalPms.apsapprove1.bu1">{{appraisalPms.apsapprove1.bu1.tdesc ||
""}}</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>แผนก (Section)</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span *ngIf="appraisalPms.apsapprove1.bu2">{{appraisalPms.apsapprove1.bu2.tdesc ||
""}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="pb-2rem px-2rem">
<div id="hs-tab-js-vertical-1" role="tabpanel" aria-labelledby="hs-tab-js-vertical-item-1">
<div class="hs-accordion-group w-full" data-hs-accordion-always-open>
<ng-container *ngIf="appraisalPms?.part1Detail?.length then part1 else noData"></ng-container>
<ng-container *ngIf="appraisalPms?.part2Detail?.length then part2 else noData"></ng-container>
<ng-container *ngIf="appraisalPms?.part3Detail?.length then part3 else noData"></ng-container>
<ng-container *ngIf="appraisalPms?.part4Detail?.length then part4 else noData"></ng-container>
<ng-container *ngIf="appraisalPms?.part5Detail?.length then part5 else noData"></ng-container>
<ng-container *ngIf="appraisalPms?.part6Detail?.length then part6 else noData"></ng-container>
<ng-container *ngIf="appraisalPms?.part7Detail?.length then part7 else noData"></ng-container>
<ng-container *ngTemplateOutlet="part8"></ng-container>
<ng-container *ngTemplateOutlet="part9"></ng-container>
<ng-container *ngTemplateOutlet="part10"></ng-container>
<ng-container *ngIf="currentTap=='ประเมินผลการปฏิบัติงาน'">
<ng-container *ngIf="appraisalPms?.part1Detail?.length then part1 else noData"></ng-container>
<ng-container *ngIf="appraisalPms?.part2Detail?.length then part2 else noData"></ng-container>
<ng-container *ngIf="appraisalPms?.part3Detail?.length then part3 else noData"></ng-container>
<ng-container *ngIf="appraisalPms?.part4Detail?.length then part4 else noData"></ng-container>
<ng-container *ngIf="appraisalPms?.part5Detail?.length then part5 else noData"></ng-container>
<ng-container *ngIf="appraisalPms?.part6Detail?.length then part6 else noData"></ng-container>
<ng-container *ngIf="appraisalPms?.part7Detail?.length then part7 else noData"></ng-container>
</ng-container>
<ng-container *ngIf="currentTap=='สรุปคะแนนและข้อเสนอแนะ'">
<ng-container *ngTemplateOutlet="part8"></ng-container>
<ng-container *ngTemplateOutlet="part9"></ng-container>
<ng-container *ngTemplateOutlet="part10"></ng-container>
</ng-container>
</div>
</div>
</div>
......@@ -1269,7 +1170,6 @@
</div>
</ng-template>
<ng-template #part7>
<div class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
id="hs-primary-heading-1">
......@@ -1473,6 +1373,11 @@
</ng-template>
<ng-template #noData>
</ng-template>
<ng-template #part8>
<div class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
id="hs-primary-heading-1">
......@@ -1711,4 +1616,8 @@
</div>
</div>
</div>
</ng-template>
\ No newline at end of file
</ng-template>
<div class="hidden">
{{allFormRemain()}}
</div>
\ No newline at end of file
src/app/components/performance-evaluation/pms-form-employee/pms-kpi/pms-kpi.component.ts
......@@ -92,8 +92,8 @@ export class PmsKpiComponent {
@Input() appraisalPms?: Pms
@Input() canEdit = false
@Input() currentStep = ""
@Input() currentTap = ""
@Input() dateIso = ""
@Output() sendReturnPath: EventEmitter<any> = new EventEmitter<any>();
@Output() kpiFormRemain: EventEmitter<any> = new EventEmitter<any>();
@Output() kpiForm: EventEmitter<any> = new EventEmitter<any>();
groupGrade: { loading: boolean, dataList: CompetencyGradeModel[] } = { loading: false, dataList: [] }
......@@ -201,9 +201,7 @@ export class PmsKpiComponent {
}
})
}
returnPath() {
this.sendReturnPath.emit()
}
calRawScore(data?: any) {
if (data) {
......
src/app/components/performance-evaluation/pms-form-employee/pms-summary/pms-summary.component.html
<p>pms-summary works!</p>
<ng-container *ngTemplateOutlet="pmsEvaluation"></ng-container>
<ng-template #pmsEvaluation>
<ng-container *ngIf="appraisalPms">
<div class="pb-2rem px-2rem">
<div id="hs-tab-js-vertical-1" role="tabpanel" aria-labelledby="hs-tab-js-vertical-item-1">
<div class="hs-accordion-group w-full" data-hs-accordion-always-open>
<ng-container *ngTemplateOutlet="part8"></ng-container>
<ng-container *ngTemplateOutlet="part9"></ng-container>
<ng-container *ngTemplateOutlet="part10"></ng-container>
</div>
</div>
</div>
</ng-container>
</ng-template>
<ng-template #noData>
</ng-template>
<ng-template #part8>
<div class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
id="hs-primary-heading-1">
<button (click)="scrollToTable($event)"
class="hs-accordion-toggle hs-accordion-active:text-white hs-accordion-active:bg-secondary group py-4 px-5 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-white dark:text-gray-200 dark:hover:text-white/80"
aria-controls="hs-primary-collapse-1" type="button">
<div></div>
<span>
Part 8 : สรุปผลการปฏิบัติงาน (Summary)
</span>
<svg class="hs-accordion-active:hidden hs-accordion-active:text-white hs-accordion-active:group-hover:text-white block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-white/70"
width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="hs-accordion-active:block hs-accordion-active:text-white hs-accordion-active:group-hover:text-white hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-white/70"
width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="hs-primary-collapse-1"
class="hs-accordion-content hidden !w-full overflow-hidden transition-[height] duration-300"
aria-labelledby="hs-primary-heading-1">
<div class="box-body p-0">
<div class="space-y-4">
<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 ['การประเมินผล (Evaluation Factor)','คะแนนดิบคิดเป็นร้อยละ','ร้อยละของปัจจัย','คะแนนที่ได้คิดเป็นร้อยละ','คะแนนสุทธิ\n(Net Score)','ระดับผลการปฏิบัติงาน'];let i = index;let l = last">
<th scope="col"
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="!l" 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>
</thead>
<tbody *ngIf="data8List.length">
<ng-container *ngIf="part8show">
<tr *ngFor="let item of data8List;let i = index">
<td class="align-start !white-space-normal">
{{item.evaluationFactor}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.rawScore}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.factors}}
</td>
<td class="align-start !white-space-normal text-center">
{{numberFixed2(item.scoreObtained)}}
</td>
<td class="align-start !white-space-normal text-center">
{{numberFixed2(item.netScore)}}
</td>
<td></td>
</tr>
</ng-container>
<tr class="bg-table-soft-gray">
<td class="align-start text-center">
รวม
</td>
<td class="align-start text-center">
</td>
<td class="align-start text-center">
{{calFactors()}}
</td>
<td class="align-start text-center">
{{calScoreObtained()}}
</td>
<td class="align-start text-center">
{{calNetScore()}}
</td>
<td class="align-start !white-space-normal" *ngIf="appraisalPms">
<ng-container
*ngFor="let item of groupGrade.dataList; let i=index;let f= first">
<span style="display:flex;align-items:center" [class.mt-2]="!f">
<i *ngIf="appraisalPms.gradeScore==item.gradeDetail"
class="ri ri-star-fill pr-10px"></i>
<i *ngIf="appraisalPms.gradeScore!=item.gradeDetail"
class="ti ti-star pr-10px"></i>
{{item.gradeDetail}} = {{item.tdesc}}<br>
</span>
</ng-container>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</ng-template>
<ng-template #part9>
<div class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
id="hs-primary-heading-1">
<button (click)="scrollToTable($event)"
class="hs-accordion-toggle hs-accordion-active:text-white hs-accordion-active:bg-secondary group py-4 px-5 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-white dark:text-gray-200 dark:hover:text-white/80"
aria-controls="hs-primary-collapse-1" type="button">
<div></div>
<span>
Part 9 : พฤติกรรมบุคคลที่เป็นจุดแข็ง จุดอ่อน และการพัฒนา
(EMPLOYEE STRENGTHS , WEAKNESSES AND PLAN TO IMPROVED)
</span>
<svg class="hs-accordion-active:hidden hs-accordion-active:text-white hs-accordion-active:group-hover:text-white block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-white/70"
width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="hs-accordion-active:block hs-accordion-active:text-white hs-accordion-active:group-hover:text-white hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-white/70"
width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="hs-primary-collapse-1"
class="hs-accordion-content hidden !w-full overflow-hidden transition-[height] duration-300"
aria-labelledby="hs-primary-heading-1">
<div class="box-body p-0">
<div class="space-y-4">
<div class="pb-1rem" *ngIf="appraisalPms">
<div class="pb-2 grid grid-cols-2">
<div class="col-span-1 grid-cols-1 text-gray-400">
<div class="col-span-1 bg-soft-secondary p-2" style="min-height: 55px;">
พฤติกรรมที่เป็นจุดแข็ง (EMPLOYEE STRENGTHS AND ACCOMPLISHMENTS)
</div>
<div class="col-span-1 p-2">
<textarea type="text" rows="2" class="ti-form-input"
[class.!bg-input-readonly]="!canEdit" [readonly]="!canEdit"
[(ngModel)]="appraisalPms.employeeStrengths"></textarea>
</div>
</div>
<div class="col-span-1 grid-cols-1 text-gray-400">
<div class="col-span-1 bg-soft-secondary p-2" style="min-height: 55px;">
หัวข้อที่ต้องเรียนรู้เพิ่มเติม (สำหรับจุดแข็ง)
</div>
<div class="col-span-1 p-2">
<textarea type="text" rows="2" class="ti-form-input"
[class.!bg-input-readonly]="!canEdit" [readonly]="!canEdit"
[(ngModel)]="appraisalPms.learningTopicsForStrengths"></textarea>
</div>
</div>
</div>
<div class="pb-2 grid grid-cols-2">
<div class="col-span-1 grid-cols-1 text-gray-400">
<div class="col-span-1 bg-soft-secondary p-2" style="min-height: 55px;">
พฤติกรรมที่เป็นจุดอ่อน (PERFORMANCE AREAS WHICH NEED IMPROVEMENT)
</div>
<div class="col-span-1 p-2">
<textarea type="text" rows="2" class="ti-form-input"
[class.!bg-input-readonly]="!canEdit" [readonly]="!canEdit"
[(ngModel)]="appraisalPms.performanceWeaknesses"></textarea>
</div>
</div>
<div class="col-span-1 grid-cols-1 text-gray-400">
<div class="col-span-1 bg-soft-secondary p-2" style="min-height: 55px;">
หัวข้อที่ต้องเรียนรู้เพิ่มเติม (สำหรับจุดอ่อน)
</div>
<div class="col-span-1 p-2">
<textarea type="text" rows="2" class="ti-form-input"
[class.!bg-input-readonly]="!canEdit" [readonly]="!canEdit"
[(ngModel)]="appraisalPms.learningTopicsForWeaknesses"></textarea>
</div>
</div>
</div>
<div class="pb-2 grid grid-cols-2">
<div class="col-span-1 grid-cols-1 text-gray-400">
<div class="col-span-1 bg-soft-secondary p-2" style="min-height: 55px;">
พฤติกรรมที่ควรได้รับการพัฒนา (PLAN OF ACTION TOWARD IMPROVED PERFORMANCE)
</div>
<div class="col-span-1 p-2">
<textarea type="text" rows="2" class="ti-form-input"
[class.!bg-input-readonly]="!canEdit" [readonly]="!canEdit"
[(ngModel)]="appraisalPms.improvementPlan"></textarea>
</div>
</div>
<div class="col-span-1 grid-cols-1 text-gray-400">
<div class="col-span-1 bg-soft-secondary p-2" style="min-height: 55px;">
หัวข้อที่ต้องเรียนรู้เพิ่มเติม (สำหรับพฤติกรรมที่ควรได้รับการพัฒนา)
</div>
<div class="col-span-1 p-2">
<textarea type="text" rows="2" class="ti-form-input"
[class.!bg-input-readonly]="!canEdit" [readonly]="!canEdit"
[(ngModel)]="appraisalPms.learningTopicsForImprovement"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
<ng-template #part10>
<div class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
id="hs-primary-heading-1">
<button (click)="scrollToTable($event)"
class="hs-accordion-toggle hs-accordion-active:text-white hs-accordion-active:bg-secondary group py-4 px-5 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-white dark:text-gray-200 dark:hover:text-white/80"
aria-controls="hs-primary-collapse-1" type="button">
<div></div>
<span>
Part 10: คำชมหรือรางวัลที่ได้รับ (Conversation, Feedback, Recognise : CFR)
</span>
<svg class="hs-accordion-active:hidden hs-accordion-active:text-white hs-accordion-active:group-hover:text-white block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-white/70"
width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="hs-accordion-active:block hs-accordion-active:text-white hs-accordion-active:group-hover:text-white hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-white/70"
width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="hs-primary-collapse-1"
class="hs-accordion-content hidden !w-full overflow-hidden transition-[height] duration-300"
aria-labelledby="hs-primary-heading-1">
<div class="box-body p-0">
<div class="space-y-4">
<div class="pb-1rem p-2" *ngIf="appraisalPms">
<textarea type="text" rows="2" class="ti-form-input" [class.!bg-input-readonly]="!canEdit"
[readonly]="!canEdit" [(ngModel)]="appraisalPms.cfrDetail"></textarea>
</div>
</div>
</div>
</div>
</div>
</ng-template>
\ No newline at end of file
src/app/components/performance-evaluation/pms-form-employee/pms-summary/pms-summary.component.ts
import { Component } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/core';
import { CompetencyGradeModel, MyCompetencyGradeModel } from 'src/app/shared/model/competency-grades.model';
import { AppraisalService } from 'src/app/shared/services/appraisal.service';
import { EmployeeService } from 'src/app/shared/services/employee.service';
import { PmsGroupGradeService } from 'src/app/shared/services/pms-group-grade.service';
import { SettingAssessmentService } from 'src/app/shared/services/setting-assessment.service';
import { Pms } from 'src/app/shared/model/competency.model';
export interface Part8Model {
id: number
evaluationFactor: string,
rawScore: number,
factors: number
scoreObtained: number
netScore: number
}
export interface LevelStarModel {
evaluationFactor: string,
rawScore: number,
factors: number
scoreObtained: number
netScore: number
}
@Component({
selector: 'app-pms-summary',
templateUrl: './pms-summary.component.html',
styleUrls: ['./pms-summary.component.scss']
})
export class PmsSummaryComponent {
part1show = true
part2show = true
part3show = true
part4show = true
part5show = true
part6show = true
part7show = true
part8show = true
data8List: Part8Model[] = [{
id: 1,
evaluationFactor: "Part 1 : ประเมินผลการปฏิบัติงานตามนโยบายบริษัท (Corporate KPI)",
rawScore: 100,
factors: 0,
scoreObtained: 0,
netScore: 0,
}, {
id: 2,
evaluationFactor: "Part 2 : ประเมินผลการปฏิบัติงานประจำ (Department KPI)",
rawScore: 100,
factors: 0,
scoreObtained: 0,
netScore: 0,
}, {
id: 3,
evaluationFactor: "Part 3 : ประเมินผลการปฏิบัติงานประจำ (Individual KPI)",
rawScore: 100,
factors: 0,
scoreObtained: 0,
netScore: 0,
}, {
id: 4,
evaluationFactor: "Part 4 : ประเมินผลสมรรถนะที่สนับสนุนการปฏิบัติงาน (Competency)",
rawScore: 100,
factors: 0,
scoreObtained: 0,
netScore: 0,
}, {
id: 5,
evaluationFactor: "Part 5 : อัตราการเข้างาน (Time Attendance)",
rawScore: 100,
factors: 0,
scoreObtained: 0,
netScore: 0,
}, {
id: 6,
evaluationFactor: "Part 6 : งานที่ได้รับมอบหมายเพิ่มเติม (Cross Functional Project Assignment)",
rawScore: 100,
factors: 0,
scoreObtained: 0,
netScore: 0,
}, {
id: 7,
evaluationFactor: "Part 7 : กิจกรรมพิเศษ (Special Activities)",
rawScore: 100,
factors: 0,
scoreObtained: 0,
netScore: 0,
}]
part9show = true
part10show = true
@Input() evaluateeId = ""
@Input() evaluaterId = ""
@Input() appraisalPms?: Pms
@Input() canEdit = false
@Input() currentStep = ""
@Input() dateIso = ""
@Output() sendReturnPath: EventEmitter<any> = new EventEmitter<any>();
@Output() kpiFormRemain: EventEmitter<any> = new EventEmitter<any>();
@Output() kpiForm: EventEmitter<any> = new EventEmitter<any>();
groupGrade: { loading: boolean, dataList: CompetencyGradeModel[] } = { loading: false, dataList: [] }
constructor(private appraisalService: AppraisalService,
private pmsGroupGradeService: PmsGroupGradeService,
private employeeService: EmployeeService,
private cdr: ChangeDetectorRef,
private settingAssessmentService: SettingAssessmentService
) {
}
// ngOnChanges(changes: SimpleChanges): void {
// if (changes['evaluateeId']?.currentValue || changes['evaluaterId']?.currentValue) {
// this.toggleAllParts(this.evaluateeId == this.evaluaterId)
// }
// }
ngOnInit(): void {
this.getPmsGroupGradeList()
this.getAppraisalPmsForm()
this.allFormRemain()
}
getAppraisalPmsForm() {
this.data8List.forEach((x, i) => {
if (x.id == 1 && this.appraisalPms?.part1Percentage) {
x.factors = this.appraisalPms.part1Percentage
} else if (x.id == 2 && this.appraisalPms?.part2Percentage) {
x.factors = this.appraisalPms.part2Percentage
} else if (x.id == 3 && this.appraisalPms?.part3Percentage) {
x.factors = this.appraisalPms.part3Percentage
} else if (x.id == 4 && this.appraisalPms?.part4Percentage) {
x.factors = this.appraisalPms.part4Percentage
} else if (x.id == 5 && this.appraisalPms?.part5Percentage) {
x.factors = this.appraisalPms.part5Percentage
} else if (x.id == 6 && this.appraisalPms?.part6Percentage) {
x.factors = this.appraisalPms.part6Percentage
} else if (x.id == 7 && this.appraisalPms?.part7Percentage) {
x.factors = this.appraisalPms.part7Percentage
}
})
if (!this.appraisalPms?.part1Detail.length) {
this.data8List = this.data8List.filter(item => item.id !== 1)
}
if (!this.appraisalPms?.part2Detail.length) {
this.data8List = this.data8List.filter(item => item.id !== 2)
}
if (!this.appraisalPms?.part3Detail.length) {
this.data8List = this.data8List.filter(item => item.id !== 3)
}
if (!this.appraisalPms?.part4Detail.length) {
this.data8List = this.data8List.filter(item => item.id !== 4)
}
if (!this.appraisalPms?.part5Detail.length) {
this.data8List = this.data8List.filter(item => item.id !== 5)
}
if (!this.appraisalPms?.part6Detail.length) {
this.data8List = this.data8List.filter(item => item.id !== 6)
}
if (!this.appraisalPms?.part7Detail.length) {
this.data8List = this.data8List.filter(item => item.id !== 7)
}
this.changePercentage()
if (this.appraisalPms) {
switch (this.currentStep) {
case ("0"): {
this.appraisalPms.apsassessyDate = this.dateIso
break
}
case ("1"): {
this.appraisalPms.apsapprove1Date = this.dateIso
break
}
case ("2"): {
this.appraisalPms.apsapprove2Date = this.dateIso
break
}
case ("3"): {
this.appraisalPms.apsapprove3Date = this.dateIso
break
}
case ("4"): {
this.appraisalPms.apsapprove4Date = this.dateIso
break
}
case ("5"): {
this.appraisalPms.apsapprove5Date = this.dateIso
break
}
default: { return }
}
}
this.cdr.detectChanges()
}
getPmsGroupGradeList() {
this.groupGrade.loading = true
this.pmsGroupGradeService.getGradeList().subscribe({
next: response => {
this.groupGrade.dataList = response.map(x => new MyCompetencyGradeModel(x))
this.groupGrade.loading = false
this.cdr.detectChanges()
}, error: error => {
this.groupGrade.loading = false
this.cdr.detectChanges()
}
})
}
returnPath() {
this.sendReturnPath.emit()
}
calRawScore(data?: any) {
if (data) {
return data.reduce((sum: number, item: any) => sum + item.weight * 5, 0).toFixed(2);
}
return "0.00"
}
calWeigth(data?: any) {
if (data) {
return data.reduce((sum: number, item: any) => sum + item.weight, 0).toFixed(2);
}
return "0.00"
}
calExpectationScore(data?: any) {
if (data) {
return data.reduce((sum: number, item: any) => sum + item.scoreTopicExpectationBoss, 0).toFixed(2);
}
return "0.00"
}
calExpectationTotalScore(data?: any) {
if (data) {
return data.reduce((sum: number, item: any) => sum + (item.scoreTopicExpectationBoss * item.weight), 0).toFixed(2);
}
return "0.00"
}
calPercentage(A: number, B: number) {
if (B > 0) {
return ((A / B) * 100).toFixed(2);
}
return "0.00"
}
changePercentage() {
this.data8List.forEach(x => {
if (x.id == 1 && this.appraisalPms?.part1Detail) {
x.scoreObtained = +this.calPercentage(this.calExpectationTotalScore(this.appraisalPms?.part1Detail), this.calRawScore(this.appraisalPms?.part1Detail))
if (this.appraisalPms) {
this.appraisalPms.part1SumScore = x.scoreObtained
}
} else if (x.id == 2 && this.appraisalPms?.part2Detail) {
x.scoreObtained = +this.calPercentage(this.calExpectationTotalScore(this.appraisalPms?.part2Detail), this.calRawScore(this.appraisalPms?.part2Detail))
if (this.appraisalPms) {
this.appraisalPms.part2SumScore = x.scoreObtained
}
} else if (x.id == 3 && this.appraisalPms?.part3Detail) {
x.scoreObtained = +this.calPercentage(this.calExpectationTotalScore(this.appraisalPms?.part3Detail), this.calRawScore(this.appraisalPms?.part3Detail))
if (this.appraisalPms) {
this.appraisalPms.part3SumScore = x.scoreObtained
}
} else if (x.id == 4 && this.appraisalPms?.part4Detail) {
x.scoreObtained = +this.calPercentage(this.calExpectationTotalScorePart4(this.appraisalPms?.part4Detail), this.calRawScorePart4(this.appraisalPms?.part4Detail))
if (this.appraisalPms) {
this.appraisalPms.part4SumScore = x.scoreObtained
}
} else if (x.id == 5 && this.appraisalPms?.part5Detail) {
x.scoreObtained = +this.calPercentage(this.calExpectationTotalScorePart5(this.appraisalPms?.part5Detail), this.calRawScorePart5(this.appraisalPms?.part5Detail))
if (this.appraisalPms) {
this.appraisalPms.part5SumScore = x.scoreObtained
}
} else if (x.id == 6 && this.appraisalPms?.part6Detail) {
x.scoreObtained = +this.calPercentage(this.calExpectationTotalScore(this.appraisalPms?.part6Detail), this.calRawScore(this.appraisalPms?.part6Detail))
if (this.appraisalPms) {
this.appraisalPms.part6SumScore = x.scoreObtained
}
} else if (x.id == 7 && this.appraisalPms?.part7Detail) {
x.scoreObtained = +this.calPercentage(this.calExpectationTotalScore(this.appraisalPms?.part7Detail), this.calRawScore(this.appraisalPms?.part7Detail))
if (this.appraisalPms) {
this.appraisalPms.part7SumScore = x.scoreObtained
}
}
x.netScore = x.factors / 100 * x.scoreObtained
})
this.setGradeScore()
}
setGradeScore() {
const gradeScore = this.groupGrade.dataList.find(item => Math.ceil(+this.calNetScore()) >= item.gradeMinScore && Math.ceil(+this.calNetScore()) <= item.gradeMaxScore);
if (this.appraisalPms && gradeScore) {
this.appraisalPms.gradeScore = gradeScore.gradeDetail
}
}
calFactors() {
return this.data8List.reduce((sum: number, item: any) => sum + item.factors, 0).toFixed(2);
}
calScoreObtained() {
return this.data8List.reduce((sum: number, item: any) => sum + item.scoreObtained, 0).toFixed(2);
}
calNetScore() {
if (this.appraisalPms) {
this.appraisalPms.netScore = +(this.data8List.reduce((sum: number, item: any) => sum + item.netScore, 0).toFixed(2));
return this.appraisalPms.netScore
}
return "0.00"
}
calAverage(score: number) {
const roundedScore = score % 1 <= 0.5 ? Math.floor(score) : Math.round(score);
if (roundedScore >= 90 && roundedScore <= 100) {
return 5;
} else if (roundedScore >= 80 && roundedScore <= 89) {
return 4;
} else if (roundedScore >= 60 && roundedScore <= 79) {
return 3;
} else if (roundedScore >= 40 && roundedScore <= 59) {
return 2;
} else {
return 1;
}
}
calRawScorePart4(data?: any) {
if (data) {
return data.reduce((sum: number, item: any) => sum + item.competencyType.weight * 5, 0).toFixed(2);
}
return "0.00"
}
calWeigthPart4(data?: any) {
if (data) {
return data.reduce((sum: number, item: any) => sum + item.competencyType.weight, 0).toFixed(2);
}
return "0.00"
}
calExpectationScorePart4(data?: any) {
if (data) {
return data.reduce((sum: number, item: any) => sum + this.calAverage(item.averageScore), 0).toFixed(2);
}
return "0.00"
}
calExpectationTotalScorePart4(data?: any) {
if (data) {
return data.reduce((sum: number, item: any) => sum + (item.competencyType.weight * this.calAverage(item.averageScore)), 0).toFixed(2);
}
return "0.00"
}
calRawScorePart5(data?: any) {
if (data) {
return data.reduce((sum: number, item: any) => sum + item.weight * 5, 0).toFixed(2);
}
return "0.00"
}
calWeigthPart5(data?: any) {
if (data) {
return data.reduce((sum: number, item: any) => sum + item.weight, 0).toFixed(2);
}
return "0.00"
}
calExpectationScorePart5(data?: any) {
if (data) {
return data.reduce((sum: number, item: any) => sum + item.pmsWorkingTimScoreBoss, 0).toFixed(2);
}
return "0.00"
}
calExpectationTotalScorePart5(data?: any) {
if (data) {
return data.reduce((sum: number, item: any) => sum + (item.pmsWorkingTimScoreBoss * item.weight), 0).toFixed(2);
}
return "0.00"
}
setScorePart5(item: any, score: number) {
if (this.canEdit) {
if (this.evaluaterId == this.evaluateeId) {
item.pmsWorkingTimScore = score
item.pmsWorkingTimScoreBoss = score
} else {
item.pmsWorkingTimScoreBoss = score
}
this.changePercentage()
}
}
numberFixed2(data?: number) {
if (data) {
return data.toFixed(2)
}
return "0.00"
}
setScore(item: any, score: number) {
if (this.canEdit) {
if (this.evaluaterId == this.evaluateeId) {
item.scoreTopicExpectation = score
item.scoreTopicExpectationBoss = score
} else {
item.scoreTopicExpectationBoss = score
}
this.changePercentage()
}
}
convertDate(dateInput?: string | Date): string {
let date = new Date()
if (dateInput) {
if (typeof dateInput === 'string') {
const [year, month, day] = dateInput.split('-').map(Number);
date = new Date(year, month - 1, day);
} else {
date = dateInput
}
} else {
return ''
}
return date?.toLocaleDateString('th-TH', { day: 'numeric', month: 'long', year: 'numeric' }) || ''
}
toggleAllParts(check: boolean) {
this.part1show = check
this.part2show = check
this.part3show = check
this.part4show = check
this.part5show = check
this.part6show = check
this.part7show = check
this.part8show = check
this.part9show = check
this.part10show = check
}
scrollToTable(event: MouseEvent) {
const target = event.target as HTMLElement;
const position = target.getBoundingClientRect();
window.scrollTo({
top: position.top + window.scrollY - 100,
behavior: 'smooth'
});
}
part1Remain() {
if (this.appraisalPms?.part1Detail.length) {
const remain = this.appraisalPms.part1Detail.filter(x =>
x.scoreTopicExpectation == null && x.scoreTopicExpectationBoss == null
).length
return remain
}
return 2
}
part2Remain() {
if (this.appraisalPms?.part2Detail.length) {
const remain = this.appraisalPms.part2Detail.filter(x =>
x.scoreTopicExpectation == null && x.scoreTopicExpectationBoss == null
).length
return remain
}
return 0
}
part3Remain() {
if (this.appraisalPms?.part3Detail.length) {
const remain = this.appraisalPms.part3Detail.filter(x =>
x.scoreTopicExpectation == null && x.scoreTopicExpectationBoss == null
).length
return remain
}
return 0
}
part5Remain() {
if (this.appraisalPms?.part5Detail.length) {
const remain = this.appraisalPms.part5Detail.filter(x =>
x.pmsWorkingTimScore == null && x.pmsWorkingTimScoreBoss == null
).length
return remain
}
return 0
}
part6Remain() {
if (this.appraisalPms?.part6Detail.length) {
const remain = this.appraisalPms.part6Detail.filter(x =>
x.scoreTopicExpectation == null && x.scoreTopicExpectationBoss == null
).length
return remain
}
return 0
}
part7Remain() {
if (this.appraisalPms?.part7Detail.length) {
const remain = this.appraisalPms.part7Detail.filter(x =>
x.scoreTopicExpectation == null && x.scoreTopicExpectationBoss == null
).length
return remain
}
return 0
}
allFormRemain() {
const remain = [this.part1Remain(), this.part2Remain(), this.part3Remain(), this.part5Remain(), this.part6Remain(), this.part7Remain()].filter(data => data != 0).length
this.kpiForm.emit(this.appraisalPms)
this.kpiFormRemain.emit(remain)
}
}
src/app/components/performance-evaluation/self-evaluation/self-evaluation.component.html
<ng-container *ngIf="!onEdit">
<app-page-header [pathTitle]="pathTitle"></app-page-header>
<ng-container *ngTemplateOutlet="newSelfEvaluation"></ng-container>
<!-- <div class="bg-card-white">
</div>
<div class="block-main-content">
<ng-container *ngTemplateOutlet="selfEvaluation"></ng-container>
</div> -->
<ng-container *ngTemplateOutlet="selfEvaluation"></ng-container>
</ng-container>
<ng-template #newSelfEvaluation>
<ng-template #selfEvaluation>
<ng-container *ngIf="appraisalCompentency.select&&allCompetencyTypeId.length&&evaluatee.data.employeeId">
<app-pms-form-employee [evaluationForm]="'self'" [evaluaterId]="evaluatee.data.employeeId"
[evaluateeId]="evaluatee.data.employeeId"></app-pms-form-employee>
</ng-container>
</ng-template>
<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)"
[class.ti-btn-soft-mute]="!item.statusCheckDate" [attr.data-hs-tab]="'#underline-'+(i+1)"
[attr.aria-controls]="'underline-'+(i+1)" (click)="selectAppraisalCompentency(item)">
{{item.masfromEvaluationRound.tdesc}}
</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 !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" *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 = 'competency' ;
pathTitle = ['การประเมินผล', 'ประเมินตนเอง','ประเมินผล']"
[class.ti-btn-soft-secondary]="masfromEvaluationAssessment1.masfromStatusType.code == 'employee'"
[class.ti-btn-soft-warning]="masfromEvaluationAssessment1.masfromStatusType.code == 'evaluating'"
[class.ti-btn-soft-success]="masfromEvaluationAssessment1.masfromStatusType.code == 'employee_finish'">
ประเมิน
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-full min-height-50px justify-between items-center pb-2"
*ngIf="appraisalPmsFilter(item.masfromEvaluationRound.evaluationRoundId).data">
<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"
*ngIf="appraisalPmsFilter(item.masfromEvaluationRound.evaluationRoundId).data">
<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 !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" *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(item.masfromEvaluationRound.evaluationRoundId)">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody
*ngIf="!appraisalPms.loading&&appraisalPmsFilter(item.masfromEvaluationRound.evaluationRoundId)?.data">
<tr>
<td class="flex justify-center items-center">
{{appraisalPmsFilter(item.masfromEvaluationRound.evaluationRoundId).data?.pmsMasfromEvaluationRound?.pmsEvaluationRoundId}}
</td>
<td>
{{appraisalPmsFilter(item.masfromEvaluationRound.evaluationRoundId).data?.pmsMasfromEvaluationRound?.tdesc}}
</td>
<td>
{{convertDate(appraisalPmsFilter(item.masfromEvaluationRound.evaluationRoundId).data?.pmsMasfromEvaluationRound?.apsPeriodStart)}}
</td>
<td>
{{convertDate(appraisalPmsFilter(item.masfromEvaluationRound.evaluationRoundId).data?.pmsMasfromEvaluationRound?.apsPeriodEnd)}}
</td>
<td>
{{appraisalPmsFilter(item.masfromEvaluationRound.evaluationRoundId).data?.masfromStatusType?.tdesc}}
</td>
<td class="flex justify-center items-center">
<button type="button" class="ti-btn rounded-sm " (click)="selectAppraisalPms(appraisalPmsFilter(item.masfromEvaluationRound.evaluationRoundId).data);onEdit = 'pms' ;
pathTitle = ['การประเมินผล', 'ประเมินตนเอง','ประเมินผล']"
[class.ti-btn-soft-secondary]="appraisalPmsFilter(item.masfromEvaluationRound.evaluationRoundId).data?.masfromStatusType?.code == 'employee'"
[class.ti-btn-soft-warning]="appraisalPmsFilter(item.masfromEvaluationRound.evaluationRoundId).data?.masfromStatusType?.code == 'evaluating'"
[class.ti-btn-soft-success]="appraisalPmsFilter(item.masfromEvaluationRound.evaluationRoundId).data?.masfromStatusType?.code == 'employee_finish'">
ประเมิน
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<ng-container *ngIf="appraisalCompentency.dataList.length">
<div class="min-height-50px justify-between items-center py-2 pl-2rem" style="width: 30%;">
<div class="py-3 bg-soft-secondary font-size-18px font-weight-700 text-primary text-center">
หมายเหตุ
</div>
</div>
<div class="min-height-50px justify-between items-center py-2 pl-2rem" style="width: 30%;">
<div class="ti-pagination">
<button type="button" style="width: 95px;"
class="ti-btn rounded-sm ti-btn-soft-mute cursor-default pr-1">
ปุ่มสีเทา
</button>
<div class="font-size-16px text-secondary">หมายถึง ยังไม่ถึงขั้นตอนดำเนินการ</div>
</div>
<div class="ti-pagination">
<button type="button" style="width: 95px;"
class="ti-btn rounded-sm ti-btn-soft-secondary cursor-default pr-1">
ปุ่มสีฟ้า
</button>
<div class="font-size-16px text-secondary">หมายถึง รอดำเนินการ</div>
</div>
<div class="ti-pagination">
<button type="button" style="width: 95px;"
class="ti-btn rounded-sm ti-btn-soft-warning cursor-default pr-1">
ปุ่มสีเหลือง
</button>
<div class="font-size-16px text-secondary">หมายถึง อยู่ระหว่างดำเนินการ</div>
</div>
<div class="ti-pagination">
<button type="button" style="width: 95px;"
class="ti-btn rounded-sm ti-btn-soft-success cursor-default pr-1">
ปุ่มสีเขียว
</button>
<div class="font-size-16px text-secondary">หมายถึง ดำเนินการเสร็จสิ้น</div>
</div>
</div>
</ng-container>
</ng-template>
<ng-container *ngIf="onEdit=='competency'">
<app-evaluation [pathTitle]="['การประเมินผล', 'ประเมินตนเอง','ประเมิน']"
(sendReturnPath)="getAppraisalCompentencyList();getAppraisalPmsList();onEdit = '' ; pathTitle = ['การประเมินผล', 'ประเมินตนเอง']"
[evaluationRoundId]="appraisalCompentency.select?.masfromEvaluationRound?.evaluationRoundId || ''"
[evaluaterId]="evaluatee.data.employeeId" [evaluateeId]="evaluatee.data.employeeId"
[competencyTypeId]="competencyTypeId"></app-evaluation>
</ng-container>
<ng-container *ngIf="onEdit=='pms'">
<app-pms-evalution [pathTitle]="['การประเมินผล', 'ประเมินตนเอง','ประเมิน']"
(sendReturnPath)="getAppraisalCompentencyList();getAppraisalPmsList();onEdit='' ; pathTitle = ['การประเมินผล', 'ประเมินตนเอง']"
[evaluationRoundId]="appraisalPms.select?.pmsMasfromEvaluationRound?.pmsEvaluationRoundId || ''"
[evaluaterId]="evaluatee.data.employeeId" [evaluateeId]="evaluatee.data.employeeId"></app-pms-evalution>
</ng-container>
\ No newline at end of file
</ng-template>
\ No newline at end of file
src/app/components/performance-evaluation/supervisor-evaluation/supervisor-evaluation.component.html
......@@ -236,30 +236,17 @@
</ng-container>
<ng-container *ngIf="pageEvalution=='idp'">
<!-- <app-idp-evalution [pathTitle]="['การประเมินผล', 'ประเมินโดยหัวหน้า','ประเมิน']"
(sendReturnPath)="getBossList();pageEvalution='' ; pathTitle = ['การประเมินผล', 'ประเมินโดยหัวหน้า']"
[evaluationRoundId]="formEvaluation.evaluationRoundId" [evaluaterId]="formEvaluation.evaluaterId"
[evaluateeId]="formEvaluation.evaluateeId"></app-idp-evalution> -->
<app-pms-form-employee [evaluationForm]="'sup'" [currentTap]="'idp'"
<app-pms-form-employee [evaluationForm]="'sup'" [currentTap]="'ข้อมูลการประเมิน'"
(sendReturnPath)="getBossList();pageEvalution='' ; pathTitle = ['การประเมินผล', 'ประเมินโดยหัวหน้า']"
[evaluaterId]="formEvaluation.evaluaterId" [evaluateeId]="formEvaluation.evaluateeId"></app-pms-form-employee>
</ng-container>
<ng-container *ngIf="pageEvalution=='pms'">
<!-- <app-pms-evalution [pathTitle]="['การประเมินผล', 'ประเมินโดยหัวหน้า','ประเมิน']"
(sendReturnPath)="getBossList();pageEvalution='' ; pathTitle = ['การประเมินผล', 'ประเมินโดยหัวหน้า']"
[evaluationRoundId]="formEvaluation.evaluationRoundId" [evaluaterId]="formEvaluation.evaluaterId"
[evaluateeId]="formEvaluation.evaluateeId"></app-pms-evalution> -->
<app-pms-form-employee [evaluationForm]="'sup'" [currentTap]="'pms'"
<app-pms-form-employee [evaluationForm]="'sup'" [currentTap]="'ข้อมูลการประเมิน'"
(sendReturnPath)="getBossList();pageEvalution='' ; pathTitle = ['การประเมินผล', 'ประเมินโดยหัวหน้า']"
[evaluaterId]="formEvaluation.evaluaterId" [evaluateeId]="formEvaluation.evaluateeId"></app-pms-form-employee>
</ng-container>
<ng-container *ngIf="pageEvalution!='idp'&&pageEvalution!='pms'&&pageEvalution!=''">
<!-- <app-evaluation [pathTitle]="['การประเมินผล', 'ประเมินโดยหัวหน้า','ประเมิน']"
(sendReturnPath)="getBossList();pageEvalution='' ; pathTitle = ['การประเมินผล', 'ประเมินโดยหัวหน้า']"
[evaluationRoundId]="formEvaluation.evaluationRoundId" [evaluaterId]="formEvaluation.evaluaterId"
[evaluateeId]="formEvaluation.evaluateeId"
[competencyTypeId]="formEvaluation.competencyTypeId"></app-evaluation> -->
<app-pms-form-employee [evaluationForm]="'sup'" [currentTap]="pageEvalution"
<app-pms-form-employee [evaluationForm]="'sup'" [currentTap]="'ข้อมูลการประเมิน'"
(sendReturnPath)="getBossList();pageEvalution='' ; pathTitle = ['การประเมินผล', 'ประเมินโดยหัวหน้า']"
[evaluaterId]="formEvaluation.evaluaterId" [evaluateeId]="formEvaluation.evaluateeId"></app-pms-form-employee>
</ng-container>
\ No newline at end of file
src/assets/css/style.css
......@@ -25066,3 +25066,75 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
.\!bg-mute {
background-color: #cccccc !important;
}
.text-warp {
white-space: normal;
word-wrap: break-word;
word-break: break-word;
}
.\!text-warp {
white-space: normal !important;
word-wrap: break-word !important;
word-break: break-word !important;
}
.-translate-y-1\/5 {
--tw-translate-y: -20%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x))
skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.ti-btn-soft-primary {
background-color: rgb(var(--color-primary) / 0.1);
color: rgb(var(--color-primary));
--tw-ring-offset-color: #fff;
}
.\!text-primary {
color: rgb(var(--color-primary)) !important;
}
.text-soft-primary {
color: rgb(var(--color-primary) / 0.1);
}
.border-soft-primary {
border-color: rgb(var(--color-primary) / 0.1);
}
.border-soft-primary:hover {
border-color: rgb(var(--color-primary));
}
.text-soft-primary:hover {
color: rgb(var(--color-primary));
}
.text-soft-secondary {
color: rgb(var(--color-secondary) / 0.1);
}
.text-soft-secondary:hover {
color: rgb(var(--color-secondary));
}
.\!text-soft-secondary {
color: rgb(var(--color-secondary) / 0.1) !important;
}
.\!text-soft-secondary:hover {
color: rgb(var(--color-secondary)) !important;
}
.bg-white:hover {
--tw-bg-opacity: 1;
background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}
.\!text-secondary {
color: rgb(var(--color-secondary));
}
.\!border-sort-secondary {
border-color: rgb(var(--color-secondary) / 0.1) !important;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment