หัวข้อสมรรถนะ

src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.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>
-
         <div class="flex justify-end">
             <div class="px-1">
                 <div class="relative shadow-md">
@@ -35,7 +31,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="#competency-topic-upload-modal">
+                    data-hs-overlay="#competency-topic-upload-modal"
+                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
                     <i class="ti ti-file-plus"></i>
                     import
                 </button>
@@ -103,7 +100,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 +176,7 @@
             <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)">
@@ -208,22 +205,26 @@
                 <input type="text" id="input-label" class="ti-form-input w-1/2"
                     [ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'"
                     [(ngModel)]="dataSelect.id">
-                <label for="detail_th" class="ti-form-label mt-2rem">ชื่อหัวข้อ (ไทย)</label>
+                <label for="detail_th" class="ti-form-label mt-2rem">ชื่อหัวข้อ (ไทย)*</label>
                 <input type="text" id="detail_th" class="ti-form-input h-10" [(ngModel)]="dataSelect.name">
                 <label for="detail_eng" class="ti-form-label mt-2rem">ชื่อหัวข้อ (อังกฤษ)</label>
                 <input type="text" id="detail_eng" class="ti-form-input h-10" [(ngModel)]="dataSelect.edesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">นิยามสมรรถนะ</label>
                 <textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"
                     [(ngModel)]="dataSelect.definition"> </textarea>
-                <label class="ti-form-label mt-2rem">ประเภท Competency</label>
+                <label class="ti-form-label mt-2rem">ประเภท Competency*</label>
                 <div class="flex">
                     <div class="relative flex rounded-md w-1/2">
                         <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
                             name="hs-leading-button-add-on-with-icon-and-button"
                             class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10"
-                            style="padding-right: 2.5rem;" [(ngModel)]="dataSelect.type.code">
+                            style="padding-right: 2.5rem;" readonly [(ngModel)]="dataSelect.type.code">
                         <div
                             class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
+                            <button type="button" class="flex items-center text-red-500"
+                                (click)="dataSelect.type.code=''">
+                                <i class="ti ti-circle-x cursor-pointer"></i>
+                            </button>
                             <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
                                 data-hs-overlay="#competency-topic-table-modal-select">
                                 <i class="ri-search-line cursor-pointer text-gray"></i>
@@ -257,10 +258,12 @@
                         data-hs-overlay="#competency-topic-page-modal">
                         ย้อนกลับ
                     </button>
-                    <a class="ti-btn ti-btn-success" href="javascript:void(0);"
-                        data-hs-overlay="#competency-topic-page-alert-modal">
+                    <button type="button" class="ti-btn ti-btn-success"
+                        data-hs-overlay="#competency-topic-page-alert-modal"
+                        [class.ti-btn-disabled]="!dataSelect.id||!dataSelect.name||!dataSelect.type.code"
+                        [disabled]="!dataSelect.id||!dataSelect.name||!dataSelect.type.code">
                         บันทึกข้อมูล
-                    </a>
+                    </button>
                 </div>
             </div>
         </div>
@@ -621,7 +624,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()"
@@ -630,8 +633,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="#competency-topic-upload-modal" [class.ti-btn-disabled]="!selectedFile"
+                        (click)="uploadFile()" [disabled]="!selectedFile" [disabled]="!selectedFile">
                         อัปโหลด
                     </button>
                 </div>

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

@@ -59,6 +59,10 @@ export class CompetencyTopic {
   selectedFileName: string = 'กรุณาเลือกไฟล์';
   selectedItems: string[] = [];
 
+
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
   constructor(private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
     private fileService: FileService,
@@ -70,18 +74,6 @@ export class CompetencyTopic {
     this.getCompetencytypeList()
   }
 
-  checkSelect() {
-    this.dataSelectList = this.competoncyTopicList.filter(item => item.check).map(item => item.data);
-  }
-
-  toggleCheckbox() {
-    this.isChecked = !this.isChecked; // สลับสถานะ'
-    this.competoncyTopicList.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 || "กรุณาเลือกไฟล์"
@@ -94,6 +86,7 @@ export class CompetencyTopic {
     }
     const formData = new FormData();
     formData.append('file', this.selectedFile);
+    this.dataLoading = true
     this.fileService.upload(formData, 'competency_topic').subscribe({
       next: response => {
         if (response.success) {
@@ -102,9 +95,13 @@ export class CompetencyTopic {
           this.getCompetencytopicList()
         } else {
           this.showAlert(response.message, 'error')
+          this.dataLoading = false
+          this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
+        this.cdr.detectChanges()
       }
     })
   }
@@ -167,6 +164,8 @@ export class CompetencyTopic {
             checked: false
           }
         }))
+        this.isDataListCheckedAll = false
+        this.dataListCheckAll()
         this.dataLoading = false
         this.searchChange()
         this.cdr.detectChanges()
@@ -180,11 +179,12 @@ export class CompetencyTopic {
   searchChange() {
     this.currentPage = 1
     this.page = Array.from({ length: Math.ceil(this.dataListFilter().length / 10) }, (_, i) => i + 1);
+    this.dataListCheck()
   }
   dataListFilter() {
     return this.competoncyTopicList.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;
     });
   }
@@ -198,6 +198,7 @@ export class CompetencyTopic {
       competencyTopicId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, competencyDetail: this.dataSelect.definition,
       competencyType: new MyCompetencytypeModel({ competencyTypeId: this.dataSelect.type.id, tdesc: this.dataSelect.type.name, edesc: this.dataSelect.type.edesc, shortName: this.dataSelect.type.code, expectationLevel: this.dataSelect.type.level }),
     })
