Skip to content

M
mySkill-x
Commit cdc2d0e7 by Nattana Chaiyamat
Options

การประเมินสมรรถนะ > การจัดการรอบการประเมิน > รอบการประเมิน

parent 684a5f62
Showing with 93 additions and 77 deletions
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.html
......@@ -9,12 +9,12 @@
{{numDataListChecked}} Selected</label>
</div>
<div class="mx-1 flex items-center">
<button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()"
<button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" id='check-boxall'
class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
<i class="fs-l transition-all duration-200"
[ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
</button>
<label class="text-sm text-gray-500 ml-2">Select All</label>
<label class="text-sm text-gray-500 ml-2 cursor-pointer" for="check-boxall">Select All</label>
</div>
</div>
</div>
......@@ -31,21 +31,21 @@
</div>
</div>
<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-20px m-0 shadow-md"
data-hs-overlay="#evaluation-cycle-page-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-45px m-0 shadow-md"
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
data-hs-overlay="#evaluation-cycle-page-alert-modal" (click)="modalStatus='deleteGroup';setData()">
<i class="ti ti-trash fs-l"></i>
Delete
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
......@@ -60,7 +60,7 @@
<thead class="height-50px">
<tr class="font-size-12px">
<ng-container
*ngFor="let item of ['รหัส','รายละเอียด','รอบปีการประเมิน','วันที่เริ่มต้น','วันที่สิ้นสุด','สถานะ','การจัดการ']; let f = first; let l = last">
*ngFor="let item of ['รหัส','รายละเอียด','รอบปีการประเมิน','วันที่เริ่มต้น','วันที่สิ้นสุด','สถานะ','Action']; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary" [class.!text-center]="f||l">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
......@@ -91,8 +91,8 @@
<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()">
<label for="checkbox-{{item.data.evaluationRoundId}}">&nbsp;{{item.data.evaluationRoundId}}</label>
</td>
<td>{{item.data.tdesc}}</td>
......@@ -135,31 +135,29 @@
<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"></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" (click)="modalStatus='delete';setData(item.data)"
data-hs-overlay="#evaluation-cycle-page-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> -->
<span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '0'"
[ngClass]="{
<span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '0'" [ngClass]="{
'bg-primary': item.data.statusCode.code == '0',
'text-white': item.data.statusCode.code == '0'
}">
ปิดรอบประเมิน
</span>
<span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '1'"
[ngClass]="{
ปิดรอบประเมิน
</span>
<span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '1'" [ngClass]="{
'bg-secondary': item.data.statusCode.code == '1',
'text-white': item.data.statusCode.code == '1'
}">
สร้างแบบฟอร์ม
</span>
<span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '2'"
[ngClass]="{
สร้างแบบฟอร์ม
</span>
<span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '2'" [ngClass]="{
'bg-gray-400': item.data.statusCode.code == '2',
'text-white': item.data.statusCode.code == '2'
}">
ปิดรอบประเมิน
</span>
ปิดรอบประเมิน
</span>
</td>
</tr>
</tbody>
......@@ -248,24 +246,25 @@
</div>
</div>
<div class="ti-modal-body padding-16px pt-0 overflow-y-0">
<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"
[ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'"
[(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.tdesc">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
<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>
<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" id="input-label" class="ti-form-input w-1/2"
oninput="this.value = this.value.replace(/\D/g, '')" [(ngModel)]="dataSelect.apsyear">
<label for="input-label" class="ti-form-label mt-2rem">เริ่มวันที่</label>
<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.apsPeriodStart">
<label for="input-label" class="ti-form-label mt-2rem">สิ้นสุดวันที่</label>
<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">
......@@ -274,10 +273,11 @@
data-hs-overlay="#evaluation-cycle-page-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#evaluation-cycle-page-alert-modal">
<button type="button" class="ti-btn ti-btn-success" data-hs-overlay="#evaluation-cycle-page-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">
บันทึกข้อมูล
</a>
</button>
</div>
</div>
</div>
......
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.ts
import { ChangeDetectorRef, Component} from '@angular/core';
import { ChangeDetectorRef, Component } 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';
import { MyStatusCodeModel, StatusCodeModel } from 'src/app/shared/model/status-code.model';
export interface DataModel {
evaluationRoundId: string;
tdesc: string;
edesc: string;
apsyear: string;
apsPeriodStart: string;
apsPeriodEnd: string;
statusCode: StatusCodeModel;
evaluationRoundId: string;
tdesc: string;
edesc: string;
apsyear: string;
apsPeriodStart: string;
apsPeriodEnd: string;
statusCode: StatusCodeModel;
}
@Component({
selector: 'app-evaluation-cycle',
templateUrl: './evaluation-cycle.component.html',
styleUrls: ['./evaluation-cycle.component.scss']
selector: 'app-evaluation-cycle',
templateUrl: './evaluation-cycle.component.html',
styleUrls: ['./evaluation-cycle.component.scss']
})
export class EvaluationCycleComponent {
apsPeriodStart: string = '';
apsPeriodEnd: string = '';
apsPeriodEnd: string = '';
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
......@@ -30,7 +30,7 @@ export class EvaluationCycleComponent {
evaluation_cyclelist: { check: boolean, data: DataModel }[] = []
evaluation_cycle: EvaluationCycleModel = new MyEvaluationCycleModel({})
dataLoading = false
dataSelect: DataModel = { evaluationRoundId: "", tdesc: "", edesc: "", apsyear: "", apsPeriodStart: "", apsPeriodEnd: "", statusCode: new MyStatusCodeModel({})}
dataSelect: DataModel = { evaluationRoundId: "", tdesc: "", edesc: "", apsyear: "", apsPeriodStart: "", apsPeriodEnd: "", statusCode: new MyStatusCodeModel({}) }
itemToDelete: EvaluationCycleModel | null = null;
isDataListChecked = false
isDataListCheckedAll = false
......@@ -40,82 +40,92 @@ export class EvaluationCycleComponent {
private toastr: ToastrService,
private cdr: ChangeDetectorRef
) { }
ngOnInit(): void {
this.getEvaluationCycleList()
}
getEvaluationCycleList() {
this.dataLoading = true
this.evaluationCycleService.getList().subscribe({
next: response => {
console.log('API response:', response);
this.evaluation_cyclelist = response.map(x => ({
check: false,
data: {
evaluationRoundId: x.evaluationRoundId,
tdesc: x.tdesc,
edesc: x.edesc,
apsyear: x.apsyear,
apsPeriodStart: x.apsPeriodStart,
apsPeriodEnd: x.apsPeriodEnd,
statusCode: new MyStatusCodeModel(x.statusCode || {})
}
check: false,
data: {
evaluationRoundId: x.evaluationRoundId,
tdesc: x.tdesc,
edesc: x.edesc,
apsyear: x.apsyear,
apsPeriodStart: x.apsPeriodStart,
apsPeriodEnd: x.apsPeriodEnd,
statusCode: new MyStatusCodeModel(x.statusCode || {})
}
}));
this.dataLoading = false
this.isDataListCheckedAll = false
this.dataListCheckAll()
this.searchChange();
this.cdr.detectChanges();
},
error: err => {
console.error('Error fetching evaluation cycles:', err);
this.dataLoading = false
this.cdr.detectChanges();
}
});
}
dataListCheck() {
const dataCheck = this.evaluation_cycleListFilter();
this.isDataListChecked = dataCheck.some(x => x.check);
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
this.numDataListChecked = dataCheck.filter(x => x.check).length;
}
dataListCheckAll() {
dataListCheckAll() {
const selectAll = this.isDataListCheckedAll;
this.evaluation_cyclelist.forEach(x => x.check = selectAll);
this.evaluation_cycleListFilter().forEach(x => x.check = selectAll);
this.dataListCheck();
}
}
dataListCheck() {
const dataCheck = this.evaluation_cycleListFilter();
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
this.numDataListChecked = this.evaluation_cyclelist.filter(x => x.check).length;
this.isDataListChecked = Boolean(this.numDataListChecked)
}
searchChange() {
this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.evaluation_cycleListFilter().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);
const match = data.evaluationRoundId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
return match;
});
}
setData(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || {
evaluationRoundId: "",
tdesc: "",
edesc: "",
apsyear: "",
apsPeriodStart: "",
apsPeriodEnd: "",
statusCode: new MyStatusCodeModel({})
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.dataLoading = true
this.evaluationCycleService.post(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getEvaluationCycleList()
} else {
this.dataLoading = false
this.showAlert(response.message, 'error')
this.cdr.detectChanges()
}
}, error: error => {
this.showAlert(error.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
})
}
......@@ -127,16 +137,22 @@ dataListCheckAll() {
} 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.dataLoading = true
this.evaluationCycleService.delete(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getEvaluationCycleList()
} else {
this.dataLoading = false
this.showAlert(response.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
}, error: error => {
this.showAlert(error.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
})
}
......
src/app/components/competency-assessment/setting-competency/competency-configuration/competency-configuration.component.html
......@@ -26,7 +26,7 @@
<div class="grid grid-cols-3 gap-6">
<div class="col-span-1">
<input type="text" class="ti-form-input w-2/3 pr-10"
oninput="this.value = this.value.replace(/\D/g, '')">
oninput="this.value = this.value.replace(/\D/g, '')" [(ngModel)]="setting.data.apsyear">
</div>
</div>
<div class="grid grid-cols-3 gap-6 mt-10">
......
src/app/components/competency-assessment/setting-competency/competency-configuration/competency-configuration.component.ts
......@@ -32,7 +32,7 @@ export class CompetencyConfigurationComponent {
}
saveSetting() {
this.setting.loading = true
this.settingAssessmentService.post(this.setting.data).subscribe({
this.settingAssessmentService.post(new MySettingAssessmentModel({ ...this.setting.data, expectationLevel: +(this.setting.data.expectationLevel) })).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
......
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