แก้สี input หน้ากลุ่มพนักงาน, ตำแหน่ง, ประเภทพนักงาน, ระดับพนักงาน PL

src/app/components/job-description/employee-categories/employee-categories.component.html

@@ -86,15 +86,17 @@
                     <tr
                         *ngFor="let item of emp_typeListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
                         <td class="flex justify-center">
-                            <input type="checkbox" style="margin-right: 20px; transform:scale(0.7)">
+                            <input type="checkbox"
+                              style="margin-right: 20px; transform:scale(0.7)"
+                              [(ngModel)]="item['selected']" (change)="onCheckboxChange(item)">
                             {{item.codeId}}
-                        </td>
+                          </td>
                         <td class="text-center">{{item.tdesc}}</td>
                         <td class="text-center">{{item.edesc}}</td>
                         <td class="flex justify-center">
                             <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectEmp_type(item)"
                                 data-hs-overlay="#employee-categories-modal-edit"></i>
-                            <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteEmp_type(item)"
+                            <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="openDeleteModal(item)"
                             data-hs-overlay="#employee-categories-alert-delete-modal"></i>
                         </td>
                     </tr>
@@ -238,7 +240,7 @@
             </div>
             <div class="ti-modal-body" style="margin-top: 40px;">
                 <label for="input-label" class="ti-form-label">รหัสประเภทพนักงาน</label>
-                <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" style="background-color: #B3B3B3;" [(ngModel)]="emp_type.codeId" readonly> 
+                <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly [(ngModel)]="emp_type.codeId" > 
                 <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
                 <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="emp_type.tdesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
@@ -358,7 +360,7 @@
                         ย้อนกลับ
                     </button>
                     <a class="ti-btn ti-btn-success" href="javascript:void(0);"
-                        data-hs-overlay="#employee-categories-alert-delete-modal" (click)="addEmp_type(); showSuccessDelete()">
+                        data-hs-overlay="#employee-categories-alert-delete-modal" (click)=" deleteSelectedItems(); deleteSelected(); showSuccessDelete()">
                         ลบข้อมูล
                     </a>
                 </div>

src/app/components/job-description/employee-categories/employee-categories.component.ts

@@ -24,6 +24,7 @@ export class EmployeeCategories {
   emp_typeList: EmpTypeModel[] = []
   emp_type: EmpTypeModel = new MyEmpTypeModel({})
   search = ""
+  itemToDelete: EmpTypeModel | null = null;
   constructor(private EmpTypeService: EmpTypeService,
     private toastr: ToastrService
   ) { }
@@ -85,7 +86,8 @@ export class EmployeeCategories {
     this.page = Array.from({ length: Math.ceil(this.emp_typeListFilter().length / 10) }, (_, i) => i + 1);
   }
   emp_typeListFilter() {
-    return this.emp_typeList.filter(x => x.codeId.toLowerCase().includes(this.search) ||
+    return this.emp_typeList.filter(x => 
+      x.codeId.toLowerCase().includes(this.search) ||
       x.tdesc.toLowerCase().includes(this.search) ||
       x.edesc.toLowerCase().includes(this.search))
   }
@@ -107,6 +109,28 @@ export class EmployeeCategories {
     //   }
     // })
   }
+
+
+  openDeleteModal(item: EmpTypeModel) {
+    this.itemToDelete = item; // เก็บข้อมูลที่ต้องการลบ
+  }
+
+  deleteSelected() {
+    if (this.itemToDelete) {
+      // ลบ item ที่ถูกเลือกออกจาก emp_typeList
+      this.emp_typeList = this.emp_typeList.filter(item => item !== this.itemToDelete);
+    }
+  }
+
+  // ฟังก์ชันลบข้อมูลที่เลือก
+  deleteSelectedItems() {
+    this.emp_typeList = this.emp_typeList.filter(item => !item['selected']);
+  }
+
+  onCheckboxChange(emp_type: EmpTypeModel) {
+    console.log('Checkbox changed:', emp_type);
+  }
+
   showSuccessAdd() {
     this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', {
       timeOut: 3000,

src/app/components/job-description/employee-group-unit/employee-group-unit.component.html

@@ -229,7 +229,7 @@
             </div>
             <div class="ti-modal-body ">
                 <label for="input-label" class="ti-form-label mt-2rem">รหัสกลุ่มพนักงาน</label>
-                <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" style="background-color: #B3B3B3;" [(ngModel)]="emp_group.groupId" readonly>
+                <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly [(ngModel)]="emp_group.groupId" >
                 <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย)</label>
                 <input type="text" id="detail_th" class="ti-form-input" [(ngModel)]="emp_group.tdesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>

src/app/components/job-description/employee-level/employee-level.component.html

@@ -239,8 +239,7 @@
       </div>
       <div class="ti-modal-body" style="margin-top: 40px;">
         <label for="input-label" class="ti-form-label">รหัสระดับพนักงาน(PL)</label>
-        <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly"
-          style="background-color: #B3B3B3;" [(ngModel)]="pl.plId" readonly>
+        <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly [(ngModel)]="pl.plId" >
         <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
         <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="pl.tdesc">
         <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>

src/app/components/job-description/position/position-unit.component.html

@@ -230,7 +230,7 @@
             </div>
             <div class="ti-modal-body ">
                 <label for="input-label" class="ti-form-label mt-2rem">รหัสตำเเหน่ง</label>
-                <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" [(ngModel)]="position.positionId" readonly style="background-color: #B3B3B3;">
+                <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly [(ngModel)]="position.positionId">
                 <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย)</label>
                 <input type="text" id="detail_th" class="ti-form-input" [(ngModel)]="position.tdesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>

src/app/shared/model/employee-type.model.ts

 export interface EmpTypeModel{
+    [x: string]: any;
     codeId: string;
     tdesc: string;
     edesc: string;