Commit e9ba937e by Nattana Chaiyamat

ประเมิน PMS

parent f340884f
......@@ -38,7 +38,7 @@ 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 '../evaluation/idp-evalution.component';
import { IdpEvalutionComponent } from '../performance-evaluation/idp-evaluation/idp-evalution.component';
......
......@@ -110,8 +110,9 @@ import { SubGradeRegistrationComponent } from '../competency-assessment/grade-re
import { SettingPerformanceEvalutionComponent } from '../performance-management-evaluation/setting-performance-evalution/setting-performance-evalution.component';
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 { IdpEvalutionComponent } from '../evaluation/idp-evalution.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';
@NgModule({
declarations: [
......@@ -205,7 +206,8 @@ import { CompanyRegistrationPageComponent } from '../company-components/company-
AssessmentSystemConfigurationComponent,
SelfEvaluationComponent,
IdpEvalutionComponent,
CompanyRegistrationPageComponent
CompanyRegistrationPageComponent,
PmsEvalutionComponent,
],
imports: [
CommonModule,
......
......@@ -9,7 +9,8 @@
<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">
<button type="button" class="ti-btn ti-btn-outline ti-btn-outline-light h-20px m-0 shadow-md text-blue-500"
(click)="returnPage()">
<i class="ti ti-chevron-left"></i>
ย้อนกลับ
</button>
......
import { Component } from '@angular/core';
import { Component, EventEmitter, Output } from '@angular/core';
export interface DataModel {
code: string,
bis: BisModel[],
......@@ -23,6 +23,7 @@ export interface CdrModel {
styleUrls: ['./idp-evalution.component.scss']
})
export class IdpEvalutionComponent {
@Output() sendPageEvalution: EventEmitter<string> = new EventEmitter<string>();
pathTitle = ['การประเมินผล', 'ประเมินผล']
hoveredCode: string | null = null;
dataList: DataModel[] = [{
......@@ -81,4 +82,8 @@ export class IdpEvalutionComponent {
dataListFilter() {
return this.dataList
}
returnPage() {
this.sendPageEvalution.emit("")
}
}
<app-page-header [pathTitle]="pathTitle"></app-page-header>
<div class="bg-card-white">
</div>
<div class="block-main-content">
<ng-container *ngTemplateOutlet="pmsEvaluation"></ng-container>
</div>
<ng-template #pmsEvaluation>
<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)="returnPage()">
<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>
<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="py-2 grid grid-cols-8 gap-3">
<div class="col-span-1 text-gray-400">ชื่อผู้รับการประเมิน(Employee)</div>
<div class="col-span-1 text-gray-400">น.ส. กมลชนก ภูผาลินิน</div>
<div class="col-span-1 text-gray-400">รหัส (ID)</div>
<div class="col-span-1 text-gray-400">18794</div>
<div class="col-span-1 text-gray-400">ตำแหน่ง (Position)</div>
<div class="col-span-1 text-gray-400">HRD Training Officer</div>
<div class="col-span-1 text-gray-400">แผนก (Section)</div>
<div class="col-span-1 text-gray-400">ฝ่าย (Department)</div>
</div>
<div class="py-2 grid grid-cols-8 gap-3">
<div class="col-span-1 text-gray-400">ชื่อผู้รับการประเมิน(Employee)</div>
<div class="col-span-1 text-gray-400">น.ส. พิมพร อูรณการ</div>
<div class="col-span-1 text-gray-400">รหัส (ID)</div>
<div class="col-span-1 text-gray-400">17724</div>
<div class="col-span-1 text-gray-400">Human Resource Development Officer S3</div>
<div class="col-span-1 text-gray-400">HRD Training Officer</div>
<div class="col-span-1 text-gray-400">แผนก (Section)</div>
<div class="col-span-1 text-gray-400">ฝ่าย (Department)</div>
</div>
</div>
<ng-container *ngTemplateOutlet="part1"></ng-container>
<ng-container *ngTemplateOutlet="part2"></ng-container>
<ng-container *ngTemplateOutlet="part3"></ng-container>
<ng-container *ngTemplateOutlet="part4"></ng-container>
<ng-container *ngTemplateOutlet="part5"></ng-container>
<ng-container *ngTemplateOutlet="part6"></ng-container>
<ng-container *ngTemplateOutlet="part7"></ng-container>
<ng-container *ngTemplateOutlet="part8"></ng-container>
<ng-container *ngTemplateOutlet="part9"></ng-container>
<div class="pb-1rem px-2rem">
<div class="py-2 grid grid-cols-7 gap-3">
<div class="col-span-1">ผู้ประเมิน1</div>
<div class="col-span-1">น.ส. พิมพร อูรณการ</div>
<div class="col-span-1">
<input type="checkbox" id="hs-basic-usage" class="ti-switch">
<label for="hs-basic-usage" class="sr-only">ยืนยันผล</label>
</div>
<div class="col-span-2">
<textarea type="text" rows="2" class="ti-form-input mb-2"></textarea>
<span class="pt-2">
วันที่ :
</span>
</div>
</div>
<div class="py-2 grid grid-cols-7 gap-3">
<div class="col-span-1">ผู้ประเมิน2</div>
<div class="col-span-1">น.ส. นดี แป้นศรี</div>
<div class="col-span-1">
<input type="checkbox" id="hs-basic-usage" class="ti-switch">
<label for="hs-basic-usage" class="sr-only">ตรวจสอบ</label>
</div>
<div class="col-span-2">
<textarea type="text" rows="2" class="ti-form-input mb-2" value="ใส่ Comment ที่นี่"></textarea>
<span>
วันที่ :
</span>
</div>
</div>
<div class="py-2 grid grid-cols-7 gap-3">
<div class="col-span-1">ผู้อนุมัติ</div>
<div class="col-span-1">น.ส.ศรีไพ คชา</div>
<div class="col-span-1">
<input type="checkbox" id="hs-basic-usage" class="ti-switch">
<label for="hs-basic-usage" class="sr-only">อนุมัติ</label>
</div>
<div class="col-span-2">
<textarea type="text" rows="2" class="ti-form-input mb-2" value="ใส่ Comment ที่นี่"></textarea>
<span>
วันที่ :
</span>
</div>
</div>
</div>
<div class="flex justify-center mb-1rem pb-2rem">
<button type="submit" class="ti-btn ti-btn-success mx-2rem">
บันทึกร่าง
</button>
<button type="submit" class="ti-btn ti-btn-success mx-2rem">
บันทึกข้อมูล
</button>
</div>
</ng-template>
<ng-template #part1>
<div class="mx-2rem py-1rem px-1rem bg-primary">
<div class="font-size-18px font-weight-700 text-white flex justify-between">
<div class="align-center">
Part 1 : ประเมินผลการปฏิบัติงานตามนโยบายบริษัท (Hoshin)
</div>
<span class="w-10 h-10 ti-btn p-0 transition-none rounded-full border-white border-4 cursor-pointer"
(click)="part1show=!part1show">
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="part1show">
<path
d="M2.27921 10.64L7.92565 4.99357C8.12091 4.79831 8.4375 4.79831 8.63276 4.99357L14.2792 10.64"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="!part1show">
<path
d="M2.27921 4.64001L7.92565 10.2865C8.12091 10.4817 8.4375 10.4817 8.63276 10.2865L14.2792 4.64001"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</span>
</div>
</div>
<div class="pb-2rem" *ngIf="!part1show"></div>
<div class="pb-2rem px-2rem" *ngIf="part1show">
<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 ['ลำดับ\n(No.)','งานตามนโยบาย\n(Hoshin)','ตัวชี้วัดผลงานหลัก\n(Performance Indicator)','เป้าหมายผลงาน\n(Target)','หน่วยนับ\n(Unit)',
'กำหนดเวลาแล้วเสร็จ\n(Time Line)','น้ำหนัก\n(Weight) [(A)]','ค่าเป้าหมาย(Target Degree)','สรุปผลงาน\n(Summary)\n[(B)]','คะแนนที่ได้\n(Score)\n[(A)x(B)]'];let i = index;let l = last">
<th scope="col" [attr.rowspan]="i==7?'1':'2'" [attr.colspan]="i==7?'5':'1'"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700 ">{{ item }}</span>
<div *ngIf="!l&&i!=7" class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
<th *ngIf="i==7" scope="col" rowspan="2"
class="relative bg-soft-secondary text-primary !text-center !p-0">
<div class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
<tr class="font-size-12px">
<ng-container *ngFor="let item of ['A(5)','B(4)','C(3)','D(2)','E(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="dataListFilter().length">
<tr *ngFor="let item of dataListFilter();let i = index">
<td class="align-start text-center">
{{i+1}}
</td>
<td class="align-start">
{{item.hoshin}}
</td>
<td class="align-start !white-space-normal">
{{item.performance}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.target}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.unit}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.timeLine}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.weight}}
</td>
<td class="align-start !white-space-normal text-center"
*ngFor="let item2 of item.targetDegree.text;let i2 = index">
<input type="radio" [name]="'part1radio'+i" class="ti-form-radio cursor-pointer"
[id]="'part1radio'+i+''+i2" [value]="item2" [(ngModel)]="item.targetDegree.check"><br>
{{item2}}
</td>
<td class="!p-0"></td>
<td class="align-start !white-space-normal text-center">
{{item.summary}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.score}}
</td>
</tr>
<tr class="bg-table-soft-gray">
<td class="align-start text-center">
</td>
<td class="align-start text-center">
คะแนนดิบ
</td>
<td class="align-start !white-space-normal text-center">
50
</td>
<td class="align-start !white-space-normal text-center">
</td>
<td class="align-start !white-space-normal text-center">
</td>
<td class="align-start !white-space-normal text-center">
คำนวนถ่วงน้ำหนัก
</td>
<td class="align-start !white-space-normal text-center">
10
</td>
<td class="align-start !white-space-normal text-end" colspan="6">
คะแนนประเมินที่ได้
</td>
<td class="align-start !white-space-normal text-center">
8
</td>
<td class="align-start !white-space-normal text-center">
40
</td>
</tr>
<tr class="bg-table-soft-gray">
<td class="align-start text-center">
</td>
<td class="align-start text-center">
คะแนนดิบคิดเป็นร้อยละ
</td>
<td class="align-start !white-space-normal text-center">
100
</td>
<td class="align-start !white-space-normal text-center">
</td>
<td class="align-start !white-space-normal text-center">
</td>
<td class="align-start !white-space-normal text-center">
ร้อยละของปัจจัย
</td>
<td class="align-start !white-space-normal text-center">
15.0
</td>
<td class="align-start !white-space-normal text-end" colspan="7">
คะแนนที่ได้คิดเป็นร้อยละ
</td>
<td class="align-start !white-space-normal text-center" style="font-size: 1.25rem">
80
</td>
</tr>
</tbody>
</table>
</div>
</div>
</ng-template>
<ng-template #part2>
<div class="mx-2rem py-1rem px-1rem bg-primary">
<div class="font-size-18px font-weight-700 text-white flex justify-between">
<div class="align-center">
Part 2 : ประเมินผลการปฏิบัติงานประจำ(Job based KPIs)
</div>
<span class="w-10 h-10 ti-btn p-0 transition-none rounded-full border-white border-4 cursor-pointer"
(click)="part2show=!part2show">
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="part2show">
<path
d="M2.27921 10.64L7.92565 4.99357C8.12091 4.79831 8.4375 4.79831 8.63276 4.99357L14.2792 10.64"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="!part2show">
<path
d="M2.27921 4.64001L7.92565 10.2865C8.12091 10.4817 8.4375 10.4817 8.63276 10.2865L14.2792 4.64001"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</span>
</div>
</div>
<div class="pb-2rem" *ngIf="!part2show"></div>
<div class="pb-2rem px-2rem" *ngIf="part2show">
<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 ['ลำดับ\n(No.)','ตัวชี้วัดผลงานหลัก\n(Performance Indicator)','เป้าหมายผลงาน\n(Target)','หน่วยนับ\n(Unit)',
'กำหนดเวลาแล้วเสร็จ\n(Time Line)','น้ำหนัก\n(Weight) [(A)]','ค่าเป้าหมาย(Target Degree)','สรุปผลงาน\n(Summary)\n[(B)]','คะแนนที่ได้\n(Score)\n[(A)x(B)]'];let i = index;let l = last">
<th scope="col" [attr.rowspan]="i==6?'1':'2'" [attr.colspan]="i==6?'5':'1'"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700 ">{{ item }}</span>
<div *ngIf="!l&&i!=6" class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
<th *ngIf="i==6" scope="col" rowspan="2"
class="relative bg-soft-secondary text-primary !text-center !p-0">
<div class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
<tr class="font-size-12px">
<ng-container *ngFor="let item of ['A(5)','B(4)','C(3)','D(2)','E(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="data2ListFilter().length">
<tr *ngFor="let item of data2ListFilter();let i = index">
<td class="align-start text-center">
{{i+1}}
</td>
<td class="align-start !white-space-normal">
{{item.performance}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.target}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.unit}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.timeLine}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.weight}}
</td>
<td class="align-start !white-space-normal text-center"
*ngFor="let item2 of item.targetDegree.text;let i2 = index">
<input type="radio" [name]="'part2radio'+i" class="ti-form-radio cursor-pointer"
[id]="'part2radio'+i+''+i2" [value]="item2" [(ngModel)]="item.targetDegree.check"><br>
{{item2}}
</td>
<td class="!p-0"></td>
<td class="align-start !white-space-normal text-center">
{{item.summary}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.score}}
</td>
</tr>
<tr class="bg-table-soft-gray">
<td class="align-start text-center">
</td>
<td class="align-start text-center">
คะแนนดิบ
</td>
<td class="align-start !white-space-normal text-center">
70
</td>
<td class="align-start !white-space-normal text-center">
</td>
<td class="align-start !white-space-normal text-center">
คำนวนถ่วงน้ำหนัก
</td>
<td class="align-start !white-space-normal text-center">
14
</td>
<td class="align-start !white-space-normal text-end" colspan="6">
คะแนนประเมินที่ได้
</td>
<td class="align-start !white-space-normal text-center">
10
</td>
<td class="align-start !white-space-normal text-center">
52
</td>
</tr>
<tr class="bg-table-soft-gray">
<td class="align-start text-center">
</td>
<td class="align-start text-center">
คะแนนดิบคิดเป็นร้อยละ
</td>
<td class="align-start !white-space-normal text-center">
100
</td>
<td class="align-start !white-space-normal text-center">
</td>
<td class="align-start !white-space-normal text-center">
ร้อยละของปัจจัย
</td>
<td class="align-start !white-space-normal text-center">
30.0
</td>
<td class="align-start !white-space-normal text-end" colspan="7">
คะแนนที่ได้คิดเป็นร้อยละ
</td>
<td class="align-start !white-space-normal text-center" style="font-size: 1.25rem">
74.29
</td>
</tr>
</tbody>
</table>
</div>
</div>
</ng-template>
<ng-template #part3>
<div class="mx-2rem py-1rem px-1rem bg-primary">
<div class="font-size-18px font-weight-700 text-white flex justify-between">
<div class="align-center">
Part 3 : ประเมินผลสมรรถนะที่สนับสนุนการปฏิบัติงาน(Competency)
</div>
<span class="w-10 h-10 ti-btn p-0 transition-none rounded-full border-white border-4 cursor-pointer"
(click)="part3show=!part3show">
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="part3show">
<path
d="M2.27921 10.64L7.92565 4.99357C8.12091 4.79831 8.4375 4.79831 8.63276 4.99357L14.2792 10.64"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="!part3show">
<path
d="M2.27921 4.64001L7.92565 10.2865C8.12091 10.4817 8.4375 10.4817 8.63276 10.2865L14.2792 4.64001"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</span>
</div>
</div>
<div class="pb-2rem" *ngIf="!part3show"></div>
<div class="pb-2rem px-2rem" *ngIf="part3show">
<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 ['ลำดับ\n(No.)','Competency','น้ำหนัก\n(Weight) [(A)]','ค่าเป้าหมาย(Target Degree)','สรุปผลงาน\n(Summary)\n[(B)]','คะแนนที่ได้\n(Score)\n[(A)x(B)]'];let i = index;let l = last">
<th scope="col" [attr.rowspan]="i==3?'1':'2'" [attr.colspan]="i==3?'5':'1'"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700 ">{{ item }}</span>
<div *ngIf="!l&&i!=3" class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
<th *ngIf="i==3" scope="col" rowspan="2"
class="relative bg-soft-secondary text-primary !text-center !p-0">
<div class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
<tr class="font-size-12px">
<ng-container *ngFor="let item of ['A(5)','B(4)','C(3)','D(2)','E(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="data3ListFilter().length">
<tr *ngFor="let item of data3ListFilter();let i = index">
<td class="align-start text-center">
{{i+1}}
</td>
<td class="align-start !white-space-normal">
{{item.competency}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.weight}}
</td>
<td class="align-start !white-space-normal text-center"
*ngFor="let item2 of item.targetDegree.text;let i2 = index">
{{item2}}
</td>
<td class="!p-0"></td>
<td class="align-start !white-space-normal text-center">
{{item.summary}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.score}}
</td>
</tr>
<tr class="bg-table-soft-gray">
<td class="align-start text-center">
คะแนนดิบ
70
</td>
<td class="align-start !white-space-normal text-center">
คำนวนถ่วงน้ำหนัก
</td>
<td class="align-start !white-space-normal text-center">
30
</td>
<td class="align-start !white-space-normal text-end" colspan="6">
คะแนนประเมินที่ได้
</td>
<td class="align-start !white-space-normal text-center">
9
</td>
<td class="align-start !white-space-normal text-center">
90
</td>
</tr>
<tr class="bg-table-soft-gray">
<td class="align-start text-center">
คะแนนดิบคิดเป็นร้อยละ
100
</td>
<td class="align-start !white-space-normal text-center">
ร้อยละของปัจจัย
</td>
<td class="align-start !white-space-normal text-center">
35.0
</td>
<td class="align-start !white-space-normal text-end" colspan="7">
คะแนนที่ได้คิดเป็นร้อยละ
</td>
<td class="align-start !white-space-normal text-center" style="font-size: 1.25rem">
60
</td>
</tr>
</tbody>
</table>
</div>
</div>
</ng-template>
<ng-template #part4>
<div class="mx-2rem py-1rem px-1rem bg-primary">
<div class="font-size-18px font-weight-700 text-white flex justify-between">
<div class="align-center">
Part 4 : จำนวนการเข้างาน( Time Attendance)
</div>
<span class="w-10 h-10 ti-btn p-0 transition-none rounded-full border-white border-4 cursor-pointer"
(click)="part4show=!part4show">
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="part4show">
<path
d="M2.27921 10.64L7.92565 4.99357C8.12091 4.79831 8.4375 4.79831 8.63276 4.99357L14.2792 10.64"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="!part4show">
<path
d="M2.27921 4.64001L7.92565 10.2865C8.12091 10.4817 8.4375 10.4817 8.63276 10.2865L14.2792 4.64001"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</span>
</div>
</div>
<div class="pb-2rem" *ngIf="!part4show"></div>
<div class="pb-2rem px-2rem" *ngIf="part4show">
<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 ['ลำดับ\n(No.)','จำนวนการเข้างาน\n(Time attendance)','เป้าหมายผลงาน\n(Target)','หน่วยนับ\n(Unit)','น้ำหนัก\n(Weight) [(A)]','ค่าเป้าหมาย(Target Degree)','สรุปผลงาน\n(Summary)\n[(B)]','คะแนนที่ได้\n(Score)\n[(A)x(B)]'];let i = index;let l = last">
<th scope="col" [attr.rowspan]="i==3?'1':'2'" [attr.colspan]="i==3?'5':'1'"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700 ">{{ item }}</span>
<div *ngIf="!l&&i!=3" class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
<th *ngIf="i==3" scope="col" rowspan="2"
class="relative bg-soft-secondary text-primary !text-center !p-0">
<div class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
<tr class="font-size-12px">
<ng-container *ngFor="let item of ['A(5)','B(4)','C(3)','D(2)','E(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="data4ListFilter().length">
<tr *ngFor="let item of data4ListFilter();let i = index">
<td class="align-start text-center">
{{i+1}}
</td>
<td class="align-start !white-space-normal">
{{item.timeAttendance}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.target}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.unit}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.weight}}
</td>
<td class="align-start !white-space-normal text-center"
*ngFor="let item2 of item.targetDegree.text;let i2 = index">
<input type="radio" [name]="'part4radio'+i" class="ti-form-radio cursor-pointer"
[id]="'part4radio'+i+''+i2" [value]="item2" [(ngModel)]="item.targetDegree.check"><br>
{{item2}}
</td>
<td class="!p-0"></td>
<td class="align-start !white-space-normal text-center">
{{item.summary}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.score}}
</td>
</tr>
<tr class="bg-table-soft-gray">
<td class="align-start text-center">
คะแนนดิบ
</td>
<td class="align-start text-center">
100
</td>
<td class="align-start !white-space-normal text-center">
คำนวนถ่วงน้ำหนัก
</td>
<td class="align-start !white-space-normal text-center">
20
</td>
<td class="align-start !white-space-normal text-end" colspan="6">
คะแนนประเมินที่ได้
</td>
<td class="align-start !white-space-normal text-center">
13
</td>
<td class="align-start !white-space-normal text-center">
65
</td>
</tr>
<tr class="bg-table-soft-gray">
<td class="align-start text-center">
คะแนนดิบคิดเป็นร้อยละ
</td>
<td class="align-start text-center">
100
</td>
<td class="align-start !white-space-normal text-center">
ร้อยละของปัจจัย
</td>
<td class="align-start !white-space-normal text-center">
10.0
</td>
<td class="align-start !white-space-normal text-end" colspan="7">
คะแนนที่ได้คิดเป็นร้อยละ
</td>
<td class="align-start !white-space-normal text-center" style="font-size: 1.25rem">
65
</td>
</tr>
</tbody>
</table>
</div>
</div>
</ng-template>
<ng-template #part5>
<div class="mx-2rem py-1rem px-1rem bg-primary">
<div class="font-size-18px font-weight-700 text-white flex justify-between">
<div class="align-center">
Part 5: งานที่ได้รับมอบหมายเพิ่มเติม ( Cross Functional Project Assignment)
</div>
<span class="w-10 h-10 ti-btn p-0 transition-none rounded-full border-white border-4 cursor-pointer"
(click)="part5show=!part5show">
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="part5show">
<path
d="M2.27921 10.64L7.92565 4.99357C8.12091 4.79831 8.4375 4.79831 8.63276 4.99357L14.2792 10.64"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="!part5show">
<path
d="M2.27921 4.64001L7.92565 10.2865C8.12091 10.4817 8.4375 10.4817 8.63276 10.2865L14.2792 4.64001"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</span>
</div>
</div>
<div class="pb-2rem" *ngIf="!part5show"></div>
<div class="pb-2rem px-2rem" *ngIf="part5show">
<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 ['ลำดับ\n(No.)','งานที่ได้รับมอบหมายเพิ่มเติม (Cross Functional Project Assignment)','ตัวชี้วัดผลงานหลัก\n(Performance Indicator)','เป้าหมายผลงาน\n(Target)','หน่วยนับ\n(Unit)','กำหนดเวลาแล้วเสร็จ\n(Time Line)','น้ำหนัก\n(Weight) [(A)]','ค่าเป้าหมาย(Target Degree)','สรุปผลงาน\n(Summary)\n[(B)]','คะแนนที่ได้\n(Score)\n[(A)x(B)]'];let i = index;let l = last">
<th scope="col" [attr.rowspan]="i==7?'1':'2'" [attr.colspan]="i==7?'5':'1'"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700 ">{{ item }}</span>
<div *ngIf="!l&&i!=7" class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
<th *ngIf="i==7" scope="col" rowspan="2"
class="relative bg-soft-secondary text-primary !text-center !p-0">
<div class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
<tr class="font-size-12px">
<ng-container *ngFor="let item of ['A(5)','B(4)','C(3)','D(2)','E(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="data5ListFilter().length">
<tr *ngFor="let item of data5ListFilter();let i = index">
<td class="align-start text-center">
{{i+1}}
</td>
<td class="align-start !white-space-normal">
{{item.crossFunctionalProjectAssignment}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.performanceIndicator}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.target}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.unit}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.timeLine}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.weight}}
</td>
<td class="align-start !white-space-normal text-center"
*ngFor="let item2 of item.targetDegree.text;let i2 = index">
<input type="radio" [name]="'part5radio'+i" class="ti-form-radio cursor-pointer"
[id]="'part5radio'+i+''+i2" [value]="item2" [(ngModel)]="item.targetDegree.check"><br>
{{item2}}
</td>
<td class="!p-0"></td>
<td class="align-start !white-space-normal text-center">
{{item.summary}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.score}}
</td>
</tr>
<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">
100
</td>
<td class="align-start text-center">
</td>
<td class="align-start text-center">
</td>
<td class="align-start !white-space-normal text-center">
คำนวนถ่วงน้ำหนัก
</td>
<td class="align-start !white-space-normal text-center">
20
</td>
<td class="align-start !white-space-normal text-end" colspan="6">
คะแนนประเมินที่ได้
</td>
<td class="align-start !white-space-normal text-center">
13
</td>
<td class="align-start !white-space-normal text-center">
65
</td>
</tr>
<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">
100
</td>
<td class="align-start text-center">
</td>
<td class="align-start text-center">
</td>
<td class="align-start !white-space-normal text-center">
ร้อยละของปัจจัย
</td>
<td class="align-start !white-space-normal text-center">
10.0
</td>
<td class="align-start !white-space-normal text-end" colspan="7">
คะแนนที่ได้คิดเป็นร้อยละ
</td>
<td class="align-start !white-space-normal text-center" style="font-size: 1.25rem">
65
</td>
</tr>
</tbody>
</table>
</div>
</div>
</ng-template>
<ng-template #part6>
<div class="mx-2rem py-1rem px-1rem bg-primary">
<div class="font-size-18px font-weight-700 text-white flex justify-between">
<div class="align-center">
Part 6: กิจกรรมพิเศษ( Special Activities)
</div>
<span class="w-10 h-10 ti-btn p-0 transition-none rounded-full border-white border-4 cursor-pointer"
(click)="part6show=!part6show">
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="part6show">
<path
d="M2.27921 10.64L7.92565 4.99357C8.12091 4.79831 8.4375 4.79831 8.63276 4.99357L14.2792 10.64"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="!part6show">
<path
d="M2.27921 4.64001L7.92565 10.2865C8.12091 10.4817 8.4375 10.4817 8.63276 10.2865L14.2792 4.64001"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</span>
</div>
</div>
<div class="pb-2rem" *ngIf="!part6show"></div>
<div class="pb-2rem px-2rem" *ngIf="part6show">
<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 ['ลำดับ\n(No.)','กิจกรรมพิเศษ (Special Activities)','ตัวชี้วัดผลงานหลัก\n(Performance Indicator)','เป้าหมายผลงาน\n(Target)','หน่วยนับ\n(Unit)','กำหนดเวลาแล้วเสร็จ\n(Time Line)','น้ำหนัก\n(Weight) [(A)]','ค่าเป้าหมาย(Target Degree)','สรุปผลงาน\n(Summary)\n[(B)]','คะแนนที่ได้\n(Score)\n[(A)x(B)]'];let i = index;let l = last">
<th scope="col" [attr.rowspan]="i==7?'1':'2'" [attr.colspan]="i==7?'5':'1'"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700 ">{{ item }}</span>
<div *ngIf="!l&&i!=7" class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
<th *ngIf="i==7" scope="col" rowspan="2"
class="relative bg-soft-secondary text-primary !text-center !p-0">
<div class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
<tr class="font-size-12px">
<ng-container *ngFor="let item of ['A(5)','B(4)','C(3)','D(2)','E(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="data6ListFilter().length">
<tr *ngFor="let item of data6ListFilter();let i = index">
<td class="align-start text-center">
{{i+1}}
</td>
<td class="align-start !white-space-normal">
{{item.specialActivities}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.performanceIndicator}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.target}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.unit}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.timeLine}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.weight}}
</td>
<td class="align-start !white-space-normal text-center"
*ngFor="let item2 of item.targetDegree.text;let i2 = index">
<input type="radio" [name]="'part6radio'+i" class="ti-form-radio cursor-pointer"
[id]="'part6radio'+i+''+i2" [value]="item2" [(ngModel)]="item.targetDegree.check"><br>
{{item2}}
</td>
<td class="!p-0"></td>
<td class="align-start !white-space-normal text-center">
{{item.summary}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.score}}
</td>
</tr>
<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">
10
</td>
<td class="align-start text-center">
</td>
<td class="align-start text-center">
</td>
<td class="align-start !white-space-normal text-center">
คำนวนถ่วงน้ำหนัก
</td>
<td class="align-start !white-space-normal text-center">
2
</td>
<td class="align-start !white-space-normal text-end" colspan="6">
คะแนนประเมินที่ได้
</td>
<td class="align-start !white-space-normal text-center">
11
</td>
<td class="align-start !white-space-normal text-center">
8.5
</td>
</tr>
<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">
100
</td>
<td class="align-start text-center">
</td>
<td class="align-start text-center">
</td>
<td class="align-start !white-space-normal text-center">
ร้อยละของปัจจัย
</td>
<td class="align-start !white-space-normal text-center">
5.0
</td>
<td class="align-start !white-space-normal text-end" colspan="7">
คะแนนที่ได้คิดเป็นร้อยละ
</td>
<td class="align-start !white-space-normal text-center" style="font-size: 1.25rem">
85.00
</td>
</tr>
</tbody>
</table>
</div>
</div>
</ng-template>
<ng-template #part7>
<div class="mx-2rem py-1rem px-1rem bg-primary">
<div class="font-size-18px font-weight-700 text-white flex justify-between">
<div class="align-center">
Part 7 : สรุปผลการปฏิบัติงาน (Summary)
</div>
<span class="w-10 h-10 ti-btn p-0 transition-none rounded-full border-white border-4 cursor-pointer"
(click)="part7show=!part7show">
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="part7show">
<path
d="M2.27921 10.64L7.92565 4.99357C8.12091 4.79831 8.4375 4.79831 8.63276 4.99357L14.2792 10.64"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="!part7show">
<path
d="M2.27921 4.64001L7.92565 10.2865C8.12091 10.4817 8.4375 10.4817 8.63276 10.2865L14.2792 4.64001"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</span>
</div>
</div>
<div class="pb-2rem" *ngIf="!part7show"></div>
<div class="pb-2rem px-2rem" *ngIf="part7show">
<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&&i!=7" class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
<th *ngIf="i==7" scope="col" rowspan="2"
class="relative bg-soft-secondary text-primary !text-center !p-0">
<div class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="data7ListFilter().length">
<tr *ngFor="let item of data7ListFilter();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">
{{item.scoreObtained}}
</td>
<td class="align-start !white-space-normal text-center">
{{item.netScore}}
</td>
<td class="align-start !white-space-normal text-center">
<span *ngIf="item.Level">
<i class="ti ti-star"></i>
</span> {{item.Level}}
</td>
</tr>
<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">
100
</td>
<td class="align-start text-center">
74.05
</td>
<td class="align-start text-center">
70.04
</td>
<td class="align-start !white-space-normal text-center">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</ng-template>
<ng-template #part8>
<div class="mx-2rem py-1rem px-1rem bg-primary">
<div class="font-size-18px font-weight-700 text-white flex justify-between">
<div class="align-center">
Part 8 : พฤติกรรมบุคคลที่เป็นจุดแข็ง จุดอ่อน และการพัฒนา
(EMPLOYEE STRENGTHS , WEAKNESSES AND PLAN TO IMPROVED)
</div>
<span class="w-10 h-10 ti-btn p-0 transition-none rounded-full border-white border-4 cursor-pointer"
(click)="part8show=!part8show">
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="part8show">
<path
d="M2.27921 10.64L7.92565 4.99357C8.12091 4.79831 8.4375 4.79831 8.63276 4.99357L14.2792 10.64"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="!part8show">
<path
d="M2.27921 4.64001L7.92565 10.2865C8.12091 10.4817 8.4375 10.4817 8.63276 10.2865L14.2792 4.64001"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</span>
</div>
</div>
<div class="pb-2rem" *ngIf="!part8show"></div>
<div class="pb-2rem px-2rem" *ngIf="part8show">
<div class="pb-1rem">
<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">
พฤติกรรมที่เป็นจุดแข็ง (EMPLOYEE STRENGTHS AND ACCOMPLISHMENTS)
</div>
<div class="col-span-1 p-2">
<textarea type="text" rows="2" class="ti-form-input"></textarea>
</div>
</div>
<div class="col-span-1 grid-cols-1 text-gray-400">
<div class="col-span-1 bg-soft-secondary p-2">
พฤติกรรมที่เป็นจุดแข็ง (EMPLOYEE STRENGTHS AND ACCOMPLISHMENTS)
</div>
<div class="col-span-1 p-2">
<textarea type="text" rows="2" class="ti-form-input"></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">
พฤติกรรมที่เป็นจุดอ่อน (PERFORMANCE AREAS WHICH NEED IMPROVEMENT)
</div>
<div class="col-span-1 p-2">
<textarea type="text" rows="2" class="ti-form-input"></textarea>
</div>
</div>
<div class="col-span-1 grid-cols-1 text-gray-400">
<div class="col-span-1 bg-soft-secondary p-2">
หัวข้อที่ต้องเรียนรู้เพิ่มเติม (สำหรับจุดอ่อน)
</div>
<div class="col-span-1 p-2">
<textarea type="text" rows="2" class="ti-form-input"></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">
พฤติกรรมที่ควรได้รับการพัฒนา (PLAN OF ACTION TOWARD IMPROVED PERFORMANCE)
</div>
<div class="col-span-1 p-2">
<textarea type="text" rows="2" class="ti-form-input"></textarea>
</div>
</div>
<div class="col-span-1 grid-cols-1 text-gray-400">
<div class="col-span-1 bg-soft-secondary p-2">
หัวข้อที่ต้องเรียนรู้เพิ่มเติม (สำหรับพฤติกรรมที่ควรได้รับการพัฒนา)
</div>
<div class="col-span-1 p-2">
<textarea type="text" rows="2" class="ti-form-input"></textarea>
</div>
</div>
</div>
</div>
</div>
</ng-template>
<ng-template #part9>
<div class="mx-2rem py-1rem px-1rem bg-primary">
<div class="font-size-18px font-weight-700 text-white flex justify-between">
<div class="align-center">
Part 9: คำชมหรือรางวัลที่ได้รับ (Conversation, Feedback, Recognise : CFR)
</div>
<span class="w-10 h-10 ti-btn p-0 transition-none rounded-full border-white border-4 cursor-pointer"
(click)="part9show=!part9show">
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="part9show">
<path
d="M2.27921 10.64L7.92565 4.99357C8.12091 4.79831 8.4375 4.79831 8.63276 4.99357L14.2792 10.64"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="w-2.5 h-2.5 font-bold" width="16" height="16" viewBox="0 0 16 16" fill="none"
*ngIf="!part9show">
<path
d="M2.27921 4.64001L7.92565 10.2865C8.12091 10.4817 8.4375 10.4817 8.63276 10.2865L14.2792 4.64001"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</span>
</div>
</div>
<div class="pb-2rem" *ngIf="!part9show"></div>
<div class="pb-2rem px-2rem" *ngIf="part9show">
<div class="pb-1rem p-2">
<textarea type="text" rows="2" class="ti-form-input"></textarea>
</div>
</div>
</ng-template>
\ No newline at end of file
import { Component, EventEmitter, Output } from '@angular/core';
export interface DataModel {
hoshin: string
performance: string
target: string
unit: string
timeLine: string
weight: string
targetDegree: { check: string, text: string[] }
summary: string
score: string
}
export interface DataModel2 {
performance: string
target: string
unit: string
timeLine: string
weight: string
targetDegree: { check: string, text: string[] }
summary: string
score: string
}
export interface DataModel3 {
competency: string
weight: string
targetDegree: { check: string, text: string[] }
summary: string
score: string
}
export interface DataModel4 {
timeAttendance: string
target: string
unit: string
weight: string
targetDegree: { check: string, text: string[] }
summary: string
score: string
}
export interface DataModel5 {
crossFunctionalProjectAssignment: string
performanceIndicator: string
target: string
unit: string
timeLine: string
weight: string
targetDegree: { check: string, text: string[] }
summary: string
score: string
}
export interface DataModel6 {
specialActivities: string
performanceIndicator: string
target: string
unit: string
timeLine: string
weight: string
targetDegree: { check: string, text: string[] }
summary: string
score: string
}
export interface DataModel7 {
evaluationFactor: string,
rawScore: string,
factors: string
scoreObtained: string
netScore: string
Level: string
}
@Component({
selector: 'app-pms-evalution',
templateUrl: './pms-evalution.component.html',
styleUrls: ['./pms-evalution.component.scss']
})
export class PmsEvalutionComponent {
@Output() sendPageEvalution: EventEmitter<string> = new EventEmitter<string>();
pathTitle = ['การประเมินผล', 'ประเมินผล']
part1show = true
dataList: DataModel[] = [{
hoshin: "C1 CUSTOMER ORIENTED (SQCDME)",
performance: "Customer Satisfaction (QCDS)",
target: "95.0",
unit: "%",
timeLine: "November 2021",
weight: "5.0",
targetDegree: { check: "90-95% Award", text: [">95% Award", "90-95% Award", ">95% no award", "80-90% no award", "<80% no award"] },
summary: "4",
score: "20"
}, {
hoshin: "C2 MANUFACTURING OPTIMIZATION",
performance: "Manufacturing performance",
target: "100.0",
unit: "%",
timeLine: "November 2021",
weight: "5.0",
targetDegree: { check: "81-90%", text: [">90%", "81-90%", "71-80%", "61-70%", "<60%"] },
summary: "4",
score: "20"
}]
part2show = true
data2List: DataModel2[] = [{
performance: "ประสานงานกับวิทยากร ผู้เข้ารับการอบรมทั้งภายในและภายนอก ตามแผนการฝึกอบรมและพัฒนา",
target: "80.0",
unit: "%",
timeLine: "Jan - Nov",
weight: "10.0",
targetDegree: { check: "จัดการอบรมได้ตามแผนและจำนวนผู้เข้ารับการอบรม81-90%จากเป้าหมาย", text: ["จัดการอบรมได้ตามแผนและจำนวนผู้เข้ารับการอบรม>90%จากเป้าหมาย", "จัดการอบรมได้ตามแผนและจำนวนผู้เข้ารับการอบรม81-90%จากเป้าหมาย", "จัดการอบรมได้ตามแผนและจำนวนผู้เข้ารับการอบรม80%จากเป้าหมาย", "จัดการอบรมได้ตามแผนและจำนวนผู้เข้ารับการอบรม70-79%จากเป้าหมาย", "จัดการอบรมได้ตามแผนและจำนวนผู้เข้ารับการอบรม<70%จากเป้าหมาย"] },
summary: "4",
score: "40"
}, {
performance: "2.1การบันทึกผลการฝึกอบรมในระบบ(2020 ใช้ Tigersoft)",
target: "100.0",
unit: "%",
timeLine: "Jan - Nov",
weight: "2.0",
targetDegree: { check: "80-84", text: ["บันทึกภายใน", "บันทึกภายใน 3 วัน หลังฝึก การอบรม", "บันทึกภายใน 7 วัน หลังฝึก การอบรม", "80-84", "<79"] },
summary: "2",
score: "4"
}, {
performance: "2.2 การจัดทำรายงาน วิเคราะห์ ผลการฝึกอบรมในแต่ละหลักสูตร",
target: "100.0",
unit: "%",
timeLine: "Jan - Nov",
weight: "2.0",
targetDegree: { check: "สรุปผลการฝึกอบรมในแต่ละเดือนวิเคาระห์เป็นรายปี", text: ["สรุปผลการฝึกอบรมในแต่ละเดือนวิเคาระห์ทุก6เดือน", "สรุปผลการฝึกอบรมในแต่ละเดือนวิเคาระห์เป็นรายปี", "สรุปผลการฝึกอบรมของเดือนไม่เกินวันที่3ของเดือนถัดไป", "สรุปผลการฝึกอบรมของเดือนเกินกว่าวันที่3ของเดือนถัดไป", "สรุปผลการฝึกอบรมของเดือนเกินกว่า3วัน จำนวน>38ครั้ง/ปี"] },
summary: "4",
score: "8"
}]
part3show = true
data3List: DataModel3[] = [{
competency: "Core Competency",
weight: "10.0",
targetDegree: { check: "76.00", text: ["", "", "76.00", "", ""] },
summary: "3",
score: "30"
}, {
competency: "Managerial Competency",
weight: "10.0",
targetDegree: { check: "68.00", text: ["", "", "", "68.00", ""] },
summary: "2",
score: "20"
}, {
competency: "Position Competency",
weight: "10.0",
targetDegree: { check: "89.00", text: ["", "89.00", "", "", ""] },
summary: "4",
score: "40"
}]
part4show = true
data4List: DataModel4[] = [{
timeAttendance: "ลาป่วย",
target: "0.0",
unit: "วัน",
weight: "5.0",
targetDegree: { check: "1-2", text: ["0.0", "1-2", "3-5", "6-10", ">10"] },
summary: "2",
score: "10"
}, {
timeAttendance: "ลาคลอดบุตร",
target: "0.0",
unit: "วัน",
weight: "5.0",
targetDegree: { check: "0.0", text: ["0.0", "<45", "45-90", "91-120", ">120"] },
summary: "5",
score: "25"
}, {
timeAttendance: "ลาฝึกอบรม (ไม่รับค่าจ้าง)",
target: "0.0",
unit: "วัน หรือ ครั้ง",
weight: "5.0",
targetDegree: { check: "0.0", text: ["0.0", "1-4", "5-10", "10-15", ">15"] },
summary: "5",
score: "25"
}, {
timeAttendance: "สาย",
target: "0.0",
unit: "ครั้ง",
weight: "5.0",
targetDegree: { check: ">6", text: ["0.0", "1-2", "3-4", "5-6", ">6"] },
summary: "1",
score: "5"
}]
part5show = true
data5List: DataModel5[] = [{
crossFunctionalProjectAssignment: "Business Continuity Plan (BCP)",
performanceIndicator: "",
target: "1.1 การเข้าร่วม ประชุม และเข้าร่วม ซ้อมแผน\n1.2 คะแนนการ ประเมินจากทีม ผู้บริหารและลูกค้ารวมกัน",
unit: "",
timeLine: "November 2021",
weight: "1.0",
targetDegree: { check: "เข้าร่วม 60 - 79% คะแนนการประเมิน 60- 79%", text: ["เข้าร่วม 90 - 100 % คะแนนการประเมิน 90- 100 %", "เข้าร่วม 80 - 89% คะแนนการประเมิน 80- 89%", "เข้าร่วม 60 - 79% คะแนนการประเมิน 60- 79%", "เข้าร่วม <59% คะแนนการประเมิน <59%", "ไม่เข้าร่วมกิจกรรมเลย"] },
summary: "3",
score: "3"
}, {
crossFunctionalProjectAssignment: "Safety committee",
performanceIndicator: "",
target: "เข้าร่วมประชุม, ร่วมกิจกรรม และปฏิบัติงานตามหน้าที่",
unit: "",
timeLine: "November 2021",
weight: "1.0",
targetDegree: { check: "เข้าร่วม 90-100%", text: ["เข้าร่วม 90-100%", "เข้าร่วม 70-80%", "เข้าร่วม 50%", "เข้าร่วม 30-40%", "เข้าร่วม 10-20%"] },
summary: "5",
score: "5"
}]
part6show = true
data6List: DataModel6[] = [{
specialActivities: "Kaizen",
performanceIndicator: "",
target: "1 Person / 1 Subject / 1 Month",
unit: "Subject",
timeLine: "Nov-21",
weight: "1.0",
targetDegree: { check: "1 เรื่อง x 12 เดือน", text: [">15 เรื่อง/ปี (ขั้นต่ำ 1 เรื่องเดือน)", ">12-15 เรื่อง/ปี (ขั้นต่ำ 1 เรื่องเดือน)", "1 เรื่อง x 12 เดือน", "10-12 เรื่อง/ปี (ขั้นต่ำ 1 เรื่องเดือน)", "<10 เรื่อง/ปี"] },
summary: "3",
score: "3"
}, {
specialActivities: "5S",
performanceIndicator: "",
target: "Result of Audit (Office)",
unit: "%",
timeLine: "Nov-21",
weight: "0.5",
targetDegree: { check: "89-85%", text: ["100-97%", "96-94%", "93-30%", "89-85%", "<84%"] },
summary: "2",
score: "1"
}, {
specialActivities: "QCC",
performanceIndicator: "",
target: "Present QCC Project",
unit: "Project",
timeLine: "Nov-21",
weight: "1.0",
targetDegree: { check: "ยื่นเรื่องและ นำเสนอผลงาน", text: ["อันดับ 1-3", "เข้ารอบ 5 ทีมสุดท้าย", "ยื่นเรื่องและ นำเสนอผลงาน", "สมัครสมาชิก และดำเนินกิจกรรมแต่ไม่ได้นำเสนอผลงาน", "ไม่เข้าร่วมกิจกรรม"] },
summary: "3",
score: "3"
}, {
specialActivities: "คณะกรรมการตามกิจกรรม",
performanceIndicator: "",
target: "5ส, Kaizen, QCC",
unit: "Activity",
timeLine: "Nov-21",
weight: "0.5",
targetDegree: { check: "1กิจกรรม", text: [">2 กิจกรรม", "2 กิจกรรม", "1กิจกรรม", " 89-85%", "<84%"] },
summary: "3",
score: "1.5"
}]
part7show = true
data7List: DataModel7[] = [{
evaluationFactor: "Part 1 : ประเมินผลการปฏิบัติงานตามนโยบายบริษัท (Hoshin)",
rawScore: "100",
factors: "15.00",
scoreObtained: "80.00",
netScore: "12",
Level: "A = ดีเลิศ (Outstanding) >91"
}, {
evaluationFactor: "Part 2 : ประเมินผลการปฏิบัติงานประจำ (Job based KPIs)",
rawScore: "100",
factors: "30.00",
scoreObtained: "74.29",
netScore: "22.29",
Level: "B = ดีมาก (Above Expectations)>81-90"
}, {
evaluationFactor: "Part 3 : ประเมินผลสมรรถนะที่สนับสนุนการปฏิบัติงาน (Skill Map)",
rawScore: "100",
factors: "35.00",
scoreObtained: "60.00",
netScore: "21",
Level: "C = ดี (Meet Expectations)>71-80"
}, {
evaluationFactor: "Part 4 : จำนวนการเข้างาน( Time Attendance)",
rawScore: "100",
factors: "10.00",
scoreObtained: "65.00",
netScore: "6.5",
Level: "D = ควรปรับปรุง (Below Expectations)>61-70"
}, {
evaluationFactor: "Part 5: งานที่ได้รับมอบหมายเพิ่มเติม (Cross Functional Project Assignment)",
rawScore: "100",
factors: "5.00",
scoreObtained: "80.00",
netScore: "4",
Level: "E = ไม่น่าพอใจ (Unsatisfactory) ≤60"
}, {
evaluationFactor: "Part 6: กิจกรรมพิเศษ (Special Activities)",
rawScore: "100",
factors: "5.00",
scoreObtained: "85.00",
netScore: "4.25",
Level: ""
}]
part8show = true
part9show = true
dataListFilter() {
return this.dataList
}
data2ListFilter() {
return this.data2List
}
data3ListFilter() {
return this.data3List
}
data4ListFilter() {
return this.data4List
}
data5ListFilter() {
return this.data5List
}
data6ListFilter() {
return this.data6List
}
data7ListFilter() {
return this.data7List
}
returnPage() {
this.sendPageEvalution.emit("")
}
}
\ No newline at end of file
<div class="header-title-type">
<div class="header-title-type p-0">
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;">
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
style="height: 40px;">
<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>
......@@ -17,16 +18,14 @@
</button>
</div>
</div>
</div>
</div>
<div class="header-title-table bg-soft-secondary text-primary">
<span>ประเมินสมรรถนะ</span>
</div>
<div class="page px-rem">
<div class="overflow-auto table-bordered rounded-t-md">
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1" >
<div class="overflow-auto table-bordered rounded-t-md">
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<div class="overflow-auto shadow-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover" >
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<ng-container
......@@ -47,7 +46,8 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let item of[
<tr
*ngFor="let item of[
['10001', 'ธนพัต อาชาไชย', 'HRD training Officer', '', '', '', '70', 'c', 'ประเมินเเล้ว', 'ผู้อนุมัติลำดับที่ 1'],
['10002', 'พิชญาภา มหาเมธี', 'HRD training Officer', '', '', '', '-', '-', 'ยังไม่ประเมิน', '-'],
['10003', 'นิรดา บุญเทพ', 'HRD training Officer', '', '', '', '76', '', 'ประเมินเเล้ว', 'ผู้อนุมัติลำดับที่3'],
......@@ -58,24 +58,29 @@
<td class="text-center" style="font-size: 12px; width: 150px;">{{item[0]}}</td>
<td style="font-size: 12px; width: 175px;">{{item[1]}}</td>
<td style="font-size: 12px;">{{item[2]}}</td>
<td class="flex justify-center" >
<button type="button" class="ti-btn rounded-sm ti-btn-secondary" style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;">
<td class="flex justify-center">
<button type="button" class="ti-btn rounded-sm ti-btn-secondary"
style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;">
CC
</button>
<button type="button" class="ti-btn rounded-sm ti-btn-warning" style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;">
<button type="button" class="ti-btn rounded-sm ti-btn-warning"
style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;">
MC
</button>
<button type="button" class="ti-btn rounded-sm ti-btn-success" style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;">
<button type="button" class="ti-btn rounded-sm ti-btn-success"
style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;">
PC
</button>
</td>
<td style="width: 160px; text-align: center; vertical-align: middle;">
<button type="button" class="ti-btn rounded-sm soft-dark text-white text-center" style="height: 15px; width: 45px; font-size: 12px;">
<button type="button" class="ti-btn rounded-sm soft-dark text-white text-center"
style="height: 15px; width: 45px; font-size: 12px;" (click)="returnPage('idp')">
IDP
</button>
</td>
<td class="text-center">
<button type="button" class="ti-btn rounded-sm ti-btn-success" style="height: 15px; width: 55px; font-size: 12px; display: flex; align-items: center; justify-content: center;">
<button type="button" class="ti-btn rounded-sm ti-btn-success"
style="height: 15px; width: 55px; font-size: 12px; display: flex; align-items: center; justify-content: center;" (click)="returnPage('pms')">
ประเมิน
</button>
</td>
......@@ -89,5 +94,4 @@
</table>
</div>
</div>
</div>
</div>
\ No newline at end of file
</div>
\ No newline at end of file
......@@ -125,7 +125,6 @@
// margin-bottom: 10px;
justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
align-items: center; /* จัดกลางแนวตั้ง */
padding-top: 50px;
padding-bottom: 1rem;
}
.header-title-table {
......
......@@ -9,6 +9,7 @@ import { ToastrService } from 'ngx-toastr';
export class RoundOneComponent {
@Input() pathTitle = ['การประเมินสมรรถนะ', 'ทะเบียนเครื่องมือ', 'เครื่องมือประเมิน'];
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
@Output() sendPageEvalution: EventEmitter<string> = new EventEmitter<string>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
isChecked: boolean = false;
......@@ -86,5 +87,8 @@ export class RoundOneComponent {
positionClass: 'toast-top-right',
});
}
returnPage(text: string) {
this.sendPageEvalution.emit(text)
}
}
<app-page-header [pathTitle]="pathTitle"></app-page-header>
<div class="bg-card-white">
</div>
<div class="block-main-content">
<div class="text-lg font-bold py-2 text-primary px-8">
<ng-container *ngIf="pageEvalution==''">
<app-page-header [pathTitle]="pathTitle"></app-page-header>
<div class="bg-card-white">
</div>
<div class="block-main-content">
<div class="font-size-18px font-weight-700 pt-1.5rem text-primary px-2rem">
ประเมินผล ประจำปี 2024
</div>
<div class="page">
<div class="border-b border-gray-200 dark:border-white/10 px-8">
<nav class="flex rtl:space-x-reverse space-x-5" style="padding-top: 20px;">
<a class="border w-44 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-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 text-white hover:text-gray-900 bg-primary"
href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
aria-controls="underline-1" (click)="pathTitle = ['การประเมินผล', 'ประเมินโดยหัวหน้า']">
<div class="pt-0.75rem">
<div class="border-b border-gray-200 dark:border-white/10 px-2rem">
<nav class=" flex space-x-2 rtl:space-x-reverse">
<a class="border justify-center rounded-top-4px bg-primary text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 active"
href="javascript:void(0);" id="card-type-item-1" data-hs-tab="#underline-1"
aria-controls="underline-1">
รอบการประเมินที่ 1/2
</a>
<a style="margin-left: 100px;" class="border w-44 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-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 text-white hover:text-gray-900 bg-primary"
href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
aria-controls="underline-2" (click)="pathTitle = ['การประเมินผล', 'ประเมินโดยหัวหน้า']">
<a class="border justify-center rounded-top-4px bg-primary text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 active"
href="javascript:void(0);" id="card-type-item-1" data-hs-tab="#underline-1"
aria-controls="underline-1">
รอบการประเมินที่ 2/2
</a>
</nav>
</div>
<div class="mt-3 px-3rem">
<div class="pt-50px px-2rem">
<div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
<app-round-one [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event"></app-round-one>
<app-round-one [pathTitle]="pathTitle" (sendPathTitle)="pathTitle=$event"
(sendPageEvalution)="pageEvalution=$event"></app-round-one>
</div>
<div id="underline-2" role="tabpanel" aria-labelledby="underline-item-2">
</div>
</div>
</div>
</div>
\ No newline at end of file
</div>
</ng-container>
<ng-container *ngIf="pageEvalution=='idp'">
<app-idp-evalution (sendPageEvalution)="pageEvalution=$event"></app-idp-evalution>
</ng-container>
<ng-container *ngIf="pageEvalution=='pms'">
<app-pms-evalution (sendPageEvalution)="pageEvalution=$event"></app-pms-evalution>
</ng-container>
\ No newline at end of file
......@@ -7,4 +7,5 @@ import { Component } from '@angular/core';
})
export class SupervisorEvaluationComponent {
pathTitle = ['การประเมินผล', 'ประเมินโดยหัวหน้า']
pageEvalution = ''
}
......@@ -9551,12 +9551,12 @@ select.tabulator-page-size option {
padding-left: 0px !important;
padding-right: 0px !important;
}
.sortable-data select {
ftable-data select {
border-radius: 0.5rem !important;
border-color: inherit !important;
background-size: 1rem 1rem !important;
}
.sortable-data .choices {
ftable-data .choices {
margin-bottom: 0px !important;
}
.tabulator .tabulator-col-resize-handle:last-child {
......@@ -9630,7 +9630,7 @@ select.tabulator-page-size option {
}
.tabulator
.tabulator-header
.tabulator-col.tabulator-sortable[aria-sort="ascending"]
.tabulator-col.tabulatorftable[aria-sort="ascending"]
.tabulator-col-content
.tabulator-col-sorter {
--tw-text-opacity: 1;
......@@ -24878,7 +24878,10 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
.border-none {
border: none;
}
.bg-table-soft-gray {
--tw-bg-opacity: 1;
background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}
.bg-table-gray {
background-color: rgb(170 170 170);
}
......
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