Commit 7ec12de4 by Nakarin Luankla

UPDATE ย้ายช่องปุ่ม checkbox

parent 858f19bd
...@@ -8,12 +8,12 @@ ...@@ -8,12 +8,12 @@
{{numDataListChecked}} Selected</label> {{numDataListChecked}} Selected</label>
</div> </div>
<div class="mx-1 flex items-center"> <div class="mx-1 flex items-center">
<button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" id="checkbox"
class="focus:ring-2 focus:ring-primary rounded-sm flex item-center"> class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
<i class="fs-l transition-all duration-200" <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> [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
</button> </button>
<label class="text-sm text-gray-500 ml-2">Select All</label> <label class="text-sm text-gray-500 ml-2" for="checkbox">Select All</label>
</div> </div>
</div> </div>
...@@ -70,10 +70,10 @@ ...@@ -70,10 +70,10 @@
<thead> <thead>
<tr> <tr>
<ng-container <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"> <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> <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> <i class="ti ti-dots-vertical fs-l"></i>
</div> </div>
</th> </th>
...@@ -104,8 +104,10 @@ ...@@ -104,8 +104,10 @@
<input type="checkbox" class="ti-form-checkbox cursor-pointer" <input type="checkbox" class="ti-form-checkbox cursor-pointer"
id="checkbox-{{item.data.competencyCourseId}}" [(ngModel)]="item.check" id="checkbox-{{item.data.competencyCourseId}}" [(ngModel)]="item.check"
(change)="dataListCheck()"> (change)="dataListCheck()">
<label
for="checkbox-{{item.data.competencyCourseId}}">&nbsp;{{item.data.competencyCourseId}}</label> </td>
<td class="text-center">
<label for="checkbox-{{item.data.competencyCourseId}}">&nbsp;{{item.data.competencyCourseId}}</label>
</td> </td>
<td>{{item.data.tdesc}}</td> <td>{{item.data.tdesc}}</td>
<td class="flex justify-center"> <td class="flex justify-center">
......
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
</div> </div>
<div class="page px-rem"> <div class="page px-rem">
<div class="overflow-auto rounded-top-0.65rem"> <div class="overflow-auto table-bordered rounded-top-0.65rem">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead class="height-50px"> <thead class="height-50px">
<tr class="font-size-12px"> <tr class="font-size-12px">
......
...@@ -9,12 +9,12 @@ ...@@ -9,12 +9,12 @@
{{numDataListChecked}} Selected</label> {{numDataListChecked}} Selected</label>
</div> </div>
<div class="mx-1 flex items-center"> <div class="mx-1 flex items-center">
<button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" id="checkbox"
class="focus:ring-2 focus:ring-primary rounded-sm flex item-center"> class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
<i class="fs-l transition-all duration-200" <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> [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
</button> </button>
<label class="text-sm text-gray-500 ml-2">Select All</label> <label class="text-sm text-gray-500 ml-2" for="checkbox">Select All</label>
</div> </div>
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
...@@ -58,9 +58,8 @@ ...@@ -58,9 +58,8 @@
<thead class="height-50px"> <thead class="height-50px">
<tr class="font-size-12px"> <tr class="font-size-12px">
<ng-container <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" <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
[class.!text-center]="f||l">
<span class="font-size-12px font-weight-700">{{ item }}</span> <span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && !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> <i class="ti ti-dots-vertical fs-l"></i>
...@@ -82,6 +81,8 @@ ...@@ -82,6 +81,8 @@
<td class="text-center"> <td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" [(ngModel)]="item.check" <input type="checkbox" class="ti-form-checkbox cursor-pointer" [(ngModel)]="item.check"
(ngModelChange)="dataListCheck()" id="checkbox-{{item.code}}"> (ngModelChange)="dataListCheck()" id="checkbox-{{item.code}}">
</td>
<td class="text-center">
<label for="checkbox-{{item.code}}">&nbsp;{{item.code}}</label> <label for="checkbox-{{item.code}}">&nbsp;{{item.code}}</label>
</td> </td>
<td>{{item.tdesc}}</td> <td>{{item.tdesc}}</td>
......
...@@ -8,12 +8,12 @@ ...@@ -8,12 +8,12 @@
{{numDataListChecked}} Selected</label> {{numDataListChecked}} Selected</label>
</div> </div>
<div class="mx-1 flex items-center"> <div class="mx-1 flex items-center">
<button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" id="checkbox"
class="focus:ring-2 focus:ring-primary rounded-sm flex item-center"> class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
<i class="fs-l transition-all duration-200" <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> [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
</button> </button>
<label class="text-sm text-gray-500 ml-2">Select All</label> <label class="text-sm text-gray-500 ml-2" for="checkbox">Select All</label>
</div> </div>
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
...@@ -69,10 +69,10 @@ ...@@ -69,10 +69,10 @@
<thead> <thead>
<tr> <tr>
<ng-container <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"> <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> <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> <i class="ti ti-dots-vertical fs-l"></i>
</div> </div>
</th> </th>
...@@ -102,6 +102,8 @@ ...@@ -102,6 +102,8 @@
<td class="text-center"> <td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.id}}" <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.id}}"
[(ngModel)]="item.check" (change)="dataListCheck()"> [(ngModel)]="item.check" (change)="dataListCheck()">
</td>
<td class="text-center">
<label for="checkbox-{{item.data.id}}">&nbsp;{{item.data.id}}</label> <label for="checkbox-{{item.data.id}}">&nbsp;{{item.data.id}}</label>
</td> </td>
<td>{{item.data.name}}</td> <td>{{item.data.name}}</td>
......
...@@ -8,12 +8,12 @@ ...@@ -8,12 +8,12 @@
{{numDataListChecked}} Selected</label> {{numDataListChecked}} Selected</label>
</div> </div>
<div class="mx-1 flex items-center"> <div class="mx-1 flex items-center">
<button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" id="checkbox"
class="focus:ring-2 focus:ring-primary rounded-sm flex item-center"> class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
<i class="fs-l transition-all duration-200" <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> [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
</button> </button>
<label class="text-sm text-gray-500 ml-2">Select All</label> <label class="text-sm text-gray-500 ml-2" for="checkbox">Select All</label>
</div> </div>
</div> </div>
...@@ -69,10 +69,10 @@ ...@@ -69,10 +69,10 @@
<thead> <thead>
<tr> <tr>
<ng-container <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"> <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> <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> <i class="ti ti-dots-vertical fs-l"></i>
</div> </div>
</th> </th>
...@@ -102,6 +102,8 @@ ...@@ -102,6 +102,8 @@
<td class="text-center"> <td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.id}}" <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.id}}"
[(ngModel)]="item.check" (change)="dataListCheck()"> [(ngModel)]="item.check" (change)="dataListCheck()">
</td>
<td class="text-center">
<label for="checkbox-{{item.data.id}}">&nbsp;{{item.data.id}}</label> <label for="checkbox-{{item.data.id}}">&nbsp;{{item.data.id}}</label>
</td> </td>
<td>{{item.data.name}}</td> <td>{{item.data.name}}</td>
......
...@@ -8,12 +8,12 @@ ...@@ -8,12 +8,12 @@
{{numDataListChecked}} Selected</label> {{numDataListChecked}} Selected</label>
</div> </div>
<div class="mx-1 flex items-center"> <div class="mx-1 flex items-center">
<button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" id="checkbox"
class="focus:ring-2 focus:ring-primary rounded-sm flex item-center"> class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
<i class="fs-l transition-all duration-200" <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> [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
</button> </button>
<label class="text-sm text-gray-500 ml-2">Select All</label> <label class="text-sm text-gray-500 ml-2" for="checkbox">Select All</label>
</div> </div>
</div> </div>
...@@ -69,10 +69,10 @@ ...@@ -69,10 +69,10 @@
<thead> <thead>
<tr> <tr>
<ng-container <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"> <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> <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> <i class="ti ti-dots-vertical fs-l"></i>
</div> </div>
</th> </th>
...@@ -103,6 +103,8 @@ ...@@ -103,6 +103,8 @@
<input type="checkbox" class="ti-form-checkbox cursor-pointer" <input type="checkbox" class="ti-form-checkbox cursor-pointer"
id="checkbox-{{item.data.assessmentId}}" [(ngModel)]="item.check" id="checkbox-{{item.data.assessmentId}}" [(ngModel)]="item.check"
(ngModelChange)="dataListCheck()"> (ngModelChange)="dataListCheck()">
</td>
<td class="text-center">
<label for="checkbox-{{item.data.assessmentId}}">&nbsp;{{item.data.assessmentId}}</label> <label for="checkbox-{{item.data.assessmentId}}">&nbsp;{{item.data.assessmentId}}</label>
</td> </td>
<td>{{item.data.tdesc}}</td> <td>{{item.data.tdesc}}</td>
......
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
</div> </div>
<div class="page px-rem"> <div class="page px-rem">
<div class="overflow-auto rounded-top-0.65rem"> <div class="overflow-auto table-bordered rounded-top-0.65rem">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead class="height-50px"> <thead class="height-50px">
<tr class="font-size-12px"> <tr class="font-size-12px">
......
...@@ -9,12 +9,12 @@ ...@@ -9,12 +9,12 @@
{{numDataListChecked}} Selected</label> {{numDataListChecked}} Selected</label>
</div> </div>
<div class="mx-1 flex items-center"> <div class="mx-1 flex items-center">
<button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" id="checkbox"
class="focus:ring-2 focus:ring-primary rounded-sm flex item-center"> class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
<i class="fs-l transition-all duration-200" <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> [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
</button> </button>
<label class="text-sm text-gray-500 ml-2">Select All</label> <label class="text-sm text-gray-500 ml-2" for="checkbox">Select All</label>
</div> </div>
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
<thead class="height-50px"> <thead class="height-50px">
<tr class="font-size-12px"> <tr class="font-size-12px">
<ng-container <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" <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l"> [class.!text-center]="f||l">
<span class="font-size-12px font-weight-700">{{ item }}</span> <span class="font-size-12px font-weight-700">{{ item }}</span>
...@@ -82,6 +82,8 @@ ...@@ -82,6 +82,8 @@
<td class="text-center"> <td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" [(ngModel)]="item.check" <input type="checkbox" class="ti-form-checkbox cursor-pointer" [(ngModel)]="item.check"
(ngModelChange)="dataListCheck()" id="checkbox-{{item.code}}"> (ngModelChange)="dataListCheck()" id="checkbox-{{item.code}}">
</td>
<td class="text-center">
<label for="checkbox-{{item.code}}">&nbsp;{{item.code}}</label> <label for="checkbox-{{item.code}}">&nbsp;{{item.code}}</label>
</td> </td>
<td>{{item.tdesc}}</td> <td>{{item.tdesc}}</td>
......
...@@ -8,12 +8,12 @@ ...@@ -8,12 +8,12 @@
{{numDataListChecked}} Selected</label> {{numDataListChecked}} Selected</label>
</div> </div>
<div class="mx-1 flex items-center"> <div class="mx-1 flex items-center">
<button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" id="checkbox"
class="focus:ring-2 focus:ring-primary rounded-sm flex item-center"> class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
<i class="fs-l transition-all duration-200" <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> [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
</button> </button>
<label class="text-sm text-gray-500 ml-2">Select All</label> <label class="text-sm text-gray-500 ml-2" for="checkbox">Select All</label>
</div> </div>
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
<thead class="height-50px"> <thead class="height-50px">
<tr class="font-size-12px"> <tr class="font-size-12px">
<ng-container <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" <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l"> [class.!text-center]="f||l">
<span class="font-size-12px font-weight-700">{{ item }}</span> <span class="font-size-12px font-weight-700">{{ item }}</span>
...@@ -82,6 +82,8 @@ ...@@ -82,6 +82,8 @@
<td class="text-center"> <td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" [(ngModel)]="item.check" <input type="checkbox" class="ti-form-checkbox cursor-pointer" [(ngModel)]="item.check"
(ngModelChange)="dataListCheck()" id="checkbox-{{item.data.gradeId}}"> (ngModelChange)="dataListCheck()" id="checkbox-{{item.data.gradeId}}">
</td>
<td class="text-center">
<label for="checkbox-{{item.data.gradeId}}">&nbsp;{{item.data.gradeId}}</label> <label for="checkbox-{{item.data.gradeId}}">&nbsp;{{item.data.gradeId}}</label>
</td> </td>
<td style="width: 40%; padding-left: 25px;">{{item.data.tdesc}}</td> <td style="width: 40%; padding-left: 25px;">{{item.data.tdesc}}</td>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment