Skip to content

M
myAppraisal
Commit 1abde7ec by LAPTOP-CV4JFSHE\kantavee
Options

การประเมินสมรรถนะ>การจัดรอบการประเมิน เเละ การประเมินสมรรถนะ>การตั้งค่า

parent 4e8508bd
Showing with 441 additions and 234 deletions
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.html
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <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" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="search" (ngModelChange)="searchChange()"> style="height: 40px;" [(ngModel)]="search" (ngModelChange)="searchChange()">
<div <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"> 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> <i class="ri-search-line text-gray"></i>
...@@ -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-45px m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
(click)="modalStatus='add';dataListSelect()" data-hs-overlay="#evaluation-cycle-modal"> data-hs-overlay="#evaluation-cycle-page-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-45px m-0 shadow-md" <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
data-hs-overlay="#evaluation-cycle-delete-modal"> data-hs-overlay="#evaluation-cycle-page-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>
...@@ -70,51 +70,61 @@ ...@@ -70,51 +70,61 @@
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody *ngIf="!dataListFilter().length"> <tbody *ngIf="dataLoading">
<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="!dataLoading&&!evaluation_cycleListFilter().length">
<tr> <tr>
<td class="text-center" colspan="100%"> <td class="text-center" colspan="100%">
ไม่พบข้อมูล ไม่พบข้อมูล
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody *ngIf="dataListFilter().length"> <tbody *ngIf="!dataLoading&&evaluation_cycleListFilter().length">
<tr <tr
*ngFor="let item of dataListFilter() | 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="flex justify-around"> <td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" [(ngModel)]="item.check" <input *ngIf="item.data.evaluationRoundId!='100'" type="checkbox" class="ti-form-checkbox cursor-pointer"
(ngModelChange)="dataListCheck()"> id="checkbox-{{item.data.evaluationRoundId}}" [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
<label>{{item.code}}</label> <label for="checkbox-{{item.data.evaluationRoundId}}">&nbsp;{{item.data.evaluationRoundId}}</label>
</td> </td>
<td>{{item.period}}</td> <td>{{item.data.tdesc}}</td>
<td>{{item.year}}</td> <td>{{item.data.apsyear}}</td>
<td>{{item.startDate}}</td> <td>{{item.data.apsPeriodStart}}</td>
<td>{{item.endDate}}</td> <td>{{item.data.apsPeriodEnd}}</td>
<td> <td>
<span class="flex justify-center items-center rounded-full h-5 w-5 text-white" <span class="flex justify-center items-center rounded-full h-5 w-5 text-white"
[ngClass]="{'bg-success':item.status=='1','bg-warning':item.status=='2','bg-gray-400':item.status=='3'}"> [ngClass]="{'bg-success':item.data.statusCode.code=='0','bg-warning':item.data.statusCode.code=='1','bg-gray-400':item.data.statusCode.code=='2'}">
<ng-container [ngSwitch]="item.status"> <ng-container [ngSwitch]="item.data.statusCode.code">
<span class="hs-tooltip ti-main-tooltip flex items-center"> <span class="hs-tooltip ti-main-tooltip flex items-center">
<i *ngSwitchCase="'1'" class="ti ti-clock hs-tooltip-toggle"></i> <i *ngSwitchCase="'0'" class="ti ti-clock hs-tooltip-toggle"></i>
<span <span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700" class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700"
role="tooltip"> role="tooltip">
กำลังดำเนินการประเมิน {{item.data.statusCode.tdesc}}
</span> </span>
</span> </span>
<span class="hs-tooltip ti-main-tooltip flex items-center"> <span class="hs-tooltip ti-main-tooltip flex items-center">
<i *ngSwitchCase="'2'" class="ti ti-hourglass-empty hs-tooltip-toggle"></i> <i *ngSwitchCase="'1'" class="ti ti-hourglass-empty hs-tooltip-toggle"></i>
<span <span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700" class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700"
role="tooltip"> role="tooltip">
รอดำเนินการ {{item.data.statusCode.tdesc}}
</span> </span>
</span> </span>
<span class="hs-tooltip ti-main-tooltip flex items-center"> <span class="hs-tooltip ti-main-tooltip flex items-center">
<i *ngSwitchCase="'3'" class="ti ti-check hs-tooltip-toggle"></i> <i *ngSwitchCase="'2'" class="ti ti-check hs-tooltip-toggle"></i>
<span <span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700" class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700"
role="tooltip"> role="tooltip">
สิ้นสุดช่วงเวลาประเมิน {{item.data.statusCode.tdesc}}
</span> </span>
</span> </span>
<span *ngSwitchDefault></span> <span *ngSwitchDefault></span>
...@@ -122,13 +132,21 @@ ...@@ -122,13 +132,21 @@
</span> </span>
</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';dataListSelect(item)" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)"
data-hs-overlay="#evaluation-cycle-modal"></i> 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"></i> <i class="ti ti-user cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-person-modal"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-delete-modal"></i> <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-delete-modal"></i>
<span class="badge text-white m-1" *ngIf="item.status!='2'" <!-- <span class="badge text-white m-1" *ngIf="item.data.statusCode.code!='1'"
[ngClass]="{'bg-primary':item.status=='1','bg-gray-400':item.status!='1'}">ปิดรอบประเมิน</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.status=='2'">สร้างแบบฟอร์ม</span> <span class="badge text-white m-1 bg-secondary" *ngIf="item.data.statusCode.code=='0'">สร้างแบบฟอร์ม</span> -->
<span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '0' || item.data.statusCode.code == '1'"
[ngClass]="{
'bg-primary': item.data.statusCode.code == '0',
'bg-secondary': item.data.statusCode.code == '1',
'text-white': item.data.statusCode.code == '0' || item.data.statusCode.code == '1'
}">
{{ item.data.statusCode.code == '0' ? 'ปิดรอบประเมิน' : 'สร้างแบบฟอร์มการประเมิน' }}
</span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -165,11 +183,16 @@ ...@@ -165,11 +183,16 @@
</a> </a>
</li> </li>
</ul> </ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{evaluation_cycleListFilter().length<10
?evaluation_cycleListFilter().length: (currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) -
evaluation_cycleListFilter().length) ) :(currentPage * 10) ) }} of {{evaluation_cycleListFilter().length}}
items</span>
</ul>
</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">
...@@ -178,7 +201,7 @@ ...@@ -178,7 +201,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-modal"> data-hs-overlay="#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>
...@@ -215,23 +238,31 @@ ...@@ -215,23 +238,31 @@
<label for="input-label" class="ti-form-label mt-2rem">รหัส รอบการประเมิน *</label> <label for="input-label" class="ti-form-label mt-2rem">รหัส รอบการประเมิน *</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.code"> [(ngModel)]="dataSelect.evaluationRoundId">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย) *</label> <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย) *</label>
<input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="dataSelect.period"> <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>
<input type="text" id="detail_eng" class="ti-form-input h-16"> <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="dataSelect.edesc">
<label for="input-label" class="ti-form-label mt-2rem">ปีการประเมิน</label> <label for="input-label" class="ti-form-label mt-2rem">ปีการประเมิน</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.year"> <input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.apsyear">
<label for="input-label" class="ti-form-label mt-2rem">ช่วงเวลารอบการประเมิน</label>
<input type="text" name="daterange" id="inlinetime" ngxDaterangepickerMd <label for="input-label" class="ti-form-label mt-2rem">เริ่มวันที่</label>
class="form-control ti-form-input focus:z-10 flatpickr-input" readonly /> <input type="date" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.apsPeriodStart">
<label for="input-label" class="ti-form-label mt-2rem">สิ้นสุดวันที่</label>
<input type="date" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.apsPeriodEnd">
<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-modal"> data-hs-overlay="#evaluation-cycle-page-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#evaluation-cycle-alert-modal"> <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#evaluation-cycle-page-alert-modal">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
...@@ -240,7 +271,7 @@ ...@@ -240,7 +271,7 @@
</div> </div>
</div> </div>
<div id="evaluation-cycle-alert-modal" class="hs-overlay hidden ti-modal"> <div id="evaluation-cycle-page-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">
...@@ -248,61 +279,55 @@ ...@@ -248,61 +279,55 @@
แจ้งเตือน แจ้งเตือน
</h3> </h3>
<div class="flex justify-end"> <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">
<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" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#evaluation-cycle-modal"> data-hs-overlay="#evaluation-cycle-page-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>
</ng-container>
</div> </div>
</div> </div>
<div class="ti-modal-body "> <div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70"> <p class="mt-1 text-gray-800 dark:text-white/70">
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
ยืนยันการบันทึกข้อมูลหรือไม่ ยืนยันการบันทึกข้อมูลหรือไม่
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
ยืนยันการลบข้อมูลหรือไม่
</ng-container>
</p> </p>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<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-modal"> data-hs-overlay="#evaluation-cycle-page-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#evaluation-cycle-alert-modal"> <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#evaluation-cycle-page-alert-modal" (click)="addevaluation_cycle()">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </ng-container>
</div> <ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
</div>
</div>
</div>
<div id="evaluation-cycle-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="#evaluation-cycle-delete-modal">
<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" <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-delete-modal"> data-hs-overlay="#evaluation-cycle-page-alert-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#evaluation-cycle-delete-modal"> <a class="ti-btn ti-btn-danger" href="javascript:void(0);"
data-hs-overlay="#evaluation-cycle-page-alert-modal" (click)="deleteevaluation_cycle()">
ลบข้อมูล ลบข้อมูล
</a> </a>
</ng-container>
</div> </div>
</div> </div>
</div> </div>
......
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; import { ChangeDetectorRef, Component} from '@angular/core';
import { ToastrService } from 'ngx-toastr'; 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';
import { MyStatusCodeModel, StatusCodeModel } from 'src/app/shared/model/status-code.model';
export interface DataModel { export interface DataModel {
check: boolean, evaluationRoundId: string;
code: string, tdesc: string;
period: string, edesc: string;
year: string, apsyear: string;
startDate: string, apsPeriodStart: string;
endDate: string, apsPeriodEnd: string;
status: string statusCode: StatusCodeModel;
} }
@Component({ @Component({
...@@ -17,94 +20,133 @@ export interface DataModel { ...@@ -17,94 +20,133 @@ export interface DataModel {
styleUrls: ['./evaluation-cycle.component.scss'] styleUrls: ['./evaluation-cycle.component.scss']
}) })
export class EvaluationCycleComponent { export class EvaluationCycleComponent {
apsPeriodStart: string = '';
apsPeriodEnd: string = '';
currentPage = 1 currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
search = "" search = ""
numDataListChecked = 0 modalStatus = 'add'
evaluation_cyclelist: { check: boolean, data: DataModel }[] = []
evaluation_cycle: EvaluationCycleModel = new MyEvaluationCycleModel({})
dataLoading = false
dataSelect: DataModel = { evaluationRoundId: "", tdesc: "", edesc: "", apsyear: "", apsPeriodStart: "", apsPeriodEnd: "", statusCode: new MyStatusCodeModel({})}
itemToDelete: EvaluationCycleModel | null = null;
isDataListChecked = false isDataListChecked = false
isDataListCheckedAll = false isDataListCheckedAll = false
dataList: DataModel[] = [ numDataListChecked = 0
{
check: false, constructor(private evaluationCycleService: EvaluationCycleService,
code: "Y67P2", private toastr: ToastrService,
period: "ช่วงเวลาที่ 2", private cdr: ChangeDetectorRef
year: "2567", ) { }
startDate: "01-07-2567",
endDate: "31-12-2567", ngOnInit(): void {
status: "1" this.getEvaluationCycleList()
},
{
check: false,
code: "Y68P1",
period: "ช่วงเวลาที่ 1",
year: "2568",
startDate: "01-01-2568",
endDate: "30-06-2568",
status: "2"
},
{
check: false,
code: "Y67P1",
period: "ช่วงเวลาที่ 1",
year: "2567",
startDate: "01-01-2567",
endDate: "30-06-2567",
status: "3"
},
]
dataSelect: DataModel = {
check: false,
code: "",
period: "",
year: "",
startDate: "",
endDate: "",
status: "",
}
modalStatus: "add" | "edit" = "add"
constructor(private cdr: ChangeDetectorRef) {
} }
dataListSelect(data?: DataModel) { getEvaluationCycleList() {
this.dataSelect = data || { this.evaluationCycleService.getList().subscribe({
next: response => {
console.log('API response:', response);
this.evaluation_cyclelist = response.map(x => ({
check: false, check: false,
code: "", data: {
period: "", evaluationRoundId: x.evaluationRoundId,
year: "", tdesc: x.tdesc,
startDate: "", edesc: x.edesc,
endDate: "", apsyear: x.apsyear,
status: "", apsPeriodStart: x.apsPeriodStart,
apsPeriodEnd: x.apsPeriodEnd,
statusCode: new MyStatusCodeModel(x.statusCode || {})
} }
this.cdr.detectChanges() }));
this.searchChange();
this.cdr.detectChanges();
},
error: err => {
console.error('Error fetching evaluation cycles:', err);
} }
dataListFilter() {
return this.dataList.filter(x => {
const match = x.code.includes(this.search) || x.period.includes(this.search);
if (!match) x.check = false;
return match;
}); });
} }
dataListCheck() { dataListCheck() {
const dataCheck = this.dataListFilter(); const dataCheck = this.evaluation_cycleListFilter();
this.isDataListChecked = dataCheck.some(x => x.check); this.isDataListChecked = dataCheck.some(x => x.check);
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false; this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
this.numDataListChecked = dataCheck.filter(x => x.check).length; this.numDataListChecked = dataCheck.filter(x => x.check).length;
} }
dataListCheckAll() { dataListCheckAll() {
const selectAll = this.isDataListCheckedAll; const selectAll = this.isDataListCheckedAll;
this.dataList.forEach(x => x.check = selectAll); this.evaluation_cyclelist.forEach(x => x.check = selectAll);
this.dataListCheck(); this.dataListCheck();
} }
searchChange() { searchChange() {
this.currentPage = 1; this.currentPage = 1
const filteredData = this.dataListFilter(); this.page = Array.from({ length: Math.ceil(this.evaluation_cycleListFilter().length / 10) }, (_, i) => i + 1);
this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1); }
this.dataListCheck(); evaluation_cycleListFilter() {
return this.evaluation_cyclelist.filter(x => {
const data = x.data
const match = data.evaluationRoundId.includes(this.search) || data.tdesc.includes(this.search) || data.edesc.includes(this.search);
return match;
});
}
setData(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || {
evaluationRoundId: "",
tdesc: "",
edesc: "",
apsyear: "",
apsPeriodStart: "",
apsPeriodEnd: "",
statusCode: new MyStatusCodeModel({})
}));
}
addevaluation_cycle() {
const body = new MyEvaluationCycleModel({ evaluationRoundId: this.dataSelect.evaluationRoundId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, apsyear: this.dataSelect.apsyear, apsPeriodStart: this.dataSelect.apsPeriodStart, apsPeriodEnd: this.dataSelect.apsPeriodEnd, statusCode: this.dataSelect.statusCode })
this.evaluationCycleService.post(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getEvaluationCycleList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
} }
deleteevaluation_cycle() {
let body: EvaluationCycleModel | EvaluationCycleModel[] = []
if (this.dataSelect.evaluationRoundId) {
body = new MyEvaluationCycleModel({ evaluationRoundId: this.dataSelect.evaluationRoundId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, apsyear: this.dataSelect.apsyear, apsPeriodStart: this.dataSelect.apsPeriodStart, apsPeriodEnd: this.dataSelect.apsPeriodEnd, statusCode: this.dataSelect.statusCode })
} else {
body = this.evaluation_cyclelist.filter(x => x.check).map(x => new MyEvaluationCycleModel({ evaluationRoundId: x.data.evaluationRoundId, tdesc: x.data.tdesc, edesc: x.data.edesc, apsyear: x.data.apsyear, apsPeriodStart: x.data.apsPeriodStart, apsPeriodEnd: x.data.apsPeriodEnd, statusCode: x.data.statusCode }))
}
this.evaluationCycleService.delete(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getEvaluationCycleList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
}
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
} }
src/app/components/competency-assessment/setting-competency/competency-configuration/competency-configuration.component.html
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</div> </div>
<div class="grid grid-cols-3 gap-6"> <div class="grid grid-cols-3 gap-6">
<div class="col-span-1"> <div class="col-span-1">
<input type="text" id="input-label" class="ti-form-input w-2/3 pr-10" value="2567"> <input type="text" id="input-label" class="ti-form-input w-2/3 pr-10" value="{{ setting.apsyear }}">
</div> </div>
</div> </div>
<div class="grid grid-cols-3 gap-6 mt-10"> <div class="grid grid-cols-3 gap-6 mt-10">
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</div> </div>
<div class="grid grid-cols-3 gap-6"> <div class="grid grid-cols-3 gap-6">
<div class="col-span-1"> <div class="col-span-1">
<input type="text" id="input-label" class="ti-form-input w-2/3 pr-10" value="8"> <input type="text" id="input-label" class="ti-form-input w-2/3 pr-10" value="{{ setting.expectationLevel }}">
</div> </div>
</div> </div>
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label mt-10">จัดการสมรรถนะกับกลุ่ม *</label> <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label mt-10">จัดการสมรรถนะกับกลุ่ม *</label>
...@@ -43,13 +43,13 @@ ...@@ -43,13 +43,13 @@
<div class="grid grid-cols-6 flex gap-x-6"> <div class="grid grid-cols-6 flex gap-x-6">
<div class="flex col-span-1 mt-5"> <div class="flex col-span-1 mt-5">
<input type="radio" name="hs-radio-group" class="ti-form-radio" id="hs-radio-group-1" checked> <input type="radio" name="hs-radio-group" class="ti-form-radio" id="hs-radio-group-1" checked>
<label for="hs-radio-group-1" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 dark:text-white/70">ระดับพนักงาน (PL)</label> <label for="hs-radio-group-1" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 dark:text-white/70">{{ setting.companyId }}</label>
</div> </div>
<div class="flex col-span-2 mt-5 ml-4rem"> <!-- <div class="flex col-span-2 mt-5 ml-4rem">
<input type="radio" name="hs-radio-group" class="ti-form-radio" id="hs-radio-group-2"> <input type="radio" name="hs-radio-group" class="ti-form-radio" id="hs-radio-group-2">
<label for="hs-radio-group-2" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 dark:text-white/70">ลักษณะงาน ( JD)</label> <label for="hs-radio-group-2" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 dark:text-white/70">ลักษณะงาน ( JD)</label>
</div> </div> -->
</div> </div>
</div> </div>
...@@ -69,11 +69,11 @@ ...@@ -69,11 +69,11 @@
<tbody> <tbody>
<tr> <tr>
<td>น้ำหนัก</td> <td>น้ำหนัก</td>
<td><span>1</span></td> <td><span>{{ setting.settingScore5 }}</span></td>
<td><span>0.8</span></td> <td><span>{{ setting.settingScore4 }}</span></td>
<td><span>0.6</span></td> <td><span>{{ setting.settingScore3 }}</span></td>
<td><span>0.4</span></td> <td><span>{{ setting.settingScore2 }}</span></td>
<td><span>0.2</span></td> <td><span>{{ setting.settingScore1 }}</span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
......
src/app/components/competency-assessment/setting-competency/competency-configuration/competency-configuration.component.ts
import { 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 { MySettingAssessmentModel, SettingAssessmentModel } from 'src/app/shared/model/setting-assessment.model';
import { SettingAssessmentService } from 'src/app/shared/services/setting-assessment.service';
@Component({ @Component({
selector: 'app-competency-configuration', selector: 'app-competency-configuration',
...@@ -11,80 +13,71 @@ export class CompetencyConfigurationComponent { ...@@ -11,80 +13,71 @@ export class CompetencyConfigurationComponent {
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>(); @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
isChecked: boolean = false; isChecked: boolean = false;
settingList: SettingAssessmentModel[] = []
// ฟังก์ชันในการเปลี่ยนแท็บ settingListLoading = false
changeTab(tab: { id: string, text: string }) { setting: SettingAssessmentModel = new MySettingAssessmentModel({})
this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'การตั้งค่า', tab.text]); search = ""
this.activeTab = tab.id; constructor(private settingAssessmentService: SettingAssessmentService,
private toastr: ToastrService,
private cdr: ChangeDetectorRef
) { }
ngOnInit(): void {
this.getSettingList()
} }
getSettingList() {
toggleCheckbox(): void { this.settingListLoading = true
this.isChecked = !this.isChecked; this.settingAssessmentService.getList().subscribe({
next: response => {
this.settingList = response
this.settingListLoading = false
this.cdr.detectChanges()
}, error: error => {
this.settingListLoading = false
this.cdr.detectChanges()
} }
})
// การจัดการการเปิดปิด modal
modalOptions: {
[nameModal: string]: {
isModalOpen: boolean;
modalSize: string;
backdropClose: boolean;
};
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
} }
}; selectsetting(setting?: SettingAssessmentModel) {
this.setting = new MySettingAssessmentModel(setting || {})
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
this.currentModal = name; // ตั้งค่าค่าของ currentModal เป็น 'add' หรือ 'edit'
document.body.style.overflow = 'hidden';
} }
closeModal(name: string) { // showSuccessAdd() {
this.modalOptions[name].isModalOpen = false; // this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', {
if (!this.isAnyModalOpen()) { // timeOut: 3000,
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว // positionClass: 'toast-top-right',
} // });
} // }
// showSuccessDelete() {
// this.toastr.success('ลบข้อมูลสำเร็จ', 'แจ้งเตือน', {
// timeOut: 3000,
// positionClass: 'toast-top-right',
// });
// }
// addsetting() {
// this.settingAssessmentService.post(this.setting).subscribe((response: any) => {
// if (response.success) {
// this.showSuccessAdd()
// this.getSettingList()
// }
// })
// }
// deletesetting() {
// this.settingAssessmentService.delete(this.setting).subscribe((response: any) => {
// if (response.success) {
// this.showSuccessDelete()
// this.getSettingList()
// }
// })
// }
isAnyModalOpen(): boolean { changeTab(tab: { id: string, text: string }) {
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // ตรวจสอบว่า modal อื่นยังเปิดอยู่หรือไม่ this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'การตั้งค่า', tab.text]);
this.activeTab = tab.id;
} }
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล toggleCheckbox(): void {
addUser() { this.isChecked = !this.isChecked;
} }
currentModal = ""
constructor(private toastr: ToastrService) { }
showSuccess() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
showSuccessEdit() {
this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
} }
src/app/components/dashboard/dashboard.module.ts
...@@ -120,6 +120,8 @@ import { CompetencytopicService } from 'src/app/shared/services/competencytopic. ...@@ -120,6 +120,8 @@ import { CompetencytopicService } from 'src/app/shared/services/competencytopic.
import { AssessmentService } from 'src/app/shared/services/assessment.service'; import { AssessmentService } from 'src/app/shared/services/assessment.service';
import { CompetencycourseService } from 'src/app/shared/services/competencycourse.service'; import { CompetencycourseService } from 'src/app/shared/services/competencycourse.service';
import { EmployeeService } from 'src/app/shared/services/employee.service'; import { EmployeeService } from 'src/app/shared/services/employee.service';
import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service';
import { SettingAssessmentService } from 'src/app/shared/services/setting-assessment.service';
@NgModule({ @NgModule({
declarations: [ declarations: [
SalesComponent, SalesComponent,
...@@ -247,6 +249,8 @@ import { EmployeeService } from 'src/app/shared/services/employee.service'; ...@@ -247,6 +249,8 @@ import { EmployeeService } from 'src/app/shared/services/employee.service';
AssessmentService, AssessmentService,
CompetencycourseService, CompetencycourseService,
EmployeeService, EmployeeService,
EvaluationCycleService,
SettingAssessmentService,
{ {
provide: HTTP_INTERCEPTORS, provide: HTTP_INTERCEPTORS,
useClass: HttpRequestInterceptor, useClass: HttpRequestInterceptor,
......
src/app/shared/model/evaluation-cycle.model.ts 0 → 100644
import { MyStatusCodeModel, StatusCodeModel } from "./status-code.model";
export interface EvaluationCycleModel {
evaluationRoundId: string;
tdesc: string;
edesc: string;
apsyear: string;
apsPeriodStart: string;
apsPeriodEnd: string;
statusCode: StatusCodeModel;
}
export class MyEvaluationCycleModel implements EvaluationCycleModel {
evaluationRoundId: string;
tdesc: string;
edesc: string;
apsyear: string;
apsPeriodStart: string;
apsPeriodEnd: string;
statusCode: StatusCodeModel;
constructor(data: Partial<EvaluationCycleModel>) {
this.evaluationRoundId = data.evaluationRoundId || "";
this.tdesc = data.tdesc || "";
this.edesc = data.edesc || "";
this.apsyear = data.apsyear || "";
this.apsPeriodStart = data.apsPeriodStart || "";
this.apsPeriodEnd = data.apsPeriodEnd || "";
this.statusCode =new MyStatusCodeModel(data.statusCode || {})
}
}
src/app/shared/model/setting-assessment.model.ts 0 → 100644
export interface SettingAssessmentModel {
apsyear: string;
companyId: string;
expectationLevel: number;
settingGroupAssessment: string;
settingScore5: number;
settingScore4: number;
settingScore3: number;
settingScore2: number;
settingScore1: number;
}
export class MySettingAssessmentModel implements SettingAssessmentModel {
apsyear: string;
companyId: string;
expectationLevel: number;
settingGroupAssessment: string;
settingScore5: number;
settingScore4: number;
settingScore3: number;
settingScore2: number;
settingScore1: number;
constructor(data: Partial<SettingAssessmentModel>) {
this.apsyear = data.apsyear || "";
this.companyId = data.companyId || "";
this.expectationLevel = data.expectationLevel ?? 0;
this.settingGroupAssessment = data.settingGroupAssessment || "";
this.settingScore5 = data.settingScore5 ?? 0;
this.settingScore4 = data.settingScore4 ?? 0;
this.settingScore3 = data.settingScore3 ?? 0;
this.settingScore2 = data.settingScore2 ?? 0;
this.settingScore1 = data.settingScore1 ?? 0;
}
}
\ No newline at end of file
src/app/shared/model/status-code.model.ts 0 → 100644
export interface StatusCodeModel {
code: string;
tdesc: string;
edesc: string;
}
export class MyStatusCodeModel implements StatusCodeModel {
code: string;
tdesc: string;
edesc: string;
constructor(data: Partial<StatusCodeModel>) {
this.code = data.code || "";
this.tdesc = data.tdesc || "";
this.edesc = data.edesc || "";
}
}
\ No newline at end of file
src/app/shared/services/emp-group.service.ts
...@@ -19,18 +19,6 @@ export class EmpGroupService { ...@@ -19,18 +19,6 @@ export class EmpGroupService {
getById(groupId: string): Observable<EmpGroupModel> { getById(groupId: string): Observable<EmpGroupModel> {
return this.http.get<EmpGroupModel>(this.urlApi + "/" + groupId) return this.http.get<EmpGroupModel>(this.urlApi + "/" + groupId)
} }
// post(body: EmpGroupModel) {
// return this.http.post(this.urlApi, body)
// }
// delete(body: EmpGroupModel) {
// const options = {
// headers: new HttpHeaders({
// "Content-Type": "application/json",
// }),
// body: body
// };
// return this.http.delete(this.urlApi, options)
// }
post(body: EmpGroupModel): Observable<AlertModel> { post(body: EmpGroupModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body) return this.http.post<AlertModel>(this.urlApi, body)
} }
......
src/app/shared/services/evaluation-cycle.service.ts 0 → 100644
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { AlertModel } from '../model/alert.model';
import { EvaluationCycleModel } from '../model/evaluation-cycle.model';
@Injectable({
providedIn: 'root'
})
export class EvaluationCycleService {
api = "/evaluation-round"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getList(): Observable<EvaluationCycleModel[]> {
return this.http.get<EvaluationCycleModel[]>(this.urlApi + "/lists")
}
getById(evaluationRoundId: string): Observable<EvaluationCycleModel> {
return this.http.get<EvaluationCycleModel>(this.urlApi + "/" + evaluationRoundId)
}
post(body: EvaluationCycleModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body)
}
delete(body: EvaluationCycleModel | EvaluationCycleModel[]): Observable<AlertModel> {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete<AlertModel>(this.urlApi, options)
}
}
src/app/shared/services/setting-assessment.service.ts 0 → 100644
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { AlertModel } from '../model/alert.model';
import { SettingAssessmentModel } from '../model/setting-assessment.model';
@Injectable({
providedIn: 'root'
})
export class SettingAssessmentService {
api = "/setting-assessment"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getList(): Observable<SettingAssessmentModel[]> {
return this.http.get<SettingAssessmentModel[]>(this.urlApi + "/lists")
}
// getById(companyId: string): Observable<SettingAssessmentModel> {
// return this.http.get<SettingAssessmentModel>(this.urlApi + "/" + companyId)
// }
post(body: SettingAssessmentModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body)
}
delete(body: SettingAssessmentModel | SettingAssessmentModel[]): Observable<AlertModel> {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete<AlertModel>(this.urlApi, 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