Skip to content

M
mySkill-x
Commit ccdcd2f3 by Nattana Chaiyamat
Options

คำอธิบายสถานะของปุ่ม เเต่ละสี

parent 0e709449
Showing with 154 additions and 69 deletions
src/app/components/performance-evaluation/self-evaluation/self-evaluation.component.html
...@@ -132,75 +132,111 @@ ...@@ -132,75 +132,111 @@
</table> </table>
</div> </div>
</div> </div>
<div class="pb-2"> <div class="w-full min-height-50px justify-between items-center pb-2">
<div class="w-full min-height-50px justify-between items-center pb-2"> <div class="px-2rem py-3 bg-soft-secondary font-size-18px font-weight-700 text-primary">
<div class="px-2rem py-3 bg-soft-secondary font-size-18px font-weight-700 text-primary"> รายละเอียดประเมินผลงานการปฏิบัติงาน
รายละเอียดประเมินผลงานการปฏิบัติงาน
</div>
</div> </div>
<div class="overflow-auto rounded-top-0.65rem px-2rem p-2"> </div>
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover"> <div class="overflow-auto rounded-top-0.65rem px-2rem p-2">
<thead class="height-50px"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<tr class="font-size-12px"> <thead class="height-50px">
<ng-container <tr class="font-size-12px">
*ngFor="let item of ['รหัส','ชื่อเอกสาร','วันที่เริ่มต้น','วันที่สิ้นสุด','สถานะ','การจัดการ']; let f = first; let l = last"> <ng-container
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary" *ngFor="let item of ['รหัส','ชื่อเอกสาร','วันที่เริ่มต้น','วันที่สิ้นสุด','สถานะ','การจัดการ']; let f = first; let l = last">
[class.!text-center]="f||l"> <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
<span class="font-size-12px font-weight-700">{{ item }}</span> [class.!text-center]="f||l">
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l"> <span class="font-size-12px font-weight-700">{{ item }}</span>
<i class="ti ti-dots-vertical fs-l"></i> <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
</div> <i class="ti ti-dots-vertical fs-l"></i>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="appraisalPms.loading">
<tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1"
role="status" aria-label="loading">
<span class="sr-only">Loading...</span>
</div> </div>
</td> </th>
</tr> </ng-container>
</tbody> </tr>
<tbody *ngIf="!appraisalPms.loading&&!appraisalPmsFilter().length"> </thead>
<tr> <tbody *ngIf="appraisalPms.loading">
<td class="text-center" colspan="100%"> <tr>
ไม่พบข้อมูล <td class="text-center" colspan="100%">
</td> <div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1"
</tr> role="status" aria-label="loading">
</tbody> <span class="sr-only">Loading...</span>
<tbody *ngIf="!appraisalPms.loading&&appraisalPmsFilter().length"> </div>
<!-- <tr *ngFor="let item of appraisalPmsFilter();let i = index"> </td>
<td class="flex justify-center items-center"> </tr>
{{item.data.masfromEvaluationRound.evaluationRoundId}} </tbody>
</td> <tbody *ngIf="!appraisalPms.loading&&!appraisalPmsFilter().length">
<td> <tr>
{{item.data.masfromEvaluationRound.tdesc}} <td class="text-center" colspan="100%">
</td> ไม่พบข้อมูล
<td> </td>
{{convertDate(item.data.masfromEvaluationRound.apsPeriodStart)}} </tr>
</td> </tbody>
<td> <tbody *ngIf="!appraisalPms.loading&&appraisalPmsFilter().length">
{{convertDate(item.data.masfromEvaluationRound.apsPeriodEnd)}} <!-- <tr *ngFor="let item of appraisalPmsFilter();let i = index">
</td> <td class="flex justify-center items-center">
<td> {{item.data.masfromEvaluationRound.evaluationRoundId}}
{{item.data.masfromStatusType.tdesc}} </td>
</td> <td>
<td class="flex justify-center items-center"> {{item.data.masfromEvaluationRound.tdesc}}
<span class="rounded-md bg-success text-white px-3 py-1 cursor-pointer"> </td>
ประเมิน <td>
</span> {{convertDate(item.data.masfromEvaluationRound.apsPeriodStart)}}
</td> </td>
</tr> --> <td>
</tbody> {{convertDate(item.data.masfromEvaluationRound.apsPeriodEnd)}}
</table> </td>
</div> <td>
{{item.data.masfromStatusType.tdesc}}
</td>
<td class="flex justify-center items-center">
<span class="rounded-md bg-success text-white px-3 py-1 cursor-pointer">
ประเมิน
</span>
</td>
</tr> -->
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<ng-container *ngIf="appraisalCompentency.dataList.length">
<div class="min-height-50px justify-between items-center py-2 pl-2rem" style="width: 30%;">
<div class="py-3 bg-soft-secondary font-size-18px font-weight-700 text-primary text-center">
หมายเหตุ
</div>
</div>
<div class="min-height-50px justify-between items-center py-2 pl-2rem" style="width: 30%;">
<div class="ti-pagination">
<button type="button" style="width: 95px;"
class="ti-btn rounded-sm ti-btn-soft-mute cursor-default pr-1">
ปุ่มสีเทา
</button>
<div class="font-size-16px text-secondary">หมายถึง ยังไม่ถึงขั้นตอนดำเนินการ</div>
</div>
<div class="ti-pagination">
<button type="button" style="width: 95px;"
class="ti-btn rounded-sm ti-btn-soft-secondary cursor-default pr-1">
ปุ่มสีฟ้า
</button>
<div class="font-size-16px text-secondary">หมายถึง รอดำเนินการ</div>
</div>
<div class="ti-pagination">
<button type="button" style="width: 95px;"
class="ti-btn rounded-sm ti-btn-soft-warning cursor-default pr-1">
ปุ่มสีเหลือง
</button>
<div class="font-size-16px text-secondary">หมายถึง อยู่ระหว่างดำเนินการ</div>
</div>
<div class="ti-pagination">
<button type="button" style="width: 95px;"
class="ti-btn rounded-sm ti-btn-soft-success cursor-default pr-1">
ปุ่มสีเขียว
</button>
<div class="font-size-16px text-secondary">หมายถึง ดำเนินการเสร็จสิ้น</div>
</div>
</div>
</ng-container>
</ng-template> </ng-template>
......
src/app/components/performance-evaluation/supervisor-evaluation/supervisor-evaluation.component.html
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</nav> </nav>
</div> </div>
</div> </div>
<div class="pt-50px pb-2rem" *ngIf="subordinate.dataList.length"> <div class="pt-50px" *ngIf="subordinate.dataList.length">
<div *ngFor="let item of subordinate.dataList; let i=index;let f=first" [id]="'underline-'+(i+1)" <div *ngFor="let item of subordinate.dataList; let i=index;let f=first" [id]="'underline-'+(i+1)"
role="tabpanel" [class.hidden]="!f"> role="tabpanel" [class.hidden]="!f">
<div class="header-title-type p-0 px-2rem"> <div class="header-title-type p-0 px-2rem">
...@@ -192,6 +192,44 @@ ...@@ -192,6 +192,44 @@
</div> </div>
</div> </div>
</div> </div>
<ng-container *ngIf="subordinate.dataList.length">
<div class="min-height-50px justify-between items-center py-2 pl-2rem" style="width: 30%;">
<div class="py-3 bg-soft-secondary font-size-18px font-weight-700 text-primary text-center">
หมายเหตุ
</div>
</div>
<div class="min-height-50px justify-between items-center py-2 pl-2rem" style="width: 30%;">
<div class="ti-pagination">
<button type="button" style="width: 95px;"
class="ti-btn rounded-sm ti-btn-soft-mute cursor-default pr-1">
ปุ่มสีเทา
</button>
<div class="font-size-16px text-secondary">หมายถึง ยังไม่ถึงขั้นตอนดำเนินการ</div>
</div>
<div class="ti-pagination">
<button type="button" style="width: 95px;"
class="ti-btn rounded-sm ti-btn-soft-secondary cursor-default pr-1">
ปุ่มสีฟ้า
</button>
<div class="font-size-16px text-secondary">หมายถึง รอดำเนินการ</div>
</div>
<div class="ti-pagination">
<button type="button" style="width: 95px;"
class="ti-btn rounded-sm ti-btn-soft-warning cursor-default pr-1">
ปุ่มสีเหลือง
</button>
<div class="font-size-16px text-secondary">หมายถึง อยู่ระหว่างดำเนินการ</div>
</div>
<div class="ti-pagination">
<button type="button" style="width: 95px;"
class="ti-btn rounded-sm ti-btn-soft-success cursor-default pr-1">
ปุ่มสีเขียว
</button>
<div class="font-size-16px text-secondary">หมายถึง ดำเนินการเสร็จสิ้น</div>
</div>
</div>
</ng-container>
</div> </div>
</ng-container> </ng-container>
......
src/assets/css/style.css
...@@ -25010,10 +25010,22 @@ div:where(.swal2-container) div:where(.swal2-validation-message) { ...@@ -25010,10 +25010,22 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
background-color: white !important; background-color: white !important;
} }
.align-self-center{ .align-self-center {
align-self: center align-self: center;
} }
.user-select-none{ .user-select-none {
user-select: none; user-select: none;
} }
\ No newline at end of file
.w-1\/4 {
width: 25%;
}
.ti-btn-soft-mute {
background-color: rgb(0 0 0 / 0.2);
}
.ti-btn-soft-mute:hover {
background-color: rgb(0 0 0 / 0.5);
color: white
}
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