Skip to content

M
mySkill-x
Commit c17a0c18 by Nattana Chaiyamat
Options

ประเมิน idp

parent 48e03a84
Showing with 390 additions and 7 deletions
src/app/components/dashboard/dashboard-routing.module.ts
...@@ -38,6 +38,7 @@ import { EvaluationFactorsComponent } from '../performance-management-evaluation ...@@ -38,6 +38,7 @@ import { EvaluationFactorsComponent } from '../performance-management-evaluation
import { GradeRegistrationComponent } from '../competency-assessment/grade-registration/grade-registration.component'; import { GradeRegistrationComponent } from '../competency-assessment/grade-registration/grade-registration.component';
import { SettingPerformanceEvalutionComponent } from '../performance-management-evaluation/setting-performance-evalution/setting-performance-evalution.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 { SelfEvaluationComponent } from '../performance-evaluation/self-evaluation/self-evaluation.component';
import { IdpEvalutionComponent } from '../evaluation/idp-evalution.component';
...@@ -84,8 +85,7 @@ const routes: Routes = [ ...@@ -84,8 +85,7 @@ const routes: Routes = [
{ path: "evaluation-factors", title: 'การประเมินจัดการประสิทธิภาพ', component: EvaluationFactorsComponent }, { path: "evaluation-factors", title: 'การประเมินจัดการประสิทธิภาพ', component: EvaluationFactorsComponent },
{ path: "grade-registration", title: 'ทะเบียนเกรด', component: GradeRegistrationComponent }, { path: "grade-registration", title: 'ทะเบียนเกรด', component: GradeRegistrationComponent },
{ path: "setting-performance-evalution", title: 'การตั้งค่า', component: SettingPerformanceEvalutionComponent }, { path: "setting-performance-evalution", title: 'การตั้งค่า', component: SettingPerformanceEvalutionComponent },
{ path: "self-evaluation", title: 'ประเมินตนเอง', component: SelfEvaluationComponent }, { path: "self-evaluation", title: 'ประเมินตนเอง', component: SelfEvaluationComponent }
] ]
} }
]; ];
......
src/app/components/dashboard/dashboard.module.ts
...@@ -110,6 +110,7 @@ import { SubGradeRegistrationComponent } from '../competency-assessment/grade-re ...@@ -110,6 +110,7 @@ import { SubGradeRegistrationComponent } from '../competency-assessment/grade-re
import { SettingPerformanceEvalutionComponent } from '../performance-management-evaluation/setting-performance-evalution/setting-performance-evalution.component'; 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 { 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 { SelfEvaluationComponent } from '../performance-evaluation/self-evaluation/self-evaluation.component';
import { IdpEvalutionComponent } from '../evaluation/idp-evalution.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
...@@ -201,7 +202,8 @@ import { SelfEvaluationComponent } from '../performance-evaluation/self-evaluati ...@@ -201,7 +202,8 @@ import { SelfEvaluationComponent } from '../performance-evaluation/self-evaluati
SubGradeRegistrationComponent, SubGradeRegistrationComponent,
SettingPerformanceEvalutionComponent, SettingPerformanceEvalutionComponent,
AssessmentSystemConfigurationComponent, AssessmentSystemConfigurationComponent,
SelfEvaluationComponent SelfEvaluationComponent,
IdpEvalutionComponent
], ],
imports: [ imports: [
CommonModule, CommonModule,
...@@ -216,7 +218,7 @@ import { SelfEvaluationComponent } from '../performance-evaluation/self-evaluati ...@@ -216,7 +218,7 @@ import { SelfEvaluationComponent } from '../performance-evaluation/self-evaluati
FormsModule, FormsModule,
NgxDaterangepickerMd.forRoot(), NgxDaterangepickerMd.forRoot(),
], ],
providers: [Bu1Service,Bu2Service,Bu3Service,Bu4Service,Bu5Service,Bu6Service,Bu7Service,PositionService,PLService,EmpGroupService,EmpTypeService,{ providers: [Bu1Service, Bu2Service, Bu3Service, Bu4Service, Bu5Service, Bu6Service, Bu7Service, PositionService, PLService, EmpGroupService, EmpTypeService, {
provide: HTTP_INTERCEPTORS, provide: HTTP_INTERCEPTORS,
useClass: HttpRequestInterceptor, useClass: HttpRequestInterceptor,
multi: true, multi: true,
......
src/app/components/evaluation/idp-evalution.component.html 0 → 100644
<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">
<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">
แผนพัฒนาบุคคลากรรายบุคคล
</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-3 grid grid-cols-6">
<div class="col-span-6 border p-2 pb-4">
<span>ผู้ใต้บังคับบัญชา</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>ชื่อ-สกุล</span>
</div>
<div class="col-span-2 p-2 border pb-4">
<span>น.ส.พิมพร อูรณาการ</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>ตำแหน่ง</span>
</div>
<div class="col-span-2 p-2 border pb-4">
<span>Human Resource Development Officer S3</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>งาน</span>
</div>
<div class="col-span-2 p-2 border pb-4">
<span></span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>ฝ่าย</span>
</div>
<div class="col-span-2 p-2 border pb-4">
<span></span>
</div>
</div>
<div class="col-span-3 grid grid-cols-6">
<div class="col-span-6 border p-2 pb-4">
<span>ผู้ใต้บังคับบัญชา</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>ชื่อ-สกุล</span>
</div>
<div class="col-span-2 p-2 border pb-4">
<span>น.ส. นดี แป้นศรี</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>ตำแหน่ง</span>
</div>
<div class="col-span-2 p-2 border pb-4">
<span>HRM Senior Section Manager</span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>งาน</span>
</div>
<div class="col-span-2 p-2 border pb-4">
<span></span>
</div>
<div class="col-span-1 p-2 border pb-4">
<span>ฝ่าย</span>
</div>
<div class="col-span-2 p-2 border pb-4">
<span></span>
</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="!dataListFilter().length">
<tr class="hover:table-hover2-hover">
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="dataListFilter().length">
<ng-container *ngFor=" let data of dataListFilter();let i = index">
<tr *ngIf="!data.bis.length" (mouseenter)="hoveredCode = data.code"
(mouseleave)="hoveredCode = null" [ngClass]="{ 'table-hover2': data.code === hoveredCode }">
<td class="align-start">
{{i+1}}. {{data.code}}
</td>
<td class="align-start bg-table-gray"></td>
<td class="align-start bg-table-gray"></td>
<td class="align-start bg-table-gray"></td>
<td class="align-start bg-table-gray"></td>
<td class="!p-0"></td>
<td class="align-start bg-table-gray"></td>
<td class="align-start bg-table-gray"></td>
<td class="!p-0"></td>
<td class="align-start text-center !white-space-normal"
[class.bg-table-gray]="!data.startDate&&!data.endDate">
<ng-container *ngIf="data.startDate&&data.endDate">
จาก&nbsp;
</ng-container>
{{data.startDate}}
<ng-container *ngIf="data.startDate&&data.endDate">
&nbsp;ถึง&nbsp;
</ng-container>
{{data.endDate}}
</td>
</tr>
<tr *ngFor=" let item of data.bis;let i2 = index;let f = first"
(mouseenter)="hoveredCode = data.code" (mouseleave)="hoveredCode = null"
[ngClass]="{ 'table-hover2': data.code === hoveredCode ,'border-none':!f }">
<td class="align-start">
<ng-container *ngIf="f">
{{i+1}}. {{data.code}}
</ng-container>
</td>
<td class="align-start !white-space-normal" [class.bg-table-gray]="checkBg(data.bis,'oj')">
{{i2+1}}. {{item.name}}
</td>
<td class="align-start text-center" [class.bg-table-gray]="checkBg(data.bis,'oj')">
<ng-container *ngIf="item.oj">
<i class="ti ti-check fs-xxl !fw-b"></i>
</ng-container>
</td>
<td class="align-start text-center" [class.bg-table-gray]="checkBg(data.bis,'cm')">
<ng-container *ngIf="item.cm">
<i class="ti ti-check fs-xxl !fw-b"></i>
</ng-container>
</td>
<td class="align-start text-center" [class.bg-table-gray]="checkBg(data.bis,'t')">
<ng-container *ngIf="item.t">
<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]="checkBg(data.bis,'cdr.code')">
<ng-container *ngIf="item.cdr.code">
<i class="ti ti-book fs-xxl !fw-b"></i><br>
{{item.cdr.code}}
</ng-container>
</td>
<td class="align-start !white-space-normal"
[class.bg-table-gray]="checkBg(data.bis,'cdr.name')">
<ng-container *ngIf="item.cdr.name">
<div class="grid grid-cols-6">
<div class="col-span-1">
<input type="checkbox" class="ti-form-checkbox cursor-pointer"
[(ngModel)]="item.cdr.check">
</div>
<div class="col-span-5">
{{item.cdr.name}}
</div>
</div>
</ng-container>
</td>
<td class="!p-0">
</td>
<td class="align-start !white-space-normal"
[class.bg-table-gray]="!data.startDate&&!data.endDate">
<ng-container *ngIf="data.startDate&&data.endDate">
จาก<br>
</ng-container>
<span class="whitespace-nowrap">
{{data.startDate}}
</span>
<ng-container *ngIf="data.startDate&&data.endDate">
<br>ถึง<br>
</ng-container>
<span class="whitespace-nowrap">
{{data.endDate}}
</span>
</td>
</tr>
</ng-container>
</tbody>
</table>
</div>
</div>
</ng-template>
\ No newline at end of file
src/app/components/evaluation/idp-evalution.component.ts 0 → 100644
import { Component } from '@angular/core';
export interface DataModel {
code: string,
bis: BisModel[],
startDate: string,
endDate: string
}
export interface BisModel {
name: string,
oj: boolean,
cm: boolean,
t: boolean,
cdr: CdrModel
}
export interface CdrModel {
check: boolean,
name: string,
code: string
}
@Component({
selector: 'app-idp-evalution',
templateUrl: './idp-evalution.component.html',
styleUrls: ['./idp-evalution.component.scss']
})
export class IdpEvalutionComponent {
pathTitle = ['การประเมินผล', 'ประเมินผล']
hoveredCode: string | null = null;
dataList: DataModel[] = [{
code: "CC-01",
bis: [{
name: "สอนงานด้านความปลอดภัย และคุณภาพของบริษัทให้กับพนักงานในหน่วยงาน",
oj: true,
cm: false,
t: true,
cdr: {
check: false,
name: "จิตใต้สำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับระดับพนักงาน S3-S4",
code: "CC-01-4"
}
}, {
name: "ติดตามและปรับปรุงการทำงานด้านความปลอดภัยและ คุณภาพของทีมงาน",
oj: false,
cm: false,
t: false,
cdr: {
check: false,
name: "",
code: ""
}
}],
startDate: "01-01-2023",
endDate: "31-12-2023"
}, {
code: "CC-02",
bis: [{
name: "สอนงาน และพัฒนาทีมงานให้เกิดการทำงานเป็นทีมโดยยึดเป้าหมายเดียวกัน (TAT Goal) และคำนึงถึงความต้องการของลูกค้าเป็นหลัก (Next Customer)",
oj: true,
cm: false,
t: false,
cdr: {
check: false,
name: "",
code: ""
}
}],
startDate: "01-01-2023",
endDate: "31-12-2023"
}, {
code: "CC-03",
bis: [],
startDate: "",
endDate: ""
}]
getNestedValue(obj: any, path: string) {
return path.split('.').reduce((acc, key) => acc && acc[key], obj);
}
checkBg(data: any[], field: string) {
return data.every(x => !this.getNestedValue(x, field));
}
dataListFilter() {
return this.dataList
}
}
src/app/components/performance-evaluation/self-evaluation/self-evaluation.component.html
...@@ -275,7 +275,7 @@ ...@@ -275,7 +275,7 @@
</tr> </tr>
</thead> </thead>
<tbody *ngIf="!dataList3Filter().length"> <tbody *ngIf="!dataList3Filter().length">
<tr> <tr class="hover:table-hover2-hover">
<td class="text-center" colspan="100%"> <td class="text-center" colspan="100%">
ไม่พบข้อมูล ไม่พบข้อมูล
</td> </td>
...@@ -296,12 +296,12 @@ ...@@ -296,12 +296,12 @@
{{data.code}} {{data.code}}
</ng-container> </ng-container>
</td> </td>
<td class="align-start" style="white-space:normal"> <td class="align-start !white-space-normal">
<ng-container *ngIf="f"> <ng-container *ngIf="f">
{{data.name}} {{data.name}}
</ng-container> </ng-container>
</td> </td>
<td class="align-start" style="white-space:normal"> <td class="align-start !white-space-normal">
{{item.name}} {{item.name}}
</td> </td>
<td class="align-center text-center"> <td class="align-center text-center">
......
src/assets/css/style.css
...@@ -3800,6 +3800,9 @@ select option:focus { ...@@ -3800,6 +3800,9 @@ select option:focus {
.col-span-4 { .col-span-4 {
grid-column: span 4 / span 4; grid-column: span 4 / span 4;
} }
.col-span-5 {
grid-column: span 5 / span 5;
}
.col-span-6 { .col-span-6 {
grid-column: span 6 / span 6; grid-column: span 6 / span 6;
} }
...@@ -24452,9 +24455,15 @@ div:where(.swal2-container) div:where(.swal2-validation-message) { ...@@ -24452,9 +24455,15 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
.fs-xxl { .fs-xxl {
font-size: xx-large; font-size: xx-large;
} }
.fs-xxl {
font-size: xxx-large;
}
.fw-b { .fw-b {
font-weight: bolder; font-weight: bolder;
} }
.\!fw-b {
font-weight: bolder !important;
}
.mt-1rem { .mt-1rem {
margin-top: 1rem; margin-top: 1rem;
...@@ -24862,6 +24871,17 @@ div:where(.swal2-container) div:where(.swal2-validation-message) { ...@@ -24862,6 +24871,17 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(241 245 249 / var(--tw-bg-opacity)); background-color: rgb(241 245 249 / var(--tw-bg-opacity));
} }
.ti-custom-table-hover2 tbody tr.hover\:table-hover2-hover:hover {
--tw-bg-opacity: 1;
background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}
.border-none { .border-none {
border: none; border: none;
} }
.bg-table-gray {
background-color: rgb(170 170 170);
}
.\!white-space-normal {
white-space: normal !important;
}
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