Skip to content

M
mySkill-x
Commit cd85c406 by Nattana Chaiyamat
Options

design จอเมนูใหม่

parent 05f14baf
Showing with 478 additions and 73 deletions
src/app/components/dashboard/dashboard-routing.module.ts
...@@ -83,7 +83,7 @@ const routes: Routes = [ ...@@ -83,7 +83,7 @@ const routes: Routes = [
// myComponent // myComponent
{ path: "ess/profile", component: EssProfileComponent }, { path: "ess/profile", component: EssProfileComponent },
{ path: "ess/self-evaluation", title: 'ประเมินตนเอง', component: SelfEvaluationComponent }, { path: "ess/self-evaluation", title: 'ประเมินตนเอง', redirectTo: 'ess/self-evaluation/info' },
{ path: "ess/self-evaluation/:part", title: 'ประเมินตนเอง', component: SelfEvaluationComponent }, { path: "ess/self-evaluation/:part", title: 'ประเมินตนเอง', component: SelfEvaluationComponent },
{ path: "admin/day-type-registry", title: 'ทะเบียนประเภทวัน', component: DayTypeRegistryComponent }, { path: "admin/day-type-registry", title: 'ทะเบียนประเภทวัน', component: DayTypeRegistryComponent },
{ path: "admin/company-registration", title: 'ทะเบียนบริษัท', component: CompanyRegistrationComponent }, { path: "admin/company-registration", title: 'ทะเบียนบริษัท', component: CompanyRegistrationComponent },
...@@ -106,6 +106,7 @@ const routes: Routes = [ ...@@ -106,6 +106,7 @@ const routes: Routes = [
{ path: "admin/job-position-indicators", title: 'ตัวชี้วัดของตำแหน่งงาน', component: JobPositionIndicatorsComponent }, { path: "admin/job-position-indicators", title: 'ตัวชี้วัดของตำแหน่งงาน', component: JobPositionIndicatorsComponent },
{ path: "admin/evaluation-cycle-performance", title: 'รอบการประเมิน', component: EvaluationCyclePerformanceComponent }, { path: "admin/evaluation-cycle-performance", title: 'รอบการประเมิน', component: EvaluationCyclePerformanceComponent },
{ path: "ess/supervisor-evaluation", title: 'ประเมินโดยหัวหน้า', component: SupervisorEvaluationComponent }, { path: "ess/supervisor-evaluation", title: 'ประเมินโดยหัวหน้า', component: SupervisorEvaluationComponent },
{ path: "ess/supervisor-evaluation/:part", title: 'ประเมินโดยหัวหน้า', component: SupervisorEvaluationComponent },
{ path: "ess/pms-evaluation", title: 'ประเมินผล PMS', component: PmsFormEmployeeComponent }, { path: "ess/pms-evaluation", title: 'ประเมินผล PMS', component: PmsFormEmployeeComponent },
{ path: "admin/employee-registration", title: 'ทะเบียนพนักงาน', component: EmployeeRegistrationComponent }, { path: "admin/employee-registration", title: 'ทะเบียนพนักงาน', component: EmployeeRegistrationComponent },
{ path: "admin/name-registration-perfomance", title: 'คลังข้อมูลการบริหารผลงาน', component: NameRegistrationPerfomanceComponent }, { path: "admin/name-registration-perfomance", title: 'คลังข้อมูลการบริหารผลงาน', component: NameRegistrationPerfomanceComponent },
......
src/app/components/employee-self-service/employee-self-service.component.html
<header class="flex flex-col items-center gap-3 text-center"> <ng-container *ngTemplateOutlet="newDesign"></ng-container>
<!-- โลโก้ -->
<img src="./assets/img/brand-logos/new_logo_mySkillX.png" alt="mySkillX" class="h-32 w-auto" />
<!-- บรรทัดใหญ่ --> <ng-template #original>
<header class="flex flex-col items-center gap-3 text-center">
</header> <!-- โลโก้ -->
<img src="./assets/img/brand-logos/new_logo_mySkillX.png" alt="mySkillX" class="h-32 w-auto" />
<main class="mx-auto max-w-[1400px] px-4 lg:px-8 py-8"> <!-- บรรทัดใหญ่ -->
<!-- ░░ FLEX WRAPPER ░░ --> </header>
<div class="flex flex-col lg:flex-row gap-10">
<!-- ◀︎ HERO --> <main class="mx-auto max-w-[1400px] px-4 lg:px-8 py-8">
<aside class="hero-card bp-glow shrink-0 self-center lg:self-start">
<img src="assets/img/logos/HRD/1.png" alt="Performance illustration" class="hero-img" />
<h4 class="hero-label">One X</h4> <!-- ░░ FLEX WRAPPER ░░ -->
<h3 class="hero-title">Performance &<br />Competency</h3> <div class="flex flex-col lg:flex-row gap-10">
<button routerLink="/dashboard/projects" class="hero-btn">Dashboard</button> <!-- ◀︎ HERO -->
<aside class="hero-card bp-glow shrink-0 self-center lg:self-start">
<img src="assets/img/logos/HRD/1.png" alt="Performance illustration" class="hero-img" />
<a routerLink="/ess/my-skill-x-module" class="back-link"> <h4 class="hero-label">One X</h4>
<i class="ti ti-arrow-left"></i> กลับสู่เมนูหลัก <h3 class="hero-title">Performance &<br />Competency</h3>
</a>
</aside>
<!-- ▶︎ MENU (ยังใช้ CSS-Grid ภายใน) --> <button routerLink="/dashboard/projects" class="hero-btn">Dashboard</button>
<section class="flex-grow">
<div class="grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 <a routerLink="/ess/my-skill-x-module" class="back-link">
xl:grid-cols-4 auto-rows-[150px]"> <i class="ti ti-arrow-left"></i> กลับสู่เมนูหลัก
<ng-container *ngFor="let m of modules; let i = index"> </a>
<div *ngIf="m.route" class="sub-card aspect-square flex-col" [routerLink]="m.route" </aside>
style="justify-content: start ;align-items: start;">
<div class="flex" style="margin-bottom:6rem;margin-top:1rem"> <!-- ▶︎ MENU (ยังใช้ CSS-Grid ภายใน) -->
<span <section class="flex-grow">
class="flex align-items-center justify-content-center rounded-circle text-white bg-primary text-left" <div class="grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-4
style="font-weight: 600;font-size: 1.5rem;"> xl:grid-cols-4 auto-rows-[150px]">
{{i+1}} <ng-container *ngFor="let m of modules; let i = index">
</span> <div *ngIf="m.route" class="sub-card aspect-square flex-col" [routerLink]="m.route"
style="justify-content: start ;align-items: start;">
<div class="flex" style="margin-bottom:6rem;margin-top:1rem">
<span
class="flex align-items-center justify-content-center rounded-circle text-white bg-primary text-left"
style="font-weight: 600;font-size: 1.5rem;">
{{i+1}}
</span>
</div>
<div class="flex">
<div class="sub-title2 text-left" [innerHTML]="m.title"></div>
</div>
</div>
<div *ngIf="m.file" class="sub-card aspect-square flex-col" (click)="openReport(m.file)"
style="justify-content: start ;align-items: start;">
<div class="flex " style="margin-bottom:6rem;margin-top:1rem">
<span
class="flex align-items-center justify-content-center rounded-circle text-white bg-primary text-left"
style="font-weight: 600;font-size: 1.5rem;">
{{i+1}}
</span>
</div>
<div class="flex">
<div class="sub-title2 text-left" [innerHTML]="m.title"></div>
</div>
</div>
<div *ngIf="!m.route&&!m.file" class="sub-card aspect-square flex-col"
style="justify-content: start ;align-items: start;">
<div class="flex " style="margin-bottom:6rem;margin-top:1rem">
<span
class="flex align-items-center justify-content-center rounded-circle text-white bg-primary text-left"
style="font-weight: 600;font-size: 1.5rem;">
{{i+1}}
</span>
</div>
<div class="flex">
<div class="sub-title2 text-left" [innerHTML]="m.title"></div>
</div>
</div>
</ng-container>
</div>
</section>
</div>
</main>
</ng-template>
<ng-template #newDesign>
<div class="relative m-2">
<div class="row absolute w-full">
<div class="col-12">
<div class="row-center col-center">
<div class="text-title">OneX : Performance and Competency Wizard</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3 ">
<div class="row row-top h-full">
<div class="col-12 row-center col-center">
<img src="./assets/img/brand-logos/new_logo_mySkillX.png" alt="mySkillX" class="w-auto"
style="height: 8rem;" />
</div>
<div class="col-12 row-top col-center mt-5 h-full">
<div class="row col-11 row-center col-center dashboard-box" style="height: calc(100% - 9.25rem);">
<div class="row col-12 sub-box h-full">
<div class="col-12 row-center col-center m-2">
<img src="assets/img/logos/HRD/1.png" alt="Performance illustration" class="hero-img" />
</div>
<div class="col-12 row-center col-center m-2">
<h4 class="hero-label">One X</h4>
</div>
<div class="col-12 row-center col-center m-2">
<h3 class="hero-title">Performance &<br />Competency</h3>
</div>
<div class="col-12 row-center col-center m-2">
<button routerLink="/dashboard/projects" class="hero-btn" style="height: 80px;">Dashboard & Follow
up</button>
</div>
<div class="col-12 row-center col-start m-2">
<a routerLink="/ess/my-skill-x-module" class="dashboard-link">
<i class="ti ti-arrow-left"></i> กลับสู่เมนูหลัก
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row col-3 row-top col-center mt-12 ">
<div class="col-11 menu-box h-full">
<div class="sub-box">
<div class="col-12 row-top col-start mb-5">
<div class="text-title text-blue">General</div>
</div> </div>
<div class="flex"> <div class="row col-12">
<div class="sub-title2 text-left" [innerHTML]="m.title"></div> <div class="col-12 p-2">
<table>
<ng-container *ngFor="let item of generalPages; let i = index">
<tbody class="table-link" [attr.data-disable-hover]="!item.link" style="line-height: 2.25rem;">
<td class="text-menu row-top w-auto">
<a [routerLink]="item.link?item.link:null" >
{{i + 1}}&nbsp;
</a>
</td>
<td class="text-menu">
<a class="table-link-link"
[routerLink]="item.link?item.link:null">
{{ item.text }}
</a>
</td>
</tbody>
</ng-container>
</table>
</div>
</div> </div>
</div> </div>
<div *ngIf="m.file" class="sub-card aspect-square flex-col" (click)="openReport(m.file)" </div>
style="justify-content: start ;align-items: start;"> </div>
<div class="flex " style="margin-bottom:6rem;margin-top:1rem"> <div class="row col-6 row-top mt-12">
<span <div class="row col-12 row-top col-center menu-box">
class="flex align-items-center justify-content-center rounded-circle text-white bg-primary text-left" <div class="sub-box">
style="font-weight: 600;font-size: 1.5rem;"> <div class="col-12 mb-5">
{{i+1}} <div class="text-title text-blue">Performance</div>
</span>
</div> </div>
<div class="flex"> <div class="row col-12">
<div class="sub-title2 text-left" [innerHTML]="m.title"></div> <ng-container *ngFor="let items of performancePages; let i = index">
<ng-container *ngFor="let item of items; let l = index">
<div class="col-4 p-2 ">
<a [routerLink]="item.link?item.link:null" class="row sub-box-menu p-2 row-center"
[attr.data-disable-hover]="!item.link" style="min-height: 65px;">
<div class="col-2">
<span
class="flex align-items-center justify-content-center rounded-circle text-white bg-primary text-left text-no">
{{(i*3)+l+1}}
</span>
</div>
<div class="col text-menu">
{{item.text}}
</div>
</a>
</div>
</ng-container>
</ng-container>
</div> </div>
</div> </div>
<div *ngIf="!m.route&&!m.file" class="sub-card aspect-square flex-col" </div>
style="justify-content: start ;align-items: start;"> <div class="row col-12 row-top col-center menu-box mt-5">
<div class="flex " style="margin-bottom:6rem;margin-top:1rem"> <div class="sub-box">
<span <div class="col-12 mb-5">
class="flex align-items-center justify-content-center rounded-circle text-white bg-primary text-left" <div class="text-title text-blue">Competency</div>
style="font-weight: 600;font-size: 1.5rem;">
{{i+1}}
</span>
</div> </div>
<div class="flex"> <div class="row col-12">
<div class="sub-title2 text-left" [innerHTML]="m.title"></div> <ng-container *ngFor="let items of competencyPages; let i = index">
<ng-container *ngFor="let item of items; let l = index">
<div class="col-4 p-2 ">
<a [routerLink]="item.link?item.link:null" class="row sub-box-menu p-2 row-center"
[attr.data-disable-hover]="!item.link" style="min-height: 65px;">
<div class="col-2">
<span
class="flex align-items-center justify-content-center rounded-circle text-white bg-primary text-left text-no">
{{(i*3)+l+1}}
</span>
</div>
<div class="col text-menu">
{{item.text}}
</div>
</a>
</div>
</ng-container>
</ng-container>
</div> </div>
</div> </div>
</ng-container> </div>
</div> </div>
</section> </div>
</div> </div>
</main> </ng-template>
\ No newline at end of file \ No newline at end of file
src/app/components/employee-self-service/employee-self-service.component.scss
...@@ -193,3 +193,203 @@ $shadow-deep : 0 20px 42px -16px rgba(0, 0, 0, .24); ...@@ -193,3 +193,203 @@ $shadow-deep : 0 20px 42px -16px rgba(0, 0, 0, .24);
word-break: break-word; word-break: break-word;
} }
// div {
// border: black 1px solid;
// min-height: 20px;
// }
.row {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
}
@for $i from 1 through 12 {
$width: (
$i / 12) * 100%;
.col-#{$i} {
flex: 0 0 $width;
max-width: $width;
}
}
.col-start {
display: flex;
justify-content: start;
}
.col-center {
display: flex;
justify-content: center;
}
.row-top {
display: flex;
align-items: start;
align-content: start;
}
.row-center {
display: flex;
align-items: center;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.dashboard-link {
font-size: .9rem;
color: #64748b;
transition: color .25s;
&:hover {
color: #3b82f6;
}
}
.dashboard-box {
box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2
);
border: 1px solid transparent;
border-radius: 30px;
background-image: linear-gradient(white, white),
linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
background-origin: border-box;
background-clip: content-box,
border-box;
transition: transform $dur $easing,
box-shadow $dur $easing;
&:hover {
transform: translateY(-6px);
box-shadow: $shadow-deep;
}
&:hover::before {
content: '';
position: absolute;
inset: -3px;
border-radius: inherit;
background: linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
filter: blur(34px);
opacity: .17;
z-index: -1;
transition: opacity $dur;
opacity: .27;
border: 1px solid;
}
.sub-box {
padding: 15px;
}
}
.menu-box {
box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
border: 1px solid transparent;
border-radius: 30px;
background-image: linear-gradient(white, white),
linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
background-origin: border-box;
background-clip: content-box,
border-box;
transition: transform $dur $easing,
box-shadow $dur $easing;
&:hover {
transform: translateY(-6px);
box-shadow: $shadow-deep;
}
&:hover::before {
content: '';
position: absolute;
inset: -3px;
border-radius: inherit;
// background: linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
filter: blur(34px);
opacity: .17;
z-index: -1;
transition: opacity $dur;
opacity: .27;
border: 1px solid;
}
.sub-box {
padding: 15px;
}
}
.text-blue {
color: #3b82f6;
}
.text-title {
font-weight: 600;
font-size: 1.5rem;
line-height: 2.25rem;
pointer-events: none;
word-break: break-word;
}
.text-menu {
font-weight: 500;
font-size: 1rem;
transition: color .25s;
}
.table-link {
transition: color 0.25s;
&[data-disable-hover="false"]:hover .text-menu a {
color: #3b82f6;
cursor: pointer;
&.table-link-link {
text-decoration: underline;
}
}
&[data-disable-hover="true"] {
opacity: 0.5;
cursor: default;
}
}
.sub-box-menu {
border: #3b82f6 1px solid;
border-radius: 15px;
min-height: 50px;
&:hover {
cursor: pointer;
background: rgba(59, 130, 246, 0.2);
}
&[data-disable-hover="true"] {
--tw-bg-opacity: 1;
background-color: rgb(226 232 240 / var(--tw-bg-opacity));
&:hover {
background-color: rgb(226 232 240 / var(--tw-bg-opacity));
cursor: default;
}
}
}
.text-no {
font-weight: 600;
font-size: 1.5rem;
}
\ No newline at end of file
src/app/components/employee-self-service/employee-self-service.component.ts
...@@ -5,6 +5,7 @@ interface SubModule { ...@@ -5,6 +5,7 @@ interface SubModule {
route?: string; route?: string;
file?: string; file?: string;
} }
@Component({ @Component({
selector: 'app-employee-self-service', selector: 'app-employee-self-service',
templateUrl: './employee-self-service.component.html', templateUrl: './employee-self-service.component.html',
...@@ -23,9 +24,47 @@ export class EmployeeSelfServiceComponent { ...@@ -23,9 +24,47 @@ export class EmployeeSelfServiceComponent {
{ title: this.sanitizer.bypassSecurityTrustHtml('Profile<p>ข้อมูลพนักงาน'), route: '/ess/profile' }, { title: this.sanitizer.bypassSecurityTrustHtml('Profile<p>ข้อมูลพนักงาน'), route: '/ess/profile' },
{ title: this.sanitizer.bypassSecurityTrustHtml('Skill Map<p>ทักษะที่จำเป็นสำหรับแต่ละตำแหน่งงาน'), file: '5._skill_map.pdf' }, { title: this.sanitizer.bypassSecurityTrustHtml('Skill Map<p>ทักษะที่จำเป็นสำหรับแต่ละตำแหน่งงาน'), file: '5._skill_map.pdf' },
{ title: this.sanitizer.bypassSecurityTrustHtml('CDR : Competency Dictionary Roadmap<p>หลักสูตรฝึกอบรมตามระบบสมรรถนะ'), file: '6._CDR.pdf' }, { title: this.sanitizer.bypassSecurityTrustHtml('CDR : Competency Dictionary Roadmap<p>หลักสูตรฝึกอบรมตามระบบสมรรถนะ'), file: '6._CDR.pdf' },
{ title: this.sanitizer.bypassSecurityTrustHtml('IDP : Individual Development Plan<p>แผนพัฒนารายบุคคล'), route: '/ess/self-evaluation/IDP' }, { title: this.sanitizer.bypassSecurityTrustHtml('IDP : Individual Development Plan<p>แผนพัฒนารายบุคคล'), route: '/ess/self-evaluation/idp' },
{ title: this.sanitizer.bypassSecurityTrustHtml('Competency Base Pay<p>ค่าความสามารถพิเศษ') } { title: this.sanitizer.bypassSecurityTrustHtml('Competency Base Pay<p>ค่าความสามารถพิเศษ') }
]; ];
generalPages = [
{ text: "JD", link: "/ess/job-description-emp" },
{ text: "Profile พนักงาน", link: "/ess/profile" },
{ text: "Job Family", description: "หน้าใหม่ Job Family" },
{ text: "Time Attendance", description: "หน้าใหม่ แสดงข้อมูล TA" },
{ text: "วินัย และการลงโทษ", description: "หน้าใหม่ คล้าย เมนูความดีความผิดของ myHR plus" },
{ text: "ผลงานดีเด่น", description: "หน้าใหม่" },
{ text: "Feedback", link: "/ess/self-evaluation/kpi-sum10" },
{ text: "ดูข้อมูลย้อนหลัง", description: "หน้าใหม่ แสดงListรอบประเมินตั้งแต่รอบล่าสุดถึงย้อนหลัง3ปี" },
{ text: "Calibrate คะแนน", description: "หน้ารายงานที่มีการ Calibrate และแสดงค่า K" },
{ text: "ข้อสอบ", link: "/ess/self-evaluation/com" },
{ text: "Download เอกสาร", description: "เป็น pop up แสดงข้อมูลไฟล์ให้ดาวน์โหลด เหมือนของ myHR plus" }
];
performancePages = [
[{ text: "ประเมิน", link: "/ess/self-evaluation" },
{ text: "ปัจจัยการประเมิน", link: "/admin/evaluation-factors" },
{ text: "การจัดการการประเมิน", link: "/admin/assessment-management" }],
[{ text: "รายงาน", description: "ไปที่รายงาน" },
{ text: "แบบฟอร์มการประเมิน", description: "รอทำหน้าใหม่" },
{ text: "ช่วงเวลาการประเมิน", link: "/admin/evaluation-cycle-performance" }],
[{ text: "PIP (Performance Improvement Plan)", description: "ยังไม่มี รอ Phase 2" }]
];
competencyPages = [
[{ text: "ประเมิน", link: "/ess/self-evaluation" },
{ text: "การจัดการการประเมิน", link: "/admin/competency-management" },
{ text: "รายงาน", description: "ไปที่รายงาน" }],
[{ text: "แบบฟอร์มการประเมิน", description: "รอทำหน้าใหม่" },
{ text: "ช่วงเวลาการประเมิน", link: "/admin/evaluation-cycle-manager" },
{ text: "การวิเคราะห์ GAP", description: "รอคอนเฟิร์ม คาดว่าเป็นรายงาน" }],
[{ text: "Skill Map", description: "รายงาน Skill Map" },
{ text: "Competency Mapping", description: "หน้าใหม่ ดูที่ใบงาน #50563" },
{ text: "CDR", description: "หน้าใหม่ แสดง List หลักสูตร" }],
[{ text: "IDP", link: "/ess/self-evaluation/idp" },
{ text: "Competency Base Pay", description: "รายงาน Competency Base Pay" }]
];
constructor(private sanitizer: DomSanitizer) { constructor(private sanitizer: DomSanitizer) {
} }
......
src/app/components/performance-evaluation/pms-form-employee/pms-form-employee.component.html
...@@ -564,12 +564,13 @@ ...@@ -564,12 +564,13 @@
<ng-container *ngFor="let item of menuList"> <ng-container *ngFor="let item of menuList">
<button type="button" class="flex-1 flex flex-row border bg-white p-2 justify-center" <button type="button" class="flex-1 flex flex-row border bg-white p-2 justify-center"
style="border-radius:20px" style="border-radius:20px"
(click)="currentTap=item;(currentTap=='ประเมินผลการปฏิบัติงาน'||currentTap=='สรุปคะแนนและข้อเสนอแนะ'?currentPart='':null)" (click)="currentTap=item.text;(currentTap=='ประเมินผลการปฏิบัติงาน'||currentTap=='สรุปคะแนนและข้อเสนอแนะ'?currentPart='':null);"
[ngClass]="{'!bg-primary text-white':currentTap==item}"> [ngClass]="{'!bg-primary text-white':currentTap==item.text}"
[routerLink]="evaluationForm=='sup'?null:'../'+item.link">
<span class="overflow-hidden text-ellipsis whitespace-nowrap align-center"> <span class="overflow-hidden text-ellipsis whitespace-nowrap align-center">
{{item}} {{item.text}}
</span> </span>
<ng-container *ngIf="item=='แบบประเมินสมรรถนะ'"> <ng-container *ngIf="item.text=='แบบประเมินสมรรถนะ'">
&nbsp; &nbsp;
<span class="flex align-center justify-content-center rounded-circle text-white" <span class="flex align-center justify-content-center rounded-circle text-white"
[class.bg-danger]="compentencyFormRemain" [class.bg-success]="!compentencyFormRemain"> [class.bg-danger]="compentencyFormRemain" [class.bg-success]="!compentencyFormRemain">
...@@ -579,7 +580,7 @@ ...@@ -579,7 +580,7 @@
<i *ngIf="!compentencyFormRemain" class="ti ti-check"></i> <i *ngIf="!compentencyFormRemain" class="ti ti-check"></i>
</span> </span>
</ng-container> </ng-container>
<ng-container *ngIf="item=='ประเมินผลการปฏิบัติงาน'"> <ng-container *ngIf="item.text=='ประเมินผลการปฏิบัติงาน'">
&nbsp; &nbsp;
<span class="flex align-items-center justify-content-center rounded-circle text-white" <span class="flex align-items-center justify-content-center rounded-circle text-white"
[class.bg-danger]="kpiFormRemain" [class.bg-success]="!kpiFormRemain"> [class.bg-danger]="kpiFormRemain" [class.bg-success]="!kpiFormRemain">
......
src/app/components/performance-evaluation/pms-form-employee/pms-form-employee.component.ts
...@@ -77,7 +77,12 @@ export class PmsFormEmployeeComponent { ...@@ -77,7 +77,12 @@ export class PmsFormEmployeeComponent {
complete = false complete = false
@ViewChild('scrollContainer') scrollContainer!: ElementRef; @ViewChild('scrollContainer') scrollContainer!: ElementRef;
menuList: string[] = ['ข้อมูลการประเมิน', 'แบบประเมินสมรรถนะ', 'ประเมินผลการปฏิบัติงาน', 'สรุปคะแนนและข้อเสนอแนะ', 'แผนพัฒนาบุคลากร'] menuList: { text: string, link: string }[] = [
{ text: 'ข้อมูลการประเมิน', link: 'info' },
{ text: 'แบบประเมินสมรรถนะ', link: 'com' },
{ text: 'ประเมินผลการปฏิบัติงาน', link: 'kpi' },
{ text: 'สรุปคะแนนและข้อเสนอแนะ', link: 'kpi-sum' },
{ text: 'แผนพัฒนาบุคลากร', link: 'idp' }]
constructor( constructor(
private router: Router, private router: Router,
...@@ -91,7 +96,7 @@ export class PmsFormEmployeeComponent { ...@@ -91,7 +96,7 @@ export class PmsFormEmployeeComponent {
} }
findMenu(text: string) { findMenu(text: string) {
return this.menuList.find(e => e == text) return this.menuList.find(e => e.text == text)
} }
currentStepText = () => { currentStepText = () => {
...@@ -291,7 +296,16 @@ export class PmsFormEmployeeComponent { ...@@ -291,7 +296,16 @@ export class PmsFormEmployeeComponent {
ngOnInit() { ngOnInit() {
this.route.paramMap.subscribe((params: ParamMap) => { this.route.paramMap.subscribe((params: ParamMap) => {
if (params.get('part') == 'IDP') { const pathLink = params.get('part')
if (pathLink == 'info') {
this.firstCurrentTap = 'ข้อมูลการประเมิน'
} else if (pathLink == 'com') {
this.firstCurrentTap = 'แบบประเมินสมรรถนะ'
} else if (pathLink?.includes('kpi-sum')) {
this.firstCurrentTap = 'สรุปคะแนนและข้อเสนอแนะ'
} else if (pathLink?.includes('kpi')) {
this.firstCurrentTap = 'ประเมินผลการปฏิบัติงาน'
} else if (pathLink == 'idp') {
this.firstCurrentTap = 'แผนพัฒนาบุคลากร' this.firstCurrentTap = 'แผนพัฒนาบุคลากร'
} }
}); });
......
src/app/components/performance-evaluation/pms-form-employee/pms-kpi/pms-kpi.component.ts
...@@ -5,7 +5,8 @@ import { EmployeeService } from 'src/app/shared/services/employee.service'; ...@@ -5,7 +5,8 @@ import { EmployeeService } from 'src/app/shared/services/employee.service';
import { PmsGroupGradeService } from 'src/app/shared/services/pms-group-grade.service'; import { PmsGroupGradeService } from 'src/app/shared/services/pms-group-grade.service';
import { SettingAssessmentService } from 'src/app/shared/services/setting-assessment.service'; import { SettingAssessmentService } from 'src/app/shared/services/setting-assessment.service';
import { Part5Detail, Pms, PmsTopic } from 'src/app/shared/model/competency.model'; import { Part5Detail, Pms, PmsTopic } from 'src/app/shared/model/competency.model';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { Location } from '@angular/common';
export interface Part8Model { export interface Part8Model {
id: number id: number
evaluationFactor: string, evaluationFactor: string,
...@@ -116,11 +117,13 @@ export class PmsKpiComponent { ...@@ -116,11 +117,13 @@ export class PmsKpiComponent {
@ViewChild('scrollContainer') scrollContainer!: ElementRef; @ViewChild('scrollContainer') scrollContainer!: ElementRef;
@Output() scrollToMenuId: EventEmitter<any> = new EventEmitter<any>(); @Output() scrollToMenuId: EventEmitter<any> = new EventEmitter<any>();
tableHover: Map<string, boolean> = new Map<string, boolean>() tableHover: Map<string, boolean> = new Map<string, boolean>()
constructor(private appraisalService: AppraisalService, constructor(private location: Location,
private appraisalService: AppraisalService,
private pmsGroupGradeService: PmsGroupGradeService, private pmsGroupGradeService: PmsGroupGradeService,
private employeeService: EmployeeService, private employeeService: EmployeeService,
private cdr: ChangeDetectorRef, private cdr: ChangeDetectorRef,
private settingAssessmentService: SettingAssessmentService private settingAssessmentService: SettingAssessmentService,
private route: ActivatedRoute
) { ) {
} }
...@@ -183,9 +186,20 @@ export class PmsKpiComponent { ...@@ -183,9 +186,20 @@ export class PmsKpiComponent {
this.sendScorePart() this.sendScorePart()
} }
if (changes['currentPart']?.currentValue) { if (changes['currentPart']?.currentValue) {
this.currentPart = '' this.route.paramMap.subscribe((params: ParamMap) => {
const pathLink = params.get('part')
if (pathLink?.includes('kpi-sum')) {
const path = Number(pathLink.split('kpi-sum')[1])
if (path) {
this.currentPart = 'PART ' + path
this.partOpen.set('PART ' + path, true)
this.scrollToMenu('menu-part-' + path)
}
}
});
} }
} }
getAppraisalPmsForm() { getAppraisalPmsForm() {
this.data8List.forEach((x, i) => { this.data8List.forEach((x, i) => {
if (x.id == 1 && this.appraisalPms?.part1Percentage) { if (x.id == 1 && this.appraisalPms?.part1Percentage) {
......
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