Skip to content

M
myAppraisal
Commit 92361e77 by Nattana Chaiyamat
Options

รอบการประเมิน competency pms

parent a651bbec
Showing with 468 additions and 55 deletions
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.html
...@@ -32,14 +32,14 @@ ...@@ -32,14 +32,14 @@
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#evaluation-cycle-page-modal" (click)="modalStatus='add';setData()"> data-hs-overlay="#evaluation-cycle-modal" (click)="modalStatus='add';setData()">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
Add Add
</button> </button>
</div> </div>
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md" <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
data-hs-overlay="#evaluation-cycle-page-alert-modal" (click)="modalStatus='deleteGroup';setData()"> data-hs-overlay="#evaluation-cycle-alert-modal" (click)="modalStatus='deleteGroup';setData()">
<i class="ti ti-trash fs-l"></i> <i class="ti ti-trash fs-l"></i>
Delete Delete
</button> </button>
...@@ -91,11 +91,11 @@ ...@@ -91,11 +91,11 @@
<tr <tr
*ngFor="let item of evaluation_cycleListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index"> *ngFor="let item of evaluation_cycleListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center"> <td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.evaluationRoundId}}"
id="checkbox-{{item.data.evaluationRoundId}}" [(ngModel)]="item.check" (ngModelChange)="dataListCheck()"> [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
</td> </td>
<td > <td>
<!-- <i class="ti ti-user cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-person-modal" (click)="openModal('evaluation-cycle-person-modal',item.data.evaluationRoundId)"></i> --> <!-- <i class="ti ti-user cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-modal" (click)="openModal('evaluation-cycle-modal',item.data.evaluationRoundId)"></i> -->
<label for="checkbox-{{item.data.evaluationRoundId}}">&nbsp;{{item.data.evaluationRoundId}}</label> <label for="checkbox-{{item.data.evaluationRoundId}}">&nbsp;{{item.data.evaluationRoundId}}</label>
</td> </td>
<td>{{item.data.tdesc}}</td> <td>{{item.data.tdesc}}</td>
...@@ -136,10 +136,11 @@ ...@@ -136,10 +136,11 @@
</td> </td>
<td class="flex justify-center items-center"> <td class="flex justify-center items-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)"
data-hs-overlay="#evaluation-cycle-page-modal"></i> data-hs-overlay="#evaluation-cycle-modal"></i>
<i class="ti ti-user cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-person-modal" (click)="openModal('evaluation-cycle-person-modal',item.data.evaluationRoundId)"></i> <i class="ti ti-user cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-person-modal"
(click)="openModal('evaluation-cycle-person-modal',item.data.evaluationRoundId)"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="modalStatus='delete';setData(item.data)" <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="modalStatus='delete';setData(item.data)"
data-hs-overlay="#evaluation-cycle-page-alert-modal"></i> data-hs-overlay="#evaluation-cycle-alert-modal"></i>
<!-- <span class="badge text-white m-1" *ngIf="item.data.statusCode.code!='1'" <!-- <span class="badge text-white m-1" *ngIf="item.data.statusCode.code!='1'"
[ngClass]="{'bg-primary':item.data.statusCode.code=='1','bg-gray-400':item.data.statusCode.code!='3'}">ปิดรอบประเมิน</span> [ngClass]="{'bg-primary':item.data.statusCode.code=='1','bg-gray-400':item.data.statusCode.code!='3'}">ปิดรอบประเมิน</span>
<span class="badge text-white m-1 bg-secondary" *ngIf="item.data.statusCode.code=='0'">สร้างแบบฟอร์ม</span> --> <span class="badge text-white m-1 bg-secondary" *ngIf="item.data.statusCode.code=='0'">สร้างแบบฟอร์ม</span> -->
...@@ -206,7 +207,7 @@ ...@@ -206,7 +207,7 @@
</nav> </nav>
</div> </div>
<div id="evaluation-cycle-page-modal" class="hs-overlay hidden ti-modal"> <div id="evaluation-cycle-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)]"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content"> <div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header"> <div class="ti-modal-header">
...@@ -215,7 +216,7 @@ ...@@ -215,7 +216,7 @@
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#evaluation-cycle-page-modal"> data-hs-overlay="#evaluation-cycle-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
...@@ -249,12 +250,14 @@ ...@@ -249,12 +250,14 @@
</div> </div>
</div> </div>
<div class="ti-modal-body padding-16px pt-0 overflow-y-0"> <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" <input type="text" id="input-label" class="ti-form-input w-1/2"
[ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'" [ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'"
[(ngModel)]="dataSelect.evaluationRoundId"> [(ngModel)]="dataSelect.evaluationRoundId">
<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"> <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> <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
...@@ -270,13 +273,35 @@ ...@@ -270,13 +273,35 @@
<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="date" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.apsPeriodEnd"> <input type="date" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.apsPeriodEnd">
<label for="input-label" class="ti-form-label mt-2rem">ระดับพนักงาน (JL)</label>
<div *ngFor="let item of pl.selectList;let i = index;let f=first" [class.mt-2]="!f"
class="col-span-6 sm:col-span-6 ">
<div class="flex">
<div class="relative flex rounded-md">
<input type="text" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" readonly
style="padding-right: 3.5rem;" [(ngModel)]="item.tdesc">
<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 *ngIf="item.plId" type="button" class="flex items-center text-red-500"
(click)="pl.selectIndex=i;selectPl()">
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
(click)="pl.selectIndex=i;modal.search='';searchModalChange(plListFilter())"
data-hs-overlay="#evaluation-cycle-pl-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
</div>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <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" 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="#evaluation-cycle-page-modal"> data-hs-overlay="#evaluation-cycle-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<button type="button" class="ti-btn ti-btn-success" data-hs-overlay="#evaluation-cycle-page-alert-modal" <button type="button" class="ti-btn ti-btn-success" data-hs-overlay="#evaluation-cycle-alert-modal"
[class.ti-btn-disabled]="!dataSelect.evaluationRoundId||!dataSelect.tdesc||!dataSelect.apsyear||!dataSelect.apsPeriodStart||!dataSelect.apsPeriodEnd" [class.ti-btn-disabled]="!dataSelect.evaluationRoundId||!dataSelect.tdesc||!dataSelect.apsyear||!dataSelect.apsPeriodStart||!dataSelect.apsPeriodEnd"
[disabled]="!dataSelect.evaluationRoundId||!dataSelect.tdesc||!dataSelect.apsyear||!dataSelect.apsPeriodStart||!dataSelect.apsPeriodEnd"> [disabled]="!dataSelect.evaluationRoundId||!dataSelect.tdesc||!dataSelect.apsyear||!dataSelect.apsPeriodStart||!dataSelect.apsPeriodEnd">
บันทึกข้อมูล บันทึกข้อมูล
...@@ -287,7 +312,7 @@ ...@@ -287,7 +312,7 @@
</div> </div>
</div> </div>
<div id="evaluation-cycle-page-alert-modal" class="hs-overlay hidden ti-modal"> <div id="evaluation-cycle-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="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"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header"> <div class="ti-modal-header">
...@@ -297,14 +322,14 @@ ...@@ -297,14 +322,14 @@
<div class="flex justify-end"> <div class="flex justify-end">
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'"> <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#evaluation-cycle-page-modal"> data-hs-overlay="#evaluation-cycle-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</ng-container> </ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'"> <ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#evaluation-cycle-page-alert-modal"> data-hs-overlay="#evaluation-cycle-alert-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
...@@ -325,22 +350,22 @@ ...@@ -325,22 +350,22 @@
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'"> <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
<button type="button" <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" 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="#evaluation-cycle-page-modal"> data-hs-overlay="#evaluation-cycle-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#evaluation-cycle-alert-modal"
data-hs-overlay="#evaluation-cycle-page-alert-modal" (click)="addevaluation_cycle()"> (click)="addevaluation_cycle()">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</ng-container> </ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'"> <ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<button type="button" <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" 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="#evaluation-cycle-page-alert-modal"> data-hs-overlay="#evaluation-cycle-alert-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-danger" href="javascript:void(0);" <a class="ti-btn ti-btn-danger" href="javascript:void(0);" data-hs-overlay="#evaluation-cycle-alert-modal"
data-hs-overlay="#evaluation-cycle-page-alert-modal" (click)="deleteevaluation_cycle()"> (click)="deleteevaluation_cycle()">
ลบข้อมูล ลบข้อมูล
</a> </a>
</ng-container> </ng-container>
...@@ -366,7 +391,136 @@ ...@@ -366,7 +391,136 @@
</div> </div>
</div> </div>
<div class="ti-modal-body "> <div class="ti-modal-body ">
<app-edit-evaluation-form *ngIf="evaluationRoundId" [evaluationRoundId]="evaluationRoundId" ></app-edit-evaluation-form> <app-edit-evaluation-form *ngIf="evaluationRoundId"
[evaluationRoundId]="evaluationRoundId"></app-edit-evaluation-form>
</div>
</div>
</div>
</div>
<div id="evaluation-cycle-pl-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">
ข้อมูลระดับพนักงาน (JL)
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#evaluation-cycle-modal">
<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" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name" [(ngModel)]="modal.search"
(ngModelChange)="searchModalChange(plListFilter())">
<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 ['ลำดับ','รหัสระดับพนักงาน (JL)','รายละเอียดฝ่าย(ไทย)','รายละเอียดฝ่าย(อังกฤษ)']; 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="pl.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="!pl.loading&&!plListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!pl.loading&&plListFilter().length">
<tr
*ngFor="let item of plListFilter() | slice:((modal.currentPage-1) * 10) : (((modal.currentPage-1) * 10) + 10);let i = index"
class="cursor-pointer" data-hs-overlay="#evaluation-cycle-modal" (click)="selectPl(item)" >
<td class="flex justify-center">
{{((modal.currentPage-1) * 10)+(i+1)}}
</td>
<td>{{item.plId}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 my-5" *ngIf="modal.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="modal.currentPage = (modal.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of modal.page;let f = first;let l = last">
<ng-container *ngIf="item==3&&modal.currentPage!=1&&modal.currentPage!=2&&modal.currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container
*ngIf="(f||l)||(item==modal.currentPage-1||item==modal.currentPage||item==modal.currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==modal.currentPage"
(click)="modal.currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==modal.page.length-2&&modal.currentPage!=modal.page.length&&modal.currentPage!=modal.page.length-1&&modal.currentPage!=modal.page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="modal.currentPage = (modal.currentPage > modal.page.length-1 ? modal.currentPage: modal.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((modal.currentPage-1) * 10)+1}} to {{plListFilter().length<10 ?plListFilter().length:
(modal.currentPage==modal.page.length ? ((modal.currentPage * 10) - ((modal.currentPage * 10) -
plListFilter().length) ) :(modal.currentPage * 10) ) }} of {{plListFilter().length}} items</span>
</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="#evaluation-cycle-modal">
ย้อนกลับ
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
......
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.ts
...@@ -4,6 +4,8 @@ import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/mod ...@@ -4,6 +4,8 @@ import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/mod
import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service'; import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service';
import { MyStatusCodeModel, StatusCodeModel } from 'src/app/shared/model/status-code.model'; import { MyStatusCodeModel, StatusCodeModel } from 'src/app/shared/model/status-code.model';
import { EvaluationAssessmentService } from 'src/app/shared/services/evaluation-assessment.service'; import { EvaluationAssessmentService } from 'src/app/shared/services/evaluation-assessment.service';
import { PLService } from 'src/app/shared/services/pl.service';
import { MyPLModel, PLModel } from 'src/app/shared/model/pl.model';
export interface DataModel { export interface DataModel {
evaluationRoundId: string; evaluationRoundId: string;
...@@ -14,7 +16,11 @@ export interface DataModel { ...@@ -14,7 +16,11 @@ export interface DataModel {
apsPeriodEnd: string; apsPeriodEnd: string;
statusCode: StatusCodeModel; statusCode: StatusCodeModel;
} }
export interface DataModal {
search: string,
currentPage: number,
page: number[]
}
@Component({ @Component({
selector: 'app-evaluation-cycle', selector: 'app-evaluation-cycle',
templateUrl: './evaluation-cycle.component.html', templateUrl: './evaluation-cycle.component.html',
...@@ -40,26 +46,69 @@ export class EvaluationCycleComponent { ...@@ -40,26 +46,69 @@ export class EvaluationCycleComponent {
evaluationRoundId = '' evaluationRoundId = ''
private unlisten!: () => void; private unlisten!: () => void;
modal: DataModal = {
search: "",
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1)
}
pl: { loading: boolean, selectList: PLModel[], selectIndex: number, dataList: PLModel[] } = { loading: false, selectList: [new MyPLModel()], selectIndex: -1, dataList: [] }
constructor(private evaluationCycleService: EvaluationCycleService, constructor(private evaluationCycleService: EvaluationCycleService,
private toastr: ToastrService, private toastr: ToastrService,
private cdr: ChangeDetectorRef, private cdr: ChangeDetectorRef,
private renderer: Renderer2 private renderer: Renderer2,
private pLService: PLService
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.getEvaluationCycleList() this.getEvaluationCycleList()
this.unlisten = this.renderer.listen('document', 'keydown', (event) => { this.unlisten = this.renderer.listen('document', 'keydown', (event) => {
if (event.key === 'Escape') { if (event.key === 'Escape') {
this.evaluationRoundId='' this.evaluationRoundId = ''
} }
}); });
this.getPlList()
} }
ngOnDestroy() { ngOnDestroy() {
if (this.unlisten) { if (this.unlisten) {
this.unlisten(); // เรียกใช้งานจริง ๆ เพื่อลบ event listener this.unlisten(); // เรียกใช้งานจริง ๆ เพื่อลบ event listener
} }
} }
getPlList() {
this.pl.loading = false
this.pLService.getList().subscribe({
next: response => {
this.pl.dataList = response.map((x: any) => new MyPLModel(x))
this.pl.loading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.pl.loading = false
this.cdr.detectChanges()
}
})
}
plListFilter() {
return this.pl.dataList.filter(x =>
(x.plId.toLowerCase().includes(this.modal.search.toLowerCase()) ||
x.tdesc.toLowerCase().includes(this.modal.search.toLowerCase()) ||
x.edesc.toLowerCase().includes(this.modal.search.toLowerCase())) &&
!this.pl.selectList.some(y => y.plId == x.plId)
);
}
selectPl(data?: PLModel) {
if (!data) {
this.pl.selectList.splice(this.pl.selectIndex, 1);
return;
}
this.pl.selectList[this.pl.selectIndex] = new MyPLModel(data);
if (this.pl.selectIndex === this.pl.selectList.length - 1) {
this.pl.selectList.push(new MyPLModel());
}
}
getEvaluationCycleList() { getEvaluationCycleList() {
this.dataLoading = true this.dataLoading = true
this.evaluationCycleService.getList().subscribe({ this.evaluationCycleService.getList().subscribe({
...@@ -185,23 +234,27 @@ export class EvaluationCycleComponent { ...@@ -185,23 +234,27 @@ export class EvaluationCycleComponent {
} else if (this.modalStatus == 'edit') { } else if (this.modalStatus == 'edit') {
this.setData(new MyEvaluationCycleModel({ evaluationRoundId: this.dataSelect.evaluationRoundId })) this.setData(new MyEvaluationCycleModel({ evaluationRoundId: this.dataSelect.evaluationRoundId }))
} }
this.pl.selectList = [new MyPLModel()]
} }
openModal(id: string,evaluationRoundId:string) { openModal(id: string, evaluationRoundId: string) {
this.evaluationRoundId = '' this.evaluationRoundId = ''
if(id == 'evaluation-cycle-person-modal'){ if (id == 'evaluation-cycle-person-modal') {
this.evaluationRoundId = evaluationRoundId this.evaluationRoundId = evaluationRoundId
this.evaluationRoundIdChange.emit(evaluationRoundId) this.evaluationRoundIdChange.emit(evaluationRoundId)
setTimeout(() => { setTimeout(() => {
document.getElementById(id)?.classList.add('open'); document.getElementById(id)?.classList.add('open');
document.getElementById(id)?.classList.remove('hidden'); document.getElementById(id)?.classList.remove('hidden');
document.getElementById(id)?.setAttribute('aria-overlay', 'false'); document.getElementById(id)?.setAttribute('aria-overlay', 'false');
}, 10); }, 10);
} }
} }
searchModalChange(dataList: any[]) {
this.modal.currentPage = 1
this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
}
} }
src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.html
...@@ -32,14 +32,14 @@ ...@@ -32,14 +32,14 @@
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#management-evaluation-cycle-page-modal" (click)="modalStatus='add';setData()"> data-hs-overlay="#management-evaluation-cycle-modal" (click)="modalStatus='add';setData()">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
Add Add
</button> </button>
</div> </div>
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md" <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
data-hs-overlay="#management-evaluation-cycle-page-alert-modal" (click)="modalStatus='deleteGroup';setData()"> data-hs-overlay="#management-evaluation-cycle-alert-modal" (click)="modalStatus='deleteGroup';setData()">
<i class="ti ti-trash fs-l"></i> <i class="ti ti-trash fs-l"></i>
Delete Delete
</button> </button>
...@@ -136,11 +136,11 @@ ...@@ -136,11 +136,11 @@
</td> </td>
<td class="flex justify-center items-center"> <td class="flex justify-center items-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)"
data-hs-overlay="#management-evaluation-cycle-page-modal"></i> data-hs-overlay="#management-evaluation-cycle-modal"></i>
<i class="ti ti-user cursor-pointer i-gray fs-l px-1" <i class="ti ti-user cursor-pointer i-gray fs-l px-1"
data-hs-overlay="#management-evaluation-cycle-person-modal"></i> data-hs-overlay="#management-evaluation-cycle-page-modal"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="modalStatus='delete';setData(item.data)" <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="modalStatus='delete';setData(item.data)"
data-hs-overlay="#management-evaluation-cycle-page-alert-modal"></i> data-hs-overlay="#management-evaluation-cycle-alert-modal"></i>
<!-- <span class="badge text-white m-1" *ngIf="item.data.statusCode.code!='1'" <!-- <span class="badge text-white m-1" *ngIf="item.data.statusCode.code!='1'"
[ngClass]="{'bg-primary':item.data.statusCode.code=='1','bg-gray-400':item.data.statusCode.code!='3'}">ปิดรอบประเมิน</span> [ngClass]="{'bg-primary':item.data.statusCode.code=='1','bg-gray-400':item.data.statusCode.code!='3'}">ปิดรอบประเมิน</span>
<span class="badge text-white m-1 bg-secondary" *ngIf="item.data.statusCode.code=='0'">สร้างแบบฟอร์ม</span> --> <span class="badge text-white m-1 bg-secondary" *ngIf="item.data.statusCode.code=='0'">สร้างแบบฟอร์ม</span> -->
...@@ -207,7 +207,7 @@ ...@@ -207,7 +207,7 @@
</nav> </nav>
</div> </div>
<div id="management-evaluation-cycle-page-modal" class="hs-overlay hidden ti-modal"> <div id="management-evaluation-cycle-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)]"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content"> <div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header"> <div class="ti-modal-header">
...@@ -216,7 +216,7 @@ ...@@ -216,7 +216,7 @@
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#management-evaluation-cycle-page-modal"> data-hs-overlay="#management-evaluation-cycle-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
...@@ -250,12 +250,14 @@ ...@@ -250,12 +250,14 @@
</div> </div>
</div> </div>
<div class="ti-modal-body padding-16px pt-0 overflow-y-0"> <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" <input type="text" id="input-label" class="ti-form-input w-1/2"
[ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'" [ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'"
[(ngModel)]="dataSelect.pmsEvaluationRoundId"> [(ngModel)]="dataSelect.pmsEvaluationRoundId">
<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"> <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> <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
...@@ -271,14 +273,36 @@ ...@@ -271,14 +273,36 @@
<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="date" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.apsPeriodEnd"> <input type="date" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.apsPeriodEnd">
<label for="input-label" class="ti-form-label mt-2rem">ระดับพนักงาน (JL)</label>
<div *ngFor="let item of pl.selectList;let i = index;let f=first" [class.mt-2]="!f"
class="col-span-6 sm:col-span-6 ">
<div class="flex">
<div class="relative flex rounded-md">
<input type="text" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" readonly
style="padding-right: 3.5rem;" [(ngModel)]="item.tdesc">
<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 *ngIf="item.plId" type="button" class="flex items-center text-red-500"
(click)="pl.selectIndex=i;selectPl()">
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
(click)="pl.selectIndex=i;modal.search='';searchModalChange(plListFilter())"
data-hs-overlay="#management-evaluation-cycle-pl-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
</div>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <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" 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="#management-evaluation-cycle-page-modal"> data-hs-overlay="#management-evaluation-cycle-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<button type="button" class="ti-btn ti-btn-success" <button type="button" class="ti-btn ti-btn-success"
data-hs-overlay="#management-evaluation-cycle-page-alert-modal" data-hs-overlay="#management-evaluation-cycle-alert-modal"
[class.ti-btn-disabled]="!dataSelect.pmsEvaluationRoundId||!dataSelect.tdesc||!dataSelect.apsyear||!dataSelect.apsPeriodStart||!dataSelect.apsPeriodEnd" [class.ti-btn-disabled]="!dataSelect.pmsEvaluationRoundId||!dataSelect.tdesc||!dataSelect.apsyear||!dataSelect.apsPeriodStart||!dataSelect.apsPeriodEnd"
[disabled]="!dataSelect.pmsEvaluationRoundId||!dataSelect.tdesc||!dataSelect.apsyear||!dataSelect.apsPeriodStart||!dataSelect.apsPeriodEnd"> [disabled]="!dataSelect.pmsEvaluationRoundId||!dataSelect.tdesc||!dataSelect.apsyear||!dataSelect.apsPeriodStart||!dataSelect.apsPeriodEnd">
บันทึกข้อมูล บันทึกข้อมูล
...@@ -289,7 +313,7 @@ ...@@ -289,7 +313,7 @@
</div> </div>
</div> </div>
<div id="management-evaluation-cycle-page-alert-modal" class="hs-overlay hidden ti-modal"> <div id="management-evaluation-cycle-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="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"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header"> <div class="ti-modal-header">
...@@ -299,14 +323,14 @@ ...@@ -299,14 +323,14 @@
<div class="flex justify-end"> <div class="flex justify-end">
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'"> <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#management-evaluation-cycle-page-modal"> data-hs-overlay="#management-evaluation-cycle-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</ng-container> </ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'"> <ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#management-evaluation-cycle-page-alert-modal"> data-hs-overlay="#management-evaluation-cycle-alert-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
...@@ -327,22 +351,22 @@ ...@@ -327,22 +351,22 @@
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'"> <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
<button type="button" <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" 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="#management-evaluation-cycle-page-modal"> data-hs-overlay="#management-evaluation-cycle-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#management-evaluation-cycle-page-alert-modal" (click)="addPmsMasfromEvaluation()"> data-hs-overlay="#management-evaluation-cycle-alert-modal" (click)="addPmsMasfromEvaluation()">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</ng-container> </ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'"> <ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<button type="button" <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" 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="#management-evaluation-cycle-page-alert-modal"> data-hs-overlay="#management-evaluation-cycle-alert-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-danger" href="javascript:void(0);" <a class="ti-btn ti-btn-danger" href="javascript:void(0);"
data-hs-overlay="#management-evaluation-cycle-page-alert-modal" (click)="deletePmsMasfromEvaluation()"> data-hs-overlay="#management-evaluation-cycle-alert-modal" (click)="deletePmsMasfromEvaluation()">
ลบข้อมูล ลบข้อมูล
</a> </a>
</ng-container> </ng-container>
...@@ -352,7 +376,7 @@ ...@@ -352,7 +376,7 @@
</div> </div>
</div> </div>
<div id="management-evaluation-cycle-person-modal" class="hs-overlay hidden ti-modal"> <div id="management-evaluation-cycle-page-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="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 w-full rounded-sm shadow-sm"> <div class="max-h-full overflow-hidden ti-modal-content w-full rounded-sm shadow-sm">
<div class="ti-modal-header"> <div class="ti-modal-header">
...@@ -361,7 +385,7 @@ ...@@ -361,7 +385,7 @@
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#management-evaluation-cycle-person-modal"> data-hs-overlay="#management-evaluation-cycle-page-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
...@@ -372,4 +396,130 @@ ...@@ -372,4 +396,130 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div id="management-evaluation-cycle-pl-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">
ข้อมูลระดับพนักงาน (JL)
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#management-evaluation-cycle-modal">
<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" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name" [(ngModel)]="modal.search"
(ngModelChange)="searchModalChange(plListFilter())">
<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 ['ลำดับ','รหัสระดับพนักงาน (JL)','รายละเอียดฝ่าย(ไทย)','รายละเอียดฝ่าย(อังกฤษ)']; 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="pl.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="!pl.loading&&!plListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!pl.loading&&plListFilter().length">
<tr
*ngFor="let item of plListFilter() | slice:((modal.currentPage-1) * 10) : (((modal.currentPage-1) * 10) + 10);let i = index"
class="cursor-pointer" data-hs-overlay="#management-evaluation-cycle-modal" (click)="selectPl(item)" >
<td class="flex justify-center">
{{((modal.currentPage-1) * 10)+(i+1)}}
</td>
<td>{{item.plId}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 my-5" *ngIf="modal.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="modal.currentPage = (modal.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of modal.page;let f = first;let l = last">
<ng-container *ngIf="item==3&&modal.currentPage!=1&&modal.currentPage!=2&&modal.currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container
*ngIf="(f||l)||(item==modal.currentPage-1||item==modal.currentPage||item==modal.currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==modal.currentPage"
(click)="modal.currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==modal.page.length-2&&modal.currentPage!=modal.page.length&&modal.currentPage!=modal.page.length-1&&modal.currentPage!=modal.page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="modal.currentPage = (modal.currentPage > modal.page.length-1 ? modal.currentPage: modal.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((modal.currentPage-1) * 10)+1}} to {{plListFilter().length<10 ?plListFilter().length:
(modal.currentPage==modal.page.length ? ((modal.currentPage * 10) - ((modal.currentPage * 10) -
plListFilter().length) ) :(modal.currentPage * 10) ) }} of {{plListFilter().length}} items</span>
</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="#management-evaluation-cycle-modal">
ย้อนกลับ
</button>
</div>
</div>
</div>
</div>
</div> </div>
\ No newline at end of file
src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { PLModel, MyPLModel } from 'src/app/shared/model/pl.model';
import { MyPmsMasfromEvaluationModel, PmsMasfromEvaluationModel } from 'src/app/shared/model/pms-masfrom-evaluation.model'; import { MyPmsMasfromEvaluationModel, PmsMasfromEvaluationModel } from 'src/app/shared/model/pms-masfrom-evaluation.model';
import { PLService } from 'src/app/shared/services/pl.service';
import { PmsMasfromEvaluationCycleService } from 'src/app/shared/services/pms-masfrom-evaluation.service'; import { PmsMasfromEvaluationCycleService } from 'src/app/shared/services/pms-masfrom-evaluation.service';
export interface DataModal {
search: string,
currentPage: number,
page: number[]
}
@Component({ @Component({
selector: 'app-management-evaluation-cycle', selector: 'app-management-evaluation-cycle',
templateUrl: './management-evaluation-cycle.component.html', templateUrl: './management-evaluation-cycle.component.html',
...@@ -25,13 +31,56 @@ export class ManagementCycleComponent { ...@@ -25,13 +31,56 @@ export class ManagementCycleComponent {
isDataListCheckedAll = false isDataListCheckedAll = false
numDataListChecked = 0 numDataListChecked = 0
modal: DataModal = {
search: "",
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1)
}
pl: { loading: boolean, selectList: PLModel[], selectIndex: number, dataList: PLModel[] } = { loading: false, selectList: [new MyPLModel()], selectIndex: -1, dataList: [] }
constructor(private pmsMasfromEvaluationCycleService: PmsMasfromEvaluationCycleService, constructor(private pmsMasfromEvaluationCycleService: PmsMasfromEvaluationCycleService,
private toastr: ToastrService, private toastr: ToastrService,
private cdr: ChangeDetectorRef private cdr: ChangeDetectorRef,
private pLService: PLService
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.getPmsMasfromEvaluationCycleList() this.getPmsMasfromEvaluationCycleList()
this.getPlList()
}
getPlList() {
this.pl.loading = false
this.pLService.getList().subscribe({
next: response => {
this.pl.dataList = response.map((x: any) => new MyPLModel(x))
this.pl.loading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.pl.loading = false
this.cdr.detectChanges()
}
})
}
plListFilter() {
return this.pl.dataList.filter(x =>
(x.plId.toLowerCase().includes(this.modal.search.toLowerCase()) ||
x.tdesc.toLowerCase().includes(this.modal.search.toLowerCase()) ||
x.edesc.toLowerCase().includes(this.modal.search.toLowerCase())) &&
!this.pl.selectList.some(y => y.plId == x.plId)
);
}
selectPl(data?: PLModel) {
if (!data) {
this.pl.selectList.splice(this.pl.selectIndex, 1);
return;
}
this.pl.selectList[this.pl.selectIndex] = new MyPLModel(data);
if (this.pl.selectIndex === this.pl.selectList.length - 1) {
this.pl.selectList.push(new MyPLModel());
}
} }
getPmsMasfromEvaluationCycleList() { getPmsMasfromEvaluationCycleList() {
...@@ -142,6 +191,12 @@ export class ManagementCycleComponent { ...@@ -142,6 +191,12 @@ export class ManagementCycleComponent {
} else if (this.modalStatus == 'edit') { } else if (this.modalStatus == 'edit') {
this.setData(new MyPmsMasfromEvaluationModel({ pmsEvaluationRoundId: this.dataSelect.pmsEvaluationRoundId })) this.setData(new MyPmsMasfromEvaluationModel({ pmsEvaluationRoundId: this.dataSelect.pmsEvaluationRoundId }))
} }
this.pl.selectList = [new MyPLModel()]
}
searchModalChange(dataList: any[]) {
this.modal.currentPage = 1
this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
} }
} }
......
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