Skip to content

M
myAppraisal
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 @@
</table>
</div>
</div>
<div class="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>
<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>
<div class="overflow-auto rounded-top-0.65rem px-2rem p-2">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead class="height-50px">
<tr class="font-size-12px">
<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||l">
<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">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</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 class="overflow-auto rounded-top-0.65rem px-2rem p-2">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead class="height-50px">
<tr class="font-size-12px">
<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||l">
<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">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!appraisalPms.loading&&!appraisalPmsFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!appraisalPms.loading&&appraisalPmsFilter().length">
<!-- <tr *ngFor="let item of appraisalPmsFilter();let i = index">
<td class="flex justify-center items-center">
{{item.data.masfromEvaluationRound.evaluationRoundId}}
</td>
<td>
{{item.data.masfromEvaluationRound.tdesc}}
</td>
<td>
{{convertDate(item.data.masfromEvaluationRound.apsPeriodStart)}}
</td>
<td>
{{convertDate(item.data.masfromEvaluationRound.apsPeriodEnd)}}
</td>
<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>
</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>
</td>
</tr>
</tbody>
<tbody *ngIf="!appraisalPms.loading&&!appraisalPmsFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!appraisalPms.loading&&appraisalPmsFilter().length">
<!-- <tr *ngFor="let item of appraisalPmsFilter();let i = index">
<td class="flex justify-center items-center">
{{item.data.masfromEvaluationRound.evaluationRoundId}}
</td>
<td>
{{item.data.masfromEvaluationRound.tdesc}}
</td>
<td>
{{convertDate(item.data.masfromEvaluationRound.apsPeriodStart)}}
</td>
<td>
{{convertDate(item.data.masfromEvaluationRound.apsPeriodEnd)}}
</td>
<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>
<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>
......
src/app/components/performance-evaluation/supervisor-evaluation/supervisor-evaluation.component.html
......@@ -19,7 +19,7 @@
</nav>
</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)"
role="tabpanel" [class.hidden]="!f">
<div class="header-title-type p-0 px-2rem">
......@@ -192,6 +192,44 @@
</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>
</ng-container>
......
src/assets/css/style.css
......@@ -25010,10 +25010,22 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
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;
}
\ 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