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

src/app/components/company-components/company-registration/branch-business-unit/branch-business-unit.component.html

 <div class="font-size-16px font-weight-600 pt-2rem pb-1rem text-primary">
-    รายละเอียดสาขาและหน่วยธุรกิจ
+    รายละเอียดหน่วยธุรกิจ
 </div>
 <div class="page">
     <nav class="flex rtl:space-x-reverse space-x-2">

src/app/components/company-components/company-registration/branch-business-unit/branch-business-unit.component.ts

@@ -6,12 +6,12 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   styleUrls: ['./branch-business-unit.component.scss']
 })
 export class BranchBusinessUnitComponent {
-  @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ', 'ทะเบียนฝ่าย']
+  @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'หน่วยธุรกิจ', 'ทะเบียนฝ่าย']
   @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
 
   currentTab = 1
   onSendPathTitle(pathTitle: string) {
-    this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ', pathTitle])
+    this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'หน่วยธุรกิจ', pathTitle])
   }
 }
 

src/app/components/company-components/company-registration/branch-business-unit/department-list/department-list.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="px-1">
-                <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
-                    data-hs-overlay="#department-list-upload-modal"
-                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
-                    <i class="ri-add-line"></i>
-                    นำเข้าข้อมูล
+        <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()" id='check-boxall'
+                    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>
-                <a class="mx-2 justify-center  -mb-px  inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
-                    href="javascript:void(0);" (click)="downloadFile()">
-                    ดาวน์โหลดตัวอย่างไฟล์
-                </a>
+                <label class="text-sm text-gray-500 ml-2" for="check-boxall">Select All</label>
             </div>
         </div>
         <div class="flex justify-end">
@@ -29,17 +30,33 @@
                 </div>
             </div>
             <div class="px-1">
+                <button type="button"
+                    class=" h-45px 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="#department-list-upload-modal"
+                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
+                    <i class="ti ti-file-plus"></i>
+                    import
+                </button>
+            </div>
+            <div class="px-1">
                 <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
                     (click)="currentModal='add';selectBu1();selectBu2()" data-hs-overlay="#department-list-modal-add">
                     <i class="ri-add-line"></i>
                     Add
                 </button>
             </div>
-            <div class="px-1">
+            <!-- <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-info h-45px m-0 shadow-md">
                     <i class="ri-printer-line"></i>
                     Print
                 </button>
+            </div> -->
+            <div class="px-1">
+                <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
+                    (click)="currentModal='delete';selectBu1()" data-hs-overlay="#department-list-alert-delete-modal">
+                    <i class="ri-delete-bin-6-line"></i>
+                    Delete
+                </button>
             </div>
             <!-- <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
@@ -57,10 +74,10 @@
             <thead>
                 <tr>
                     <ng-container
-                        *ngFor="let item of ['ลำดับ','รหัสแผนก','รายละเอียดแผนก (ไทย)','รายละเอียดแผนก (อังกฤษ)','การจัดการ']; let f = first; let l = last">
+                        *ngFor="let item of ['','รหัสแผนก','รายละเอียดแผนก (ไทย)','รายละเอียดแผนก (อังกฤษ)','การจัดการ']; let f = first; let l = last">
                         <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">
+                            <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f&&!l">
                                 <i class="ti ti-dots-vertical fs-l"></i>
                             </div>
                         </th>
@@ -88,14 +105,15 @@
                 <tr
                     *ngFor="let item of filterBu2Table() | slice:((bu2Table.currentPage-1) * 10) : (((bu2Table.currentPage-1) * 10) + 10);let i = index">
                     <td class="text-center">
-                        {{((bu2Table.currentPage-1) * 10)+(i+1)}}
+                        <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.bu2id}}"
+                            [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
                     </td>
-                    <td class="text-center">{{item.bu2id}}</td>
-                    <td>{{item.tdesc}}</td>
-                    <td>{{item.edesc}}</td>
+                    <td class="text-center">{{item.data.bu2id}}</td>
+                    <td>{{item.data.tdesc}}</td>
+                    <td>{{item.data.edesc}}</td>
                     <td class="flex justify-center">
                         <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
-                            (click)="currentModal='edit';selectBu2(item)"
+                            (click)="currentModal='edit';selectBu2(item.data)"
                             data-hs-overlay="#department-list-modal-edit"></i>
                         <!-- <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
                             (click)="currentModal='delete';selectBu2(item)"
@@ -192,8 +210,7 @@
                         <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-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" readonly
-                            style="padding-right: 3.5rem;"  [(ngModel)]="bu1.bu1id"
-                            (ngModelChange)="bu1idChange()">
+                            style="padding-right: 3.5rem;" [(ngModel)]="bu1.bu1id" (ngModelChange)="bu1idChange()">
                         <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)="selectBu1()">
@@ -213,18 +230,9 @@
                 <label class="ti-form-label mt-2rem">เเผนก<span class="text-danger">*</span></label>
                 <div class="relative flex rounded-md w-1/2">
                     <input type="text" class="ti-form-input h-16" [(ngModel)]="bu2.bu2id">
-                    <!-- <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-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" style="padding-right: 3.5rem;"
-                     [(ngModel)]="bu2.bu2id" (ngModelChange)="bu2idChange()">
-                    <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)="selectBu2()">
-                            <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="#department-list-bu2-table-modal">
-                            <i class="ri-search-line cursor-pointer text-gray"></i>
-                        </button>
-                    </div> -->
                 </div>
-                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดแผนก (ไทย)<span class="text-danger">*</span></label>
+                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดแผนก (ไทย)<span
+                        class="text-danger">*</span></label>
                 <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="bu2.tdesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดแผนก (อังกฤษ)</label>
                 <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="bu2.edesc">
@@ -289,7 +297,8 @@
                 </div>
             </div>
             <div class="ti-modal-body">
-                <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">อยู่ภายใต้หน่วยงาน<span class="text-danger">*</span></label>
+                <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">อยู่ภายใต้หน่วยงาน<span
+                        class="text-danger">*</span></label>
                 <div class="flex">
                     <div class="relative flex rounded-md">
                         <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
@@ -319,7 +328,8 @@
                             readonly [value]="bu2.bu2id">
                     </div>
                 </div>
-                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดแผนก (ไทย)<span class="text-danger">*</span></label>
+                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดแผนก (ไทย)<span
+                        class="text-danger">*</span></label>
                 <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="bu2.tdesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดแผนก (อังกฤษ)</label>
                 <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="bu2.edesc">
@@ -469,108 +479,6 @@
     </div>
 </div>
 
