แยกช่อง check-box

src/app/components/company-components/account-settings/user-settings/user-settings.component.html

@@ -8,12 +8,12 @@
                     {{numDataListChecked}} Selected</label>
             </div>
             <div class="mx-1 flex items-center">
-                <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()"
+                <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>
-                <label class="text-sm text-gray-500 ml-2">Select All</label>
+                <label class="text-sm text-gray-500 ml-2 cursor-pointer" for="check-boxall">Select All</label>
             </div>
         </div>
     </div>
@@ -74,10 +74,10 @@
             <thead>
                 <tr>
                     <ng-container
-                        *ngFor="let item of ['ชื่อล็อคอิน','รหัสพนักงาน','ชื่อ','นามสกุล','สถานะ','การจัดการ']; let f = first; let l = last; let i = index">
+                        *ngFor="let item of ['','ชื่อล็อคอิน','รหัสพนักงาน','ชื่อ','นามสกุล','สถานะ','การจัดการ']; let f = first; let l = last; let i = index">
                         <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !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="!l&&!f">
                                 <i class="ti ti-dots-vertical fs-l"></i>
                             </div>
                         </th>
@@ -106,8 +106,10 @@
                     *ngFor="let item of userListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
                     <td class="text-center">
                         <input type="checkbox" class="ti-form-checkbox cursor-pointer"
-                            id="checkbox-{{item.data.usernameId}}" [(ngModel)]="item.check"
-                            (ngModelChange)="dataListCheck()">
+                        id="checkbox-{{item.data.usernameId}}" [(ngModel)]="item.check"
+                        (ngModelChange)="dataListCheck()">
+                    </td>
+                    <td class="text-center">
                         <label for="checkbox-{{item.data.usernameId}}">&nbsp;{{item.data.usernameId}}</label>
                     </td>
                     <td class="text-center">{{item.data.empId}}</td>

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

@@ -8,12 +8,12 @@
                     {{numDataListChecked}} Selected</label>
             </div>
             <div class="mx-1 flex items-center">
-                <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()"
+                <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>
-                <label class="text-sm text-gray-500 ml-2">Select All</label>
+                <label class="text-sm text-gray-500 ml-2" for="check-boxall" >Select All</label>
             </div>
         </div>
     </div>
@@ -74,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>
@@ -107,6 +107,9 @@
                     <td class="text-center">
                         <input *ngIf="item.data.code!='100'" type="checkbox" class="ti-form-checkbox cursor-pointer"
                             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>

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

@@ -8,12 +8,12 @@
           {{numDataListChecked}} Selected</label>
       </div>
       <div class="mx-1 flex items-center">
-        <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()"
+        <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>
-        <label class="text-sm text-gray-500 ml-2">Select All</label>
+        <label class="text-sm text-gray-500 ml-2" for="check-boxall" >Select All</label>
       </div>
     </div>
   </div>
@@ -81,10 +81,10 @@
         <thead>
           <tr>
             <ng-container
-              *ngFor="let item of ['รหัสพนักงาน','ชื่อ','นามสกุล','ตำแหน่ง','หน่วยงาน','การจัดการ']; let f = first; let l = last; let i = index">
+              *ngFor="let item of ['','รหัสพนักงาน','ชื่อ','นามสกุล','ตำแหน่ง','หน่วยงาน','การจัดการ']; let f = first; let l = last; let i = index">
               <th scope="col" class=" 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="!l&&!f">
                   <i class="ti ti-dots-vertical fs-l"></i>
                 </div>
               </th>
