จัดกลุ่มสมรรถนะ

src/app/components/competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component.html

@@ -53,17 +53,18 @@
             <!-- 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>
+                    <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="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 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>
@@ -96,7 +97,7 @@
             </div>
             <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
-                    data-hs-overlay="#edit-group-competencies-alert-delete-modal">
+                    data-hs-overlay="#edit-group-competencies-alert-delete-modal" (click)="groupAssessmentIndex=-1">
                     <i class="ri-delete-bin-6-line"></i>
                     Delete
                 </button>
@@ -151,7 +152,7 @@
                             <td class="text-center">
                                 <input type="checkbox" class="ti-form-checkbox cursor-pointer"
                                     id="checkbox-{{item.data.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}"
-                                    [(ngModel)]="item.check" (change)="checkSelect()">
+                                    [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
                                 <label
                                     for="checkbox-{{item.data.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}">
                                     &nbsp;{{item.data.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}
@@ -165,7 +166,8 @@
                             </td>
                             <td class="flex justify-center">
                                 <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
-                                    data-hs-overlay="#edit-group-competencies-alert-delete-modal"></i>
+                                    data-hs-overlay="#edit-group-competencies-alert-delete-modal"
+                                    (click)="groupAssessmentIndex=i"></i>
                             </td>
                         </tr>
                     </tbody>
@@ -258,7 +260,7 @@
                             <thead>
                                 <tr>
                                     <ng-container
-                                        *ngFor="let item of ['รหัส','ชื่อประเภท','ระดับความหวัง','การจัดการ']; let f = first; let l = last; let i = index">
+                                        *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>
@@ -305,13 +307,7 @@
                                 <tr
                                     *ngFor="let item of dataListModalFilter()| 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.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}"
-                                            [(ngModel)]="item.check" (change)="checkSelect()">
-                                        <label
-                                            for="checkbox-{{item.data.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}">
-                                            &nbsp;{{item.data.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}
-                                        </label>
+                                        {{item.data.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}
                                     </td>
                                     <td style="font-size: 12px; width: 60%;">
                                         {{item.data.competencyIndicatorsCourses0.tdesc}}

src/app/components/competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component.ts

@@ -24,12 +24,18 @@ export class EditGroupCompetenciesComponent {
   search = ""
   currentPage = 1
   page = Array.from({ length: 1 }, (_, i) => i + 1);
-  isChecked: boolean = false;
   searchModal = ""
   currentPageModal = 1
   dataLoading = false
   dataModalLoading = false
 
+  groupAssessmentIndex = -1
+
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
+
+
   constructor(private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
     private groupAssessmentService: GroupAssessmentService,
@@ -43,17 +49,6 @@ export class EditGroupCompetenciesComponent {
   onEdit() {
     this.sendEdit.emit(false);
   }
-  checkSelect() {
-    this.dataSelectList = this.dataList.filter(item => item.check).map(item => item.data);
-  }
-
-  toggleCheckbox() {
-    this.isChecked = !this.isChecked;
-    this.dataList.forEach((item) => {
-      item.check = this.isChecked;
-    });
-    this.checkSelect();
-  }
 
   getGroupAssessmentById() {
     this.dataLoading = true;
@@ -76,6 +71,7 @@ export class EditGroupCompetenciesComponent {
     this.currentPage = 1;
     const filteredData = this.dataListFilter();
     this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
+    this.dataListCheck()
   }
   dataListFilter() {
     return this.dataList
@@ -90,14 +86,12 @@ export class EditGroupCompetenciesComponent {
       .sort((a, b) => {
         const topicA = a.data.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId.toLowerCase();
         const topicB = b.data.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId.toLowerCase();
-        
         const expectationA = a.data.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.expectation.toLowerCase();
         const expectationB = b.data.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.expectation.toLowerCase();
-
         return topicA.localeCompare(topicB) || expectationA.localeCompare(expectationB);
       });
   }
-  
+
 
 
   getIndicatorsCoursesList() {
@@ -122,6 +116,8 @@ export class EditGroupCompetenciesComponent {
         competencyIndicatorsCourses1Mini: new MyCompetencyIndicatorsCourses1MiniModel(data)
       })
     })
+    this.isDataListCheckedAll = false
+    this.dataListCheckAll()
   }
 
   searchModalChange() {
@@ -133,6 +129,9 @@ export class EditGroupCompetenciesComponent {
   dataListModalFilter() {
     return this.dataListModal.filter(x => {
       const data = x.data
+      if (this.dataList.some(y => y.data.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.expectation == data.competencyIndicatorsCourses0.expectation)) {
+        return
+      }
       const match = data.competencyIndicatorsCourses0.competencyTopic.competencyTopicId.toLowerCase().includes(this.searchModal.toLowerCase()) ||
         data.competencyIndicatorsCourses0.tdesc.toLowerCase().includes(this.searchModal.toLowerCase()) ||
         data.competencyIndicatorsCourses0.expectation.toLocaleLowerCase().includes(this.searchModal.toLocaleLowerCase())
@@ -141,7 +140,7 @@ export class EditGroupCompetenciesComponent {
   }
 
   saveGroupAssessment1() {
-    this.groupCompetencies.groupAssessment1List = this.dataList.map(x => x.data);
+    this.groupCompetencies.groupAssessment1List = this.dataList.map(x => new MyGroupAssessment1ListModel(x.data))
     this.groupAssessmentService.post(this.groupCompetencies).subscribe({
       next: (response) => {
         if (response.success) {
@@ -157,22 +156,36 @@ export class EditGroupCompetenciesComponent {
   }
 
   deleteGroupAssessmentById() {
-    const selectedItems = this.dataList.filter(item => item.check);
-
-    if (selectedItems.length > 0) {
-      this.dataList = this.dataList.filter(item => !item.check);
-    } else if (this.dataList.length > 0) {
-      this.dataList.pop();
-    }
-
+    this.dataList = this.dataList.filter((item, i) => (this.groupAssessmentIndex == -1 ? !item.check : i != this.groupAssessmentIndex));
+    this.isDataListCheckedAll = false
+    this.dataListCheckAll()
     this.cdr.detectChanges();
-    this.showAlert('ลบข้อมูลสำเร็จ', 'success');
   }
-
   showAlert(text: string, type: 'success' | 'error') {
     this.toastr[type](text, 'แจ้งเตือน', {
       timeOut: 3000,
       positionClass: 'toast-top-right',
     })
   }
+
+
+  dataListCheckAll() {
+    const selectAll = this.isDataListCheckedAll;
+    this.dataList
+      .filter(x => {
+        const data = x.data;
+        const match =
+          data.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId.toLowerCase().includes(this.search.toLowerCase()) ||
+          data.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
+          data.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.expectation.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.dataList.filter(x => x.check).length;
+    this.isDataListChecked = Boolean(this.numDataListChecked)
+  }
 }