ประเภทสมรรถนะ

src/app/components/competency-assessment/name-registration/name-registration.component.html

@@ -10,24 +10,25 @@
             <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
                 <a class="text-base font-medium hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary active"
                     href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
-                    aria-controls="underline-1" (click)=" currentPage = 1;pathTitle = ['การประเมินสมรรถนะ','ทะเบียนกำหนดชื่อ','ประเภทสมรรถนะ']">
+                    aria-controls="underline-1"
+                    (click)=" currentPage = 1;pathTitle = ['การประเมินสมรรถนะ','ทะเบียนกำหนดชื่อ','ประเภทสมรรถนะ']">
                     ประเภทสมรรถนะ
                 </a>
                 <a class="text-base font-medium hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary"
                     href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
-                    aria-controls="underline-2" (click)="currentPage = 2;pathTitle = ['การประเมินสมรรถนะ','ทะเบียนกำหนดชื่อ','หัวข้อสมรรถนะ']">
+                    aria-controls="underline-2"
+                    (click)="currentPage = 2;pathTitle = ['การประเมินสมรรถนะ','ทะเบียนกำหนดชื่อ','หัวข้อสมรรถนะ']">
                     หัวข้อสมรรถนะ
                 </a>
             </nav>
         </div>
-        <div class="mt-3 px-3rem !-mt-3 pt-50px">
+        <div class="mt-3 px-2rem !-mt-3 pt-50px">
             <div *ngIf="currentPage == 1" id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
-                <app-type-registration [pathTitle]="pathTitle"
-                    (sendPathTitle)="pathTitle=$event"></app-type-registration>
+                <app-type-registration></app-type-registration>
             </div>
-            <div *ngIf="currentPage == 2" id="underline-2" class="hidden" role="tabpanel" aria-labelledby="underline-item-2">
-                <app-competency-topic    [pathTitle]="pathTitle"
-                    (sendPathTitle)="pathTitle=$event"></app-competency-topic>
+            <div *ngIf="currentPage == 2" id="underline-2" class="hidden" role="tabpanel"
+                aria-labelledby="underline-item-2">
+                <app-competency-topic [pathTitle]="pathTitle" (sendPathTitle)="pathTitle=$event"></app-competency-topic>
             </div>
         </div>
     </div>

src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.html

 <div class="w-full min-height-50px mb-10px justify-between items-center">
     <div class="flex justify-between">
-        <div class="flex pr-2">
-            <!-- Content ของ div แรก -->
-            <div class="flex gap-x-6">
-                <div class="flex items-center">
-                    <label for="hs-checkbox-group-1"
-                        class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{dataSelectList.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>
-                </div>
-
+        <div class="flex">
+            <div class="flex items-center">
+                <input type="checkbox" class="ti-form-checkbox pointer-events-none" id="hs-default-checkbox"
+                    [(ngModel)]="isDataListChecked">
+                <label for="hs-default-checkbox" class="text-sm text-gray-500 mx-2 pointer-events-none">
+                    {{numDataListChecked}} Selected</label>
+            </div>
+            <div class="mx-1 flex items-center">
+                <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()"
+                    class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
+                    <i class="fs-l transition-all duration-200"
+                        [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
+                </button>
+                <label class="text-sm text-gray-500 ml-2">Select All</label>
             </div>
         </div>
 
@@ -35,7 +32,8 @@
             <div class="px-1">
                 <button type="button"
                     class="ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
-                    data-hs-overlay="#type-registration-component-upload-modal">
+                    data-hs-overlay="#type-registration-component-upload-modal"
+                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
                     <i class="ti ti-file-plus"></i>
                     import
                 </button>
@@ -103,7 +101,7 @@
                     *ngFor="let item of dataListFilter()| slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
                     <td class="text-center">
                         <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.id}}"
-                            [(ngModel)]="item.check" (change)="checkSelect()">
+                            [(ngModel)]="item.check" (change)="dataListCheck()">
                         <label for="checkbox-{{item.data.id}}">&nbsp;{{item.data.id}}</label>
                     </td>
                     <td>{{item.data.name}}</td>
@@ -179,7 +177,8 @@
             <div class="ti-modal-center">
                 <div class="flex justify-end" style="padding-right: 1rem;">
                     <div class="px-1">
-                        <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
+                        <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md"
+                            (click)="clearData(modalStatus)">
                             <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
                                 xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
                                 transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
@@ -223,10 +222,12 @@
                         data-hs-overlay="#type-registration-component-page-modal">
                         ย้อนกลับ
                     </button>
-                    <a class="ti-btn ti-btn-success" href="javascript:void(0);"
-                        data-hs-overlay="#type-registration-component-page-alert-modal">
+                    <button type="button" class="ti-btn ti-btn-success"
+                        data-hs-overlay="#type-registration-component-page-alert-modal"
+                        [class.ti-btn-disabled]="!dataSelect.id||!dataSelect.name||!dataSelect.code||!dataSelect.level"
+                        [disabled]="!dataSelect.id||!dataSelect.name||!dataSelect.code||!dataSelect.level">
                         บันทึกข้อมูล
-                    </a>
+                    </button>
                 </div>
             </div>
         </div>
@@ -309,7 +310,7 @@
             <h1 class="mt-2" style="text-align: center;">ไฟล์</h1>
             <div class="mt-2 p-2">
                 <div class="flex rounded-md">
-                    <input #fileInput type="file" (change)="onFileSelected($event)" hidden>
+                    <input #fileInput id="fileInput" type="file" (change)="onFileSelected($event)" hidden>
                     <input type="text" [value]="selectedFileName" readonly (click)="fileInput.click()"
                         class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10 cursor-pointer">
                     <button type="button" (click)="fileInput.click()"