@@ -114,6 +114,8 @@
             <td class="text-center">
               <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.employeeId}}"
                 [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
+            </td>
+            <td class="text-center">
               <label for="checkbox-{{item.data.employeeId}}">&nbsp;{{item.data.employeeId}}</label>
             </td>
             <td>{{item.data.fname}}</td>

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

@@ -8,12 +8,12 @@
                     {{numDataListChecked}} Selected</label>
             </div>
             <div class="mx-1 flex items-center">
-                <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()"
+                <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>
-                <label class="text-sm text-gray-500 ml-2">Select All</label>
+                <label class="text-sm text-gray-500 ml-2" for="check-boxall">Select All</label>
             </div>
         </div>
     </div>
@@ -76,11 +76,11 @@
                 <thead>
                     <tr>
                         <ng-container
-                            *ngFor="let item of ['รหัสประเภทพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
+                            *ngFor="let item of ['','รหัสประเภทพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
                             <th scope="col"
                                 class="relative px-10px py-10px bg-soft-secondary text-primary !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="!l&&!f">
                                     <i class="ti ti-dots-vertical fs-l"></i>
                                 </div>
                             </th>
@@ -111,6 +111,8 @@
                             <input type="checkbox"
                                 class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.codeId}}"
                                 [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
+                        </td>
+                        <td class="text-center">
                             <label for="checkbox-{{item.data.codeId}}">&nbsp;{{item.data.codeId}}</label>
                         </td>
                         <td>{{item.data.tdesc}}</td>

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

@@ -8,12 +8,12 @@
                     {{numDataListChecked}} Selected</label>
             </div>
             <div class="mx-1 flex items-center">
-                <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()"
+                <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>
-                <label class="text-sm text-gray-500 ml-2">Select All</label>
+                <label class="text-sm text-gray-500 ml-2" for="check-boxall">Select All</label>
             </div>
         </div>
     </div>
@@ -74,10 +74,10 @@
             <thead>
                 <tr>
                     <ng-container
-                        *ngFor="let item of ['รหัสกลุ่มพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
+                        *ngFor="let item of ['','รหัสกลุ่มพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
                         <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !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="!l&&!f">
                                 <i class="ti ti-dots-vertical fs-l"></i>
                             </div>
                         </th>
@@ -108,6 +108,8 @@
                         <input type="checkbox" class="ti-form-checkbox cursor-pointer"
                             id="checkbox-{{item.data.groupId}}" [(ngModel)]="item.check"
                             (ngModelChange)="dataListCheck()">
+                    </td>
+                    <td class="text-center">
                         <label for="checkbox-{{item.data.groupId}}">&nbsp;{{item.data.groupId}}</label>
                     </td>
                     <td>{{item.data.tdesc}}</td>

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

@@ -8,12 +8,12 @@
           {{numDataListChecked}} Selected</label>
       </div>
       <div class="mx-1 flex items-center">
-        <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()"
+        <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>
-        <label class="text-sm text-gray-500 ml-2">Select All</label>
+        <label class="text-sm text-gray-500 ml-2" for="check-boxall" >Select All</label>
       </div>
     </div>
   </div>
@@ -75,10 +75,10 @@
         <thead>
           <tr>
             <ng-container
-              *ngFor="let item of ['รหัสระดับพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
+              *ngFor="let item of ['','รหัสระดับพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
               <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !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="!l&&!f">
                   <i class="ti ti-dots-vertical fs-l"></i>
                 </div>
               </th>
@@ -108,6 +108,8 @@
             <td class="text-center">
               <input type="checkbox" class="ti-form-checkbox cursor-pointer"
                 id="checkbox-{{item.data.plId}}" [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
+            </td>
+            <td class="text-center">
               <label for="checkbox-{{item.data.plId}}">&nbsp;{{item.data.plId}}</label>
             </td>
 

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

@@ -8,12 +8,12 @@
                     {{numDataListChecked}} Selected</label>
             </div>
             <div class="mx-1 flex items-center">
-                <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()"
+                <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>
-                <label class="text-sm text-gray-500 ml-2">Select All</label>
+                <label class="text-sm text-gray-500 ml-2" for="check-boxall">Select All</label>
             </div>
         </div>
     </div>
@@ -75,10 +75,10 @@
             <thead>
                 <tr>
                     <ng-container
-                        *ngFor="let item of ['รหัสตำแหน่ง','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
+                        *ngFor="let item of ['','รหัสตำแหน่ง','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
                         <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !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="!l&&!f">
                                 <i class="ti ti-dots-vertical fs-l"></i>
                             </div>
                         </th>
@@ -109,6 +109,9 @@
                         <input type="checkbox" class="ti-form-checkbox cursor-pointer"
                             id="checkbox-{{item.data.positionId}}" [(ngModel)]="item.check"
                             (ngModelChange)="dataListCheck()">
+                    </td>
+                    <td class="text-center">
+                   
                         <label for="checkbox-{{item.data.positionId}}">&nbsp;{{item.data.positionId}}</label>
                     </td>
                     <td>{{item.data.tdesc}}</td>