Skip to content

M
myAppraisal
Commit 00e2db21 by Nakarin Luankla
Options

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

parent b1eb4e98
Showing with 36 additions and 159 deletions
src/app/components/competency-assessment/course-registration/course-registration.component.html
......@@ -15,7 +15,7 @@
</a>
</nav>
</div>
<div class="mt-3 px-3rem">
<div class="mt-3 px-3rem !-mt-3 pt-50px">
<div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
<app-development-course [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event"></app-development-course>
......
src/app/components/competency-assessment/course-registration/development-course/development-course.component.html
<div class="header-title-type">
<div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between">
<div class="flex">
<div class="flex pr-2">
<!-- 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">
......@@ -60,45 +59,29 @@
</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">
<div class="page px-rem">
<div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead>
<tr>
<ng-container
*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>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==1">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30"
height="13" 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>
<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 class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of[
['CC-01-01', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ O1-O2'],
['CC-01-02', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ O3-O4'],
['CC-01-03', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ S1-S2'],
['CC-01-04', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ S3-S4'],
['CC-01-05', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ M1-M2'],
['CC-01-06', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ M3-M4'],
['CC-01-07', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ E1-E2']];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="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.id}}" [(ngModel)]="item.checked" (change)="checkSelect()">
<label for="checkbox-{{item.id}}">&nbsp;{{item.id}}</label>
</td>
<td style="font-size: 12px; width: 60%;">{{item[1]}}</td>
<td>{{item.name}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#development-course-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#development-course-alert-delete-modal"></i>
......@@ -107,8 +90,6 @@
</tbody>
</table>
</div>
</div>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center">
......
src/app/components/competency-assessment/course-registration/development-course/development-course.component.scss
.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 th {
height: 60px;
}
table.ti-custom-table thead {
height: 50px;
}
table.ti-custom-table thead th span {
font-size: 12px;
font-weight: bold;
}
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 {
overflow: hidden;
}
.header-title-type {
width: 100%;
min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
// margin-top: 50px;
// margin-bottom: 16px;
justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
align-items: center; /* จัดกลางแนวตั้ง */
padding-top: 50px;
padding-bottom: 1rem;
}
\ No newline at end of file
src/app/components/competency-assessment/course-registration/development-course/development-course.component.ts
......@@ -60,7 +60,11 @@ export class DevelopmentCourseComponent {
isChecked: boolean = false; // ใช้สำหรับตรวจสอบสถานะของ checkbox
toggleCheckbox() {
this.isChecked = !this.isChecked; // สลับสถานะ
this.isChecked = !this.isChecked;
this.mockData.forEach((item) => {
item.checked = this.isChecked;
});
this.checkSelect();
}
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
......@@ -70,8 +74,22 @@ export class DevelopmentCourseComponent {
currentModal = "";
constructor(private toastr: ToastrService) { }
mockData = [
{ 'id': 'CC-01-01', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ O1-O2', 'code': '1', 'checked': false },
{ 'id': 'CC-01-02', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ O3-O4', 'code': '2', 'checked': false },
{ 'id': 'CC-01-03', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ S1-S2', 'code': '3', 'checked': false },
{ 'id': 'CC-01-04', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ S3-S4', 'code': '4', 'checked': false },
{ 'id': 'CC-01-05', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ M1-M2', 'code': '5', 'checked': false },
{ 'id': 'CC-01-06', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ M3-M4', 'code': '6', 'checked': false },
{ 'id': 'CC-01-07', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ E1-E2', 'code': '7', 'checked': false }
]
mockDataSelect:any =[]
constructor(private toastr: ToastrService) { }
checkSelect(){
this.mockDataSelect = this.mockData.filter(item => item.checked);
}
showSuccess() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
......
src/app/components/competency-assessment/tool-register/assessment-tool/assessment-tool.component.ts
......@@ -74,12 +74,6 @@ export class AssessmentToolComponent {
});
this.checkSelect();
}
// [
// ['01', 'เเบบสังเกต','O'],
// ['02', 'เเบบการปฏิบัติงาน','D'],
// ['03', 'การบันทึก/เอกสาร','P'],
// ['04', 'การสัมภาษณ์','I'],
// ['05', 'เเบบทดสอบ','T']]
mockData = [
{ 'id': '01', 'name': 'เเบบสังเกต', 'code': 'O','checked': false },
{ 'id': '02', 'name': 'เเบบการปฏิบัติงาน', 'code': 'D','checked': false },
......
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