@@ -318,8 +319,9 @@
                     </button>
                 </div>
                 <div class="flex justify-center mt-2rem mb-1rem space-x-4">
-                    <button type="submit" class="ti-btn ti-btn-secondary" (click)="uploadFile()"
-                        [disabled]="!selectedFile">
+                    <button type="submit" class="ti-btn ti-btn-secondary"
+                        data-hs-overlay="#type-registration-component-upload-modal" [class.ti-btn-disabled]="!selectedFile"
+                        (click)="uploadFile()" [disabled]="!selectedFile" [disabled]="!selectedFile">
                         อัปโหลด
                     </button>
                 </div>

src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.ts

@@ -18,26 +18,21 @@ export interface DataModel {
   styleUrls: ['./type-registration.component.scss']
 })
 export class TypeRegistration {
-  @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;
-  }
-
   isChecked: boolean = false;
   currentPage = 1
   selectedItems: string[] = [];
   page = Array.from({ length: 1 }, (_, i) => i + 1);
+
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
+
   dataSelectList: DataModel[] = [];
   dataLoading = false
   dataSelect: DataModel = { id: "", companyId: "", edesc: "", name: "", code: "", level: "", checked: false }
   competoncy_typeList: { check: boolean; data: DataModel & { checked?: boolean } }[] = []
   competoncy_type: CompetencytypeModel = new MyCompetencytypeModel({})
-  modalStatus = 'add'
+  modalStatus: 'add' | 'edit' | 'delete' | 'deleteGroup' = 'add'
   search = ""
   selectedFile: File | null = null;
   selectedFileName: string = 'กรุณาเลือกไฟล์';
@@ -52,18 +47,6 @@ export class TypeRegistration {
     this.getCompetencytypeList()
   }
 
-  checkSelect() {
-    this.dataSelectList = this.competoncy_typeList.filter(item => item.check).map(item => item.data);
-  }
-
-  toggleCheckbox() {
-    this.isChecked = !this.isChecked; // สลับสถานะ'
-    this.competoncy_typeList.forEach((item) => {
-      item.check = this.isChecked;
-    });
-    this.checkSelect();
-  }
-
   onFileSelected(event: any) {
     this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
     this.selectedFileName = this.selectedFile?.name || "กรุณาเลือกไฟล์"
@@ -115,11 +98,12 @@ export class TypeRegistration {
       next: response => {
         this.competoncy_typeList = response.map(x => ({ check: false, data: { id: x.competencyTypeId, companyId: x.companyId, edesc: x.edesc, name: x.tdesc, code: x.shortName, level: x.expectationLevel, checked: false } }))
         this.dataLoading = false
+        this.isDataListCheckedAll = false
+        this.dataListCheckAll()
         this.searchChange()
         this.cdr.detectChanges()
       }, error: error => {
         this.dataLoading = false
-        console.error('Error fetching employee types:', error);
         this.cdr.detectChanges()
       }
     })
@@ -127,18 +111,18 @@ export class TypeRegistration {
   searchChange() {
     this.currentPage = 1
     this.page = Array.from({ length: Math.ceil(this.dataListFilter().length / 10) }, (_, i) => i + 1);
+    this.dataListCheck()
   }
   dataListFilter() {
     return this.competoncy_typeList.filter(x => {
       const data = x.data
-      const match = data.id.toLowerCase().includes(this.search) || data.name.toLowerCase().includes(this.search) || data.code.toLowerCase().includes(this.search);
+      const match = data.id.toLowerCase().includes(this.search.toLowerCase()) || data.name.toLowerCase().includes(this.search.toLowerCase()) || data.code.toLowerCase().includes(this.search.toLowerCase());
       return match;
     });
   }
   setData(data?: DataModel) {
-    this.dataSelect = JSON.parse(JSON.stringify(data || { id: "", companyId: "", name: "", edesc: "", code: "", level: "" }));
+    this.dataSelect = JSON.parse(JSON.stringify(data || { id: "", companyId: "", name: "", edesc: "", code: "", level: "", checked: false }));
   }
-
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addType_registration() {
     const body = new MyCompetencytypeModel({ competencyTypeId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, shortName: this.dataSelect.code, expectationLevel: this.dataSelect.level })
@@ -184,5 +168,30 @@ export class TypeRegistration {
       positionClass: 'toast-top-right',
     })
   }
+
+
+  dataListCheckAll() {
+    const selectAll = this.isDataListCheckedAll;
+    this.competoncy_typeList.filter(x => {
+      const data = x.data
+      const match = data.id.toLowerCase().includes(this.search.toLowerCase()) || data.name.toLowerCase().includes(this.search.toLowerCase()) || data.code.toLowerCase().includes(this.search.toLowerCase());
+      return match;
+    }).forEach(x => x.check = selectAll);
+    this.dataListCheck();
+  }
+
+  dataListCheck() {
+    const dataCheck = this.dataListFilter();
+    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
+    this.numDataListChecked = this.competoncy_typeList.filter(x => x.check).length;
+    this.isDataListChecked = Boolean(this.numDataListChecked)
+  }
+  clearData(modalStatus: string) {
+    if (modalStatus == 'add') {
+      this.setData()
+    } else if (modalStatus == 'edit') {
+      this.setData({ id: this.dataSelect.id, companyId: "", name: "", edesc: "", code: "", level: "", checked: this.dataSelect.checked })
+    }
+  }
 }