Skip to content

M
myAppraisal
Commit 4a753109 by kantavee
Options

การประเมินผล>ประเมินโดยหัวหน้า

parent 1fa96832
Showing with 395 additions and 57 deletions
src/app/components/Performance Evaluation/supervisor-evaluation/round-one/round-one.component.html 0 → 100644
<div class="header-title-type">
<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;">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</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 shadow-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover" >
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัสพนักงาน','ชื่อพนักงาน','ตำเเหน่งงาน','ประเมิน','เเผนพัฒนา','PMS','ผลประเมิน','เกรด','สถานะ','สถานะผู้ประเมิน']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l||'ประเมิณ'||'เเผนพัฒนา'||'PMS'">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l&&!f&&!i">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="50"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of[
['10001', 'ธนพัต อาชาไชย', 'HRD training Officer', '', '', '', '70', 'c', 'ประเมินเเล้ว', 'ผู้อนุมัติลำดับที่ 1'],
['10002', 'พิชญาภา มหาเมธี', 'HRD training Officer', '', '', '', '-', '-', 'ยังไม่ประเมิณ', '-'],
['10003', 'นิรดา บุญเทพ', 'HRD training Officer', '', '', '', '76', '', 'ประเมินเเล้ว', 'ผู้อนุมัติลำดับที่3'],
['10004', 'รัตน์ ธนากร', 'HRD training Officer', '', '', '', '79', '', 'ประเมินเเล้ว', 'ผู้อนุมัติลำดับที่ 1'],
['10005', 'ยศกร ศิริธาดา', 'HRD training Officer', '', '', '', '', '', 'ประเมินเเล้ว', 'ผู้อนุมัติลำดับที่ 2'],
['10006', 'ธนิสรา นพรัตน์พร', 'HRD training Officer', '', '', '', '80', '', 'ประเมินเเล้ว', '-'],
['10007', 'เมริสา สุขทิพย์', 'HRD training Officer', '', '', '', '', '', 'ประเมินเเล้ว', '-']];let i = index">
<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;">
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;">
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;">
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;">
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>
</td>
<td class="text-center" style="font-size: 12px;">{{item[6]}}</td>
<td class="text-center" style="font-size: 12px;">{{item[7]}}</td>
<td class="text-center" style="font-size: 12px;">{{item[8]}}</td>
<td class="text-center" style="font-size: 12px;">{{item[9]}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/Performance Evaluation/supervisor-evaluation/round-one/round-one.component.scss 0 → 100644
.button-clear {
position: absolute;
top: 96px;
z-index: 1;
right: 41vw;
}
.button-help {
position: absolute;
top: 0px;
z-index: 1;
right: 0vw;
margin: 4.2rem;
margin-right: 10px; /* เพิ่มใหม่ 12/16*/
}
table.ti-custom-table thead {
height: 60px;
}
table.ti-custom-table thead th span {
font-size: 12px;
font-weight: bold;
}
.ti-custom-table td{
padding-left: 0.9rem;
padding-right: 1rem;
}
.ti-custom-table thead th:first-child {
width: 105px; /* ปรับความกว้างตามที่ต้องการ */
text-align: left; /* จัดตำแหน่งข้อความถ้าต้องการ */
}
.ti-custom-table thead th:last-child {
width: 150px; /* ปรับความกว้างตามที่ต้องการ */
}
a.custom-link {
padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
}
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
width: 100%;
cursor: pointer;
margin-bottom: 10px;
height: 20%;
}
.nav-item {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link {
text-decoration: none;
padding: 10px 20px;
display: inline-block;
font-size: large;
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: #ccc;
border-radius: 5px 5px 0px 0px;
}
.nav-link:hover {
background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active {
color: #ffffff; /* สีตัวอักษรในสถานะ active */
font-size: large;
border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
background-color: rgb(var(--color-primary));
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: rgb(var(--color-primary));
border-radius: 5px 5px 0px 0px;
}
.tab-content {
margin-top: 20px;
}
.tab-pane.active {
display: block;
}
.nav-item-text {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link-text {
text-decoration: none;
display: inline-block;
font-size: large;
color: #569bf5;
border-bottom: 2px solid #569bf5;
line-height: 0.8;
}
.ti-pagination .page-link.active {
background-color: #569bf5;
color: white;
border-radius: 50%;
padding: 8px 12px;
}
.box-body{
padding: 0rem;
}
.page{
min-height: 0vh;
}
.ti-modal-content-alert{
width: 35%; /* ความกว้างที่คุณต้องการ */
position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
top: 50%; /* ให้อยู่กลางในแนวตั้ง */
left: 50%; /* ให้อยู่กลางในแนวนอน */
transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
background-color: #ffffff;
}
.header-title-type {
width: 100%;
min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
// margin-top: 50px;
// margin-bottom: 10px;
justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
align-items: center; /* จัดกลางแนวตั้ง */
padding-top: 50px;
padding-bottom: 1rem;
}
.header-title-table {
display: flex;
align-items: center; /* จัดกึ่งกลางในแนวตั้ง */
justify-content: flex-start; /* จัดตัวอักษรชิดซ้าย */
height: 60px; /* ความสูงของกรอบ */
padding-left: 20px; /* ระยะชิดซ้าย */
margin-bottom: 10px;
border-radius: 5px;
}
.header-title-table span {
font-size: 18px;
font-weight: bold;
}
.soft-dark{
background-color: #838282;
}
\ No newline at end of file
src/app/components/Performance Evaluation/supervisor-evaluation/round-one/round-one.component.ts 0 → 100644
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-round-one',
templateUrl: './round-one.component.html',
styleUrls: ['./round-one.component.scss']
})
export class RoundOneComponent {
@Input() pathTitle = ['การประเมินสมรรถนะ', 'ทะเบียนเครื่องมือ', 'เครื่องมือประเมิน'];
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
isChecked: boolean = false;
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'ทะเบียนเครื่องมือ', tab.text]);
this.activeTab = tab.id;
}
toggleCheckbox(): void {
this.isChecked = !this.isChecked;
}
// การจัดการการเปิดปิด modal
modalOptions: {
[nameModal: string]: {
isModalOpen: boolean;
modalSize: string;
backdropClose: boolean;
};
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
};
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
this.currentModal = name; // ตั้งค่าค่าของ currentModal เป็น 'add' หรือ 'edit'
document.body.style.overflow = 'hidden';
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen(): boolean {
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // ตรวจสอบว่า modal อื่นยังเปิดอยู่หรือไม่
}
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addUser() {
}
currentModal = ""
constructor(private toastr: ToastrService) { }
showSuccess() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
showSuccessEdit() {
this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
}
src/app/components/Performance Evaluation/supervisor-evaluation/supervisor-evaluation.component.html 0 → 100644
<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">
ประเมินผล ประจำปี 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 = ['การประเมินผล', 'ประเมินโดยหัวหน้า']">
รอบการประเมินที่ 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 = ['การประเมินผล', 'ประเมินโดยหัวหน้า']">
รอบการประเมินที่ 2/2
</a>
</nav>
</div>
<div class="mt-3 px-3rem">
<div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
<app-round-one [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$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
src/app/components/Performance Evaluation/supervisor-evaluation/supervisor-evaluation.component.ts 0 → 100644
import { Component } from '@angular/core';
@Component({
selector: 'app-supervisor-evaluation',
templateUrl: './supervisor-evaluation.component.html',
styleUrls: ['./supervisor-evaluation.component.scss']
})
export class SupervisorEvaluationComponent {
pathTitle = ['การประเมินผล', 'ประเมินโดยหัวหน้า']
}
src/app/components/company-components/account-settings/user-settings/user-settings.component.ts
// import { Component, EventEmitter, Input, Output } from '@angular/core';
// @Component({
// selector: 'app-user-settings',
// templateUrl: './user-settings.component.html',
// styleUrls: ['./user-settings.component.scss']
// })
// export class UserSettingsComponent {
// @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', 'สร้างรหัสผู้ใช้งาน']
// @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
// activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
// // ฟังก์ชันในการเปลี่ยนแท็บ
// changeTab(tab: { id: string, text: string }) {
// this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', tab.text])
// this.activeTab = tab.id;
// }
// modalOptions: {
// [nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด
// isModalOpen: boolean; // เปิด/ปิด
// modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 )
// backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
// }
// } = {
// "add": {
// isModalOpen: false,
// modalSize: 'm',
// backdropClose: true,
// },
// "edit": {
// isModalOpen: false,
// modalSize: 'm',
// backdropClose: true,
// }
// }
// openModal(name: string, size: string, closeOnBackdrop?: boolean) {
// this.modalOptions[name].modalSize = size;
// this.modalOptions[name].backdropClose = closeOnBackdrop || false;
// this.modalOptions[name].isModalOpen = true;
// document.body.style.overflow = 'hidden'; // ล็อก Scroll
// }
// closeModal(name: string) {
// this.modalOptions[name].isModalOpen = false;
// // ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
// if (!this.isAnyModalOpen()) {
// document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
// }
// }
// isAnyModalOpen(): boolean {
// // Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
// return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
// }
// }
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
......
src/app/components/dashboard/dashboard-routing.module.ts
......@@ -33,6 +33,8 @@ import { CommandStructureComponent } from '../job-detail-components/command-stru
import { AssessmentManagementComponent } from '../performance-management-evaluation/assessment-management/assessment-management.component';
import { JobPositionIndicatorsComponent } from '../job-detail-components/job-position-indicators/job-position-indicators.component';
import { EvaluationCyclePerformanceComponent } from '../performance-management-evaluation/evaluation-cycle-performance/evaluation-cycle-performance.component';
import { SupervisorEvaluationComponent } from '../Performance Evaluation/supervisor-evaluation/supervisor-evaluation.component';
......@@ -73,6 +75,7 @@ const routes: Routes = [
{ path: "assessment-management",title: 'การจัดการการประเมิณ', component: AssessmentManagementComponent },
{ path: "job-position-indicators",title: 'ตัวชี้วัดของตำแหน่งงาน', component: JobPositionIndicatorsComponent },
{ path: "evaluation-cycle-performance",title: 'รอบการประเมิณ', component: EvaluationCyclePerformanceComponent },
{ path: "supervisor-evaluation",title: 'ประเมินโดยหัวหน้า', component: SupervisorEvaluationComponent },
]
}
];
......
src/app/components/dashboard/dashboard.module.ts
......@@ -89,6 +89,8 @@ import { EditDefineDocumentFormComponent } from '../competency-assessment/evalua
import { EvaluationCyclePerformanceComponent } from '../performance-management-evaluation/evaluation-cycle-performance/evaluation-cycle-performance.component';
import { DocumentFormComponent } from '../performance-management-evaluation/evaluation-cycle-performance/document-form/document-form.component';
import { EditEvaluationFormComponent } from '../performance-management-evaluation/evaluation-cycle-performance/document-form/edit-evaluation-form/edit-evaluation-form.component';
import { RoundOneComponent } from '../Performance Evaluation/supervisor-evaluation/round-one/round-one.component';
import { SupervisorEvaluationComponent } from '../Performance Evaluation/supervisor-evaluation/supervisor-evaluation.component';
@NgModule({
declarations: [
......@@ -160,7 +162,8 @@ import { EditEvaluationFormComponent } from '../performance-management-evaluatio
EvaluationCyclePerformanceComponent,
DocumentFormComponent,
EditEvaluationFormComponent,
RoundOneComponent,
SupervisorEvaluationComponent,
],
imports: [
CommonModule,
......
src/app/shared/services/navservice.ts
......@@ -146,6 +146,18 @@ export class NavService implements OnDestroy {
{ path: '', title: 'รายงาน', type: 'link' },
],
},
{
title: 'การประเมิณผล',
type: 'sub',
selected: false,
active: false,
path: '/supervisor-evaluation',
children: [
{ path: '/', title: 'การจัดการการประเมิน', type: 'link' },
{ path: '/supervisor-evaluation', title: 'ประเมินโดยหัวหน้า', type: 'link' },
],
},
......
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