Merge branch 'DEV' of https://mygit.myhr.co.th/angular/myAppraisal into DEV

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 },