-<div id="department-list-bu2-table-modal" class="hs-overlay hidden ti-modal">
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
-        <div class="max-h-full overflow-hidden ti-modal-content">
-            <div class="ti-modal-header">
-                <h3 class="text-xxl font-bold text-primary">
-                    ข้อมูลทะเบียนแผนก
-                </h3>
-                <div class="flex justify-end">
-                    <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-                        data-hs-overlay="#department-list-modal-add">
-                        <span class="sr-only">Close</span>
-                        <i class="ti ti-circle-x fs-xxl"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="ti-modal-body">
-                <div class="flex justify-end pb-1rem">
-                    <div class="px-1">
-                        <div class="relative shadow-md">
-                            <input type="text" id="hs-leading-icon" name="hs-leading-icon"
-                                class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
-                                placeholder="Search by No. or Name" [(ngModel)]="bu2Modal.search"
-                                (ngModelChange)="onBu2ModalSearchChange()">
-                            <div
-                                class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
-                                <i class="ri-search-line text-gray"></i>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="overflow-auto border">
-                    <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
-                        <thead>
-                            <tr>
-                                <ng-container
-                                    *ngFor="let item of ['ลำดับ','รหัสแผนก','รายละเอียดแผนก (ไทย)','รายละเอียดแผนก (อังกฤษ)']; let f = first; let l = last">
-                                    <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
-                                        [class.!text-center]="f">
-                                        <span class="text-sm">{{ 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 *ngIf="!filterBu2Modal().length">
-                            <tr>
-                                <td class="text-center" colspan="100%">
-                                    ไม่พบข้อมูล
-                                </td>
-                            </tr>
-                        </tbody>
-                        <tbody *ngIf="filterBu2Modal().length">
-                            <tr *ngFor="let item of filterBu2Modal() | slice:((bu2Modal.currentPage-1) * 10) : (((bu2Modal.currentPage-1) * 10) + 10);let i = index"
-                                class="cursor-pointer" (click)="selectBu2(item)"
-                                data-hs-overlay="#department-list-modal-add">
-                                <td class="flex justify-center">
-                                    {{((bu2Modal.currentPage-1) * 10)+(i+1)}}
-                                </td>
-                                <td>{{item.bu2id}}</td>
-                                <td>{{item.tdesc}}</td>
-                                <td>{{item.edesc}}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu2Modal.page.length">
-                    <ul class="ti-pagination">
-                        <li>
-                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                                (click)="bu2Modal.currentPage = (bu2Modal.currentPage-1 || 1)">
-                                <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
-                            </a>
-                        </li>
-                        <li *ngFor="let item of bu2Modal.page">
-                            <a class="page-link" href="javascript:void(0);" [class.active]="item==bu2Modal.currentPage"
-                                (click)="bu2Modal.currentPage=item">{{item}}
-                            </a>
-                            <!-- <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
-                            </a> -->
-                        </li>
-                        <li>
-                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                                (click)="bu2Modal.currentPage = (bu2Modal.currentPage > bu2Modal.page.length-1 ? bu2Modal.currentPage: bu2Modal.currentPage+1 )">
-                                <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
-                            </a>
-                        </li>
-                    </ul>
-                </nav>
-                <div class="flex justify-end mt-2rem mb-1rem space-x-4">
-                    <button type="button"
-                        class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
-                        data-hs-overlay="#department-list-modal-add">
-                        ย้อนกลับ
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
 <div id="department-list-alert-modal" class="hs-overlay hidden ti-modal">
     <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
         <div class="max-h-full overflow-hidden ti-modal-content w-full">
@@ -697,6 +605,11 @@
                         <i class="ti ti-upload"></i>
                     </button>
                 </div>
+                <div class="flex justify-center mt-2rem ">
+                    <h1 class="cursor-pointer justify-center -mb-px inline-flex items-center gap-2 font-weight-500 font-size-12px
+                    text-center text-secondary border-secondary border-b-2 align-items-end" (click)="downloadFile()">
+                        ดาวน์โหลดตัวอย่างไฟล์</h1>
+                </div>
                 <div class="flex justify-center mt-2rem mb-1rem space-x-4">
                     <button type="submit" class="ti-btn ti-btn-secondary"
                         data-hs-overlay="#department-list-upload-modal" [class.ti-btn-disabled]="!selectedFile"

src/app/components/company-components/company-registration/branch-business-unit/department-list/department-list.component.ts

@@ -16,7 +16,7 @@ interface table {
   styleUrls: ['./department-list.component.scss']
 })
 export class DepartmentListComponent implements OnInit {
-  bu2List: Bu2Model[] = []
+  bu2List: { check: boolean, data: Bu2Model }[] = []
   bu2ListLoading = false
   bu2: Bu2Model = new MyBu2Model()
   bu2Table: table = {
@@ -41,6 +41,11 @@ export class DepartmentListComponent implements OnInit {
     search: ""
   }
   currentModal: 'add' | 'edit' | 'delete' = "add"
+
+
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
   constructor(private bu2Service: Bu2Service,
     private bu1Service: Bu1Service,
     private toastr: ToastrService,
@@ -104,9 +109,11 @@ export class DepartmentListComponent implements OnInit {
     this.bu2ListLoading = true
     this.bu2Service.getList().subscribe({
       next: response => {
-        this.bu2List = response.map(x => new MyBu2Model(x))
+        this.bu2List = response.map(x => ({ check: false, data: new MyBu2Model(x) }))
         this.bu2ListLoading = false
         this.onBu2TableSearchChange()
+        this.isDataListCheckedAll = false
+        this.dataListCheckAll()
         this.cdr.detectChanges()
       }, error: error => {
         this.bu2ListLoading = false
@@ -119,9 +126,12 @@ export class DepartmentListComponent implements OnInit {
     this.bu2Table.page = Array.from({ length: Math.ceil(this.filterBu2Table().length / 10) }, (_, i) => i + 1);
   }
   filterBu2Table() {
-    return this.bu2List.filter(x => x.bu2id.toLowerCase().includes(this.bu2Table.search.toLowerCase()) ||
-      x.tdesc.toLowerCase().includes(this.bu2Table.search.toLowerCase()) ||
-      x.edesc.toLowerCase().includes(this.bu2Table.search.toLowerCase()))
+    return this.bu2List.filter(x => {
+      const data = x.data
+      return data.bu2id.toLowerCase().includes(this.bu2Table.search.toLowerCase()) ||
+        data.tdesc.toLowerCase().includes(this.bu2Table.search.toLowerCase()) ||
+        data.edesc.toLowerCase().includes(this.bu2Table.search.toLowerCase())
+    })
   }
   selectBu2(bu2?: Bu2Model) {
     this.bu2 = new MyBu2Model(bu2)
@@ -133,18 +143,22 @@ export class DepartmentListComponent implements OnInit {
       })
     }
   }
-  bu2idChange() {
-    const bu2 = this.bu2List.find(x => x.bu2id == this.bu2.bu2id)
-    this.selectBu2(bu2 || new MyBu2Model({ bu2id: this.bu2.bu2id }))
-  }
+  // bu2idChange() {
+  //   const bu2 = this.bu2List.find(x => x.bu2id == this.bu2.bu2id)
+  //   this.selectBu2(bu2 || new MyBu2Model({ bu2id: this.bu2.bu2id }))
+  // }
   onBu2ModalSearchChange() {
     this.bu2Modal.currentPage = 1
     this.bu2Modal.page = Array.from({ length: Math.ceil(this.filterBu2Modal().length / 10) }, (_, i) => i + 1);
+    this.dataListCheck()
   }
   filterBu2Modal() {
-    return this.bu2List.filter(x => x.bu2id.toLowerCase().includes(this.bu2Modal.search.toLowerCase()) ||
-      x.tdesc.toLowerCase().includes(this.bu2Modal.search.toLowerCase()) ||
-      x.edesc.toLowerCase().includes(this.bu2Modal.search.toLowerCase()))
+    return this.bu2List.filter(x => {
+      const data = x.data
+      return data.bu2id.toLowerCase().includes(this.bu2Table.search.toLowerCase()) ||
+        data.tdesc.toLowerCase().includes(this.bu2Table.search.toLowerCase()) ||
+        data.edesc.toLowerCase().includes(this.bu2Table.search.toLowerCase())
+    })
   }
 
 
@@ -196,7 +210,8 @@ export class DepartmentListComponent implements OnInit {
   }
   deleteBu2() {
     this.bu2ListLoading = true
-    this.bu2Service.delete(this.bu2).subscribe({
+    const body = this.bu2List.filter(x => x.check).map(x => new MyBu2Model(x.data))
+    this.bu2Service.delete(body).subscribe({
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')
@@ -211,5 +226,18 @@ export class DepartmentListComponent implements OnInit {
       }
     })
   }
+
+  dataListCheckAll() {
+    const selectAll = this.isDataListCheckedAll;
+    this.filterBu2Table().forEach(x => x.check = selectAll);
+    this.dataListCheck();
+  }
+
+  dataListCheck() {
+    const dataCheck = this.filterBu2Table();
+    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
+    this.numDataListChecked = this.bu2List.filter(x => x.check).length
+    this.isDataListChecked = Boolean(this.numDataListChecked)
+  }
 }
 

src/app/components/company-components/company-registration/branch-business-unit/department-register/department-register.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">
-            <div class="px-1">
-                <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
-                    data-hs-overlay="#department-register-upload-modal"
-                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
-                    <i class="ri-add-line"></i>
-                    นำเข้าข้อมูล
+        <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()" id='check-boxall'
+                    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>
-                <a class="mx-2 justify-center  -mb-px  inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
-                    href="javascript:void(0);" (click)="downloadFile()">
-                    ดาวน์โหลดตัวอย่างไฟล์
-                </a>
+                <label class="text-sm text-gray-500 ml-2" for="check-boxall">Select All</label>
             </div>
         </div>
         <div class="flex justify-end">
@@ -27,17 +29,34 @@
                 </div>
             </div>
             <div class="px-1">
+                <button type="button"
+                    class=" h-45px 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="#department-register-upload-modal"
+                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
+                    <i class="ti ti-file-plus"></i>
+                    import
+                </button>
+            </div>
+            <div class="px-1">
                 <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
                     data-hs-overlay="#department-register-modal-add" (click)="currentModel='add';selectBu1()">
                     <i class="ri-add-line"></i>
                     Add
                 </button>
             </div>
-            <div class="px-1">
+            <!-- <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-info h-45px m-0 shadow-md">
                     <i class="ri-printer-line"></i>
                     Print
                 </button>
+            </div> -->
+            <div class="px-1">
+                <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
+                    (click)="currentModel='deleteGroup';selectBu1()"
+                    data-hs-overlay="#department-register-delete-alert-modal">
+                    <i class="ri-delete-bin-6-line"></i>
+                    Delete
+                </button>
             </div>
             <!-- <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
@@ -55,10 +74,10 @@
             <thead>
                 <tr>
                     <ng-container
-                        *ngFor="let item of ['ลำดับ','รหัสฝ่าย','รายละเอียดฝ่าย (ไทย)','รายละเอียดฝ่าย (อังกฤษ)','การจัดการ']; let f = first; let l = last">
+                        *ngFor="let item of ['','รหัสฝ่าย','รายละเอียดฝ่าย (ไทย)','รายละเอียดฝ่าย (อังกฤษ)','การจัดการ']; let f = first; let l = last">
                         <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">
+                            <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f&&!l">
                                 <i class="ti ti-dots-vertical fs-l"></i>
                             </div>
                         </th>
@@ -85,13 +104,16 @@
             <tbody *ngIf="!bu1ListLoading&&bu1ListFilter().length">
                 <tr
                     *ngFor="let item of bu1ListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
-                    <td class="text-center">{{((currentPage-1) * 10)+(i+1)}}</td>
-                    <td class="text-center">{{item.bu1id}}</td>
-                    <td>{{item.tdesc}}</td>
-                    <td>{{item.edesc}}</td>
+                    <td class="text-center">
+                        <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.bu1id}}"
+                            [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
+                    </td>
+                    <td class="text-center">{{item.data.bu1id}}</td>
+                    <td>{{item.data.tdesc}}</td>
+                    <td>{{item.data.edesc}}</td>
                     <td class="flex justify-center">
                         <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
-                            (click)="currentModel='edit';selectBu1(item)"
+                            (click)="currentModel='edit';selectBu1(item.data)"
                             data-hs-overlay="#department-register-modal-edit"></i>
                         <!-- <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
                             (click)="currentModel='delete';selectBu1(item)"
@@ -364,6 +386,11 @@
                         <i class="ti ti-upload"></i>
                     </button>
                 </div>
+                <div class="flex justify-center mt-2rem ">
+                    <h1 class="cursor-pointer justify-center -mb-px inline-flex items-center gap-2 font-weight-500 font-size-12px
+                    text-center text-secondary border-secondary border-b-2 align-items-end" (click)="downloadFile()">
+                        ดาวน์โหลดตัวอย่างไฟล์</h1>
+                </div>
                 <div class="flex justify-center mt-2rem mb-1rem space-x-4">
                     <button type="submit" data-hs-overlay="#department-register-upload-modal"
                         class="ti-btn ti-btn-secondary" [class.ti-btn-disabled]="!selectedFile" (click)="uploadFile()"

src/app/components/company-components/company-registration/branch-business-unit/department-register/department-register.component.ts

@@ -12,7 +12,7 @@ import { FileService } from 'src/app/shared/services/file.service';
 export class DepartmentRegisterComponent implements OnInit {
   currentPage = 1
   page = Array.from({ length: 1 }, (_, i) => i + 1);
-  bu1List: Bu1Model[] = []
+  bu1List: { check: boolean, data: Bu1Model }[] = []
   bu1ListLoading = false
   bu1: Bu1Model = new MyBu1Model()
   search = ""
@@ -20,7 +20,11 @@ export class DepartmentRegisterComponent implements OnInit {
   selectedFile: File | null = null;
   selectedFileName: string = 'กรุณาเลือกไฟล์';
 
-  currentModel: 'add' | 'edit' | 'delete' = "add"
+  currentModel: 'add' | 'edit' | 'delete' | 'deleteGroup' = "add"
+
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
   constructor(private bu1Service: Bu1Service,
     private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
@@ -82,7 +86,9 @@ export class DepartmentRegisterComponent implements OnInit {
     this.bu1ListLoading = true
     this.bu1Service.getList().subscribe({
       next: response => {
-        this.bu1List = response.map(x => new MyBu1Model(x))
+        this.bu1List = response.map(x => ({ check: false, data: new MyBu1Model(x) }))
+        this.isDataListCheckedAll = false
+        this.dataListCheckAll()
         this.bu1ListLoading = false
         this.searchChange()
         this.cdr.detectChanges()
@@ -95,11 +101,15 @@ export class DepartmentRegisterComponent implements OnInit {
   searchChange() {
     this.currentPage = 1
     this.page = Array.from({ length: Math.ceil(this.bu1ListFilter().length / 10) }, (_, i) => i + 1);
+    this.dataListCheck()
   }
   bu1ListFilter() {
-    return this.bu1List.filter(x => x.bu1id.toLowerCase().includes(this.search.toLowerCase()) ||
-      x.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
-      x.edesc.toLowerCase().includes(this.search.toLowerCase()))
+    return this.bu1List.filter(x => {
+      const data = x.data
+      return data.bu1id.toLowerCase().includes(this.search.toLowerCase()) ||
+        data.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
+        data.edesc.toLowerCase().includes(this.search.toLowerCase())
+    })
   }
   selectBu1(bu1?: Bu1Model) {
     this.bu1 = new MyBu1Model(bu1)
@@ -130,7 +140,8 @@ export class DepartmentRegisterComponent implements OnInit {
   }
   deleteBu1() {
     this.bu1ListLoading = true
-    this.bu1Service.delete(this.bu1).subscribe({
+    const body = this.bu1List.filter(x => x.check).map(x => new MyBu1Model(x.data))
+    this.bu1Service.delete(body).subscribe({
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')
@@ -145,6 +156,17 @@ export class DepartmentRegisterComponent implements OnInit {
       }
     })
   }
+  dataListCheckAll() {
+    const selectAll = this.isDataListCheckedAll;
+    this.bu1ListFilter().forEach(x => x.check = selectAll);
+    this.dataListCheck();
+  }
 
+  dataListCheck() {
+    const dataCheck = this.bu1ListFilter();
+    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
+    this.numDataListChecked = this.bu1List.filter(x => x.check).length
+    this.isDataListChecked = Boolean(this.numDataListChecked)
+  }
 
 }

src/app/components/company-components/company-registration/branch-business-unit/section-registration/section-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">
-            <div class="px-1">
-                <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
-                    data-hs-overlay="#section-registration-upload-modal" (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
-                    <i class="ri-add-line"></i>
-                    นำเข้าข้อมูล
+        <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()" id='check-boxall'
+                    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>
-                <a class="mx-2 justify-center  -mb-px  inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
-                    href="javascript:void(0);" (click)="downloadFile()">
-                    ดาวน์โหลดตัวอย่างไฟล์
-                </a>
+                <label class="text-sm text-gray-500 ml-2" for="check-boxall">Select All</label>
             </div>
         </div>
         <div class="flex justify-end">
@@ -27,6 +30,15 @@
                 </div>
             </div>
             <div class="px-1">
+                <button type="button"
+                    class=" h-45px 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="#section-registration-upload-modal"
+                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
+                    <i class="ti ti-file-plus"></i>
+                    import
+                </button>
+            </div>
+            <div class="px-1">
                 <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
                     (click)="currentModal='add';selectBu2();selectBu3()"
                     data-hs-overlay="#section-registration-modal-add">
@@ -34,11 +46,18 @@
                     Add
                 </button>
             </div>
-            <div class="px-1">
+            <!-- <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-info h-45px m-0 shadow-md">
                     <i class="ri-printer-line"></i>
                     Print
                 </button>
+            </div> -->
+            <div class="px-1">
+                <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
+                    (click)="currentModal='delete'" data-hs-overlay="#section-registration-alert-delete-modal">
+                    <i class="ri-delete-bin-6-line"></i>
+                    Delete
+                </button>
             </div>
             <!-- <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
@@ -57,10 +76,10 @@
             <thead>
                 <tr>
                     <ng-container
-                        *ngFor="let item of ['ลำดับ','รหัสส่วน','รายละเอียดส่วน (ไทย)','รายละเอียดส่วน (อังกฤษ)','การจัดการ']; let f = first; let l = last">
+                        *ngFor="let item of ['','รหัสส่วน','รายละเอียดส่วน (ไทย)','รายละเอียดส่วน (อังกฤษ)','การจัดการ']; let f = first; let l = last">
                         <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">
+                            <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f&&!l">
                                 <i class="ti ti-dots-vertical fs-l"></i>
                             </div>
                         </th>
@@ -88,14 +107,15 @@
                 <tr
                     *ngFor="let item of filterBu3Table() | slice:((bu3Table.currentPage-1) * 10) : (((bu3Table.currentPage-1) * 10) + 10);let i = index">
                     <td class="text-center">
-                        {{((bu3Table.currentPage-1) * 10)+(i+1)}}
+                        <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.bu3id}}"
+                            [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
                     </td>
-                    <td class="text-center">{{item.bu3id}}</td>
-                    <td>{{item.tdesc}}</td>
-                    <td>{{item.edesc}}</td>
+                    <td class="text-center">{{item.data.bu3id}}</td>
+                    <td>{{item.data.tdesc}}</td>
+                    <td>{{item.data.edesc}}</td>
                     <td class="flex justify-center">
                         <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
-                            (click)="selectBu3(item);currentModal='edit'"
+                            (click)="selectBu3(item.data);currentModal='edit'"
                             data-hs-overlay="#section-registration-modal-edit"></i>
                         <!-- <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" currentModal='delete'
                             (click)="selectBu3(item)" data-hs-overlay="#section-registration-alert-delete-modal"></i> -->
@@ -226,7 +246,8 @@
                         </button>
                     </div> -->
                 </div>
-                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดส่วน (ไทย)<span class="text-danger">*</span></label>
+                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดส่วน (ไทย)<span
+                        class="text-danger">*</span></label>
                 <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="bu3.tdesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดส่วน (อังกฤษ)</label>
                 <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="bu3.edesc">
@@ -292,7 +313,8 @@
                 </div>
             </div>
             <div class="ti-modal-body">
-                <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">อยู่ภายใต้หน่วยงาน<span class="text-danger">*</span></label>
+                <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">อยู่ภายใต้หน่วยงาน<span
+                        class="text-danger">*</span></label>
                 <div class="flex">
                     <div class="relative flex rounded-md">
                         <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
@@ -322,7 +344,8 @@
                             readonly [value]="bu3.bu3id">
                     </div>
                 </div>
-                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดส่วน (ไทย)<span class="text-danger">*</span></label>
+                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดส่วน (ไทย)<span
+                        class="text-danger">*</span></label>
                 <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="bu3.tdesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดส่วน (อังกฤษ)</label>
                 <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="bu3.edesc">
@@ -472,107 +495,6 @@
     </div>
 </div>
 
-<div id="section-registration-bu3-table-modal" class="hs-overlay hidden ti-modal">
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
-        <div class="max-h-full overflow-hidden ti-modal-content">
-            <div class="ti-modal-header">
-                <h3 class="text-xxl font-bold text-primary">
-                    ข้อมูลทะเบียนส่วน
-                </h3>
-                <div class="flex justify-end">
-                    <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-                        data-hs-overlay="#section-registration-modal-add">
-                        <span class="sr-only">Close</span>
-                        <i class="ti ti-circle-x fs-xxl"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="ti-modal-body">
-                <div class="flex justify-end pb-1rem">
-                    <div class="px-1">
-                        <div class="relative shadow-md">
-                            <input type="text" id="hs-leading-icon" name="hs-leading-icon"
-                                class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
-                                placeholder="Search by No. or Name" [(ngModel)]="bu3Modal.search"
-                                (ngModelChange)="onBu3ModalSearchChange()">
-                            <div
-                                class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
-                                <i class="ri-search-line text-gray"></i>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="overflow-auto border">
-                    <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
-                        <thead>
-                            <tr>
-                                <ng-container
-                                    *ngFor="let item of ['ลำดับ','รหัสส่วน','รายละเอียดส่วน (ไทย)','รายละเอียดส่วน (อังกฤษ)']; let f = first; let l = last">
-                                    <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
-                                        [class.!text-center]="f">
-                                        <span class="text-sm">{{ 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 *ngIf="!filterBu3Modal().length">
-                            <tr>
-                                <td class="text-center" colspan="100%">
-                                    ไม่พบข้อมูล
-                                </td>
-                            </tr>
-                        </tbody>
-                        <tbody *ngIf="filterBu3Modal().length">
-                            <tr *ngFor="let item of filterBu3Modal() | slice:((bu3Modal.currentPage-1) * 10) : (((bu3Modal.currentPage-1) * 10) + 10);let i = index"
-                                class="cursor-pointer" (click)="selectBu3(item)"
-                                data-hs-overlay="#section-registration-modal-add">
-                                <td class="flex justify-center">
-                                    {{((bu3Modal.currentPage-1) * 10)+(i+1)}}
-                                </td>
-                                <td>{{item.bu3id}}</td>
-                                <td>{{item.tdesc}}</td>
-                                <td>{{item.edesc}}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu3Modal.page.length">
-                    <ul class="ti-pagination">
-                        <li>
-                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                                (click)="bu3Modal.currentPage = (bu3Modal.currentPage-1 || 1)">
-                                <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
-                            </a>
-                        </li>
-                        <li *ngFor="let item of bu3Modal.page">
-                            <a class="page-link" href="javascript:void(0);" [class.active]="item==bu3Modal.currentPage"
-                                (click)="bu3Modal.currentPage=item">{{item}}
-                            </a>
-                            <!-- <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
-                            </a> -->
-                        </li>
-                        <li>
-                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                                (click)="bu3Modal.currentPage = (bu3Modal.currentPage > bu3Modal.page.length-1 ? bu3Modal.currentPage: bu3Modal.currentPage+1 )">
-                                <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
-                            </a>
-                        </li>
-                    </ul>
-                </nav>
-                <div class="flex justify-end mt-2rem mb-1rem space-x-4">
-                    <button type="button"
-                        class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
-                        data-hs-overlay="#section-registration-modal-add">
-                        ย้อนกลับ
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
 
 <div id="section-registration-alert-modal" class="hs-overlay hidden ti-modal">
     <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
@@ -701,6 +623,11 @@
                         <i class="ti ti-upload"></i>
                     </button>
                 </div>
+                <div class="flex justify-center mt-2rem ">
+                    <h1 class="cursor-pointer justify-center -mb-px inline-flex items-center gap-2 font-weight-500 font-size-12px
+                    text-center text-secondary border-secondary border-b-2 align-items-end" (click)="downloadFile()">
+                        ดาวน์โหลดตัวอย่างไฟล์</h1>
+                </div>
                 <div class="flex justify-center mt-2rem mb-1rem space-x-4">
                     <button type="submit" class="ti-btn ti-btn-secondary"
                         data-hs-overlay="#section-registration-upload-modal" (click)="uploadFile()"

src/app/components/company-components/company-registration/branch-business-unit/section-registration/section-registration.component.ts

@@ -16,7 +16,7 @@ interface table {
   styleUrls: ['./section-registration.component.scss']
 })
 export class SectionRegistrationComponent implements OnInit {
-  bu3List: Bu3Model[] = []
+  bu3List: { check: boolean, data: Bu3Model }[] = []
   bu3ListLoading = false
   bu3: Bu3Model = new MyBu3Model()
   bu3Table: table = {
@@ -41,6 +41,10 @@ export class SectionRegistrationComponent implements OnInit {
     search: ""
   }
   currentModal: 'add' | 'edit' | 'delete' = "add"
+
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
   constructor(private bu3Service: Bu3Service,
     private bu2Service: Bu2Service,
     private toastr: ToastrService,
@@ -105,9 +109,11 @@ export class SectionRegistrationComponent implements OnInit {
     this.bu3ListLoading = true
     this.bu3Service.getList().subscribe({
       next: response => {
-        this.bu3List = response.map(x => new MyBu3Model(x))
+        this.bu3List = response.map(x => ({ check: false, data: new MyBu3Model(x) }))
         this.bu3ListLoading = false
         this.onBu3TableSearchChange()
+        this.isDataListCheckedAll = false
+        this.dataListCheckAll()
         this.cdr.detectChanges()
       }, error: error => {
         this.bu3ListLoading = false
@@ -118,11 +124,15 @@ export class SectionRegistrationComponent implements OnInit {
   onBu3TableSearchChange() {
     this.bu3Table.currentPage = 1
     this.bu3Table.page = Array.from({ length: Math.ceil(this.filterBu3Table().length / 10) }, (_, i) => i + 1);
+    this.dataListCheck()
   }
   filterBu3Table() {
-    return this.bu3List.filter(x => x.bu3id.toLowerCase().includes(this.bu3Table.search.toLowerCase()) ||
-      x.tdesc.toLowerCase().includes(this.bu3Table.search.toLowerCase()) ||
-      x.edesc.toLowerCase().includes(this.bu3Table.search.toLowerCase()))
+    return this.bu3List.filter(x => {
+      const data = x.data
+      return data.bu3id.toLowerCase().includes(this.bu3Table.search.toLowerCase()) ||
+        data.tdesc.toLowerCase().includes(this.bu3Table.search.toLowerCase()) ||
+        data.edesc.toLowerCase().includes(this.bu3Table.search.toLowerCase())
+    })
   }
   selectBu3(bu3?: Bu3Model) {
     this.bu3 = new MyBu3Model(bu3)
@@ -134,18 +144,21 @@ export class SectionRegistrationComponent implements OnInit {
       })
     }
   }
-  bu3idChange() {
-    const bu3 = this.bu3List.find(x => x.bu3id == this.bu3.bu3id)
-    this.selectBu3(bu3 || new MyBu3Model({ bu3id: this.bu3.bu3id }))
-  }
+  // bu3idChange() {
+  //   const bu3 = this.bu3List.find(x => x.bu3id == this.bu3.bu3id)
+  //   this.selectBu3(bu3 || new MyBu3Model({ bu3id: this.bu3.bu3id }))
+  // }
   onBu3ModalSearchChange() {
     this.bu3Modal.currentPage = 1
     this.bu3Modal.page = Array.from({ length: Math.ceil(this.filterBu3Modal().length / 10) }, (_, i) => i + 1);
   }
   filterBu3Modal() {
-    return this.bu3List.filter(x => x.bu3id.toLowerCase().includes(this.bu3Modal.search.toLowerCase()) ||
-      x.tdesc.toLowerCase().includes(this.bu3Modal.search.toLowerCase()) ||
-      x.edesc.toLowerCase().includes(this.bu3Modal.search.toLowerCase()))
+    return this.bu3List.filter(x => {
+      const data = x.data
+      return data.bu3id.toLowerCase().includes(this.bu3Table.search.toLowerCase()) ||
+        data.tdesc.toLowerCase().includes(this.bu3Table.search.toLowerCase()) ||
+        data.edesc.toLowerCase().includes(this.bu3Table.search.toLowerCase())
+    })
   }
   addBu3() {
     this.bu3ListLoading = true
@@ -166,7 +179,8 @@ export class SectionRegistrationComponent implements OnInit {
   }
   deleteBu3() {
     this.bu3ListLoading = true
-    this.bu3Service.delete(this.bu3).subscribe({
+    const body = this.bu3List.filter(x => x.check).map(x => new MyBu3Model(x.data))
+    this.bu3Service.delete(body).subscribe({
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')
@@ -211,5 +225,18 @@ export class SectionRegistrationComponent implements OnInit {
       positionClass: 'toast-top-right',
     })
   }
+
+  dataListCheckAll() {
+    const selectAll = this.isDataListCheckedAll;
+    this.filterBu3Table().forEach(x => x.check = selectAll);
+    this.dataListCheck();
+  }
+
+  dataListCheck() {
+    const dataCheck = this.filterBu3Table();
+    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
+    this.numDataListChecked = this.bu3List.filter(x => x.check).length
+    this.isDataListChecked = Boolean(this.numDataListChecked)
+  }
 }
 

src/app/components/company-components/company-registration/branch-business-unit/sub-department-four/sub-department-four.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">
-            <div class="px-1">
-                <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
-                    data-hs-overlay="#sub-department-four-upload-modal"
-                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
-                    <i class="ri-add-line"></i>
-                    นำเข้าข้อมูล
+        <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()" id='check-boxall'
+                    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>
-                <a class="mx-2 justify-center  -mb-px  inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
-                    href="javascript:void(0);" (click)="downloadFile()">
-                    ดาวน์โหลดตัวอย่างไฟล์
-                </a>
+                <label class="text-sm text-gray-500 ml-2" for="check-boxall">Select All</label>
             </div>
         </div>
         <div class="flex justify-end">
@@ -28,6 +30,15 @@
                 </div>
             </div>
             <div class="px-1">
+                <button type="button"
+                    class=" h-45px 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="#sub-department-four-upload-modal"
+                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
+                    <i class="ti ti-file-plus"></i>
+                    import
+                </button>
+            </div>
+            <div class="px-1">
                 <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
                     (click)="currentModal='add';selectBu6();selectBu7()"
                     data-hs-overlay="#sub-department-four-modal-add">
@@ -35,11 +46,18 @@
                     Add
                 </button>
             </div>
-            <div class="px-1">
+            <!-- <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-info h-45px m-0 shadow-md">
                     <i class="ri-printer-line"></i>
                     Print
                 </button>
+            </div> -->
+            <div class="px-1">
+                <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
+                    (click)="currentModal='delete'" data-hs-overlay="#sub-department-four-alert-delete-modal">
+                    <i class="ri-delete-bin-6-line"></i>
+                    Delete
+                </button>
             </div>
             <!-- <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
@@ -57,10 +75,10 @@
             <thead>
                 <tr>
                     <ng-container
-                        *ngFor="let item of ['ลำดับ','รหัสส่วนย่อย4','รายละเอียดส่วนย่อย4 (ไทย)','รายละเอียดส่วนย่อย4 (อังกฤษ)','การจัดการ']; let f = first; let l = last">
+                        *ngFor="let item of ['','รหัสส่วนย่อย4','รายละเอียดส่วนย่อย4 (ไทย)','รายละเอียดส่วนย่อย4 (อังกฤษ)','การจัดการ']; let f = first; let l = last">
                         <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">
+                            <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f&&!l">
                                 <i class="ti ti-dots-vertical fs-l"></i>
                             </div>
                         </th>
@@ -88,14 +106,15 @@
                 <tr
                     *ngFor="let item of filterBu7Table() | slice:((bu7Table.currentPage-1) * 10) : (((bu7Table.currentPage-1) * 10) + 10);let i = index">
                     <td class="text-center">
-                        {{((bu7Table.currentPage-1) * 10)+(i+1)}}
+                        <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.bu7id}}"
+                            [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
                     </td>
-                    <td class="text-center">{{item.bu7id}}</td>
-                    <td>{{item.tdesc}}</td>
-                    <td>{{item.edesc}}</td>
+                    <td class="text-center">{{item.data.bu7id}}</td>
+                    <td>{{item.data.tdesc}}</td>
+                    <td>{{item.data.edesc}}</td>
                     <td class="flex justify-center">
                         <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
-                            (click)="selectBu7(item);currentModal='edit'"
+                            (click)="selectBu7(item.data);currentModal='edit'"
                             data-hs-overlay="#sub-department-four-modal-edit"></i>
                         <!-- <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectBu7(item)"
                             data-hs-overlay="#sub-department-four-alert-delete-modal"></i> -->
@@ -226,7 +245,8 @@
                         </button>
                     </div> -->
                 </div>
-                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)<span class="text-danger">*</span></label>
+                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)<span
+                        class="text-danger">*</span></label>
                 <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="bu7.tdesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
                 <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="bu7.edesc">
@@ -292,7 +312,8 @@
                 </div>
             </div>
             <div class="ti-modal-body">
-                <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">อยู่ภายใต้หน่วยงาน<span class="text-danger">*</span></label>
+                <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">อยู่ภายใต้หน่วยงาน<span
+                        class="text-danger">*</span></label>
                 <div class="flex">
                     <div class="relative flex rounded-md">
                         <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
@@ -315,14 +336,16 @@
                             readonly [value]="bu6.tdesc">
                     </div>
                 </div>
-                <label for="input-label" class="ti-form-label mt-2rem">ส่วนย่อย4<span class="text-danger">*</span></label>
+                <label for="input-label" class="ti-form-label mt-2rem">ส่วนย่อย4<span
+                        class="text-danger">*</span></label>
                 <div class="sm:grid grid-cols-2 gap-1">
                     <div class="relative w-full">
                         <input type="text" id="input-label" class="ti-form-input w-full pr-10 bg-input-readonly"
                             readonly [value]="bu7.bu7id">
                     </div>
                 </div>
-                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)<span class="text-danger">*</span></label>
+                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)<span
+                        class="text-danger">*</span></label>
                 <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="bu7.tdesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
                 <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="bu7.edesc">
@@ -472,108 +495,6 @@
     </div>
 </div>
 
-<div id="sub-department-four-bu7-table-modal" class="hs-overlay hidden ti-modal">
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
-        <div class="max-h-full overflow-hidden ti-modal-content">
-            <div class="ti-modal-header">
-                <h3 class="text-xxl font-bold text-primary">
-                    ข้อมูลทะเบียนส่วนย่อย 4
-                </h3>
-                <div class="flex justify-end">
-                    <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-                        data-hs-overlay="#sub-department-four-modal-add">
-                        <span class="sr-only">Close</span>
-                        <i class="ti ti-circle-x fs-xxl"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="ti-modal-body">
-                <div class="flex justify-end pb-1rem">
-                    <div class="px-1">
-                        <div class="relative shadow-md">
-                            <input type="text" id="hs-leading-icon" name="hs-leading-icon"
-                                class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
-                                placeholder="Search by No. or Name" [(ngModel)]="bu7Modal.search"
-                                (ngModelChange)="onBu7ModalSearchChange()">
-                            <div
-                                class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
-                                <i class="ri-search-line text-gray"></i>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="overflow-auto border">
-                    <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
-                        <thead>
-                            <tr>
-                                <ng-container
-                                    *ngFor="let item of ['ลำดับ','รหัสส่วนย่อย4','รายละเอียดส่วนย่อย4 (ไทย)','รายละเอียดส่วนย่อย4 (อังกฤษ)']; let f = first; let l = last">
-                                    <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
-                                        [class.!text-center]="f">
-                                        <span class="text-sm">{{ 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 *ngIf="!filterBu7Modal().length">
-                            <tr>
-                                <td class="text-center" colspan="100%">
-                                    ไม่พบข้อมูล
-                                </td>
-                            </tr>
-                        </tbody>
-                        <tbody *ngIf="filterBu7Modal().length">
-                            <tr *ngFor="let item of filterBu7Modal() | slice:((bu7Modal.currentPage-1) * 10) : (((bu7Modal.currentPage-1) * 10) + 10);let i = index"
-                                class="cursor-pointer" (click)="selectBu7(item)"
-                                data-hs-overlay="#sub-department-four-modal-add">
-                                <td class="flex justify-center">
-                                    {{((bu7Modal.currentPage-1) * 10)+(i+1)}}
-                                </td>
-                                <td>{{item.bu7id}}</td>
-                                <td>{{item.tdesc}}</td>
-                                <td>{{item.edesc}}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu7Modal.page.length">
-                    <ul class="ti-pagination">
-                        <li>
-                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                                (click)="bu7Modal.currentPage = (bu7Modal.currentPage-1 || 1)">
-                                <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
-                            </a>
-                        </li>
-                        <li *ngFor="let item of bu7Modal.page">
-                            <a class="page-link" href="javascript:void(0);" [class.active]="item==bu7Modal.currentPage"
-                                (click)="bu7Modal.currentPage=item">{{item}}
-                            </a>
-                            <!-- <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
-                            </a> -->
-                        </li>
-                        <li>
-                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                                (click)="bu7Modal.currentPage = (bu7Modal.currentPage > bu7Modal.page.length-1 ? bu7Modal.currentPage: bu7Modal.currentPage+1 )">
-                                <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
-                            </a>
-                        </li>
-                    </ul>
-                </nav>
-                <div class="flex justify-end mt-2rem mb-1rem space-x-4">
-                    <button type="button"
-                        class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
-                        data-hs-overlay="#sub-department-four-modal-add">
-                        ย้อนกลับ
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
 <div id="sub-department-four-alert-add-modal" class="hs-overlay hidden ti-modal">
     <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
         <div class="max-h-full overflow-hidden ti-modal-content w-full">
@@ -701,6 +622,11 @@
                         <i class="ti ti-upload"></i>
                     </button>
                 </div>
+                <div class="flex justify-center mt-2rem ">
+                    <h1 class="cursor-pointer justify-center -mb-px inline-flex items-center gap-2 font-weight-500 font-size-12px
+                    text-center text-secondary border-secondary border-b-2 align-items-end" (click)="downloadFile()">
+                        ดาวน์โหลดตัวอย่างไฟล์</h1>
+                </div>
                 <div class="flex justify-center mt-2rem mb-1rem space-x-4">
                     <button type="submit" class="ti-btn ti-btn-secondary" (click)="uploadFile()"
                         data-hs-overlay="#sub-department-four-upload-modal" [class.ti-btn-disabled]="!selectedFile"

src/app/components/company-components/company-registration/branch-business-unit/sub-department-four/sub-department-four.component.ts

@@ -17,7 +17,7 @@ interface table {
   styleUrls: ['./sub-department-four.component.scss']
 })
 export class SubDepartmentFourComponent implements OnInit {
-  bu7List: Bu7Model[] = []
+  bu7List: { check: boolean, data: Bu7Model }[] = []
   bu7ListLoading = false
   bu7: Bu7Model = new MyBu7Model()
   bu7Table: table = {
@@ -42,6 +42,10 @@ export class SubDepartmentFourComponent implements OnInit {
     search: ""
   }
   currentModal: 'add' | 'edit' | 'delete' = "add"
+
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
   constructor(private bu7Service: Bu7Service,
     private bu6Service: Bu6Service,
     private toastr: ToastrService,
@@ -105,9 +109,11 @@ export class SubDepartmentFourComponent implements OnInit {
     this.bu7ListLoading = true
     this.bu7Service.getList().subscribe({
       next: response => {
-        this.bu7List = response.map(x => new MyBu7Model(x))
+        this.bu7List = response.map(x => ({ check: false, data: new MyBu7Model(x) }))
         this.bu7ListLoading = false
         this.onBu7TableSearchChange()
+        this.isDataListCheckedAll = false
+        this.dataListCheckAll()
         this.cdr.detectChanges()
       }, error: error => {
         this.bu7ListLoading = false
@@ -118,11 +124,15 @@ export class SubDepartmentFourComponent implements OnInit {
   onBu7TableSearchChange() {
     this.bu7Table.currentPage = 1
     this.bu7Table.page = Array.from({ length: Math.ceil(this.filterBu7Table().length / 10) }, (_, i) => i + 1);
+    this.dataListCheck()
   }
   filterBu7Table() {
-    return this.bu7List.filter(x => x.bu7id.toLowerCase().includes(this.bu7Table.search.toLowerCase()) ||
-      x.tdesc.toLowerCase().includes(this.bu7Table.search.toLowerCase()) ||
-      x.edesc.toLowerCase().includes(this.bu7Table.search.toLowerCase()))
+    return this.bu7List.filter(x => {
+      const data = x.data
+      return data.bu7id.toLowerCase().includes(this.bu7Table.search.toLowerCase()) ||
+        data.tdesc.toLowerCase().includes(this.bu7Table.search.toLowerCase()) ||
+        data.edesc.toLowerCase().includes(this.bu7Table.search.toLowerCase())
+    })
   }
   selectBu7(bu7?: Bu7Model) {
     this.bu7 = new MyBu7Model(bu7 || {})
@@ -134,18 +144,17 @@ export class SubDepartmentFourComponent implements OnInit {
       })
     }
   }
-  bu7idChange() {
-    const bu7 = this.bu7List.find(x => x.bu7id == this.bu7.bu7id)
-    this.selectBu7(bu7 || new MyBu7Model({ bu7id: this.bu7.bu7id }))
-  }
   onBu7ModalSearchChange() {
     this.bu7Modal.currentPage = 1
     this.bu7Modal.page = Array.from({ length: Math.ceil(this.filterBu7Modal().length / 10) }, (_, i) => i + 1);
   }
   filterBu7Modal() {
-    return this.bu7List.filter(x => x.bu7id.toLowerCase().includes(this.bu7Modal.search.toLowerCase()) ||
-      x.tdesc.toLowerCase().includes(this.bu7Modal.search.toLowerCase()) ||
-      x.edesc.toLowerCase().includes(this.bu7Modal.search.toLowerCase()))
+    return this.bu7List.filter(x => {
+      const data = x.data
+      return data.bu7id.toLowerCase().includes(this.bu7Table.search.toLowerCase()) ||
+        data.tdesc.toLowerCase().includes(this.bu7Table.search.toLowerCase()) ||
+        data.edesc.toLowerCase().includes(this.bu7Table.search.toLowerCase())
+    })
   }
   addBu7() {
     this.bu7ListLoading = true
@@ -166,7 +175,8 @@ export class SubDepartmentFourComponent implements OnInit {
   }
   deleteBu7() {
     this.bu7ListLoading = true
-    this.bu7Service.delete(this.bu7).subscribe({
+    const body = this.bu7List.filter(x => x.check).map(x => new MyBu7Model(x.data))
+    this.bu7Service.delete(body).subscribe({
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')
@@ -211,6 +221,19 @@ export class SubDepartmentFourComponent implements OnInit {
       positionClass: 'toast-top-right',
     })
   }
+
+  dataListCheckAll() {
+    const selectAll = this.isDataListCheckedAll;
+    this.filterBu7Table().forEach(x => x.check = selectAll);
+    this.dataListCheck();
+  }
+
+  dataListCheck() {
+    const dataCheck = this.filterBu7Table();
+    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
+    this.numDataListChecked = this.bu7List.filter(x => x.check).length
+    this.isDataListChecked = Boolean(this.numDataListChecked)
+  }
 }
 
 

src/app/components/company-components/company-registration/branch-business-unit/sub-department-one/sub-department-one.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">
-            <div class="px-1">
-                <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
-                    data-hs-overlay="#sub-department-one-upload-modal"
-                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
-                    <i class="ri-add-line"></i>
-                    นำเข้าข้อมูล
+        <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()" id='check-boxall'
+                    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>
-                <a class="mx-2 justify-center  -mb-px  inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
-                    href="javascript:void(0);" (click)=" downloadFile()">
-                    ดาวน์โหลดตัวอย่างไฟล์
-                </a>
+                <label class="text-sm text-gray-500 ml-2" for="check-boxall">Select All</label>
             </div>
-        </div>
+        </div> 
         <div class="flex justify-end">
             <div class="px-1">
                 <div class="relative shadow-md">
@@ -28,6 +30,15 @@
                 </div>
             </div>
             <div class="px-1">
+                <button type="button"
+                    class=" h-45px 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="#sub-department-one-upload-modal"
+                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
+                    <i class="ti ti-file-plus"></i>
+                    import
+                </button>
+            </div>
+            <div class="px-1">
                 <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
                     (click)="currentModal='add';selectBu3();selectBu4()"
                     data-hs-overlay="#sub-department-one-modal-add">
@@ -35,11 +46,18 @@
                     Add
                 </button>
             </div>
-            <div class="px-1">
+            <!-- <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-info h-45px m-0 shadow-md">
                     <i class="ri-printer-line"></i>
                     Print
                 </button>
+            </div> -->
+            <div class="px-1">
+                <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
+                    data-hs-overlay="#sub-department-one-alert-delete-modal">
+                    <i class="ri-delete-bin-6-line"></i>
+                    Delete
+                </button>
             </div>
             <!-- <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
@@ -57,10 +75,10 @@
             <thead>
                 <tr>
                     <ng-container
-                        *ngFor="let item of ['ลำดับ','รหัสส่วนย่อย1','รายละเอียดส่วนย่อย1 (ไทย)','รายละเอียดส่วนย่อย1 (อังกฤษ)','การจัดการ']; let f = first; let l = last">
+                        *ngFor="let item of ['','รหัสส่วนย่อย1','รายละเอียดส่วนย่อย1 (ไทย)','รายละเอียดส่วนย่อย1 (อังกฤษ)','การจัดการ']; let f = first; let l = last">
                         <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">
+                            <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f&&!l">
                                 <i class="ti ti-dots-vertical fs-l"></i>
                             </div>
                         </th>
@@ -88,14 +106,15 @@
                 <tr
                     *ngFor="let item of filterBu4Table() | slice:((bu4Table.currentPage-1) * 10) : (((bu4Table.currentPage-1) * 10) + 10);let i = index">
                     <td class="text-center">
-                        {{((bu4Table.currentPage-1) * 10)+(i+1)}}
+                        <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.bu4id}}"
+                            [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
                     </td>
-                    <td class="text-center">{{item.bu4id}}</td>
-                    <td>{{item.tdesc}}</td>
-                    <td>{{item.edesc}}</td>
+                    <td class="text-center">{{item.data.bu4id}}</td>
+                    <td>{{item.data.tdesc}}</td>
+                    <td>{{item.data.edesc}}</td>
                     <td class="flex justify-center">
                         <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
-                            (click)="selectBu4(item);currentModal='edit'"
+                            (click)="selectBu4(item.data);currentModal='edit'"
                             data-hs-overlay="#sub-department-one-modal-edit"></i>
                         <!-- <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
                             (click)="currentModal='delete';selectBu4(item)"
@@ -228,7 +247,8 @@
                         </button>
                     </div> -->
                 </div>
-                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดส่วนย่อย1 (ไทย)<span class="text-danger">*</span></label>
+                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดส่วนย่อย1 (ไทย)<span
+                        class="text-danger">*</span></label>
                 <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="bu4.tdesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดส่วนย่อย1 (อังกฤษ)</label>
                 <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="bu4.edesc">
@@ -294,7 +314,8 @@
                 </div>
             </div>
             <div class="ti-modal-body">
-                <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label ">อยู่ภายใต้หน่วยงาน<span class="text-danger">*</span></label>
+                <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label ">อยู่ภายใต้หน่วยงาน<span
+                        class="text-danger">*</span></label>
                 <div class="flex">
                     <div class="relative flex rounded-md">
                         <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
@@ -317,14 +338,16 @@
                             readonly [value]="bu3.tdesc">
                     </div>
                 </div>
-                <label for="input-label" class="ti-form-label mt-2rem">ส่วนย่อย1<span class="text-danger">*</span></label>
+                <label for="input-label" class="ti-form-label mt-2rem">ส่วนย่อย1<span
+                        class="text-danger">*</span></label>
                 <div class="sm:grid grid-cols-2 gap-1">
                     <div class="relative w-full">
                         <input type="text" id="input-label" class="ti-form-input w-full pr-10 bg-input-readonly"
                             readonly [value]="bu4.bu4id">
                     </div>
                 </div>
-                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดส่วนย่อย1 (ไทย)<span class="text-danger">*</span></label>
+                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดส่วนย่อย1 (ไทย)<span
+                        class="text-danger">*</span></label>
                 <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="bu4.tdesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดส่วนย่อย1 (อังกฤษ)</label>
                 <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="bu4.edesc">
@@ -474,107 +497,6 @@
     </div>
 </div>
 
-<div id="sub-department-one-bu4-table-modal" class="hs-overlay hidden ti-modal">
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
-        <div class="max-h-full overflow-hidden ti-modal-content">
-            <div class="ti-modal-header">
-                <h3 class="text-xxl font-bold text-primary">
-                    ข้อมูลทะเบียนส่วนย่อย 1
-                </h3>
-                <div class="flex justify-end">
-                    <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-                        data-hs-overlay="#sub-department-one-modal-add">
-                        <span class="sr-only">Close</span>
-                        <i class="ti ti-circle-x fs-xxl"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="ti-modal-body">
-                <div class="flex justify-end pb-1rem">
-                    <div class="px-1">
-                        <div class="relative shadow-md">
-                            <input type="text" id="hs-leading-icon" name="hs-leading-icon"
-                                class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
-                                placeholder="Search by No. or Name" [(ngModel)]="bu4Modal.search"
-                                (ngModelChange)="onBu4ModalSearchChange()">
-                            <div
-                                class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
-                                <i class="ri-search-line text-gray"></i>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="overflow-auto border">
-                    <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
-                        <thead>
-                            <tr>
-                                <ng-container
-                                    *ngFor="let item of ['ลำดับ','รหัสส่วนย่อย1','รายละเอียดส่วนย่อย1 (ไทย)','รายละเอียดส่วนย่อย1 (อังกฤษ)']; let f = first; let l = last">
-                                    <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
-                                        [class.!text-center]="f">
-                                        <span class="text-sm">{{ 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 *ngIf="!filterBu4Modal().length">
-                            <tr>
-                                <td class="text-center" colspan="100%">
-                                    ไม่พบข้อมูล
-                                </td>
-                            </tr>
-                        </tbody>
-                        <tbody *ngIf="filterBu4Modal().length">
-                            <tr *ngFor="let item of filterBu4Modal() | slice:((bu4Modal.currentPage-1) * 10) : (((bu4Modal.currentPage-1) * 10) + 10);let i = index"
-                                class="cursor-pointer" (click)="selectBu4(item)"
-                                data-hs-overlay="#sub-department-one-modal-add">
-                                <td class="flex justify-center">
-                                    {{((bu4Modal.currentPage-1) * 10)+(i+1)}}
-                                </td>
-                                <td>{{item.bu4id}}</td>
-                                <td>{{item.tdesc}}</td>
-                                <td>{{item.edesc}}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu4Modal.page.length">
-                    <ul class="ti-pagination">
-                        <li>
-                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                                (click)="bu4Modal.currentPage = (bu4Modal.currentPage-1 || 1)">
-                                <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
-                            </a>
-                        </li>
-                        <li *ngFor="let item of bu4Modal.page">
-                            <a class="page-link" href="javascript:void(0);" [class.active]="item==bu4Modal.currentPage"
-                                (click)="bu4Modal.currentPage=item">{{item}}
-                            </a>
-                            <!-- <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
-                            </a> -->
-                        </li>
-                        <li>
-                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                                (click)="bu4Modal.currentPage = (bu4Modal.currentPage > bu4Modal.page.length-1 ? bu4Modal.currentPage: bu4Modal.currentPage+1 )">
-                                <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
-                            </a>
-                        </li>
-                    </ul>
-                </nav>
-                <div class="flex justify-end mt-2rem mb-1rem space-x-4">
-                    <button type="button"
-                        class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
-                        data-hs-overlay="#sub-department-one-modal-add">
-                        ย้อนกลับ
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
 
 <div id="sub-department-one-alert-modal" class="hs-overlay hidden ti-modal">
     <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
@@ -708,6 +630,11 @@
                         <i class="ti ti-upload"></i>
                     </button>
                 </div>
+                <div class="flex justify-center mt-2rem ">
+                    <h1 class="cursor-pointer justify-center -mb-px inline-flex items-center gap-2 font-weight-500 font-size-12px
+                    text-center text-secondary border-secondary border-b-2 align-items-end" (click)="downloadFile()">
+                        ดาวน์โหลดตัวอย่างไฟล์</h1>
+                </div>
                 <div class="flex justify-center mt-2rem mb-1rem space-x-4">
                     <button type="submit" class="ti-btn ti-btn-secondary" (click)="uploadFile()"
                         data-hs-overlay="#sub-department-one-upload-modal" [class.ti-btn-disabled]="!selectedFile"

src/app/components/company-components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.ts

@@ -16,7 +16,7 @@ interface table {
   styleUrls: ['./sub-department-one.component.scss']
 })
 export class SubDepartmentOneComponent implements OnInit {
-  bu4List: Bu4Model[] = []
+  bu4List: { check: boolean, data: Bu4Model }[] = []
   bu4ListLoading = false
   bu4: Bu4Model = new MyBu4Model()
   bu4Table: table = {
@@ -41,6 +41,10 @@ export class SubDepartmentOneComponent implements OnInit {
     search: ""
   }
   currentModal: 'add' | 'edit' | 'delete' = "add"
+
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
   constructor(private bu4Service: Bu4Service,
     private bu3Service: Bu3Service,
     private toastr: ToastrService,
@@ -104,7 +108,7 @@ export class SubDepartmentOneComponent implements OnInit {
     this.bu4ListLoading = true
     this.bu4Service.getList().subscribe({
       next: response => {
-        this.bu4List = response.map(x => new MyBu4Model(x))
+        this.bu4List = response.map(x => ({ check: false, data: new MyBu4Model(x) }))
         this.bu4ListLoading = false
         this.onBu4TableSearchChange()
         this.cdr.detectChanges()
@@ -117,11 +121,15 @@ export class SubDepartmentOneComponent implements OnInit {
   onBu4TableSearchChange() {
     this.bu4Table.currentPage = 1
     this.bu4Table.page = Array.from({ length: Math.ceil(this.filterBu4Table().length / 10) }, (_, i) => i + 1);
+    this.dataListCheck()
   }
   filterBu4Table() {
-    return this.bu4List.filter(x => x.bu4id.toLowerCase().includes(this.bu4Table.search.toLowerCase()) ||
-      x.tdesc.toLowerCase().includes(this.bu4Table.search.toLowerCase()) ||
-      x.edesc.toLowerCase().includes(this.bu4Table.search.toLowerCase()))
+    return this.bu4List.filter(x => {
+      const data = x.data
+      return data.bu4id.toLowerCase().includes(this.bu4Table.search.toLowerCase()) ||
+        data.tdesc.toLowerCase().includes(this.bu4Table.search.toLowerCase()) ||
+        data.edesc.toLowerCase().includes(this.bu4Table.search.toLowerCase())
+    })
   }
   selectBu4(bu4?: Bu4Model) {
     this.bu4 = new MyBu4Model(bu4 || {})
@@ -133,18 +141,17 @@ export class SubDepartmentOneComponent implements OnInit {
       })
     }
   }
-  bu4idChange() {
-    const bu4 = this.bu4List.find(x => x.bu4id == this.bu4.bu4id)
-    this.selectBu4(bu4 || new MyBu4Model({ bu4id: this.bu4.bu4id }))
-  }
   onBu4ModalSearchChange() {
     this.bu4Modal.currentPage = 1
     this.bu4Modal.page = Array.from({ length: Math.ceil(this.filterBu4Modal().length / 10) }, (_, i) => i + 1);
   }
   filterBu4Modal() {
-    return this.bu4List.filter(x => x.bu4id.toLowerCase().includes(this.bu4Modal.search.toLowerCase()) ||
-      x.tdesc.toLowerCase().includes(this.bu4Modal.search.toLowerCase()) ||
-      x.edesc.toLowerCase().includes(this.bu4Modal.search.toLowerCase()))
+    return this.bu4List.filter(x => {
+      const data = x.data
+      return data.bu4id.toLowerCase().includes(this.bu4Table.search.toLowerCase()) ||
+        data.tdesc.toLowerCase().includes(this.bu4Table.search.toLowerCase()) ||
+        data.edesc.toLowerCase().includes(this.bu4Table.search.toLowerCase())
+    })
   }
   addBu4() {
     this.bu4ListLoading = true
@@ -165,7 +172,8 @@ export class SubDepartmentOneComponent implements OnInit {
   }
   deleteBu4() {
     this.bu4ListLoading = true
-    this.bu4Service.delete(this.bu4).subscribe({
+    const body = this.bu4List.filter(x => x.check).map(x => new MyBu4Model(x.data))
+    this.bu4Service.delete(body).subscribe({
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')
@@ -210,6 +218,20 @@ export class SubDepartmentOneComponent implements OnInit {
       positionClass: 'toast-top-right',
     })
   }
+
+
+  dataListCheckAll() {
+    const selectAll = this.isDataListCheckedAll;
+    this.filterBu4Table().forEach(x => x.check = selectAll);
+    this.dataListCheck();
+  }
+
+  dataListCheck() {
+    const dataCheck = this.filterBu4Table();
+    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
+    this.numDataListChecked = this.bu4List.filter(x => x.check).length
+    this.isDataListChecked = Boolean(this.numDataListChecked)
+  }
 }
 
 

src/app/components/company-components/company-registration/branch-business-unit/sub-department-three/sub-department-three.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">
-            <div class="px-1">
-                <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
-                    data-hs-overlay="#sub-department-three-upload-modal"
-                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
-                    <i class="ri-add-line"></i>
-                    นำเข้าข้อมูล
+        <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()" id='check-boxall'
+                    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>
-                <a class="mx-2 justify-center  -mb-px  inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
-                    href="javascript:void(0);" (click)="downloadFile()">
-                    ดาวน์โหลดตัวอย่างไฟล์
-                </a>
+                <label class="text-sm text-gray-500 ml-2" for="check-boxall">Select All</label>
             </div>
-        </div>
+        </div> 
         <div class="flex justify-end">
             <div class="px-1">
                 <div class="relative shadow-md">
@@ -28,6 +30,15 @@
                 </div>
             </div>
             <div class="px-1">
+                <button type="button"
+                    class=" h-45px 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="#sub-department-three-upload-modal"
+                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
+                    <i class="ti ti-file-plus"></i>
+                    import
+                </button>
+            </div>
+            <div class="px-1">
                 <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
                     (click)="currentModal='add';selectBu5();selectBu6()"
                     data-hs-overlay="#sub-department-three-modal-add">
@@ -35,11 +46,18 @@
                     Add
                 </button>
             </div>
-            <div class="px-1">
+            <!-- <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-info h-45px m-0 shadow-md">
                     <i class="ri-printer-line"></i>
                     Print
                 </button>
+            </div> -->
+            <div class="px-1">
+                <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
+                    data-hs-overlay="#sub-department-three-alert-delete-modal">
+                    <i class="ri-delete-bin-6-line"></i>
+                    Delete
+                </button>
             </div>
             <!-- <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
@@ -57,10 +75,10 @@
             <thead>
                 <tr>
                     <ng-container
-                        *ngFor="let item of ['ลำดับ','รหัสส่วนย่อย3','รายละเอียดส่วนย่อย3 (ไทย)','รายละเอียดส่วนย่อย3 (อังกฤษ)','การจัดการ']; let f = first; let l = last">
+                        *ngFor="let item of ['','รหัสส่วนย่อย3','รายละเอียดส่วนย่อย3 (ไทย)','รายละเอียดส่วนย่อย3 (อังกฤษ)','การจัดการ']; let f = first; let l = last">
                         <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">
+                            <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f&&!l">
                                 <i class="ti ti-dots-vertical fs-l"></i>
                             </div>
                         </th>
@@ -88,14 +106,15 @@
                 <tr
                     *ngFor="let item of filterBu6Table() | slice:((bu6Table.currentPage-1) * 10) : (((bu6Table.currentPage-1) * 10) + 10);let i = index">
                     <td class="text-center">
-                        {{((bu6Table.currentPage-1) * 10)+(i+1)}}
+                        <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.bu6id}}"
+                            [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
                     </td>
-                    <td class="text-center">{{item.bu6id}}</td>
-                    <td>{{item.tdesc}}</td>
-                    <td>{{item.edesc}}</td>
+                    <td class="text-center">{{item.data.bu6id}}</td>
+                    <td>{{item.data.tdesc}}</td>
+                    <td>{{item.data.edesc}}</td>
                     <td class="flex justify-center">
                         <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
-                            (click)="selectBu6(item);currentModal='edit'"
+                            (click)="selectBu6(item.data);currentModal='edit'"
                             data-hs-overlay="#sub-department-three-modal-edit"></i>
                         <!-- <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectBu6(item)"
                             data-hs-overlay="#sub-department-three-alert-delete-modal"></i> -->
@@ -226,7 +245,8 @@
                         </button>
                     </div> -->
                 </div>
-                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดส่วนย่อย3 (ไทย)<span class="text-danger">*</span></label>
+                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดส่วนย่อย3 (ไทย)<span
+                        class="text-danger">*</span></label>
                 <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="bu6.tdesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดส่วนย่อย3 (อังกฤษ)</label>
                 <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="bu6.edesc">
@@ -292,7 +312,8 @@
                 </div>
             </div>
             <div class="ti-modal-body">
-                <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label ">อยู่ภายใต้หน่วยงาน<span class="text-danger">*</span></label>
+                <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label ">อยู่ภายใต้หน่วยงาน<span
+                        class="text-danger">*</span></label>
                 <div class="flex">
                     <div class="relative flex rounded-md">
                         <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
@@ -315,7 +336,8 @@
                             readonly [value]="bu5.tdesc">
                     </div>
                 </div>
-                <label for="input-label" class="ti-form-label mt-2rem">ส่วนย่อย3<span class="text-danger">*</span></label>
+                <label for="input-label" class="ti-form-label mt-2rem">ส่วนย่อย3<span
+                        class="text-danger">*</span></label>
                 <div class="sm:grid grid-cols-2 gap-1">
                     <div class="relative w-full">
                         <input type="text" id="input-label" class="ti-form-input w-full pr-10 bg-input-readonly"
@@ -474,107 +496,6 @@
     </div>
 </div>
 
-<div id="sub-department-three-bu6-table-modal" class="hs-overlay hidden ti-modal">
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
-        <div class="max-h-full overflow-hidden ti-modal-content">
-            <div class="ti-modal-header">
-                <h3 class="text-xxl font-bold text-primary">
-                    ข้อมูลทะเบียนส่วนย่อย 3
-                </h3>
-                <div class="flex justify-end">
-                    <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-                        data-hs-overlay="#sub-department-three-modal-add">
-                        <span class="sr-only">Close</span>
-                        <i class="ti ti-circle-x fs-xxl"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="ti-modal-body">
-                <div class="flex justify-end pb-1rem">
-                    <div class="px-1">
-                        <div class="relative shadow-md">
-                            <input type="text" id="hs-leading-icon" name="hs-leading-icon"
-                                class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
-                                placeholder="Search by No. or Name" [(ngModel)]="bu6Modal.search"
-                                (ngModelChange)="onBu6ModalSearchChange()">
-                            <div
-                                class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
-                                <i class="ri-search-line text-gray"></i>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="overflow-auto border">
-                    <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
-                        <thead>
-                            <tr>
-                                <ng-container
-                                    *ngFor="let item of ['ลำดับ','รหัสส่วนย่อย3','รายละเอียดส่วนย่อย3 (ไทย)','รายละเอียดส่วนย่อย3 (อังกฤษ)']; let f = first; let l = last">
-                                    <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
-                                        [class.!text-center]="f">
-                                        <span class="text-sm">{{ 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 *ngIf="!filterBu6Modal().length">
-                            <tr>
-                                <td class="text-center" colspan="100%">
-                                    ไม่พบข้อมูล
-                                </td>
-                            </tr>
-                        </tbody>
-                        <tbody *ngIf="filterBu6Modal().length">
-                            <tr *ngFor="let item of filterBu6Modal() | slice:((bu6Modal.currentPage-1) * 10) : (((bu6Modal.currentPage-1) * 10) + 10);let i = index"
-                                class="cursor-pointer" (click)="selectBu6(item)"
-                                data-hs-overlay="#sub-department-three-modal-add">
-                                <td class="flex justify-center">
-                                    {{((bu6Modal.currentPage-1) * 10)+(i+1)}}
-                                </td>
-                                <td>{{item.bu6id}}</td>
-                                <td>{{item.tdesc}}</td>
-                                <td>{{item.edesc}}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu6Modal.page.length">
-                    <ul class="ti-pagination">
-                        <li>
-                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                                (click)="bu6Modal.currentPage = (bu6Modal.currentPage-1 || 1)">
-                                <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
-                            </a>
-                        </li>
-                        <li *ngFor="let item of bu6Modal.page">
-                            <a class="page-link" href="javascript:void(0);" [class.active]="item==bu6Modal.currentPage"
-                                (click)="bu6Modal.currentPage=item">{{item}}
-                            </a>
-                            <!-- <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
-                            </a> -->
-                        </li>
-                        <li>
-                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                                (click)="bu6Modal.currentPage = (bu6Modal.currentPage > bu6Modal.page.length-1 ? bu6Modal.currentPage: bu6Modal.currentPage+1 )">
-                                <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
-                            </a>
-                        </li>
-                    </ul>
-                </nav>
-                <div class="flex justify-end mt-2rem mb-1rem space-x-4">
-                    <button type="button"
-                        class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
-                        data-hs-overlay="#sub-department-three-modal-add">
-                        ย้อนกลับ
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
 
 <div id="sub-department-three-alert-add-modal" class="hs-overlay hidden ti-modal">
     <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
@@ -703,6 +624,11 @@
                         <i class="ti ti-upload"></i>
                     </button>
                 </div>
+                <div class="flex justify-center mt-2rem ">
+                    <h1 class="cursor-pointer justify-center -mb-px inline-flex items-center gap-2 font-weight-500 font-size-12px
+                    text-center text-secondary border-secondary border-b-2 align-items-end" (click)="downloadFile()">
+                        ดาวน์โหลดตัวอย่างไฟล์</h1>
+                </div>
                 <div class="flex justify-center mt-2rem mb-1rem space-x-4">
                     <button type="submit" class="ti-btn ti-btn-secondary" (click)="uploadFile()"
                         data-hs-overlay="#sub-department-three-upload-modal" [class.ti-btn-disabled]="!selectedFile"

src/app/components/company-components/company-registration/branch-business-unit/sub-department-three/sub-department-three.component.ts

@@ -17,7 +17,7 @@ interface table {
   styleUrls: ['./sub-department-three.component.scss']
 })
 export class SubDepartmentThreeComponent implements OnInit {
-  bu6List: Bu6Model[] = []
+  bu6List: { check: boolean, data: Bu6Model }[] = []
   bu6ListLoading = false
   bu6: Bu6Model = new MyBu6Model()
   bu6Table: table = {
@@ -42,6 +42,10 @@ export class SubDepartmentThreeComponent implements OnInit {
     search: ""
   }
   currentModal: 'add' | 'edit' | 'detele' = "add"
+
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
   constructor(private bu6Service: Bu6Service,
     private bu5Service: Bu5Service,
     private toastr: ToastrService,
@@ -105,9 +109,11 @@ export class SubDepartmentThreeComponent implements OnInit {
     this.bu6ListLoading = true
     this.bu6Service.getList().subscribe({
       next: response => {
-        this.bu6List = response.map(x => new MyBu6Model(x))
+        this.bu6List = response.map(x => ({ check: false, data: new MyBu6Model(x) }))
         this.bu6ListLoading = false
         this.onBu6TableSearchChange()
+        this.isDataListCheckedAll = false
+        this.dataListCheckAll()
         this.cdr.detectChanges()
       }, error: error => {
         this.bu6ListLoading = false
@@ -118,11 +124,15 @@ export class SubDepartmentThreeComponent implements OnInit {
   onBu6TableSearchChange() {
     this.bu6Table.currentPage = 1
     this.bu6Table.page = Array.from({ length: Math.ceil(this.filterBu6Table().length / 10) }, (_, i) => i + 1);
+    this.dataListCheck()
   }
   filterBu6Table() {
-    return this.bu6List.filter(x => x.bu6id.toLowerCase().includes(this.bu6Table.search.toLowerCase()) ||
-      x.tdesc.toLowerCase().includes(this.bu6Table.search.toLowerCase()) ||
-      x.edesc.toLowerCase().includes(this.bu6Table.search.toLowerCase()))
+    return this.bu6List.filter(x => {
+      const data = x.data
+      return data.bu6id.toLowerCase().includes(this.bu6Table.search.toLowerCase()) ||
+        data.tdesc.toLowerCase().includes(this.bu6Table.search.toLowerCase()) ||
+        data.edesc.toLowerCase().includes(this.bu6Table.search.toLowerCase())
+    })
   }
   selectBu6(bu6?: Bu6Model) {
     this.bu6 = new MyBu6Model(bu6)
@@ -134,18 +144,17 @@ export class SubDepartmentThreeComponent implements OnInit {
       })
     }
   }
-  bu6idChange() {
-    const bu6 = this.bu6List.find(x => x.bu6id == this.bu6.bu6id)
-    this.selectBu6(bu6 || new MyBu6Model({ bu6id: this.bu6.bu6id }))
-  }
   onBu6ModalSearchChange() {
     this.bu6Modal.currentPage = 1
     this.bu6Modal.page = Array.from({ length: Math.ceil(this.filterBu6Modal().length / 10) }, (_, i) => i + 1);
   }
   filterBu6Modal() {
-    return this.bu6List.filter(x => x.bu6id.toLowerCase().includes(this.bu6Modal.search.toLowerCase()) ||
-      x.tdesc.toLowerCase().includes(this.bu6Modal.search.toLowerCase()) ||
-      x.edesc.toLowerCase().includes(this.bu6Modal.search.toLowerCase()))
+    return this.bu6List.filter(x => {
+      const data = x.data
+      return data.bu6id.toLowerCase().includes(this.bu6Table.search.toLowerCase()) ||
+        data.tdesc.toLowerCase().includes(this.bu6Table.search.toLowerCase()) ||
+        data.edesc.toLowerCase().includes(this.bu6Table.search.toLowerCase())
+    })
   }
   addBu6() {
     this.bu6ListLoading = true
@@ -166,7 +175,8 @@ export class SubDepartmentThreeComponent implements OnInit {
   }
   deleteBu6() {
     this.bu6ListLoading = true
-    this.bu6Service.delete(this.bu6).subscribe({
+    const body = this.bu6List.filter(x => x.check).map(x => new MyBu6Model(x.data))
+    this.bu6Service.delete(body).subscribe({
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')
@@ -211,6 +221,19 @@ export class SubDepartmentThreeComponent implements OnInit {
       positionClass: 'toast-top-right',
     })
   }
+
+  dataListCheckAll() {
+    const selectAll = this.isDataListCheckedAll;
+    this.filterBu6Table().forEach(x => x.check = selectAll);
+    this.dataListCheck();
+  }
+
+  dataListCheck() {
+    const dataCheck = this.filterBu6Table();
+    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
+    this.numDataListChecked = this.bu6List.filter(x => x.check).length
+    this.isDataListChecked = Boolean(this.numDataListChecked)
+  }
 }
 
 

src/app/components/company-components/company-registration/branch-business-unit/sub-department-two/sub-department-two.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">
-            <div class="px-1">
-                <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
-                    data-hs-overlay="#sub-department-two-upload-modal"
-                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
-                    <i class="ri-add-line"></i>
-                    นำเข้าข้อมูล
+        <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()" id='check-boxall'
+                    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>
-                <a class="mx-2 justify-center  -mb-px  inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
-                    href="javascript:void(0);" (click)="downloadFile()">
-                    ดาวน์โหลดตัวอย่างไฟล์
-                </a>
+                <label class="text-sm text-gray-500 ml-2" for="check-boxall">Select All</label>
             </div>
         </div>
         <div class="flex justify-end">
@@ -28,6 +30,15 @@
                 </div>
             </div>
             <div class="px-1">
+                <button type="button"
+                    class=" h-45px 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="#sub-department-two-upload-modal"
+                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
+                    <i class="ti ti-file-plus"></i>
+                    import
+                </button>
+            </div>
+            <div class="px-1">
                 <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
                     (click)="currentModal='add';selectBu4();selectBu5()"
                     data-hs-overlay="#sub-department-two-modal-add">
@@ -35,11 +46,18 @@
                     Add
                 </button>
             </div>
-            <div class="px-1">
+            <!-- <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-info h-45px m-0 shadow-md">
                     <i class="ri-printer-line"></i>
                     Print
                 </button>
+            </div> -->
+            <div class="px-1">
+                <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
+                    data-hs-overlay="#sub-department-two-alert-delete-modal">
+                    <i class="ri-delete-bin-6-line"></i>
+                    Delete
+                </button>
             </div>
             <!-- <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
@@ -56,10 +74,10 @@
             <thead>
                 <tr>
                     <ng-container
-                        *ngFor="let item of ['ลำดับ','รหัสส่วนย่อย2','รายละเอียดส่วนย่อย2 (ไทย)','รายละเอียดส่วนย่อย2 (อังกฤษ)','การจัดการ']; let f = first; let l = last">
+                        *ngFor="let item of ['','รหัสส่วนย่อย2','รายละเอียดส่วนย่อย2 (ไทย)','รายละเอียดส่วนย่อย2 (อังกฤษ)','การจัดการ']; let f = first; let l = last">
                         <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">
+                            <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f&&!l">
                                 <i class="ti ti-dots-vertical fs-l"></i>
                             </div>
                         </th>
@@ -86,15 +104,16 @@
             <tbody *ngIf="!bu5ListLoading&&filterBu5Table().length">
                 <tr
                     *ngFor="let item of filterBu5Table() | slice:((bu5Table.currentPage-1) * 10) : (((bu5Table.currentPage-1) * 10) + 10);let i = index">
-                    <td class="text-center">
-                        {{((bu5Table.currentPage-1) * 10)+(i+1)}}
+                    <td td class="text-center">
+                        <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.bu5id}}"
+                            [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
                     </td>
-                    <td class="text-center">{{item.bu5id}}</td>
-                    <td>{{item.tdesc}}</td>
-                    <td>{{item.edesc}}</td>
+                    <td class="text-center">{{item.data.bu5id}}</td>
+                    <td>{{item.data.tdesc}}</td>
+                    <td>{{item.data.edesc}}</td>
                     <td class="flex justify-center">
                         <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
-                            (click)="selectBu5(item);currentModal='edit'"
+                            (click)="selectBu5(item.data);currentModal='edit'"
                             data-hs-overlay="#sub-department-two-modal-edit"></i>
                         <!-- <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
                             (click)="currentModal='delete';selectBu5(item)"
@@ -190,9 +209,8 @@
                     <div class="relative flex rounded-md">
                         <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-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
-                            readonly style="padding-right: 3.5rem;" [(ngModel)]="bu4.bu4id"
-                            (ngModelChange)="bu4idChange()">
+                            class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" readonly
+                            style="padding-right: 3.5rem;" [(ngModel)]="bu4.bu4id" (ngModelChange)="bu4idChange()">
                         <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)="selectBu4()">
@@ -227,7 +245,8 @@
                         </button>
                     </div> -->
                 </div>
-                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดส่วนย่อย2 (ไทย)<span class="text-danger">*</span></label>
+                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดส่วนย่อย2 (ไทย)<span
+                        class="text-danger">*</span></label>
                 <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="bu5.tdesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดส่วนย่อย2 (อังกฤษ)</label>
                 <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="bu5.edesc">
@@ -293,14 +312,14 @@
                 </div>
             </div>
             <div class="ti-modal-body">
-                <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">อยู่ภายใต้หน่วยงาน<span class="text-danger">*</span></label>
+                <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">อยู่ภายใต้หน่วยงาน<span
+                        class="text-danger">*</span></label>
                 <div class="flex">
                     <div class="relative flex rounded-md">
                         <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-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
-                            readonly style="padding-right: 3.5rem;" [(ngModel)]="bu4.bu4id"
-                            (ngModelChange)="bu4idChange()">
+                            class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" readonly
+                            style="padding-right: 3.5rem;" [(ngModel)]="bu4.bu4id" (ngModelChange)="bu4idChange()">
                         <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)="selectBu4()">
@@ -317,14 +336,16 @@
                             readonly [value]="bu4.tdesc">
                     </div>
                 </div>
-                <label for="input-label" class="ti-form-label mt-2rem">ส่วนย่อย2<span class="text-danger">*</span></label>
+                <label for="input-label" class="ti-form-label mt-2rem">ส่วนย่อย2<span
+                        class="text-danger">*</span></label>
                 <div class="sm:grid grid-cols-2 gap-1">
                     <div class="relative w-full">
                         <input type="text" id="input-label" class="ti-form-input w-full pr-10 bg-input-readonly"
                             readonly [value]="bu5.bu5id">
                     </div>
                 </div>
-                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดส่วนย่อย2 (ไทย)<span class="text-danger">*</span></label>
+                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดส่วนย่อย2 (ไทย)<span
+                        class="text-danger">*</span></label>
                 <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="bu5.tdesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดส่วนย่อย2 (อังกฤษ)</label>
                 <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="bu5.edesc">
@@ -474,106 +495,6 @@
     </div>
 </div>
 
-<div id="sub-department-two-bu5-table-modal" class="hs-overlay hidden ti-modal">
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
-        <div class="max-h-full overflow-hidden ti-modal-content">
-            <div class="ti-modal-header">
-                <h3 class="text-xxl font-bold text-primary">
-                    ข้อมูลทะเบียนส่วนย่อย 2
-                </h3>
-                <div class="flex justify-end">
-                    <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-                        data-hs-overlay="#sub-department-two-modal-add">
-                        <span class="sr-only">Close</span>
-                        <i class="ti ti-circle-x fs-xxl"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="ti-modal-body">
-                <div class="flex justify-end pb-1rem">
-                    <div class="px-1">
-                        <div class="relative shadow-md">
-                            <input type="text" id="hs-leading-icon" name="hs-leading-icon"
-                                class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
-                                placeholder="Search by No. or Name" [(ngModel)]="bu5Modal.search"
-                                (ngModelChange)="onBu5ModalSearchChange()">
-                            <div
-                                class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
-                                <i class="ri-search-line text-gray"></i>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="overflow-auto border">
-                    <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
-                        <thead>
-                            <tr>
-                                <ng-container
-                                    *ngFor="let item of ['ลำดับ','รหัสส่วนย่อย2','รายละเอียดส่วนย่อย2 (ไทย)','รายละเอียดส่วนย่อย2 (อังกฤษ)']; let f = first; let l = last">
-                                    <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
-                                        [class.!text-center]="f">
-                                        <span class="text-sm">{{ 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 *ngIf="!filterBu5Modal().length">
-                            <tr>
-                                <td class="text-center" colspan="100%">
-                                    ไม่พบข้อมูล
-                                </td>
-                            </tr>
-                        </tbody>
-                        <tbody *ngIf="filterBu5Modal().length">
-                            <tr *ngFor="let item of filterBu5Modal() | slice:((bu5Modal.currentPage-1) * 10) : (((bu5Modal.currentPage-1) * 10) + 10);let i = index"
-                                class="cursor-pointer" (click)="selectBu5(item)"
-                                data-hs-overlay="#sub-department-two-modal-add">
-                                <td class="flex justify-center">
-                                    {{((bu5Modal.currentPage-1) * 10)+(i+1)}}
-                                </td>
-                                <td>{{item.bu5id}}</td>
-                                <td>{{item.tdesc}}</td>
-                                <td>{{item.edesc}}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu5Modal.page.length">
-                    <ul class="ti-pagination">
-                        <li>
-                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                                (click)="bu5Modal.currentPage = (bu5Modal.currentPage-1 || 1)">
-                                <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
-                            </a>
-                        </li>
-                        <li *ngFor="let item of bu5Modal.page">
-                            <a class="page-link" href="javascript:void(0);" [class.active]="item==bu5Modal.currentPage"
-                                (click)="bu5Modal.currentPage=item">{{item}}
-                            </a>
-                        </li>
-                        <li>
-                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                                (click)="bu5Modal.currentPage = (bu5Modal.currentPage > bu5Modal.page.length-1 ? bu5Modal.currentPage: bu5Modal.currentPage+1 )">
-                                <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
-                            </a>
-                        </li>
-                    </ul>
-                </nav>
-                <div class="flex justify-end mt-2rem mb-1rem space-x-4">
-                    <button type="button"
-                        class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
-                        data-hs-overlay="#sub-department-two-modal-add">
-                        ย้อนกลับ
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
 <div id="sub-department-two-alert-add-modal" class="hs-overlay hidden ti-modal">
     <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
         <div class="max-h-full overflow-hidden ti-modal-content w-full">
@@ -700,6 +621,11 @@
                         <i class="ti ti-upload"></i>
                     </button>
                 </div>
+                <div class="flex justify-center mt-2rem ">
+                    <h1 class="cursor-pointer justify-center -mb-px inline-flex items-center gap-2 font-weight-500 font-size-12px
+                    text-center text-secondary border-secondary border-b-2 align-items-end" (click)="downloadFile()">
+                        ดาวน์โหลดตัวอย่างไฟล์</h1>
+                </div>
                 <div class="flex justify-center mt-2rem mb-1rem space-x-4">
                     <button type="submit" class="ti-btn ti-btn-secondary" (click)="uploadFile()"
                         data-hs-overlay="#sub-department-two-upload-modal" [class.ti-btn-disabled]="!selectedFile"

src/app/components/company-components/company-registration/branch-business-unit/sub-department-two/sub-department-two.component.ts

@@ -16,7 +16,7 @@ interface table {
   styleUrls: ['./sub-department-two.component.scss']
 })
 export class SubDepartmentTwoComponent implements OnInit {
-  bu5List: Bu5Model[] = []
+  bu5List: { check: boolean, data: Bu5Model }[] = []
   bu5ListLoading = false
   bu5: Bu5Model = new MyBu5Model()
   bu5Table: table = {
@@ -41,6 +41,11 @@ export class SubDepartmentTwoComponent implements OnInit {
     search: ""
   }
   currentModal: 'add' | 'edit' | 'delete' = "add"
+
+  
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
   constructor(private bu5Service: Bu5Service,
     private bu4Service: Bu4Service,
     private toastr: ToastrService,
@@ -104,9 +109,11 @@ export class SubDepartmentTwoComponent implements OnInit {
     this.bu5ListLoading = true
     this.bu5Service.getList().subscribe({
       next: response => {
-        this.bu5List = response.map(x => new MyBu5Model(x))
+        this.bu5List = response.map(x => ({ check: false, data: new MyBu5Model(x) }))
         this.bu5ListLoading = false
         this.onBu5TableSearchChange()
+        this.isDataListCheckedAll = false
+        this.dataListCheckAll()
         this.cdr.detectChanges()
       }, error: error => {
         this.bu5ListLoading = false
@@ -117,11 +124,15 @@ export class SubDepartmentTwoComponent implements OnInit {
   onBu5TableSearchChange() {
     this.bu5Table.currentPage = 1
     this.bu5Table.page = Array.from({ length: Math.ceil(this.filterBu5Table().length / 10) }, (_, i) => i + 1);
+    this.dataListCheck()
   }
   filterBu5Table() {
-    return this.bu5List.filter(x => x.bu5id.toLowerCase().includes(this.bu5Table.search.toLowerCase()) ||
-      x.tdesc.toLowerCase().includes(this.bu5Table.search.toLowerCase()) ||
-      x.edesc.toLowerCase().includes(this.bu5Table.search.toLowerCase()))
+    return this.bu5List.filter(x => {
+      const data = x.data
+      return data.bu5id.toLowerCase().includes(this.bu5Table.search.toLowerCase()) ||
+        data.tdesc.toLowerCase().includes(this.bu5Table.search.toLowerCase()) ||
+        data.edesc.toLowerCase().includes(this.bu5Table.search.toLowerCase())
+    })
   }
   selectBu5(bu5?: Bu5Model) {
     this.bu5 = new MyBu5Model(bu5 || {})
@@ -133,18 +144,17 @@ export class SubDepartmentTwoComponent implements OnInit {
       })
     }
   }
-  bu5idChange() {
-    const bu5 = this.bu5List.find(x => x.bu5id == this.bu5.bu5id)
-    this.selectBu5(bu5 || new MyBu5Model({ bu5id: this.bu5.bu5id }))
-  }
   onBu5ModalSearchChange() {
     this.bu5Modal.currentPage = 1
     this.bu5Modal.page = Array.from({ length: Math.ceil(this.filterBu5Modal().length / 10) }, (_, i) => i + 1);
   }
   filterBu5Modal() {
-    return this.bu5List.filter(x => x.bu5id.toLowerCase().includes(this.bu5Modal.search.toLowerCase()) ||
-      x.tdesc.toLowerCase().includes(this.bu5Modal.search.toLowerCase()) ||
-      x.edesc.toLowerCase().includes(this.bu5Modal.search.toLowerCase()))
+    return this.bu5List.filter(x => {
+      const data = x.data
+      return data.bu5id.toLowerCase().includes(this.bu5Table.search.toLowerCase()) ||
+        data.tdesc.toLowerCase().includes(this.bu5Table.search.toLowerCase()) ||
+        data.edesc.toLowerCase().includes(this.bu5Table.search.toLowerCase())
+    })
   }
   addBu5() {
     this.bu5ListLoading = true
@@ -165,7 +175,8 @@ export class SubDepartmentTwoComponent implements OnInit {
   }
   deleteBu5() {
     this.bu5ListLoading = true
-    this.bu5Service.delete(this.bu5).subscribe({
+    const body = this.bu5List.filter(x => x.check).map(x => new MyBu5Model(x.data))
+    this.bu5Service.delete(body).subscribe({
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')
@@ -210,5 +221,18 @@ export class SubDepartmentTwoComponent implements OnInit {
       positionClass: 'toast-top-right',
     })
   }
+
+  dataListCheckAll() {
+    const selectAll = this.isDataListCheckedAll;
+    this.filterBu5Table().forEach(x => x.check = selectAll);
+    this.dataListCheck();
+  }
+
+  dataListCheck() {
+    const dataCheck = this.filterBu5Table();
+    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
+    this.numDataListChecked = this.bu5List.filter(x => x.check).length
+    this.isDataListChecked = Boolean(this.numDataListChecked)
+  }
 }
 

src/app/components/company-components/company-registration/company-registration-page/company-registration-page.component.html

 <div class="w-full min-height-50px mb-10px justify-between items-center">
-    <div class="flex pr-2 pb-2rem">
+    <div class="flex justify-between">
         <div class="flex">
             <div class="flex items-center">
                 <input type="checkbox" class="ti-form-checkbox pointer-events-none" id="hs-default-checkbox"
@@ -13,23 +13,7 @@
                     <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" for="check-boxall" >Select All</label>
-            </div>
-        </div>
-    </div>
-    <div class="flex justify-between">
-        <div class="flex pr-2">
-            <div class="px-1">
-                <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
-                    data-hs-overlay="#company-registration-page-upload-modal"
-                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
-                    <i class="ri-add-line"></i>
-                    นำเข้าข้อมูล
-                </button>
-                <a class="mx-2 justify-center  -mb-px  inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
-                    href="javascript:void(0);" (click)="downloadFile()">
-                    ดาวน์โหลดตัวอย่างไฟล์
-                </a>
+                <label class="text-sm text-gray-500 ml-2" for="check-boxall">Select All</label>
             </div>
         </div>
         <div class="flex justify-end">
@@ -44,6 +28,15 @@
                 </div>
             </div>
             <div class="px-1">
+                <button type="button"
+                    class=" h-45px 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="#company-registration-page-upload-modal"
+                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
+                    <i class="ti ti-file-plus"></i>
+                    import
+                </button>
+            </div>
+            <div class="px-1">
                 <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
                     (click)="modalStatus='add';setData()" data-hs-overlay="#company-registration-page-modal">
                     <i class="ri-add-line"></i>
@@ -109,7 +102,7 @@
                             id="checkbox-{{item.data.code}}" [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
                     </td>
                     <td class="text-center">
-              
+
                         <label for="checkbox-{{item.data.code}}">&nbsp;{{item.data.code}}</label>
                     </td>
                     <td>{{item.data.tdesc}}</td>
@@ -211,11 +204,13 @@
                 </div>
             </div>
             <div class="ti-modal-body padding-16px pt-0 overflow-y-0">
-                <label for="input-label" class="ti-form-label mt-2rem">รหัสบริษัท<span class="text-danger">*</span></label>
+                <label for="input-label" class="ti-form-label mt-2rem">รหัสบริษัท<span
+                        class="text-danger">*</span></label>
                 <input type="text" id="input-label" class="ti-form-input w-1/2"
                     [ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'"
                     [(ngModel)]="dataSelect.code" [maxLength]="5">
-                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)<span class="text-danger">*</span></label>
+                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)<span
+                        class="text-danger">*</span></label>
                 <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="dataSelect.tdesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
                 <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="dataSelect.edesc">
@@ -323,6 +318,11 @@
                         <i class="ti ti-upload"></i>
                     </button>
                 </div>
+                <div class="flex justify-center mt-2rem ">
+                    <h1 class="cursor-pointer justify-center -mb-px inline-flex items-center gap-2 font-weight-500 font-size-12px
+                    text-center text-secondary border-secondary border-b-2 align-items-end" (click)="downloadFile()">
+                        ดาวน์โหลดตัวอย่างไฟล์</h1>
+                </div>
                 <div class="flex justify-center mt-2rem mb-1rem space-x-4">
                     <button type="submit" class="ti-btn ti-btn-secondary"
                         data-hs-overlay="#company-registration-page-upload-modal"

src/app/components/company-components/company-registration/company-registration.component.html

@@ -17,8 +17,8 @@
                 <a class="font-size-16px font-weight-500  hs-tab-active:font-weight-700 hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  hover:text-secondary"
                     href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
                     aria-controls="underline-2"
-                    (click)="pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท','สาขาและหน่วยธุรกิจ' ,'ทะเบียนฝ่าย'];currentPath=2">
-                    สาขาและหน่วยธุรกิจ
+                    (click)="pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท','หน่วยธุรกิจ' ,'ทะเบียนฝ่าย'];currentPath=2">
+                    หน่วยธุรกิจ
                 </a>
             </nav>
         </div>

src/app/components/company-components/employee-registration/sub-employee-registration/sub-employee-registration.component.html

@@ -259,7 +259,8 @@
                       <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="#sub-employee-registration-empgroup-table-modal" (click)="modal.search=''">
+                      data-hs-overlay="#sub-employee-registration-empgroup-table-modal"
+                      (click)="modal.search='';searchModalChange(empGroupListFilter())">
                       <i class="ri-search-line cursor-pointer text-gray"></i>
                     </button>
                   </div>
@@ -310,7 +311,8 @@
                       <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="#sub-employee-registration-emp-table-modal" (click)="modal.search=''">
+                      data-hs-overlay="#sub-employee-registration-emp-table-modal"
+                      (click)="modal.search='';searchModalChange(employeeModalListFilter())">
                       <i class="ri-search-line cursor-pointer text-gray"></i>
                     </button>
                   </div>
@@ -333,7 +335,8 @@
                       <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="#sub-employee-registration-bu1-table-modal" (click)="modal.search=''">
+                      data-hs-overlay="#sub-employee-registration-bu1-table-modal"
+                      (click)="modal.search='';searchModalChange(bu1ListFilter())">
                       <i class="ri-search-line cursor-pointer text-gray"></i>
                     </button>
                   </div>
@@ -356,7 +359,8 @@
                       <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="#sub-employee-registration-bu2-table-modal" (click)="modal.search=''">
+                      data-hs-overlay="#sub-employee-registration-bu2-table-modal"
+                      (click)="modal.search='';searchModalChange(bu2ListFilter())">
                       <i class="ri-search-line cursor-pointer text-gray"></i>
                     </button>
                   </div>
@@ -379,7 +383,8 @@
                       <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="#sub-employee-registration-bu3-table-modal" (click)="modal.search=''">
+                      data-hs-overlay="#sub-employee-registration-bu3-table-modal"
+                      (click)="modal.search='';searchModalChange(bu3ListFilter())">
                       <i class="ri-search-line cursor-pointer text-gray"></i>
                     </button>
                   </div>
@@ -402,7 +407,8 @@
                       <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="#sub-employee-registration-bu4-table-modal" (click)="modal.search=''">
+                      data-hs-overlay="#sub-employee-registration-bu4-table-modal"
+                      (click)="modal.search='';searchModalChange(bu4ListFilter())">
                       <i class="ri-search-line cursor-pointer text-gray"></i>
                     </button>
                   </div>
@@ -425,7 +431,8 @@
                       <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="#sub-employee-registration-bu5-table-modal" (click)="modal.search=''">
+                      data-hs-overlay="#sub-employee-registration-bu5-table-modal"
+                      (click)="modal.search='';searchModalChange(bu5ListFilter())">
                       <i class="ri-search-line cursor-pointer text-gray"></i>
                     </button>
                   </div>
@@ -447,7 +454,8 @@
                       <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="#sub-employee-registration-bu6-table-modal" (click)="modal.search=''">
+                      data-hs-overlay="#sub-employee-registration-bu6-table-modal"
+                      (click)="modal.search='';searchModalChange(bu6ListFilter())">
                       <i class="ri-search-line cursor-pointer text-gray"></i>
                     </button>
                   </div>
@@ -469,7 +477,8 @@
                       <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="#sub-employee-registration-bu7-table-modal" (click)="modal.search=''">
+                      data-hs-overlay="#sub-employee-registration-bu7-table-modal"
+                      (click)="modal.search='';searchModalChange(bu7ListFilter())">
                       <i class="ri-search-line cursor-pointer text-gray"></i>
                     </button>
                   </div>
@@ -492,7 +501,8 @@
                       <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="#sub-employee-registration-position-table-modal" (click)="modal.search=''">
+                      data-hs-overlay="#sub-employee-registration-position-table-modal"
+                      (click)="modal.search='';searchModalChange(positionListFilter())">
                       <i class="ri-search-line cursor-pointer text-gray"></i>
                     </button>
                   </div>
@@ -515,7 +525,8 @@
                       <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="#sub-employee-registration-jobcode-table-modal" (click)="modal.search=''">
+                      data-hs-overlay="#sub-employee-registration-jobcode-table-modal"
+                      (click)="modal.search='';searchModalChange(jobcodeListFilter())">
                       <i class="ri-search-line cursor-pointer text-gray"></i>
                     </button>
                   </div>
@@ -538,7 +549,8 @@
                       <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="#sub-employee-registration-branch-table-modal" (click)="modal.search=''">
+                      data-hs-overlay="#sub-employee-registration-branch-table-modal"
+                      (click)="modal.search='';searchModalChange(branchListFilter())">
                       <i class="ri-search-line cursor-pointer text-gray"></i>
                     </button>
                   </div>
@@ -561,7 +573,8 @@
                       <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="#sub-employee-registration-emptype-table-modal" (click)="modal.search=''">
+                      data-hs-overlay="#sub-employee-registration-emptype-table-modal"
+                      (click)="modal.search='';searchModalChange(empTypeListFilter())">
                       <i class="ri-search-line cursor-pointer text-gray"></i>
                     </button>
                   </div>
@@ -584,7 +597,8 @@
                       <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="#sub-employee-registration-pl-table-modal" (click)="modal.search=''">
+                      data-hs-overlay="#sub-employee-registration-pl-table-modal"
+                      (click)="modal.search='';searchModalChange(plListFilter())">
                       <i class="ri-search-line cursor-pointer text-gray"></i>
                     </button>
                   </div>

src/app/components/company-components/employee-registration/sub-employee-registration/sub-employee-registration.component.ts

@@ -448,7 +448,7 @@ export class SubEmployeeRegistrationComponent {
     this.employeeService.getList().subscribe({
       next: response => {
         this.employee.dataList = response.map((x: any) => ({ check: false, data: new MyEmployeeModel(x) }))
-        this.employeeModal.dataList = response.map((x: any) => new MyEmployeeModel(x)).filter(x => x.employeeId != this.decodeJWT(sessionStorage.getItem("accessToken") || '').employeeid)
+        this.employeeModal.dataList = response.filter(x => x.employeeId != this.decodeJWT(sessionStorage.getItem("accessToken") || '').employeeid).map((x: any) => new MyEmployeeModel(x))
         this.employee.loading = false
         this.isDataListCheckedAll = false
         this.dataListCheckAll()
@@ -462,8 +462,8 @@ export class SubEmployeeRegistrationComponent {
   }
   employeeModalListFilter() {
     return this.employeeModal.dataList.filter(x => x.employeeId.toLowerCase().includes(this.modal.search.toLowerCase()) ||
-      x.fname.toLowerCase().includes(this.search.toLowerCase()) ||
-      x.lname.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.fname.toLowerCase().includes(this.modal.search.toLowerCase()) ||
+      x.lname.toLowerCase().includes(this.modal.search.toLowerCase()) ||
       x.position.tdesc.toLowerCase().includes(this.modal.search.toLowerCase()) ||
       x.jobCode.tdesc.toLowerCase().includes(this.modal.search.toLowerCase()))
   }

src/app/components/competency-assessment/grade-registration/grade-management/grade-management.component.ts

@@ -10,6 +10,7 @@ export interface DataModel {
   tdesc: string;
   edesc: string;
   competencyGrades: CompetencyGradeModel[]
+  companyId: string
 }
 
 @Component({
@@ -29,7 +30,7 @@ export class GradeManagementComponent {
 
   dataList: DataModel[] = [];
   dataLoading = false
-  dataSelect: DataModel = { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] }
+  dataSelect: DataModel = { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [], companyId: '' }
 
   constructor(private toastr: ToastrService,
     private competencyGroupGradeService: CompetencyGroupGradeService,
@@ -40,13 +41,13 @@ export class GradeManagementComponent {
     this.getCompetencyGroupGradeList()
   }
   selectData(data?: DataModel) {
-    this.dataSelect = JSON.parse(JSON.stringify(data || { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] }))
+    this.dataSelect = JSON.parse(JSON.stringify(data || { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [], companyId: '' }))
   }
   getCompetencyGroupGradeList() {
     this.dataLoading = true
     this.competencyGroupGradeService.getList().subscribe({
       next: response => {
-        this.dataList = response.map(x => ({ check: false, code: x.groupGradeId, tdesc: x.tdesc, edesc: x.edesc, competencyGrades: x.competencyGrades }))
+        this.dataList = response.map(x => ({ check: false, code: x.groupGradeId, tdesc: x.tdesc, edesc: x.edesc, competencyGrades: x.competencyGrades, companyId: x.companyId }))
         this.isDataListCheckedAll = false
         this.dataListCheckAll()
         this.searchChange()
@@ -97,7 +98,7 @@ export class GradeManagementComponent {
   }
 
   deleteCompetencyGroupGradeList() {
-    const body = this.dataSelect.code ? new MyCompetencyGroupGradeModel({ groupGradeId: this.dataSelect.code, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc }) : this.dataList.filter(x => x.check).map(x => new MyCompetencyGroupGradeModel({ groupGradeId: x.code, tdesc: x.tdesc, edesc: x.edesc }))
+    const body = this.dataSelect.code ? new MyCompetencyGroupGradeModel({ groupGradeId: this.dataSelect.code, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId }) : this.dataList.filter(x => x.check).map(x => new MyCompetencyGroupGradeModel({ groupGradeId: x.code, tdesc: x.tdesc, edesc: x.edesc }))
     this.dataLoading = true
     this.competencyGroupGradeService.delete(body).subscribe({
       next: response => {

src/app/components/competency-assessment/grade-registration/grade-management/group-grade/group-grade.component.ts

@@ -9,6 +9,7 @@ export interface DataModel {
   tdesc: string
   edesc: string
   competencyGrades: CompetencyGradeModel[]
+  companyId: string
 }
 
 @Component({
@@ -19,22 +20,22 @@ export interface DataModel {
 export class GroupGradeComponent implements OnInit {
   @Output() sendBackTab: EventEmitter<undefined> = new EventEmitter<undefined>();
   @Input() typeTab: 'add' | 'edit' = 'add'
-  @Input() dataSelect: DataModel = { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] }
-  dataOriginal: DataModel = { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] }
+  @Input() dataSelect: DataModel = { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [], companyId: '' }
+  dataOriginal: DataModel = { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [], companyId: '' }
   @Output() sendDataList: EventEmitter<DataModel[]> = new EventEmitter<DataModel[]>();
   currentTab = 1
   constructor(private toastr: ToastrService,
     private competencyGroupGradeService: CompetencyGroupGradeService,
     private cdr: ChangeDetectorRef) { }
   ngOnInit(): void {
-    this.dataOriginal = JSON.parse(JSON.stringify(this.dataSelect || { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] }))
+    this.dataOriginal = JSON.parse(JSON.stringify(this.dataSelect || { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [], companyId: '' }))
   }
   clear() {
     if (this.typeTab == 'add') {
-      this.dataSelect = { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] }
+      this.dataSelect = { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [], companyId: '' }
       this.cdr.detectChanges()
     } else if (this.typeTab == 'edit') {
-      this.dataSelect = { check: false, code: this.dataOriginal.code, tdesc: '', edesc: '', competencyGrades: [] }
+      this.dataSelect = { check: false, code: this.dataOriginal.code, tdesc: '', edesc: '', competencyGrades: [], companyId: '' }
       this.cdr.detectChanges()
     }
   }
@@ -42,7 +43,7 @@ export class GroupGradeComponent implements OnInit {
     this.sendBackTab.emit();
   }
   postCompetencyGroupGrade() {
-    this.competencyGroupGradeService.post(new MyCompetencyGroupGradeModel({ groupGradeId: this.dataSelect.code, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, competencyGrades: this.dataSelect.competencyGrades })).subscribe({
+    this.competencyGroupGradeService.post(new MyCompetencyGroupGradeModel({ groupGradeId: this.dataSelect.code, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, competencyGrades: this.dataSelect.competencyGrades, companyId: this.dataSelect.companyId })).subscribe({
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')
@@ -58,7 +59,7 @@ export class GroupGradeComponent implements OnInit {
   getCompetencyGroupGradeList() {
     this.competencyGroupGradeService.getList().subscribe({
       next: response => {
-        this.sendDataList.emit(response.map(x => ({ check: false, code: x.groupGradeId, tdesc: x.tdesc, edesc: x.edesc, competencyGrades: x.competencyGrades })))
+        this.sendDataList.emit(response.map(x => ({ check: false, code: x.groupGradeId, tdesc: x.tdesc, edesc: x.edesc, competencyGrades: x.competencyGrades, companyId: this.dataSelect.companyId })))
         this.cdr.detectChanges()
       }
     })

src/app/components/competency-assessment/grade-registration/grade-management/sub-grade-registration/sub-grade-registration.component.ts

@@ -10,6 +10,7 @@ export interface DataModel {
   tdesc: string
   edesc: string
   competencyGrades: CompetencyGradeModel[]
+  companyId: string
 }
 
 @Component({
@@ -18,7 +19,7 @@ export interface DataModel {
   styleUrls: ['./sub-grade-registration.component.scss'],
 })
 export class SubGradeRegistrationComponent {
-  @Input() dataSelect: DataModel = { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] }
+  @Input() dataSelect: DataModel = { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [], companyId: '' }
   @Output() sendDataSelect: EventEmitter<DataModel> = new EventEmitter<DataModel>();
   competencyGrade: { select: CompetencyGradeModel, dataList: { check: boolean, data: CompetencyGradeModel }[] } = { select: new MyCompetencyGradeModel({}), dataList: [] }
   currentPage = 1;

src/app/components/performance-evaluation/supervisor-evaluation/supervisor-evaluation.component.html

@@ -36,12 +36,12 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="px-1">
+                        <!-- <div class="px-1">
                             <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
                                 <i class="ti ti-book fs-l"></i>
                                 Help
                             </button>
-                        </div>
+                        </div> -->
                     </div>
                 </div>
                 <div class="w-full min-height-50px justify-between items-center py-2">

src/app/shared/services/bu1.service.ts

@@ -21,7 +21,7 @@ export class Bu1Service {
   post(body: Bu1Model): Observable<AlertModel> {
     return this.http.post<AlertModel>(this.urlApi, body)
   }
-  delete(body: Bu1Model): Observable<AlertModel> {
+  delete(body: Bu1Model[]): Observable<AlertModel> {
     const options = {
       headers: new HttpHeaders({
         "Content-Type": "application/json",

src/app/shared/services/bu2.service.ts

@@ -21,7 +21,7 @@ export class Bu2Service {
     post(body: Bu2Model): Observable<AlertModel> {
       return this.http.post<AlertModel>(this.urlApi, body)
     }
-    delete(body: Bu2Model): Observable<AlertModel> {
+    delete(body: Bu2Model[]): Observable<AlertModel> {
       const options = {
         headers: new HttpHeaders({
           "Content-Type": "application/json",

src/app/shared/services/bu3.service.ts

@@ -21,7 +21,7 @@ import { AlertModel } from '../model/alert.model';
     post(body: Bu3Model): Observable<AlertModel> {
       return this.http.post<AlertModel>(this.urlApi, body)
     }
-    delete(body: Bu3Model): Observable<AlertModel> {
+    delete(body: Bu3Model[]): Observable<AlertModel> {
       const options = {
         headers: new HttpHeaders({
           "Content-Type": "application/json",

src/app/shared/services/bu4.service.ts

@@ -21,7 +21,7 @@ export class Bu4Service {
     post(body: Bu4Model): Observable<AlertModel> {
         return this.http.post<AlertModel>(this.urlApi, body)
     }
-    delete(body: Bu4Model): Observable<AlertModel> {
+    delete(body: Bu4Model[]): Observable<AlertModel> {
         const options = {
             headers: new HttpHeaders({
                 "Content-Type": "application/json",

src/app/shared/services/bu5.service.ts

@@ -21,7 +21,7 @@ export class Bu5Service {
     post(body: Bu5Model): Observable<AlertModel> {
       return this.http.post<AlertModel>(this.urlApi, body)
     }
-    delete(body: Bu5Model): Observable<AlertModel> {
+    delete(body: Bu5Model[]): Observable<AlertModel> {
       const options = {
         headers: new HttpHeaders({
           "Content-Type": "application/json",

src/app/shared/services/bu6.service.ts

@@ -21,7 +21,7 @@ export class Bu6Service {
     post(body: Bu6Model): Observable<AlertModel> {
         return this.http.post<AlertModel>(this.urlApi, body)
     }
-    delete(body: Bu6Model): Observable<AlertModel> {
+    delete(body: Bu6Model[]): Observable<AlertModel> {
         const options = {
             headers: new HttpHeaders({
                 "Content-Type": "application/json",

src/app/shared/services/bu7.service.ts

@@ -21,7 +21,7 @@ export class Bu7Service {
     post(body: Bu7Model): Observable<AlertModel> {
         return this.http.post<AlertModel>(this.urlApi, body)
     }
-    delete(body: Bu7Model): Observable<AlertModel> {
+    delete(body: Bu7Model[]): Observable<AlertModel> {
         const options = {
             headers: new HttpHeaders({
                 "Content-Type": "application/json",