Skip to content

M
myAppraisal
Commit 13c2c8ba by Nakarin Luankla
Options

UPDATE การจัดการรอบการประเมิน

parent d3b60370
Showing with 603 additions and 161 deletions
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.html
......@@ -358,7 +358,7 @@
เเก้ไขเเบบฟอร์มตามรอบการประเมิน
</h3>
<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" (click)="evaluationRoundId=''"
data-hs-overlay="#evaluation-cycle-person-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
......
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Output } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Output, Renderer2 } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/model/evaluation-cycle.model';
import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service';
......@@ -38,15 +38,28 @@ export class EvaluationCycleComponent {
isDataListCheckedAll = false
numDataListChecked = 0
evaluationRoundId = ''
private unlisten!: () => void;
constructor(private evaluationCycleService: EvaluationCycleService,
private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private renderer: Renderer2
) { }
ngOnInit(): void {
this.getEvaluationCycleList()
this.unlisten = this.renderer.listen('document', 'keydown', (event) => {
if (event.key === 'Escape') {
this.evaluationRoundId=''
}
});
}
ngOnDestroy() {
if (this.unlisten) {
this.unlisten(); // เรียกใช้งานจริง ๆ เพื่อลบ event listener
}
}
getEvaluationCycleList() {
this.dataLoading = true
this.evaluationCycleService.getList().subscribe({
......
src/app/components/performance-management-evaluation/evaluation-cycle-performance/document-form/edit-evaluation-form/edit-evaluation-form.component.html
<!-- <div class="flex items-center py-4 border-b-2 border-collapse ">
<button type="button" class="ti-btn ti-btn-outline ti-btn-outline-light h-20px m-0 shadow-md text-blue-500" (click)="onBack()">
<i class="ri-arrow-left-s-line"></i> ย้อนกลับ
</button>
<div class="text-2xl font-bold py-2 text-primary px-4 ">
เเก้ไขเเบบฟอร์มตามรอบการประเมิน
</div>
</div> -->
<div class="body-content">
<div class="page">
......@@ -44,7 +36,7 @@
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-success h-20px m-0 shadow-md" (click)="openModalClass('modal-alert')">
<button type="button" class="ti-btn ti-btn-soft-success h-20px m-0 shadow-md" (click)="openModalClass('modal-alert','addForm')">
<i class="ri-save-3-line"></i>
Save
</button>
......@@ -87,7 +79,7 @@
<td class="text-center">{{item.apsassessy.position.tdesc}}</td>
<td class="text-center">{{item.personalLevel.tdesc}}</td>
<td class="flex justify-center items-center space-x-2">
<i class="ti ti-edit cursor-pointer i-gray fs-xl px-1" (click)="openAddRoundModel(item.masfromEvaluationRound.evaluationRoundId,item.apsassessy.employeeId,'form-pm-emp')" ></i>
<i class="ti ti-edit cursor-pointer i-gray fs-xl px-1" (click)="openAddRoundModel(item.masfromEvaluationRound.evaluationRoundId,item.apsassessy.employeeId,item,'form-pm-emp')" ></i>
<input type="checkbox" id="hs-small-switch{{i+1}}" [(ngModel)]="item.active"
class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 dark:checked:bg-green-600 checked:before:bg-green-200 dark:checked:before:bg-green-200 shrink-0 w-11 h-6 before:w-5 before:h-5">
</td>
......@@ -137,6 +129,11 @@
</nav>
</div>
<div id="form-pm-emp" 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 mt-7">
<div class="max-h-full overflow-hidden ti-modal-content !width-80" >
......@@ -165,12 +162,12 @@
<div class="col-span-1">
<input type="text" id="input-label"
class="py-2 px-3 ltr:pr-11 rtl:pl-11 ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10 bg-input-readonly"
readonly value="F6702-01">
readonly value="{{selectEmp.masfromEvaluationRound.evaluationRoundId}}">
</div>
<div class="col-span-1">
<input type="text" id="input-label"
class="py-2 px-3 ltr:pr-11 rtl:pl-11 ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10 bg-input-readonly"
readonly value="พิมพร อูรณการ">
readonly value="{{selectEmp.apsassessy.fname}} {{selectEmp.apsassessy.lname}}">
</div>
</div>
</div>
......@@ -181,9 +178,9 @@
<!-- Content ของ div แรก -->
<div class="flex gap-x-6">
<div class="flex items-center">
<input type="checkbox" class="ti-form-checkbox mt-0.5" id="hs-checkbox-group-1">
<input type="checkbox" class="ti-form-checkbox mt-0.5" id="hs-checkbox-group-1" disabled [(ngModel)]="isChecked">
<label for="hs-checkbox-group-1"
class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">0
class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{numDataListChecked}}
Selected</label>
</div>
......@@ -203,7 +200,7 @@
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name" style="height: 40px;">
placeholder="Search by No. or Name" style="height: 40px;" [(ngModel)]="searchRound" (ngModelChange)="searchChange()">
<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>
......@@ -211,29 +208,22 @@
</div>
</div>
<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" (click)="openModalClass('form-assessment')">
<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="#edit-define-document-form-alert-delete-modal">
class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md" (click)="openModalClass('modal-alert','deleteForm')">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);"
class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="page px-rem">
<div class="overflow-auto table-bordered rounded-t-md">
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<div class="overflow-auto shadow-md">
......@@ -242,8 +232,7 @@
<tr>
<ng-container
*ngFor="let item of ['','รหัสสมรรถนะ','ชื่อสมรรถนะ','ระดับความหวัง','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col"
class="relative px-10px py-10px bg-soft-secondary text-primary"
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f || l || item === 'ระดับความหวัง'">
<span class="text-sm">{{ item }}</span>
</th>
......@@ -251,30 +240,19 @@
</tr>
</thead>
<tbody>
<tr
*ngFor="let item of[
['CC-01', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)','ระดับที่ 1'],
['CC-02', 'การทำงานเป็นทีมแบบ TAT (TAT Teamwork)','ระดับที่ 1'],
['CC-03', 'ความรับผิดชอบในหน้าที่และโปร่งใส (Accountability & Ethics)','ระดับที่ 1'],
['CC-04', 'การพัฒนาอย่างต่อเนื่อง (Readiness to Learn & Continous Improvement)','ระดับที่ 1'],
['CC-05', 'การคิดอย่างเป็นระบบ (Systematic Thinking)','ระดับที่ 1']];let i = index">
<td>
</td>
<!-- <td class="text-center">
<tr *ngFor="let item of empassessmentListFilter() | slice:((currentPageRound-1) * 10) : (((currentPageRound-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()">
id="checkbox-{{item.item.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}" [(ngModel)]="item.checkbox" (change)="checkempassessmentRoundListCheckbox()">
</td>
<td>
<label
for="checkbox-{{item.data.evaluationRoundId}}">&nbsp;{{item.data.evaluationRoundId}}</label>
</td> -->
<td >{{item[1]}}</td>
<td >{{item[2]}}</td>
for="checkbox-{{item.item.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}">{{item.item.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}</label>
</td>
<td >{{item.item.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.tdesc}}</td>
<td class="!text-center">{{item.item.groupAssessment1.competencyIndicatorsCourses1Mini.lineNo}}</td>
<td class="flex justify-center">
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
data-hs-overlay="#edit-define-document-form-alert-delete-modal"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteFormOne(item.item);openModalClass('modal-alert','deleteFormOne')"></i>
</td>
</tr>
......@@ -283,123 +261,201 @@
</div>
</div>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);"
aria-current="page">1</a>
</li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="pageRound.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPageRound = (currentPageRound-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of pageRound;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPageRound!=1&&currentPageRound!=2&&currentPageRound!=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==currentPageRound-1||item==currentPageRound||item==currentPageRound+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPageRound"
(click)="currentPageRound=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==pageRound.length-2&&currentPageRound!=pageRound.length&&currentPageRound!=pageRound.length-1&&currentPageRound!=pageRound.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)="currentPageRound = (currentPageRound > pageRound.length-1 ? currentPageRound: currentPageRound+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-1">
<p>Show 1 to 10 of 50 items</p>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPageRound-1) * 10)+1}} to {{empassessmentListFilter().length<10
?empassessmentListFilter().length: (currentPageRound==page.length ? ((currentPageRound * 10) - ((currentPageRound *
10) - empassessmentListFilter().length) ) :(currentPageRound * 10) ) }} of {{empassessmentListFilter().length}}
items</span>
</ul>
</div>
</nav>
</div>
<div class="ti-modal-footer">
<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="#form-pm-emp">
(click)="closeModalClass('form-pm-emp')">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#edit-define-document-form-alert-add-modal">
<button type="button" class="ti-btn ti-btn-success" >
บันทึกข้อมูล
</a>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="edit-evaluation-form-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 id="form-assessment" 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 mt-7">
<div class="max-h-full overflow-hidden ti-modal-content !width-80" >
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
รายการสมรรถนะ
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#edit-evaluation-form-alert-modal">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" (click)="closeModalClass('form-assessment')">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
</p>
<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="#edit-evaluation-form-add-table-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#edit-evaluation-form-alert-modal" (click)="addUser();">
บันทึกข้อมูล
</a>
<div class="ti-modal-body">
<div class="header-title-type">
<div class="flex justify-between">
<div class="flex">
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name" style="height: 40px;">
<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>
</div>
</div>
</div>
</div>
</div>
<div id="edit-evaluation-form-alert-delete-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">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#edit-evaluation-form-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
<div class="page px-rem">
<div class="overflow-auto table-bordered rounded-t-md">
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<div class="overflow-auto shadow-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0"
*ngIf="!f && i==1">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg"
width="30" height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0"
*ngIf="!f && i==2">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg"
width="30" height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of[
['CC-01', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)','1'],
['CC-01', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)','2'],
['CC-01', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)','3'],
['CC-01', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)','4'],
['CC-01', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)','5'],
['CC-01', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)','6']];let i = index">
<td class="flex justify-center" style="font-size: 12px;">{{item[0]}}</td>
<td style="font-size: 12px; width: 60%;">{{item[1]}}</td>
<td style="font-size: 12px; width: 20%;">{{item[2]}}</td>
<td class="flex justify-center">
<div class="px-1">
<button type="button"
class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" >
<i class="ri-add-line"></i>
Select
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="pageRound.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPageRound = (currentPageRound-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of pageRound;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPageRound!=1&&currentPageRound!=2&&currentPageRound!=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==currentPageRound-1||item==currentPageRound||item==currentPageRound+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPageRound"
(click)="currentPageRound=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==pageRound.length-2&&currentPageRound!=pageRound.length&&currentPageRound!=pageRound.length-1&&currentPageRound!=pageRound.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)="currentPageRound = (currentPageRound > pageRound.length-1 ? currentPageRound: currentPageRound+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 {{((currentPageRound-1) * 10)+1}} to {{empassessmentListFilter().length<10
?empassessmentListFilter().length: (currentPageRound==page.length ? ((currentPageRound * 10) - ((currentPageRound *
10) - empassessmentListFilter().length) ) :(currentPageRound * 10) ) }} of {{empassessmentListFilter().length}}
items</span>
</ul>
</nav>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่!
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<div class="ti-modal-footer">
<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="#edit-evaluation-form-table-modal-edit">
(click)="closeModalClass('form-assessment')">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#edit-evaluation-form-alert-delete-modal" (click)="addUser()">
ลบข้อมูล
<a class="ti-btn ti-btn-success" href="javascript:void(0);" >
บันทึกข้อมูล
</a>
</div>
</div>
......@@ -408,6 +464,7 @@
</div>
<div id="modal-alert" 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">
......@@ -424,7 +481,7 @@
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
{{msg}}
</p>
<div class="flex justify-end mt-2rem mb-1rem">
......@@ -433,10 +490,12 @@
(click)="closeModalClass('modal-alert')">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
(click)="saveAssessmentList();closeModalClass('modal-alert')">
<button type="button" class="ti-btn ti-btn-success" *ngIf="typeForm=='addForm'" (click)="saveAssessmentList();closeModalClass('modal-alert')">
บันทึกข้อมูล
</a>
</button>
<button type="button" class="ti-btn ti-btn-success" *ngIf="typeForm=='deleteForm'|| typeForm=='deleteFormOne'" (click)="deleteAssessment();closeModalClass('modal-alert')">
บันทึกข้อมูล
</button>
</div>
</div>
</div>
......
src/app/components/performance-management-evaluation/evaluation-cycle-performance/document-form/edit-evaluation-form/edit-evaluation-form.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { AppraisalRoundModel, MyAppraisalRoundModel } from 'src/app/shared/model/appraisal-aps.model';
import { AppraisalFormModel } from 'src/app/shared/model/appraisal-form.model';
import { AppraisalModel } from 'src/app/shared/model/appraisal.model';
import { AppraisalModel, MyAppraisalModel } from 'src/app/shared/model/appraisal.model';
import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/model/evaluation-cycle.model';
import { EvaluationAssessmentService } from 'src/app/shared/services/evaluation-assessment.service';
import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service';
......@@ -29,6 +30,20 @@ export class EditEvaluationFormComponent {
isChecked: boolean = false;
apsassessy = ""
empassessmentList: AppraisalModel[] = []
searchEmp = ""
empassessmentRoundList: AppraisalRoundModel[] = []
empassessmentRoundListCheckbox: {checkbox: boolean, item: AppraisalRoundModel}[] = []
currentPageRound = 1
pageRound = Array.from({ length: 1 }, (_, i) => i + 1);
searchRound = ""
selectEmp:AppraisalModel = new MyAppraisalModel()
numDataListChecked = 0
msg = ""
typeForm = ""
selectData: AppraisalRoundModel = new MyAppraisalRoundModel()
constructor(private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private evaluationAssessmentService: EvaluationAssessmentService,
......@@ -41,6 +56,11 @@ export class EditEvaluationFormComponent {
}
ngOnChanges(): void {
setTimeout(() => {
document.getElementById('form-pm-emp')?.classList.add("hidden")
document.getElementById('form-assessment')?.classList.add("hidden")
document.getElementById('modal-alert')?.classList.add("hidden")
}, 10);
if (this.evaluationRoundId) {
this.getAssessmentId();
this.getAssessmentList();
......@@ -86,19 +106,33 @@ export class EditEvaluationFormComponent {
this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
}
openModalClass(id: string) {
document.getElementById(id)?.classList.add('open');
document.getElementById(id)?.classList.remove('hidden');
setTimeout(() => {
document.getElementById(id)?.setAttribute('aria-overlay', 'true')
}, 10);
openModalClass(id: string,type?:string) {
this.typeForm = type??""
if(id == 'modal-alert'){
if(type == 'deleteForm'){
this.msg = 'ยืนยันการลบรายการ'
}else if(type == 'addForm'){
this.msg = 'ยืนยันการบันทึกรายการ'
}
}
if(id){
document.getElementById(id)?.classList.add('open');
document.getElementById(id)?.classList.remove('hidden');
setTimeout(() => {
document.getElementById(id)?.setAttribute('aria-overlay', 'false')
}, 10);
}
this.isChecked = false;
this.numDataListChecked = 0;
}
closeModalClass(id: string) {
const modal = document.getElementById(id);
if (modal) {
modal.classList.add("hidden"); // ซ่อน Modal
console.log("🚀 ~ EditEvaluationFormComponent ~ closeModalClass ~ modal:", modal)
if (id) {
modal?.classList.add("hidden"); // ซ่อน Modal
}
}
......@@ -121,17 +155,19 @@ export class EditEvaluationFormComponent {
}
}
openAddRoundModel(evaluationRoundId:string,apsassessy:string,model:string) {
openAddRoundModel(evaluationRoundId:string,apsassessy:string,item:AppraisalModel,model:string) {
this.selectEmp = item
this.openModalClass(model);
this.evaluationRoundId = evaluationRoundId
this.apsassessy = apsassessy
this.getApsassessy()
this.getApsassessyMini();
}
getApsassessy(){
this.evaluationAssessmentService.getApsassessy(this.evaluationRoundId,this.apsassessy).subscribe({
next: response => {
console.log("🚀 ~ EditEvaluationFormComponent ~ this.evaluationAssessmentService.getApsassessy ~ response:", response)
this.empassessmentList = response
this.cdr.detectChanges();
},
error: err => {
......@@ -139,6 +175,65 @@ export class EditEvaluationFormComponent {
}
})
}
getApsassessyMini(){
this.evaluationAssessmentService.getApsassessyMini(this.evaluationRoundId,this.apsassessy).subscribe({
next: response => {
this.empassessmentRoundList = response
this.empassessmentRoundListCheckbox = this.empassessmentRoundList.map(item => ({checkbox: false, item}))
this.cdr.detectChanges();
},
error: err => {
console.error('Error fetching evaluation cycles:', err);
}
})
}
empassessmentListFilter() {
return this.empassessmentRoundListCheckbox.filter(x =>
x.item.groupAssessment1?.competencyIndicatorsCourses1Mini?.competencyIndicatorsCourses0?.competencyTopic?.tdesc?.toLowerCase()?.includes(this.searchRound?.toLowerCase() ?? "")||
x.item.groupAssessment1?.competencyIndicatorsCourses1Mini?.competencyIndicatorsCourses0?.competencyTopic?.edesc?.toLowerCase()?.includes(this.searchRound?.toLowerCase() ?? "") ||
x.item.groupAssessment1?.competencyIndicatorsCourses1Mini?.competencyIndicatorsCourses0?.competencyTopic?.competencyTopicId?.toLowerCase()?.includes(this.searchRound?.toLowerCase() ?? ""))
}
searchEmpassessmentListFilterChange() {
this.currentPageRound = 1;
const filteredData = this.empassessmentListFilter();
this.pageRound = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
}
toggleCheckbox() {
this.isChecked = !this.isChecked; // สลับสถานะ
this.empassessmentRoundListCheckbox.map(item => item.checkbox = this.isChecked);
this.checkempassessmentRoundListCheckbox();
}
checkempassessmentRoundListCheckbox(){
this.numDataListChecked = this.empassessmentRoundListCheckbox.filter(x => x.checkbox).length
this.isChecked = this.numDataListChecked ? true : false
}
deleteFormOne(item:AppraisalRoundModel){
this.selectData = item
}
deleteAssessment() {
let body = this.empassessmentRoundListCheckbox.filter(x => x.checkbox).map(x => x.item)
if(this.typeForm=='deleteFormOne'){
body = [this.selectData]
}
if( body.length == 0){
this.showAlert('กรุณาเลือกรายการ', 'error')
return
}
this.evaluationAssessmentService.deletemMini(body,this.selectEmp.apsassessy.employeeId,this.selectEmp.masfromEvaluationRound.evaluationRoundId).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getApsassessyMini();
} else {
this.showAlert(response.message, 'error')
}
}
})
}
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
......@@ -148,13 +243,7 @@ export class EditEvaluationFormComponent {
toggleCheckbox() {
this.isChecked = !this.isChecked; // สลับสถานะ
}
addUser() {
}
......
src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.html
......@@ -354,7 +354,7 @@
<div id="management-evaluation-cycle-person-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">
<div class="max-h-full overflow-hidden ti-modal-content w-full rounded-sm shadow-sm">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
เเก้ไขเเบบฟอร์มตามรอบการประเมิน
......
src/app/shared/model/appraisal-aps.model.ts 0 → 100644
export interface AppraisalRoundModel {
runNo: number;
companyId: string;
groupAssessment1: GroupAssessment1;
}
export interface GroupAssessment1 {
personalLevelModel: PersonalLevelModel;
competencyIndicatorsCourses1Mini: CompetencyIndicatorsCourses1Mini;
companyId: string;
groupAssessmentMini: GroupAssessmentMini;
}
export interface PersonalLevelModel {
plId: string;
tdesc: any;
edesc: any;
companyId: any;
}
export interface CompetencyIndicatorsCourses1Mini {
competencyIndicatorsCourses0: CompetencyIndicatorsCourses0;
lineNo: number;
companyId: string;
competencyCourseId: string;
behavioralIndicatorsList: BehavioralIndicatorsList[];
}
export interface CompetencyIndicatorsCourses0 {
competencyTopic: CompetencyTopic;
companyId: string;
edesc: string;
tdesc: string;
indicatorsCourseDetailTh: string;
indicatorsCourseDetailEn: string;
expectation: any;
}
export interface CompetencyTopic {
competencyTopicId: string;
competencyType: any;
companyId: any;
edesc: any;
tdesc: any;
competencyDetail: any;
competencyFiles: any;
lineNo: any;
}
export interface BehavioralIndicatorsList {
competencyIndicators1: CompetencyIndicators1;
runNo: number;
companyId: string;
assessmentId: string;
behavioralIndicators: string;
competencyBehavioral: CompetencyBehavioral;
}
export interface CompetencyIndicators1 {
competencyIndicatorsCourses0: CompetencyIndicatorsCourses02;
lineNo: number;
companyId: string;
competencyCourseId: string;
}
export interface CompetencyIndicatorsCourses02 {
competencyTopic: CompetencyTopic;
companyId: string;
edesc: string;
tdesc: string;
indicatorsCourseDetailTh: string;
indicatorsCourseDetailEn: string;
}
export interface CompetencyBehavioral {
scoreTopicExpectation: number;
companyId: string;
}
export interface GroupAssessmentMini {
personalLevel: PersonalLevel;
competencyIndicatorsCourses1Mini: any;
companyId: string;
edesc: any;
tdesc: any;
}
export interface PersonalLevel {
plId: string;
tdesc: any;
edesc: any;
companyId: any;
}
// ------------------------- Class Implementation -------------------------
export class MyAppraisalRoundModel implements AppraisalRoundModel {
runNo: number;
companyId: string;
groupAssessment1: GroupAssessment1;
constructor(data?: Partial<AppraisalRoundModel>) {
this.runNo = data?.runNo ?? 0;
this.companyId = data?.companyId || "";
this.groupAssessment1 = new MyGroupAssessment1(data?.groupAssessment1);
}
}
export class MyGroupAssessment1 implements GroupAssessment1 {
personalLevelModel: PersonalLevelModel;
competencyIndicatorsCourses1Mini: CompetencyIndicatorsCourses1Mini;
companyId: string;
groupAssessmentMini: GroupAssessmentMini;
constructor(data?: Partial<GroupAssessment1>) {
this.personalLevelModel = new MyPersonalLevelModel(data?.personalLevelModel);
this.competencyIndicatorsCourses1Mini = new MyCompetencyIndicatorsCourses1Mini(data?.competencyIndicatorsCourses1Mini);
this.companyId = data?.companyId || "";
this.groupAssessmentMini = new MyGroupAssessmentMini(data?.groupAssessmentMini);
}
}
export class MyPersonalLevelModel implements PersonalLevelModel {
plId: string;
tdesc: any;
edesc: any;
companyId: any;
constructor(data?: Partial<PersonalLevelModel>) {
this.plId = data?.plId || "";
this.tdesc = data?.tdesc ?? null;
this.edesc = data?.edesc ?? null;
this.companyId = data?.companyId ?? null;
}
}
export class MyCompetencyIndicatorsCourses1Mini implements CompetencyIndicatorsCourses1Mini {
competencyIndicatorsCourses0: CompetencyIndicatorsCourses0;
lineNo: number;
companyId: string;
competencyCourseId: string;
behavioralIndicatorsList: BehavioralIndicatorsList[];
constructor(data?: Partial<CompetencyIndicatorsCourses1Mini>) {
this.competencyIndicatorsCourses0 = new MyCompetencyIndicatorsCourses0(data?.competencyIndicatorsCourses0);
this.lineNo = data?.lineNo ?? 0;
this.companyId = data?.companyId || "";
this.competencyCourseId = data?.competencyCourseId || "";
this.behavioralIndicatorsList = data?.behavioralIndicatorsList?.map(item => new MyBehavioralIndicatorsList(item)) || [];
}
}
export class MyCompetencyIndicatorsCourses0 implements CompetencyIndicatorsCourses0 {
competencyTopic: CompetencyTopic;
companyId: string;
edesc: string;
tdesc: string;
indicatorsCourseDetailTh: string;
indicatorsCourseDetailEn: string;
expectation: any;
constructor(data?: Partial<CompetencyIndicatorsCourses0>) {
this.competencyTopic = new CompetencyTopicModel(data?.competencyTopic);
this.companyId = data?.companyId || "";
this.edesc = data?.edesc || "";
this.tdesc = data?.tdesc || "";
this.indicatorsCourseDetailTh = data?.indicatorsCourseDetailTh || "";
this.indicatorsCourseDetailEn = data?.indicatorsCourseDetailEn || "";
this.expectation = data?.expectation ?? null;
}
}
export class MyBehavioralIndicatorsList implements BehavioralIndicatorsList {
competencyIndicators1: CompetencyIndicators1;
runNo: number;
companyId: string;
assessmentId: string;
behavioralIndicators: string;
competencyBehavioral: CompetencyBehavioral;
constructor(data?: Partial<BehavioralIndicatorsList>) {
this.competencyIndicators1 = new MyCompetencyIndicators1(data?.competencyIndicators1);
this.runNo = data?.runNo ?? 0;
this.companyId = data?.companyId || "";
this.assessmentId = data?.assessmentId || "";
this.behavioralIndicators = data?.behavioralIndicators || "";
this.competencyBehavioral = new MyCompetencyBehavioral(data?.competencyBehavioral);
}
}
export class MyCompetencyIndicators1 implements CompetencyIndicators1 {
competencyIndicatorsCourses0: CompetencyIndicatorsCourses02;
lineNo: number;
companyId: string;
competencyCourseId: string;
constructor(data?: Partial<CompetencyIndicators1>) {
this.competencyIndicatorsCourses0 = new MyCompetencyIndicatorsCourses0(data?.competencyIndicatorsCourses0);
this.lineNo = data?.lineNo ?? 0;
this.companyId = data?.companyId || "";
this.competencyCourseId = data?.competencyCourseId || "";
}
}
export class MyCompetencyBehavioral implements CompetencyBehavioral {
scoreTopicExpectation: number;
companyId: string;
constructor(data?: Partial<CompetencyBehavioral>) {
this.scoreTopicExpectation = data?.scoreTopicExpectation ?? 0;
this.companyId = data?.companyId || "";
}
}
export class MyGroupAssessmentMini implements GroupAssessmentMini {
personalLevel: PersonalLevel;
competencyIndicatorsCourses1Mini: any;
companyId: string;
edesc: any;
tdesc: any;
constructor(data?: Partial<GroupAssessmentMini>) {
this.personalLevel = new MyPersonalLevel(data?.personalLevel);
this.competencyIndicatorsCourses1Mini = data?.competencyIndicatorsCourses1Mini ?? null;
this.companyId = data?.companyId || "";
this.edesc = data?.edesc ?? null;
this.tdesc = data?.tdesc ?? null;
}
}
export class MyPersonalLevel implements PersonalLevel {
plId: string;
tdesc: any;
edesc: any;
companyId: any;
constructor(data?: Partial<PersonalLevel>) {
this.plId = data?.plId || "";
this.tdesc = data?.tdesc ?? null;
this.edesc = data?.edesc ?? null;
this.companyId = data?.companyId ?? null;
}
}
export class CompetencyTopicModel implements CompetencyTopic {
competencyTopicId: string;
competencyType: any;
companyId: any;
edesc: any;
tdesc: any;
competencyDetail: any;
competencyFiles: any;
lineNo: any;
constructor(data: Partial<CompetencyTopic> = {}) {
this.competencyTopicId = data.competencyTopicId || "";
this.competencyType = data.competencyType ?? null;
this.companyId = data.companyId ?? null;
this.edesc = data.edesc ?? null;
this.tdesc = data.tdesc ?? null;
this.competencyDetail = data.competencyDetail ?? null;
this.competencyFiles = data.competencyFiles ?? null;
this.lineNo = data.lineNo ?? null;
}
}
\ No newline at end of file
src/app/shared/services/evaluation-assessment.service.ts
......@@ -4,6 +4,8 @@ import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { AlertModel } from '../model/alert.model';
import { EvaluationCycleModel } from '../model/evaluation-cycle.model';
import { AppraisalModel } from '../model/appraisal.model';
import { AppraisalRoundModel } from '../model/appraisal-aps.model';
@Injectable({
providedIn: 'root'
......@@ -19,8 +21,11 @@ export class EvaluationAssessmentService {
getById(evaluationRoundId: string): Observable<any[]> {
return this.http.get<any[]>(this.urlApi + "/" + evaluationRoundId)
}
getApsassessy(evaluationRoundId: string,apsassessy:string): Observable<EvaluationCycleModel> {
return this.http.get<EvaluationCycleModel>(this.urlApi + "/" + evaluationRoundId+"/"+apsassessy)
getApsassessy(evaluationRoundId: string,apsassessy:string): Observable<AppraisalModel[]> {
return this.http.get<AppraisalModel[]>(this.urlApi + "/" + evaluationRoundId+"/"+apsassessy)
}
getApsassessyMini(evaluationRoundId: string,apsassessy:string): Observable<AppraisalRoundModel[]> {
return this.http.get<AppraisalRoundModel[]>(this.urlApi + "/mini/" + evaluationRoundId+"/"+apsassessy)
}
post(body: EvaluationCycleModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body)
......@@ -37,4 +42,14 @@ export class EvaluationAssessmentService {
};
return this.http.delete<AlertModel>(this.urlApi, options)
}
deletemMini(body: AppraisalRoundModel[],apsassessy:string,evaluationRoundId:string): Observable<AlertModel> {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete<AlertModel>(this.urlApi+'/delete-mini'+"/"+apsassessy+"/"+evaluationRoundId, options)
}
}
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