+    this.dataLoading = true
     this.competencytopicService.post(body).subscribe({
       next: response => {
         if (response.success) {
@@ -206,9 +207,13 @@ export class CompetencyTopic {
           this.getCompetencytopicList()
         } else {
           this.showAlert(response.message, 'error')
+          this.dataLoading = false
+          this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
+        this.cdr.detectChanges()
       }
     })
   }
@@ -225,7 +230,7 @@ export class CompetencyTopic {
         competencyType: new MyCompetencytypeModel({ competencyTypeId: this.dataSelect.type.id, tdesc: this.dataSelect.type.name, edesc: this.dataSelect.type.edesc, shortName: this.dataSelect.type.code, expectationLevel: this.dataSelect.type.level }),
       })
     }
-    console.log(body)
+    this.dataLoading = true
     this.competencytopicService.delete(body).subscribe({
       next: response => {
         if (response.success) {
@@ -234,9 +239,13 @@ export class CompetencyTopic {
           this.getCompetencytopicList()
         } else {
           this.showAlert(response.message, 'error')
+          this.dataLoading = false
+          this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
+        this.cdr.detectChanges()
       }
     })
   }
@@ -247,4 +256,29 @@ export class CompetencyTopic {
       positionClass: 'toast-top-right',
     })
   }
+
+  clearData(modalStatus: string) {
+    if (modalStatus == 'add') {
+      this.setData()
+    } else if (modalStatus == 'edit') {
+      this.setData({ id: this.dataSelect.id, name: "", edesc: "", code: "", definition: "", type: { id: "", name: "", edesc: "", code: "", level: "" }, checked: this.dataSelect.checked })
+    }
+  }
+
+  dataListCheckAll() {
+    const selectAll = this.isDataListCheckedAll;
+    this.competoncyTopicList.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.competoncyTopicList.filter(x => x.check).length;
+    this.isDataListChecked = Boolean(this.numDataListChecked)
+  }
 }

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

@@ -59,6 +59,7 @@ export class TypeRegistration {
     }
     const formData = new FormData();
     formData.append('file', this.selectedFile);
+    this.dataLoading = true
     this.fileService.upload(formData, 'competency_type').subscribe({
       next: response => {
         if (response.success) {
@@ -66,9 +67,13 @@ export class TypeRegistration {
           this.getCompetencytypeList()
         } else {
           this.showAlert(response.message, 'error')
+          this.dataLoading = false
+          this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
+        this.cdr.detectChanges()
       }
     })
   }
@@ -126,6 +131,7 @@ export class TypeRegistration {
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   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 })
+    this.dataLoading = true
     this.competencytypeService.post(body).subscribe({
       next: response => {
         if (response.success) {
@@ -133,9 +139,13 @@ export class TypeRegistration {
           this.getCompetencytypeList()
         } else {
           this.showAlert(response.message, 'error')
+          this.dataLoading = false
+          this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
+        this.cdr.detectChanges()
       }
     })
   }
@@ -147,6 +157,7 @@ export class TypeRegistration {
     } else {
       body = this.competoncy_typeList.filter(x => x.check).map(x => new MyCompetencytypeModel({ competencyTypeId: x.data.id, tdesc: x.data.name, edesc: x.data.edesc, shortName: x.data.code, expectationLevel: x.data.level }));
     }
+    this.dataLoading = true
     this.competencytypeService.delete(body).subscribe({
       next: response => {
         if (response.success) {
@@ -154,10 +165,14 @@ export class TypeRegistration {
           this.getCompetencytypeList();
         } else {
           this.showAlert(response.message, 'error');
+          this.dataLoading = false
+          this.cdr.detectChanges()
         }
       },
       error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
+        this.cdr.detectChanges()
       }
     });
   }