Skip to content

M
myAppraisal
Commit 1e990d2f by Nakarin Luankla
Options

UPDATE การประเมินสมรรถนะ

parent e62baade
Showing with 82 additions and 46 deletions
src/app/components/competency-assessment/grade-registration/grade-management/grade-management.component.html
......@@ -232,7 +232,7 @@
<input type="checkbox" style="margin-right: 15px; transform: scale(0.7);">
<span style="display: inline-block;" class="w-10">{{ item[0] }}</span>
</td>
<td style="font-size: 12px; padding-left: 1.5rem;">{{item[1]}}</td>
<td class="detail-td">{{item[1]}}</td>
<td style="font-size: 12px; padding-left: 1.5rem; width: 400px;">{{item[2]}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="onEdit()"></i>
......
src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.html
......@@ -4,14 +4,13 @@
<!-- Content ของ div แรก -->
<div class="flex gap-x-6">
<div class="flex items-center">
<input type="checkbox" class="ti-form-checkbox mt-0.5" id="hs-checkbox-group-1">
<label for="hs-checkbox-group-1" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">0 Selected</label>
<label for="hs-checkbox-group-1" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{mockDataSelect.length}} Selected</label>
</div>
<div class="flex items-center">
<i (click)="toggleCheckbox()" [ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i>
<label for="hs-checkbox-group-2" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70" (click)="toggleCheckbox()">Select All</label>
<i (click)="toggleCheckbox()" [ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i>
<label for="hs-checkbox-group-2" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70" (click)="toggleCheckbox()">Select All</label>
</div>
</div>
......@@ -68,7 +67,7 @@
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อหัวข้อ','ประเภท','Action']; let f = first; let l = last; let i = index">
*ngFor="let item of ['รหัส','ชื่อหัวข้อ','ประเภท','การจัดการ']; 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">
<span class="text-sm">{{ item }}</span>
......@@ -93,20 +92,13 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let item of[
['CC-01', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)','CC'],
['CC-02', 'การทำงานเป็นทีมแบบ TAT (TAT Teamwork)','CC'],
['CC-03', 'ความรับผิดชอบในหน้าที่และโปร่งใส (Accountability & Ethics)','CC'],
['MC-01', 'การคิดเชิงกลยุทธิ์ (Strategic Thinking)','MC'],
['MC-02', 'การมีทัศนคติเชิงบวก (Mindset-Growth)','MC'],
['PC-01', 'ความรู้ด้านกฏหมายแรงงาน, กฏหมายแพ่งภาณิชย์, กฏหมายอาญา','PC']];let i = index">
<td class="flex justify-center" style="height: 40px; font-size: 12px; margin-right: 25px;">
<input type="checkbox"
style="margin-right: 20px; transform: scale(0.7);">
<span style="display: inline-block; ">{{ item[0] }}</span>
<tr *ngFor="let item of mockData;let i = index">
<td class="flex justify-center items-center" style="height: 40px; font-size: 12px; padding-right: 20px;">
<input type="checkbox" style="margin-right: 10px; transform: scale(0.7);" [(ngModel)]="item.checked" id="checkbox-{{item.id}}" (change)="checkSelect()">
<label class="checkbox-label" for="checkbox-{{item.id}}">{{ item.id }}</label>
</td>
<td style="font-size: 12px; width: 40%;">{{item[1]}}</td>
<td style="font-size: 12px; width: 40%;">{{item[2]}}</td>
<td class="detail-td">{{item.name}}</td>
<td style="font-size: 12px; padding-left: 1.5rem; width: 150px;">{{item.code}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#competency-topic-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#competency-topic-alert-delete-modal"></i>
......
src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.ts
......@@ -36,7 +36,23 @@ export class CompetencyTopic {
backdropClose: true,
}
};
// [
// ['CC-01', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)','CC'],
// ['CC-02', 'การทำงานเป็นทีมแบบ TAT (TAT Teamwork)','CC'],
// ['CC-03', 'ความรับผิดชอบในหน้าที่และโปร่งใส (Accountability & Ethics)','CC'],
// ['MC-01', 'การคิดเชิงกลยุทธิ์ (Strategic Thinking)','MC'],
// ['MC-02', 'การมีทัศนคติเชิงบวก (Mindset-Growth)','MC'],
// ['PC-01', 'ความรู้ด้านกฏหมายแรงงาน, กฏหมายแพ่งภาณิชย์, กฏหมายอาญา','PC']
mockData = [
{ 'id': 'CC-01', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)', 'code': 'CC', 'checked': false },
{ 'id': 'CC-02', 'name': 'การทำงานเป็นทีมแบบ TAT (TAT Teamwork)', 'code': 'CC', 'checked': false },
{ 'id': 'CC-03', 'name': 'ความรับผิดชอบในหน้าที่และโปร่งใส (Accountability & Ethics)', 'code': 'CC', 'checked': false },
{ 'id': 'MC-01', 'name': 'การคิดเชิงกลยุทธิ์ (Strategic Thinking)', 'code': 'MC', 'checked': false },
{ 'id': 'MC-02', 'name': 'การมีทัศนคติเชิงบวก (Mindset-Growth)', 'code': 'MC', 'checked': false },
{ 'id': 'PC-01', 'name': 'ความรู้ด้านกฏหมายแรงงาน, กฏหมายแพ่งภาณิชย์, กฏหมายอาญา', 'code': 'PC', 'checked': false }
]
mockDataSelect:any =[]
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
......@@ -60,7 +76,15 @@ export class CompetencyTopic {
isChecked: boolean = false; // ใช้สำหรับตรวจสอบสถานะของ checkbox
toggleCheckbox() {
this.isChecked = !this.isChecked; // สลับสถานะ
this.isChecked = !this.isChecked; // สลับสถานะ'
this.mockData.forEach((item) => {
item.checked = this.isChecked;
});
this.checkSelect();
}
checkSelect(){
this.mockDataSelect = this.mockData.filter(item => item.checked);
}
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
......
src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.html
......@@ -4,8 +4,7 @@
<!-- Content ของ div แรก -->
<div class="flex gap-x-6">
<div class="flex items-center">
<input type="checkbox" class="ti-form-checkbox mt-0.5" id="hs-checkbox-group-1">
<label for="hs-checkbox-group-1" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">0 Selected</label>
<label for="hs-checkbox-group-1" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{mockDataSelect.length}} Selected</label>
</div>
<div class="flex items-center">
......@@ -67,7 +66,7 @@
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','Action']; let f = first; let l = last; let i = index">
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; 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">
<span class="text-sm">{{ item }}</span>
......@@ -84,21 +83,13 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let item of[
['01', 'Core Compotency','CC'],
['02', 'Management Compotency','MC'],
['03', 'Position Compotency','PC']];let i = index">
<!-- <td style="font-size: 12px;" class="flex ">
<input type="checkbox" style="margin-right: 15px; transform:scale(0.7)">
{{item[0]}}
</td> -->
<tr *ngFor="let item of MockData;let i = index">
<td class="flex justify-center items-center" style="height: 40px; font-size: 12px; padding-right: 20px;">
<input type="checkbox"
style="margin-right: 15px; transform: scale(0.7);">
<span style="display: inline-block;" class="w-10">{{ item[0] }}</span>
<input type="checkbox" style="margin-right: 10px; transform: scale(0.7);" [(ngModel)]="item.checked" id="checkbox-{{item.id}}" (change)="checkSelect()">
<label class="checkbox-label" for="checkbox-{{item.id}}">{{ item.id }}</label>
</td>
<td style="font-size: 12px; padding-left: 1.5rem;">{{item[1]}}</td>
<td style="font-size: 12px; padding-left: 1.5rem; width: 150px;">{{item[2]}}</td>
<td class="detail-td">{{item.name}}</td>
<td style="font-size: 12px; padding-left: 1.5rem; width: 150px;">{{item.code}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#type-registration-component-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#type-registration-component-alert-delete-modal"></i>
......
src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.ts
......@@ -11,16 +11,14 @@ export class TypeRegistration {
@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: {
......@@ -42,6 +40,26 @@ export class TypeRegistration {
}
};
toggleCheckbox(): void {
this.isChecked = !this.isChecked;
this.MockData.forEach((item) => {
item.checked = this.isChecked;
});
this.checkSelect();
}
MockData = [
{ 'id': '01', 'name': 'Core Compotency', 'code': 'CC','checked': false },
{ 'id': '02', 'name': 'Management Compotency', 'code': 'MC','checked': false },
{ 'id': '03', 'name': 'Position Compotency', 'code': 'PC','checked': false },
]
mockDataSelect:any =[]
checkSelect(){
this.mockDataSelect = this.MockData.filter(item => item.checked);
}
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
......
src/app/components/competency-assessment/tool-register/assessment-tool/assessment-tool.component.html
......@@ -99,7 +99,7 @@
style="margin-right: 15px; transform: scale(0.7);">
<span style="display: inline-block;" class="w-10">{{ item[0] }}</span>
</td>
<td style="font-size: 12px; padding-left: 1.5rem;">{{item[1]}}</td>
<td class="detail-td">{{item[1]}}</td>
<td style="font-size: 12px; padding-left: 1.5rem; width: 400px;">{{item[2]}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#assessment-tool-component-modal-edit"></i>
......
src/app/components/job-detail-components/job-competency/sub-job-competency/sub-job-competency.component.html
......@@ -76,7 +76,7 @@
['03', '003','Department 1-HRD', 'Department 1-HRD'],
['04', '004','Department Manager 3', 'Department Manager 3'],
['05', '005','Department Manager 4', 'Department Manager 4']];let i = index">
<td class="text-center" style="font-size: 12px; padding-left: 1.5rem;">{{item[0]}}</td>
<td class="text-center" class="detail-td">{{item[0]}}</td>
<td style="font-size: 12px; padding-left: 1.5rem; width: 150px;">{{item[1]}}</td>
<td style="font-size: 12px; padding-left: 1.5rem; width: 400px;">{{item[2]}}</td>
<td style="font-size: 12px; padding-left: 1.5rem; width: 400px;">{{item[3]}}</td>
......
src/app/components/job-detail-components/job-qualifications/sub-job-qualifications/sub-job-qualifications.component.html
......@@ -76,7 +76,7 @@
['03', '003','Department 1-HRD', 'Department 1-HRD'],
['04', '004','Department Manager 3', 'Department Manager 3'],
['05', '005','Department Manager 4', 'Department Manager 4']];let i = index">
<td class="text-center" style="font-size: 12px; padding-left: 1.5rem;">{{item[0]}}</td>
<td class="text-center" class="detail-td">{{item[0]}}</td>
<td style="font-size: 12px; padding-left: 1.5rem; width: 150px;">{{item[1]}}</td>
<td style="font-size: 12px; padding-left: 1.5rem; width: 400px;">{{item[2]}}</td>
<td style="font-size: 12px; padding-left: 1.5rem; width: 400px;">{{item[3]}}</td>
......
src/app/components/performance-management-evaluation/name-registration-perfomance/assessment-topics/assessment-topics.component.html
......@@ -101,7 +101,7 @@
<input type="checkbox" style="margin-right: 15px; transform: scale(0.7);">
<span style="display: inline-block;" class="w-10">{{ item[0] }}</span>
</td>
<td style="font-size: 12px; padding-left: 1.5rem;">{{item[1]}}</td>
<td class="detail-td">{{item[1]}}</td>
<td style="font-size: 12px; padding-left: 1.5rem; width: 20%;">{{item[2]}}</td>
<td style="font-size: 12px; padding-left: 1.5rem;width: 10%;">{{item[3]}}</td>
<td class="flex justify-center">
......
src/app/shared/components/footer/footer.component.html
<footer class="mt-auto py-3 border-t dark:border-white/10 bg-white dark:bg-bgdark">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<p class="text-center">Copyright © <span id="year">2023 </span> <a href="javascript:void(0)" class="text-primary">Synto</a>. Designed with <span class="ri ri-heart-fill text-red-500"></span> by <a class="text-primary" href="javascript:void(0)"> Spruko </a> All rights reserved </p>
<p class="text-center">Copyright © <span id="year">2024 </span> <a href="https://www.myhr.co.th/" target="_blank" class="text-primary">myHR Corporation Limited</a> All rights reserved </p>
</div>
</footer>
src/styles.scss
......@@ -353,3 +353,13 @@ ngx-dropzone {
margin-right: -14px;
margin-bottom: 20px;
}
.checkbox-label {
margin-top: 3px;
}
.detail-td{
font-size: 12px;
padding-left: 1.5rem;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment