From 92361e7738733efc935dca472d3ac8a9c58b3bfb Mon Sep 17 00:00:00 2001
From: Nattana <nattana.cha@myhr.co.th>
Date: Tue, 4 Mar 2025 17:16:04 +0700
Subject: [PATCH] รอบการประเมิน competency pms
---
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.html | 204 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.ts | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------
src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.html | 190 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------
src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.ts | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
4 files changed, 467 insertions(+), 55 deletions(-)
diff --git a/src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.html b/src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.html
index 2498589..41f0ed8 100644
--- a/src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.html
+++ b/src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.html
@@ -32,14 +32,14 @@
</div>
<div class="px-1">
<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>
Add
</button>
</div>
<div class="px-1">
<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>
Delete
</button>
@@ -91,11 +91,11 @@
<tr
*ngFor="let item of evaluation_cycleListFilter() | 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.evaluationRoundId}}" [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
+ <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.evaluationRoundId}}"
+ [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
</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> -->
+ <td>
+ <!-- <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}}"> {{item.data.evaluationRoundId}}</label>
</td>
<td>{{item.data.tdesc}}</td>
@@ -136,10 +136,11 @@
</td>
<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)"
- data-hs-overlay="#evaluation-cycle-page-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>
+ 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-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'"
[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> -->
@@ -206,7 +207,7 @@
</nav>
</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="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
@@ -215,7 +216,7 @@
</h3>
<div class="flex justify-end">
<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>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
@@ -249,12 +250,14 @@
</div>
</div>
<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"
[ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'"
[(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">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
@@ -270,13 +273,35 @@
<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">
+ <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">
<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-page-modal">
+ data-hs-overlay="#evaluation-cycle-modal">
ย้อนกลับ
</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"
[disabled]="!dataSelect.evaluationRoundId||!dataSelect.tdesc||!dataSelect.apsyear||!dataSelect.apsPeriodStart||!dataSelect.apsPeriodEnd">
บันทึกข้อมูล
@@ -287,7 +312,7 @@
</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="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
@@ -297,14 +322,14 @@
<div class="flex justify-end">
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
<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>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<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>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
@@ -325,22 +350,22 @@
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
<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-page-modal">
+ data-hs-overlay="#evaluation-cycle-modal">
ย้อนกลับ
</button>
- <a class="ti-btn ti-btn-success" href="javascript:void(0);"
- data-hs-overlay="#evaluation-cycle-page-alert-modal" (click)="addevaluation_cycle()">
+ <a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#evaluation-cycle-alert-modal"
+ (click)="addevaluation_cycle()">
บันทึกข้อมูล
</a>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<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-page-alert-modal">
+ data-hs-overlay="#evaluation-cycle-alert-modal">
ย้อนกลับ
</button>
- <a class="ti-btn ti-btn-danger" href="javascript:void(0);"
- data-hs-overlay="#evaluation-cycle-page-alert-modal" (click)="deleteevaluation_cycle()">
+ <a class="ti-btn ti-btn-danger" href="javascript:void(0);" data-hs-overlay="#evaluation-cycle-alert-modal"
+ (click)="deleteevaluation_cycle()">
ลบข้อมูล
</a>
</ng-container>
@@ -366,7 +391,136 @@
</div>
</div>
<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>
diff --git a/src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.ts b/src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.ts
index d3fa79f..fd31a46 100644
--- a/src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.ts
+++ b/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
import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service';
import { MyStatusCodeModel, StatusCodeModel } from 'src/app/shared/model/status-code.model';
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 {
evaluationRoundId: string;
@@ -14,7 +16,11 @@ export interface DataModel {
apsPeriodEnd: string;
statusCode: StatusCodeModel;
}
-
+export interface DataModal {
+ search: string,
+ currentPage: number,
+ page: number[]
+}
@Component({
selector: 'app-evaluation-cycle',
templateUrl: './evaluation-cycle.component.html',
@@ -40,26 +46,69 @@ export class EvaluationCycleComponent {
evaluationRoundId = ''
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,
private toastr: ToastrService,
private cdr: ChangeDetectorRef,
- private renderer: Renderer2
-
+ private renderer: Renderer2,
+ private pLService: PLService
+
) { }
ngOnInit(): void {
this.getEvaluationCycleList()
this.unlisten = this.renderer.listen('document', 'keydown', (event) => {
if (event.key === 'Escape') {
- this.evaluationRoundId=''
+ this.evaluationRoundId = ''
}
});
+ this.getPlList()
}
ngOnDestroy() {
if (this.unlisten) {
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() {
this.dataLoading = true
this.evaluationCycleService.getList().subscribe({
@@ -185,23 +234,27 @@ export class EvaluationCycleComponent {
} else if (this.modalStatus == 'edit') {
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 = ''
- if(id == 'evaluation-cycle-person-modal'){
+ if (id == 'evaluation-cycle-person-modal') {
this.evaluationRoundId = evaluationRoundId
this.evaluationRoundIdChange.emit(evaluationRoundId)
setTimeout(() => {
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');
}, 10);
}
}
-
+ searchModalChange(dataList: any[]) {
+ this.modal.currentPage = 1
+ this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
+ }
}
diff --git a/src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.html b/src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.html
index 95c622c..a12efbb 100644
--- a/src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.html
+++ b/src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.html
@@ -32,14 +32,14 @@
</div>
<div class="px-1">
<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>
Add
</button>
</div>
<div class="px-1">
<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>
Delete
</button>
@@ -136,11 +136,11 @@
</td>
<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)"
- 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"
- 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)"
- 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'"
[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> -->
@@ -207,7 +207,7 @@
</nav>
</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="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
@@ -216,7 +216,7 @@
</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-page-modal">
+ data-hs-overlay="#management-evaluation-cycle-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
@@ -250,12 +250,14 @@
</div>
</div>
<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"
[ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'"
[(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">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
@@ -271,14 +273,36 @@
<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">
+ <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">
<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-page-modal">
+ data-hs-overlay="#management-evaluation-cycle-modal">
ย้อนกลับ
</button>
<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"
[disabled]="!dataSelect.pmsEvaluationRoundId||!dataSelect.tdesc||!dataSelect.apsyear||!dataSelect.apsPeriodStart||!dataSelect.apsPeriodEnd">
บันทึกข้อมูล
@@ -289,7 +313,7 @@
</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="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
@@ -299,14 +323,14 @@
<div class="flex justify-end">
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
<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>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<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>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
@@ -327,22 +351,22 @@
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
<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-page-modal">
+ data-hs-overlay="#management-evaluation-cycle-modal">
ย้อนกลับ
</button>
<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>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<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-page-alert-modal">
+ data-hs-overlay="#management-evaluation-cycle-alert-modal">
ย้อนกลับ
</button>
<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>
</ng-container>
@@ -352,7 +376,7 @@
</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="max-h-full overflow-hidden ti-modal-content w-full rounded-sm shadow-sm">
<div class="ti-modal-header">
@@ -361,7 +385,7 @@
</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-person-modal">
+ data-hs-overlay="#management-evaluation-cycle-page-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
@@ -372,4 +396,130 @@
</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>
\ No newline at end of file
diff --git a/src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.ts b/src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.ts
index 919e2e8..5bf4771 100644
--- a/src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.ts
+++ b/src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.ts
@@ -1,8 +1,14 @@
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
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 { PLService } from 'src/app/shared/services/pl.service';
import { PmsMasfromEvaluationCycleService } from 'src/app/shared/services/pms-masfrom-evaluation.service';
-
+export interface DataModal {
+ search: string,
+ currentPage: number,
+ page: number[]
+}
@Component({
selector: 'app-management-evaluation-cycle',
templateUrl: './management-evaluation-cycle.component.html',
@@ -25,13 +31,56 @@ export class ManagementCycleComponent {
isDataListCheckedAll = false
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,
private toastr: ToastrService,
- private cdr: ChangeDetectorRef
+ private cdr: ChangeDetectorRef,
+ private pLService: PLService
+
) { }
ngOnInit(): void {
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() {
@@ -142,6 +191,12 @@ export class ManagementCycleComponent {
} else if (this.modalStatus == 'edit') {
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);
}
}
--
libgit2 0.26.0