Skip to content

M
myAppraisal
Commit 9b4fec34 by Nattana Chaiyamat
Options

compentency pms

parent a19d8b26
Showing with 765 additions and 695 deletions
src/app/components/competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component.ts
...@@ -129,7 +129,7 @@ export class EditGroupCompetenciesComponent { ...@@ -129,7 +129,7 @@ export class EditGroupCompetenciesComponent {
dataListModalFilter() { dataListModalFilter() {
return this.dataListModal.filter(x => { return this.dataListModal.filter(x => {
const data = x.data const data = x.data
if (this.dataList.some(y => y.data.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.expectation == data.competencyIndicatorsCourses0.expectation)) { if (this.dataList.some(y => y.data.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId == data.competencyIndicatorsCourses0.competencyTopic.competencyTopicId)) {
return return
} }
const match = data.competencyIndicatorsCourses0.competencyTopic.competencyTopicId.toLowerCase().includes(this.searchModal.toLowerCase()) || const match = data.competencyIndicatorsCourses0.competencyTopic.competencyTopicId.toLowerCase().includes(this.searchModal.toLowerCase()) ||
......
src/app/components/competency-assessment/grade-registration/grade-management/grade-management.component.html
<ng-container *ngIf="!typeTab"> <ng-container *ngIf="!typeTab">
<div class="w-full min-height-50px mb-10px justify-between items-center"> <div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex pr-2"> <div class="flex">
<div class="flex"> <div class="flex items-center">
<div class="flex items-center"> <input type="checkbox" class="ti-form-checkbox pointer-events-none" id="hs-default-checkbox"
<label for="hs-default-checkbox" class="text-sm text-gray-500 mx-2 pointer-events-none"> [(ngModel)]="isDataListChecked">
{{numDataListChecked}} Selected</label> <label for="hs-default-checkbox" class="text-sm text-gray-500 mx-2 pointer-events-none">
</div> {{numDataListChecked}} Selected</label>
<div class="mx-1 flex items-center"> </div>
<button (click)="dataListCheckAll()" <div class="mx-1 flex items-center">
class="focus:ring-2 focus:ring-primary rounded-sm flex item-center"> <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()"
<i class="fs-l transition-all duration-200" class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
[ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i> <i class="fs-l transition-all duration-200"
</button> [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
<label class="text-sm text-gray-500 ml-2" (click)="dataListCheckAll()">Select All</label> </button>
</div> <label class="text-sm text-gray-500 ml-2">Select All</label>
</div> </div>
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
...@@ -156,7 +156,7 @@ ...@@ -156,7 +156,7 @@
data-hs-overlay="#grade-management-alert-delete-modal"> data-hs-overlay="#grade-management-alert-delete-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-danger" href="javascript:void(0);"
data-hs-overlay="#grade-management-alert-delete-modal" data-hs-overlay="#grade-management-alert-delete-modal"
(click)="deleteCompetencyGroupGradeList();"> (click)="deleteCompetencyGroupGradeList();">
ลบข้อมูล ลบข้อมูล
...@@ -170,8 +170,8 @@ ...@@ -170,8 +170,8 @@
<ng-container *ngIf="typeTab"> <ng-container *ngIf="typeTab">
<app-group-grade [dataSelect]="dataSelect" [typeTab]="typeTab" <app-group-grade [dataSelect]="dataSelect" [typeTab]="typeTab" (sendBackTab)="pathTitleChange($event)"
(sendBackTab)="pathTitleChange($event)" (sendDataList)="dataList=$event"></app-group-grade> (sendDataList)="dataList=$event"></app-group-grade>
</ng-container> </ng-container>
<!-- <ng-container *ngIf="editTab"> <!-- <ng-container *ngIf="editTab">
......
src/app/components/competency-assessment/grade-registration/grade-management/grade-management.component.ts
...@@ -22,8 +22,9 @@ export class GradeManagementComponent { ...@@ -22,8 +22,9 @@ export class GradeManagementComponent {
typeTab: "" | "add" | "edit" = ""; typeTab: "" | "add" | "edit" = "";
currentPage = 1; currentPage = 1;
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
numDataListChecked = 0; numDataListChecked = 0
isDataListCheckedAll = false; isDataListChecked = false
isDataListCheckedAll = false
search = ''; search = '';
dataList: DataModel[] = []; dataList: DataModel[] = [];
...@@ -46,8 +47,10 @@ export class GradeManagementComponent { ...@@ -46,8 +47,10 @@ export class GradeManagementComponent {
this.competencyGroupGradeService.getList().subscribe({ this.competencyGroupGradeService.getList().subscribe({
next: response => { next: response => {
this.dataList = response.map(x => ({ check: false, code: x.groupGradeId, tdesc: x.tdesc, edesc: x.edesc, competencyGrades: x.competencyGrades })) this.dataList = response.map(x => ({ check: false, code: x.groupGradeId, tdesc: x.tdesc, edesc: x.edesc, competencyGrades: x.competencyGrades }))
this.dataLoading = false this.isDataListCheckedAll = false
this.dataListCheckAll()
this.searchChange() this.searchChange()
this.dataLoading = false
this.cdr.detectChanges() this.cdr.detectChanges()
}, error: error => { }, error: error => {
this.dataLoading = false this.dataLoading = false
...@@ -76,33 +79,16 @@ export class GradeManagementComponent { ...@@ -76,33 +79,16 @@ export class GradeManagementComponent {
this.currentPage = 1; this.currentPage = 1;
const filteredData = this.dataListFilter(); const filteredData = this.dataListFilter();
this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
this.dataListCheck()
} }
dataListFilter() { dataListFilter() {
return this.dataList.filter((x) => { return this.dataList.filter((x) => {
const match = x.code.toLowerCase().includes(this.search.toLowerCase()) || x.tdesc.toLowerCase().includes(this.search.toLowerCase()) || x.edesc.toLowerCase().includes(this.search.toLowerCase()); const match = x.code.toLowerCase().includes(this.search.toLowerCase()) || x.tdesc.toLowerCase().includes(this.search.toLowerCase()) || x.edesc.toLowerCase().includes(this.search.toLowerCase());
if (!match) x.check = false;
return match; return match;
}); });
} }
dataListCheck() {
const dataCheck = this.dataListFilter();
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every((x) => x.check) : false;
this.numDataListChecked = dataCheck.filter((x) => x.check).length;
}
dataListCheckAll() {
this.isDataListCheckedAll = !this.isDataListCheckedAll;
const selectAll = this.isDataListCheckedAll;
this.dataList = this.dataList.filter((x) => {
const match = x.code.toLowerCase().includes(this.search.toLowerCase()) || x.tdesc.toLowerCase().includes(this.search.toLowerCase()) || x.edesc.toLowerCase().includes(this.search.toLowerCase());
if (!match) x.check = false;
return match;
}).map((x) => ({ ...x, check: selectAll }));
this.dataListCheck();
}
showAlert(text: string, type: 'success' | 'error') { showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', { this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000, timeOut: 3000,
...@@ -112,6 +98,7 @@ export class GradeManagementComponent { ...@@ -112,6 +98,7 @@ export class GradeManagementComponent {
deleteCompetencyGroupGradeList() { deleteCompetencyGroupGradeList() {
const body = this.dataSelect.code ? new MyCompetencyGroupGradeModel({ groupGradeId: this.dataSelect.code, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc }) : this.dataList.filter(x => x.check).map(x => new MyCompetencyGroupGradeModel({ groupGradeId: x.code, tdesc: x.tdesc, edesc: x.edesc })) const body = this.dataSelect.code ? new MyCompetencyGroupGradeModel({ groupGradeId: this.dataSelect.code, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc }) : this.dataList.filter(x => x.check).map(x => new MyCompetencyGroupGradeModel({ groupGradeId: x.code, tdesc: x.tdesc, edesc: x.edesc }))
this.dataLoading = true
this.competencyGroupGradeService.delete(body).subscribe({ this.competencyGroupGradeService.delete(body).subscribe({
next: response => { next: response => {
if (response.success) { if (response.success) {
...@@ -119,10 +106,27 @@ export class GradeManagementComponent { ...@@ -119,10 +106,27 @@ export class GradeManagementComponent {
this.getCompetencyGroupGradeList() this.getCompetencyGroupGradeList()
} else { } else {
this.showAlert(response.message, 'error') this.showAlert(response.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
} }
}, error: error => { }, error: error => {
this.showAlert(error.message, 'error') this.showAlert(error.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
} }
}) })
} }
dataListCheckAll() {
const selectAll = this.isDataListCheckedAll;
this.dataListFilter().forEach(x => x.check = selectAll);
this.dataListCheck();
}
dataListCheck() {
const dataCheck = this.dataListFilter();
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
this.numDataListChecked = this.dataList.filter(x => x.check).length;
this.isDataListChecked = Boolean(this.numDataListChecked)
}
} }
src/app/components/competency-assessment/grade-registration/grade-management/group-grade/group-grade.component.html
...@@ -14,8 +14,8 @@ ...@@ -14,8 +14,8 @@
<div class="flex justify-end"> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-success h-10 m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-success h-10 m-0 shadow-md"
[ngClass]="{'ti-btn-disabled': !dataSelect.code}" data-hs-overlay="#add-group-grade-alert-add-modal" [ngClass]="{'ti-btn-disabled': !dataSelect.code||!dataSelect.tdesc}"
[disabled]="!dataSelect.code"> data-hs-overlay="#add-group-grade-alert-add-modal" [disabled]="!dataSelect.code||!dataSelect.tdesc">
<i class="ri-save-3-line"></i> <i class="ri-save-3-line"></i>
Save Save
</button> </button>
...@@ -65,8 +65,9 @@ ...@@ -65,8 +65,9 @@
<div class="pt-50px"> <div class="pt-50px">
<div *ngIf="currentTab==1" id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1"> <div *ngIf="currentTab==1" id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<div class="page px-rem"> <div class="page px-rem">
<label for="input-label" class="ti-form-label">กำหนดรหัสกลุ่มเกรด</label> <label for="input-label" class="ti-form-label">กำหนดรหัสกลุ่มเกรด*</label>
<input type="text" id="input-label" class="ti-form-input w-1/4" [(ngModel)]="dataSelect.code"> <input type="text" id="input-label" class="ti-form-input w-1/4" [readonly]="typeTab == 'edit'"
[class.bg-input-readonly]="typeTab == 'edit'" [(ngModel)]="dataSelect.code">
<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 w-1/2" [(ngModel)]="dataSelect.tdesc"> <input type="text" id="detail_th" class="ti-form-input w-1/2" [(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>
...@@ -111,7 +112,7 @@ ...@@ -111,7 +112,7 @@
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#add-group-grade-alert-add-modal" (click)="postCompetencyGroupGrade()"> data-hs-overlay="#add-group-grade-alert-add-modal" (click)="postCompetencyGroupGrade()">
เพิ่มข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
</div> </div>
......
src/app/components/competency-assessment/grade-registration/grade-management/group-grade/group-grade.component.ts
...@@ -30,12 +30,19 @@ export class GroupGradeComponent implements OnInit { ...@@ -30,12 +30,19 @@ export class GroupGradeComponent implements OnInit {
this.dataOriginal = JSON.parse(JSON.stringify(this.dataSelect || { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] })) this.dataOriginal = JSON.parse(JSON.stringify(this.dataSelect || { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] }))
} }
clear() { clear() {
this.dataSelect = JSON.parse(JSON.stringify(this.dataOriginal || { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] })) if (this.typeTab == 'add') {
this.dataSelect = { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] }
this.cdr.detectChanges()
} else if (this.typeTab == 'edit') {
this.dataSelect = { check: false, code: this.dataOriginal.code, tdesc: '', edesc: '', competencyGrades: [] }
this.cdr.detectChanges()
}
} }
backTab() { backTab() {
this.sendBackTab.emit(); this.sendBackTab.emit();
} }
postCompetencyGroupGrade() { postCompetencyGroupGrade() {
console.log(this.dataSelect)
this.competencyGroupGradeService.post(new MyCompetencyGroupGradeModel({ groupGradeId: this.dataSelect.code, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, competencyGrades: this.dataSelect.competencyGrades })).subscribe({ this.competencyGroupGradeService.post(new MyCompetencyGroupGradeModel({ groupGradeId: this.dataSelect.code, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, competencyGrades: this.dataSelect.competencyGrades })).subscribe({
next: response => { next: response => {
if (response.success) { if (response.success) {
......
src/app/components/competency-assessment/grade-registration/grade-management/sub-grade-registration/sub-grade-registration.component.html
<div class="w-full min-height-50px mb-10px justify-between items-center"> <div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex pr-2"> <div class="flex">
<div class="flex"> <div class="flex items-center">
<div class="flex items-center"> <input type="checkbox" class="ti-form-checkbox pointer-events-none" id="hs-default-checkbox"
<label for="hs-default-checkbox" class="text-sm text-gray-500 mx-2 pointer-events-none"> [(ngModel)]="isDataListChecked">
{{numDataListChecked}} Selected</label> <label for="hs-default-checkbox" class="text-sm text-gray-500 mx-2 pointer-events-none">
</div> {{numDataListChecked}} Selected</label>
<div class="mx-1 flex items-center"> </div>
<button (click)="dataListCheckAll()" <div class="mx-1 flex items-center">
class="focus:ring-2 focus:ring-primary rounded-sm flex item-center"> <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()"
<i class="fs-l transition-all duration-200" class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
[ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i> <i class="fs-l transition-all duration-200"
</button> [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
<label class="text-sm text-gray-500 ml-2" (click)="dataListCheckAll()">Select All</label> </button>
</div> <label class="text-sm text-gray-500 ml-2">Select All</label>
</div> </div>
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md" <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
data-hs-overlay="#sub-grade-registration-alert-delete-modal" data-hs-overlay="#sub-grade-registration-alert-delete-modal"
(click)="selectData();modalStatus='delete'"> (click)="selectData();modalStatus='deleteGroup'">
<i class="ri-delete-bin-6-line"></i> <i class="ri-delete-bin-6-line"></i>
Delete Delete
</button> </button>
...@@ -158,7 +158,7 @@ ...@@ -158,7 +158,7 @@
<div class="ti-modal-center"> <div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;"> <div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md"> <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md" (click)="clear()">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00" <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)"> transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
...@@ -220,9 +220,10 @@ ...@@ -220,9 +220,10 @@
<div class="w-1/2 pl-2"> <div class="w-1/2 pl-2">
<label class="ti-form-label">น้ำหนัก</label> <label class="ti-form-label">น้ำหนัก</label>
<div class="relative flex rounded-md"> <div class="relative flex rounded-md">
<input type="number" id="hs-leading-button-add-on-with-icon-and-button" <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
oninput="this.value = this.value.replace(/\D/g, '')"
[(ngModel)]="competencyGrade.select.weight"> [(ngModel)]="competencyGrade.select.weight">
</div> </div>
</div> </div>
...@@ -231,18 +232,20 @@ ...@@ -231,18 +232,20 @@
<div class="w-1/2 pr-2"> <div class="w-1/2 pr-2">
<label class="ti-form-label">คะแนนต่ำสุด *</label> <label class="ti-form-label">คะแนนต่ำสุด *</label>
<div class="relative flex rounded-md"> <div class="relative flex rounded-md">
<input type="number" id="hs-leading-button-add-on-with-icon-and-button" <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
oninput="this.value = this.value.replace(/\D/g, '')"
[(ngModel)]="competencyGrade.select.gradeMinScore"> [(ngModel)]="competencyGrade.select.gradeMinScore">
</div> </div>
</div> </div>
<div class="w-1/2 pl-2"> <div class="w-1/2 pl-2">
<label class="ti-form-label">คะแนนสูงสุด *</label> <label class="ti-form-label">คะแนนสูงสุด *</label>
<div class="relative flex rounded-md"> <div class="relative flex rounded-md">
<input type="number" id="hs-leading-button-add-on-with-icon-and-button" <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
oninput="this.value = this.value.replace(/\D/g, '')"
[(ngModel)]="competencyGrade.select.gradeMaxScore"> [(ngModel)]="competencyGrade.select.gradeMaxScore">
</div> </div>
</div> </div>
...@@ -253,11 +256,12 @@ ...@@ -253,11 +256,12 @@
data-hs-overlay="#sub-grade-registration-modal"> data-hs-overlay="#sub-grade-registration-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <button type="button" class="ti-btn ti-btn-success"
data-hs-overlay="#sub-grade-registration-alert-modal"> data-hs-overlay="#sub-grade-registration-alert-modal"
[class.ti-btn-disabled]="!competencyGrade.select.gradeId||!competencyGrade.select.tdesc||!competencyGrade.select.gradeDetail||checkNumberEmpty(competencyGrade.select.gradeMinScore)||checkNumberEmpty(competencyGrade.select.gradeMaxScore)"
[disabled]="!competencyGrade.select.gradeId||!competencyGrade.select.tdesc||!competencyGrade.select.gradeDetail||checkNumberEmpty(competencyGrade.select.gradeMinScore)||checkNumberEmpty(competencyGrade.select.gradeMaxScore)">
บันทึกข้อมูล บันทึกข้อมูล
</a> </button>
</div> </div>
</div> </div>
</div> </div>
...@@ -325,7 +329,7 @@ ...@@ -325,7 +329,7 @@
data-hs-overlay="#sub-grade-registration-alert-delete-modal"> data-hs-overlay="#sub-grade-registration-alert-delete-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-danger" href="javascript:void(0);"
data-hs-overlay="#sub-grade-registration-alert-delete-modal" data-hs-overlay="#sub-grade-registration-alert-delete-modal"
(click)="updateCompetencyGroupGrade()"> (click)="updateCompetencyGroupGrade()">
ลบข้อมูล ลบข้อมูล
......
src/app/components/competency-assessment/grade-registration/grade-management/sub-grade-registration/sub-grade-registration.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; import { ChangeDetectorRef, Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/core';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { CompetencyGradeModel, MyCompetencyGradeModel } from 'src/app/shared/model/competency-grades.model'; import { CompetencyGradeModel, MyCompetencyGradeModel } from 'src/app/shared/model/competency-grades.model';
import { MyCompetencyGroupGradeModel } from 'src/app/shared/model/competency-group-grade.model'; import { MyCompetencyGroupGradeModel } from 'src/app/shared/model/competency-group-grade.model';
...@@ -23,10 +23,11 @@ export class SubGradeRegistrationComponent { ...@@ -23,10 +23,11 @@ export class SubGradeRegistrationComponent {
competencyGrade: { select: CompetencyGradeModel, dataList: { check: boolean, data: CompetencyGradeModel }[] } = { select: new MyCompetencyGradeModel({}), dataList: [] } competencyGrade: { select: CompetencyGradeModel, dataList: { check: boolean, data: CompetencyGradeModel }[] } = { select: new MyCompetencyGradeModel({}), dataList: [] }
currentPage = 1; currentPage = 1;
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
numDataListChecked = 0; numDataListChecked = 0
isDataListCheckedAll = false; isDataListChecked = false
isDataListCheckedAll = false
search = ''; search = '';
modalStatus: 'add' | 'edit' | 'delete' = 'add' modalStatus: 'add' | 'edit' | 'delete' | 'deleteGroup' = 'add'
constructor(private toastr: ToastrService, constructor(private toastr: ToastrService,
private competencyGroupGradeService: CompetencyGroupGradeService, private competencyGroupGradeService: CompetencyGroupGradeService,
private cdr: ChangeDetectorRef private cdr: ChangeDetectorRef
...@@ -36,10 +37,20 @@ export class SubGradeRegistrationComponent { ...@@ -36,10 +37,20 @@ export class SubGradeRegistrationComponent {
this.competencyGrade.dataList = this.dataSelect.competencyGrades.map(x => ({ check: false, data: x })) this.competencyGrade.dataList = this.dataSelect.competencyGrades.map(x => ({ check: false, data: x }))
this.searchChange() this.searchChange()
} }
ngOnChanges(changes: SimpleChanges): void {
if (changes) {
this.competencyGrade.dataList = changes['dataSelect'].currentValue.competencyGrades.map((x: CompetencyGradeModel) => ({ check: false, data: x }))
this.isDataListCheckedAll = false
this.dataListCheckAll()
this.searchChange()
}
}
searchChange() { searchChange() {
this.currentPage = 1; this.currentPage = 1;
const filteredData = this.dataListFilter(); const filteredData = this.dataListFilter();
this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
this.dataListCheck();
} }
selectData(data?: { check: boolean, data: CompetencyGradeModel }) { selectData(data?: { check: boolean, data: CompetencyGradeModel }) {
...@@ -50,28 +61,22 @@ export class SubGradeRegistrationComponent { ...@@ -50,28 +61,22 @@ export class SubGradeRegistrationComponent {
return this.competencyGrade.dataList.filter((x) => { return this.competencyGrade.dataList.filter((x) => {
const data = x.data const data = x.data
const match = data.gradeId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase()); const match = data.gradeId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
if (!match) x.check = false;
return match; return match;
}); });
} }
dataListCheck() {
const dataCheck = this.dataListFilter();
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
this.numDataListChecked = dataCheck.filter((x) => x.check).length;
}
dataListCheckAll() { dataListCheckAll() {
this.isDataListCheckedAll = !this.isDataListCheckedAll;
const selectAll = this.isDataListCheckedAll; const selectAll = this.isDataListCheckedAll;
this.competencyGrade.dataList = this.competencyGrade.dataList.filter((x) => { this.dataListFilter().forEach(x => x.check = selectAll);
const data = x.data
const match = data.gradeId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
if (!match) x.check = false;
return match;
}).map(x => ({ ...x, check: selectAll }));
this.dataListCheck(); this.dataListCheck();
} }
dataListCheck() {
const dataCheck = this.dataListFilter();
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
this.numDataListChecked = this.competencyGrade.dataList.filter(x => x.check).length;
this.isDataListChecked = Boolean(this.numDataListChecked)
}
updateCompetencyGroupGrade() { updateCompetencyGroupGrade() {
switch (this.modalStatus) { switch (this.modalStatus) {
case 'add': { case 'add': {
...@@ -85,12 +90,17 @@ export class SubGradeRegistrationComponent { ...@@ -85,12 +90,17 @@ export class SubGradeRegistrationComponent {
break break
} }
case 'delete': { case 'delete': {
this.competencyGrade.dataList = this.competencyGrade.select.gradeId ? this.competencyGrade.dataList.filter(x => x.data.gradeId != this.competencyGrade.select.gradeId) : this.competencyGrade.dataList.filter(x => !x.check) this.competencyGrade.dataList = this.competencyGrade.dataList.filter(x => this.competencyGrade.select.gradeId != x.data.gradeId)
this.cdr.detectChanges()
break
}
case 'deleteGroup': {
this.competencyGrade.dataList = this.competencyGrade.dataList.filter(x => !x.check)
this.cdr.detectChanges() this.cdr.detectChanges()
break break
} }
} }
this.sendDataSelect.emit({ ...this.dataSelect, competencyGrades: this.competencyGrade.dataList.map(x => x.data) }) this.sendDataSelect.emit({ ...this.dataSelect, competencyGrades: this.competencyGrade.dataList.map(x => ({ ...x.data, weight: +(x.data.weight || '0'), gradeMinScore: +(x.data.gradeMinScore || '0'), gradeMaxScore: +(x.data.gradeMaxScore || '0') })) })
} }
showAlert(text: string, type: 'success' | 'error') { showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', { this.toastr[type](text, 'แจ้งเตือน', {
...@@ -99,5 +109,24 @@ export class SubGradeRegistrationComponent { ...@@ -99,5 +109,24 @@ export class SubGradeRegistrationComponent {
}); });
} }
clear() {
if (this.modalStatus == 'add') {
this.competencyGrade.select = new MyCompetencyGradeModel({})
} else if (this.modalStatus == 'edit') {
this.competencyGrade.select = new MyCompetencyGradeModel({ gradeId: this.competencyGrade.select.gradeId })
}
}
checkNumberEmpty(data: any) {
if (typeof (data) == 'number') {
if (data == 0) {
return false
}
} else {
if (data == null || data == undefined || data == "") {
return true
}
}
return false
}
} }
src/app/components/competency-assessment/grade-registration/grade-registration.component.ts
...@@ -7,5 +7,4 @@ import { Component } from '@angular/core'; ...@@ -7,5 +7,4 @@ import { Component } from '@angular/core';
}) })
export class GradeRegistrationComponent { export class GradeRegistrationComponent {
pathTitle = ['การประเมินสมรรถนะ', 'ทะเบียนเกรด','การจัดการเกรด'] pathTitle = ['การประเมินสมรรถนะ', 'ทะเบียนเกรด','การจัดการเกรด']
groupShow = '1'
} }
src/app/components/performance-management-evaluation/evaluation-cycle-performance/evaluation-cycle-performance.component.html
...@@ -8,14 +8,13 @@ ...@@ -8,14 +8,13 @@
<div class="page pt-0.75rem"> <div class="page pt-0.75rem">
<div class="border-b border-gray-200 dark:border-white/10 px-2rem"> <div class="border-b border-gray-200 dark:border-white/10 px-2rem">
<nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse"> <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
<a class="text-base font-medium hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary active" <a class="font-size-16px font-weight-500 hs-tab-active:font-weight-700 hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 hover:text-secondary active"
href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1" href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
aria-controls="underline-1" aria-controls="underline-1"
(click)="activeTab='underline-1';pathTitle = ['การประเมินจัดการประสิทธิภาพ','รอบประเมิน','รอบการประเมิน']"> (click)="activeTab='underline-1';pathTitle = ['การประเมินจัดการประสิทธิภาพ','รอบประเมิน','รอบการประเมิน']">
รอบการประเมิน รอบการประเมิน
</a> </a>
<!-- <a class="font-size-16px font-weight-500 hs-tab-active:font-weight-700 hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 hover:text-secondary"
<!-- <a class="text-base font-medium hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary"
href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2" href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
aria-controls="underline-2" aria-controls="underline-2"
(click)="activeTab='underline-2';pathTitle = ['การประเมินจัดการประสิทธิภาพ','รอบประเมิน','กำหนดฟอร์มเอกสาร']"> (click)="activeTab='underline-2';pathTitle = ['การประเมินจัดการประสิทธิภาพ','รอบประเมิน','กำหนดฟอร์มเอกสาร']">
...@@ -23,7 +22,7 @@ ...@@ -23,7 +22,7 @@
</a> --> </a> -->
</nav> </nav>
</div> </div>
<div class="px-2rem pt-50px"> <div class="px-2rem" [ngClass]="{'pt-50px': groupShow !== '2'}">
<div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1" <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1"
*ngIf="activeTab === 'underline-1'"> *ngIf="activeTab === 'underline-1'">
<app-management-evaluation-cycle></app-management-evaluation-cycle> <app-management-evaluation-cycle></app-management-evaluation-cycle>
...@@ -35,7 +34,6 @@ ...@@ -35,7 +34,6 @@
<app-edit-evaluation-form *ngIf="groupShow=='2'" [pathTitle]="pathTitle" <app-edit-evaluation-form *ngIf="groupShow=='2'" [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event" (sendGroupShow)="groupShow=$event"></app-edit-evaluation-form> (sendPathTitle)="pathTitle=$event" (sendGroupShow)="groupShow=$event"></app-edit-evaluation-form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.html
...@@ -9,12 +9,12 @@ ...@@ -9,12 +9,12 @@
{{numDataListChecked}} Selected</label> {{numDataListChecked}} Selected</label>
</div> </div>
<div class="mx-1 flex items-center"> <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"> class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
<i class="fs-l transition-all duration-200" <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> [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
</button> </button>
<label class="text-sm text-gray-500 ml-2">Select All</label> <label class="text-sm text-gray-500 ml-2" for="check-boxall">Select All</label>
</div> </div>
</div> </div>
</div> </div>
...@@ -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>
...@@ -31,21 +31,21 @@ ...@@ -31,21 +31,21 @@
</div> </div>
</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-20px m-0 shadow-md"
(click)="modalStatus='add';dataListSelect()" data-hs-overlay="#evaluation-cycle-modal"> data-hs-overlay="#management-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-20px m-0 shadow-md"
data-hs-overlay="#evaluation-cycle-delete-modal"> data-hs-overlay="#management-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>
</div> </div>
<div class="px-1"> <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> <i class="ti ti-book fs-l"></i>
Help Help
</button> </button>
...@@ -60,68 +60,106 @@ ...@@ -60,68 +60,106 @@
<thead class="height-50px"> <thead class="height-50px">
<tr class="font-size-12px"> <tr class="font-size-12px">
<ng-container <ng-container
*ngFor="let item of ['รหัส','รายละเอียด','รอบปีการประเมิน','วันที่เริ่มต้น','วันที่สิ้นสุด','สถานะ','Action']; let f = first; let l = last"> *ngFor="let item of ['','รหัส','รายละเอียด','รอบปีการประเมิน','วันที่เริ่มต้น','วันที่สิ้นสุด','สถานะ','การจัดการ']; 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"> <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> <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"> <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f&&!l">
<i class="ti ti-dots-vertical fs-l"></i> <i class="ti ti-dots-vertical fs-l"></i>
</div> </div>
</th> </th>
</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 type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.evaluationRoundId}}"
(ngModelChange)="dataListCheck()"> [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
<label>{{item.code}}</label>
</td> </td>
<td>{{item.period}}</td> <td>
<td>{{item.year}}</td> <label for="checkbox-{{item.data.evaluationRoundId}}">&nbsp;{{item.data.evaluationRoundId}}</label>
<td>{{item.startDate}}</td> </td>
<td>{{item.endDate}}</td> <td>{{item.data.tdesc}}</td>
<td>{{item.data.apsyear}}</td>
<td>{{item.data.apsPeriodStart}}</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 class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700" role="tooltip"> <span
กำลังดำเนินการประเมิน class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700"
</span> role="tooltip">
</span> {{item.data.statusCode.tdesc}}
<span class="hs-tooltip ti-main-tooltip flex items-center"> </span>
<i *ngSwitchCase="'2'" 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" role="tooltip"> <span class="hs-tooltip ti-main-tooltip flex items-center">
รอดำเนินการ <i *ngSwitchCase="'1'" class="ti ti-hourglass-empty hs-tooltip-toggle"></i>
</span> <span
</span> class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700"
<span class="hs-tooltip ti-main-tooltip flex items-center"> role="tooltip">
<i *ngSwitchCase="'3'" class="ti ti-check hs-tooltip-toggle"></i> {{item.data.statusCode.tdesc}}
<span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700" role="tooltip"> </span>
สิ้นสุดช่วงเวลาประเมิน </span>
</span> <span class="hs-tooltip ti-main-tooltip flex items-center">
</span> <i *ngSwitchCase="'2'" class="ti ti-check hs-tooltip-toggle"></i>
<span *ngSwitchDefault></span> <span
</ng-container> class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700"
role="tooltip">
{{item.data.statusCode.tdesc}}
</span>
</span>
<span *ngSwitchDefault></span>
</ng-container>
</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="#management-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="#management-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)"
<span class="badge text-white m-1" data-hs-overlay="#management-evaluation-cycle-page-alert-modal"></i>
[ngClass]="{'bg-primary':item.status=='1','bg-gray-400':item.status!='1'}">ปิดรอบประเมิน</span> <!-- <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]="{
'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]="{
'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]="{
'bg-gray-400': item.data.statusCode.code == '2',
'text-white': item.data.statusCode.code == '2'
}">
ปิดรอบประเมิน
</span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -158,11 +196,16 @@ ...@@ -158,11 +196,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="management-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">
...@@ -171,7 +214,7 @@ ...@@ -171,7 +214,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="#management-evaluation-cycle-page-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
...@@ -205,70 +248,45 @@ ...@@ -205,70 +248,45 @@
</div> </div>
</div> </div>
<div class="ti-modal-body padding-16px pt-0 overflow-y-0"> <div class="ti-modal-body padding-16px pt-0 overflow-y-0">
<label for="input-label" class="ti-form-label mt-2rem">รหัส รอบการประเมิน *</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>
<input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="dataSelect.period"> <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> <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>
<input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.year"> <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" name="daterange" id="inlinetime" ngxDaterangepickerMd oninput="this.value = this.value.replace(/\D/g, '')" [(ngModel)]="dataSelect.apsyear">
class="form-control ti-form-input focus:z-10 flatpickr-input" readonly />
<div class="flex justify-end mt-2rem mb-1rem"> <label for="input-label" class="ti-form-label mt-2rem">เริ่มวันที่*</label>
<button type="button" <input type="date" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.apsPeriodStart">
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"> <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">
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#evaluation-cycle-alert-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="evaluation-cycle-alert-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<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-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"> <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="#management-evaluation-cycle-page-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#evaluation-cycle-alert-modal"> <button type="button" class="ti-btn ti-btn-success" data-hs-overlay="#management-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> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="management-evaluation-cycle-page-alert-modal" class="hs-overlay hidden ti-modal">
<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="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">
...@@ -276,33 +294,62 @@ ...@@ -276,33 +294,62 @@
แจ้งเตือน แจ้งเตือน
</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" <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
data-hs-overlay="#evaluation-cycle-delete-modal"> <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
<span class="sr-only">Close</span> data-hs-overlay="#management-evaluation-cycle-page-modal">
<i class="ti ti-circle-x fs-xxl"></i> <span class="sr-only">Close</span>
</button> <i class="ti ti-circle-x fs-xxl"></i>
</button>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#management-evaluation-cycle-page-alert-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</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">
<button type="button" <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
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" <button type="button"
data-hs-overlay="#evaluation-cycle-delete-modal"> class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
ย้อนกลับ data-hs-overlay="#management-evaluation-cycle-page-modal">
</button> ย้อนกลับ
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#evaluation-cycle-delete-modal"> </button>
ลบข้อมูล <a class="ti-btn ti-btn-success" href="javascript:void(0);"
</a> data-hs-overlay="#management-evaluation-cycle-page-alert-modal" (click)="addevaluation_cycle()">
บันทึกข้อมูล
</a>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#management-evaluation-cycle-page-alert-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-danger" href="javascript:void(0);"
data-hs-overlay="#management-evaluation-cycle-page-alert-modal" (click)="deleteevaluation_cycle()">
ลบข้อมูล
</a>
</ng-container>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="evaluation-cycle-person-modal" class="hs-overlay hidden ti-modal"> <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="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">
<div class="ti-modal-header"> <div class="ti-modal-header">
...@@ -311,7 +358,7 @@ ...@@ -311,7 +358,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-person-modal"> data-hs-overlay="#management-evaluation-cycle-person-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>
...@@ -322,4 +369,4 @@ ...@@ -322,4 +369,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/model/evaluation-cycle.model';
import { MyStatusCodeModel, StatusCodeModel } from 'src/app/shared/model/status-code.model';
import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service';
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({
selector: 'app-management-evaluation-cycle', selector: 'app-management-evaluation-cycle',
templateUrl: './management-evaluation-cycle.component.html', templateUrl: './management-evaluation-cycle.component.html',
styleUrls: ['./management-evaluation-cycle.component.scss'] styleUrls: ['./management-evaluation-cycle.component.scss']
}) })
export class ManagementCycleComponent { export class ManagementCycleComponent {
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,
code: "Y67P2",
period: "ช่วงเวลาที่ 2",
year: "2567",
startDate: "01-07-2567",
endDate: "31-12-2567",
status: "1"
},
{
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 = { constructor(private evaluationCycleService: EvaluationCycleService,
check: false, private toastr: ToastrService,
code: "", private cdr: ChangeDetectorRef
period: "", ) { }
year: "",
startDate: "",
endDate: "",
status: "",
}
modalStatus: "add" | "edit" = "add"
constructor(private cdr: ChangeDetectorRef) {
}
dataListSelect(data?: DataModel) { ngOnInit(): void {
this.dataSelect = data || { this.getEvaluationCycleList()
check: false,
code: "",
period: "",
year: "",
startDate: "",
endDate: "",
status: "",
}
this.cdr.detectChanges()
} }
dataListFilter() { getEvaluationCycleList() {
return this.dataList.filter(x => { this.dataLoading = true
const match = x.code.includes(this.search) || x.period.includes(this.search); this.evaluationCycleService.getList().subscribe({
if (!match) x.check = false; next: response => {
return match; 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 || {})
}
}));
dataListCheck() { this.dataLoading = false
const dataCheck = this.dataListFilter(); this.isDataListCheckedAll = false
this.isDataListChecked = dataCheck.some(x => x.check); this.dataListCheckAll()
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false; this.searchChange();
this.numDataListChecked = dataCheck.filter(x => x.check).length; this.cdr.detectChanges();
},
error: err => {
this.dataLoading = false
this.cdr.detectChanges();
}
});
} }
dataListCheckAll() { dataListCheckAll() {
const selectAll = this.isDataListCheckedAll; const selectAll = this.isDataListCheckedAll;
this.dataList.forEach(x => x.check = selectAll); this.evaluation_cycleListFilter().forEach(x => x.check = selectAll);
this.dataListCheck(); 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() { 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()
this.dataListCheck(); }
evaluation_cycleListFilter() {
return this.evaluation_cyclelist.filter(x => {
const data = x.data
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({})
}));
}
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()
}
})
}
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.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()
}
})
} }
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
} }
src/app/components/performance-management-evaluation/evaluation-factors/define-evaluation-factors/define-evaluation-factors.component.html
...@@ -62,21 +62,29 @@ ...@@ -62,21 +62,29 @@
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody *ngIf="!dataListFilter().length"> <tbody *ngIf="data.loading">
<tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!data.loading&&!dataListFilter().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="!data.loading&&dataListFilter().length">
<tr <tr
*ngFor="let item of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index"> *ngFor="let item of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="flex justify-center items-center"> <td class="flex justify-center items-center">
<span> <span>
{{item.employee }} {{item.employee }}
</span> </span>
</td> </td>
<td> <td>
...@@ -133,5 +141,10 @@ ...@@ -133,5 +141,10 @@
</a> </a>
</li> </li>
</ul> </ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{dataListFilter().length<10 ?dataListFilter().length:
(currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - dataListFilter().length) )
:(currentPage * 10) ) }} of {{dataListFilter().length}} items</span>
</ul>
</nav> </nav>
</div> </div>
\ No newline at end of file
src/app/components/performance-management-evaluation/evaluation-factors/define-evaluation-factors/define-evaluation-factors.component.ts
...@@ -20,91 +20,93 @@ export class DefineEvaluationFactorsComponent { ...@@ -20,91 +20,93 @@ export class DefineEvaluationFactorsComponent {
currentPage = 1 currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
search = "" search = ""
dataList: DataModel[] = [ data: { loading: boolean, dataList: DataModel[] } = {
{ loading: false, dataList: [
"employee": "01-02", {
"hoshin": "0", "employee": "01-02",
"kpi": "0", "hoshin": "0",
"competency": "0", "kpi": "0",
"time_attendance": "0", "competency": "0",
"cross_functional": "0", "time_attendance": "0",
"special_activities": "0", "cross_functional": "0",
"total": "100" "special_activities": "0",
}, "total": "100"
{ },
"employee": "03-04", {
"hoshin": "0", "employee": "03-04",
"kpi": "0", "hoshin": "0",
"competency": "0", "kpi": "0",
"time_attendance": "0", "competency": "0",
"cross_functional": "0", "time_attendance": "0",
"special_activities": "0", "cross_functional": "0",
"total": "100" "special_activities": "0",
}, "total": "100"
{ },
"employee": "S1-S2", {
"hoshin": "0", "employee": "S1-S2",
"kpi": "0", "hoshin": "0",
"competency": "0", "kpi": "0",
"time_attendance": "0", "competency": "0",
"cross_functional": "0", "time_attendance": "0",
"special_activities": "0", "cross_functional": "0",
"total": "100" "special_activities": "0",
}, "total": "100"
{ },
"employee": "S3-S4", {
"hoshin": "0", "employee": "S3-S4",
"kpi": "0", "hoshin": "0",
"competency": "0", "kpi": "0",
"time_attendance": "0", "competency": "0",
"cross_functional": "0", "time_attendance": "0",
"special_activities": "0", "cross_functional": "0",
"total": "100" "special_activities": "0",
}, "total": "100"
{ },
"employee": "M1-M2", {
"hoshin": "0", "employee": "M1-M2",
"kpi": "0", "hoshin": "0",
"competency": "0", "kpi": "0",
"time_attendance": "0", "competency": "0",
"cross_functional": "0", "time_attendance": "0",
"special_activities": "0", "cross_functional": "0",
"total": "100" "special_activities": "0",
}, "total": "100"
{ },
"employee": "M3-M4", {
"hoshin": "0", "employee": "M3-M4",
"kpi": "0", "hoshin": "0",
"competency": "0", "kpi": "0",
"time_attendance": "0", "competency": "0",
"cross_functional": "0", "time_attendance": "0",
"special_activities": "0", "cross_functional": "0",
"total": "100" "special_activities": "0",
}, "total": "100"
{ },
"employee": "E1-E2", {
"hoshin": "0", "employee": "E1-E2",
"kpi": "0", "hoshin": "0",
"competency": "0", "kpi": "0",
"time_attendance": "0", "competency": "0",
"cross_functional": "0", "time_attendance": "0",
"special_activities": "0", "cross_functional": "0",
"total": "100" "special_activities": "0",
}, "total": "100"
{ },
"employee": "E3-E4", {
"hoshin": "0", "employee": "E3-E4",
"kpi": "0", "hoshin": "0",
"competency": "0", "kpi": "0",
"time_attendance": "0", "competency": "0",
"cross_functional": "0", "time_attendance": "0",
"special_activities": "0", "cross_functional": "0",
"total": "100" "special_activities": "0",
} "total": "100"
] }
]
}
dataListFilter() { dataListFilter() {
return this.dataList.filter(x => x.employee.includes(this.search)) return this.data.dataList.filter(x => x.employee.toLowerCase().includes(this.search.toLowerCase()))
} }
searchChange() { searchChange() {
......
src/app/components/performance-management-evaluation/setting-performance-evalution/assessment-system-configuration/assessment-system-configuration.component.html
<div class="header-title-type"> <div class="header-title-type">
<div class="flex justify-end"> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<button type="button" <button type="button" class="ti-btn ti-btn-soft-success h-10 m-0 shadow-md"
class="ti-btn ti-btn-soft-success h-10 m-0 shadow-md"> data-hs-overlay="#assessment-system-configurtion-alert-modal">
<i class="ri-save-3-line"></i> <i class="ri-save-3-line"></i>
Save Save
</button> </button>
</div> </div>
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md"> <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> <i class="ti ti-book fs-l"></i>
Help Help
</button> </button>
</div>
</div> </div>
</div>
</div> </div>
<div class="body-content"> <div class="body-content">
<div class="page"> <div class="page">
<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">
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">ปีการประเมิน *</label> <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">ปีการประเมิน *</label>
</div> </div>
</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" class="ti-form-input w-2/3 pr-10" oninput="this.value = this.value.replace(/\D/g, '')"
</div> [(ngModel)]="setting.data.apsyear">
</div> </div>
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label mt-10">จัดการสมรรถนะกับกลุ่ม *</label> </div>
<div class="box-body"> <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label mt-10">จัดการสมรรถนะกับกลุ่ม *</label>
<div class="grid grid-cols-6 flex gap-x-6"> <div class="box-body">
<div class="flex col-span-1 mt-5"> <div class="grid grid-cols-6 gap-2">
<input type="radio" name="radio1" class="ti-form-radio" id="hs-radio-group-1" checked> <div class="grid col-span-1 grid-cols-6 gap-2">
<label for="hs-radio-group-1" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 font-bold dark:text-white/70">ระดับพนักงาน (PL)</label> <div class="col-span-1">
</div> <input type="checkbox" class="ti-form-checkbox" id="settingGroupAssessment-0"
[class.pointer-events-none]="setting.data.settingGroupAssessment=='0'" name="settingGroupAssessment"
<div class="flex col-span-2 mt-5 ml-4rem"> (change)="setting.data.settingGroupAssessment='0'" [value]="'0'"
<input type="radio" name="radio1" class="ti-form-radio" id="hs-radio-group-2"> [checked]="setting.data.settingGroupAssessment=='0'">
<label for="hs-radio-group-2" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 font-bold dark:text-white/70">ลักษณะงาน ( JD)</label> </div>
</div> <div class="col-span-5">
<label for="settingGroupAssessment-0" class="text-sm text-gray-500"
</div> [class.pointer-events-none]="setting.data.settingGroupAssessment=='0'">
</div> ระดับพนักงาน (PL)
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label mt-10">เเสดงผลประเมินสมรรถนะ *</label> </label>
<div class="box-body"> </div>
<div class="grid grid-cols-6 flex gap-x-6"> </div>
<div class="flex col-span-1 mt-5"> <div class="grid col-span-1 grid-cols-6 gap-2">
<input type="radio" name="radio2" class="ti-form-radio" id="hs-radio-group-3" checked> <div class="col-span-1">
<label for="hs-radio-group-1" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 font-bold dark:text-white/70">เเสดงผล</label> <input type="checkbox" class="ti-form-checkbox" id="settingGroupAssessment-1"
</div> [class.pointer-events-none]="setting.data.settingGroupAssessment=='1'" name="settingGroupAssessment"
(change)="setting.data.settingGroupAssessment='1'" [checked]="setting.data.settingGroupAssessment=='1'">
<div class="flex col-span-2 mt-5 ml-4rem"> </div>
<input type="radio" name="radio2" class="ti-form-radio" id="hs-radio-group-4"> <div class="col-span-5">
<label for="hs-radio-group-2" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 font-bold dark:text-white/70">ไม่เเสดงผล</label> <label for="settingGroupAssessment-1" class="text-sm text-gray-500"
</div> [class.pointer-events-none]="setting.data.settingGroupAssessment=='1'">
ลักษณะงาน (JD)
</label>
</div>
</div>
</div>
</div>
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label mt-10">เเสดงผลประเมินสมรรถนะ *</label>
<div class="box-body">
<div class="grid grid-cols-6 gap-2">
<div class="grid col-span-1 grid-cols-6 gap-2">
<div class="col-span-1">
<input type="checkbox" class="ti-form-checkbox" id="settingGroupAssessment-0"
[class.pointer-events-none]="setting.data.settingGroupAssessment=='0'" name="settingGroupAssessment"
(change)="setting.data.settingGroupAssessment='0'" [value]="'0'"
[checked]="setting.data.settingGroupAssessment=='0'">
</div>
<div class="col-span-5">
<label for="settingGroupAssessment-0" class="text-sm text-gray-500"
[class.pointer-events-none]="setting.data.settingGroupAssessment=='0'">
เเสดงผล
</label>
</div>
</div>
<div class="grid col-span-1 grid-cols-6 gap-2">
<div class="col-span-1">
<input type="checkbox" class="ti-form-checkbox" id="settingGroupAssessment-1"
[class.pointer-events-none]="setting.data.settingGroupAssessment=='1'" name="settingGroupAssessment"
(change)="setting.data.settingGroupAssessment='1'" [checked]="setting.data.settingGroupAssessment=='1'">
</div>
<div class="col-span-5">
<label for="settingGroupAssessment-1" class="text-sm text-gray-500"
[class.pointer-events-none]="setting.data.settingGroupAssessment=='1'">
ไม่เเสดงผล
</label>
</div>
</div>
</div>
</div>
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label mt-10">เเสดงผลประเมินเวลาทำงาน *</label>
<div class="box-body">
<div class="grid grid-cols-6 gap-2">
<div class="grid col-span-1 grid-cols-6 gap-2">
<div class="col-span-1">
<input type="checkbox" class="ti-form-checkbox" id="settingGroupAssessment-0"
[class.pointer-events-none]="setting.data.settingGroupAssessment=='0'" name="settingGroupAssessment"
(change)="setting.data.settingGroupAssessment='0'" [value]="'0'"
[checked]="setting.data.settingGroupAssessment=='0'">
</div>
<div class="col-span-5">
<label for="settingGroupAssessment-0" class="text-sm text-gray-500"
[class.pointer-events-none]="setting.data.settingGroupAssessment=='0'">
เเสดงผล
</label>
</div>
</div>
<div class="grid col-span-1 grid-cols-6 gap-2">
<div class="col-span-1">
<input type="checkbox" class="ti-form-checkbox" id="settingGroupAssessment-1"
[class.pointer-events-none]="setting.data.settingGroupAssessment=='1'" name="settingGroupAssessment"
(change)="setting.data.settingGroupAssessment='1'" [checked]="setting.data.settingGroupAssessment=='1'">
</div>
<div class="col-span-5">
<label for="settingGroupAssessment-1" class="text-sm text-gray-500"
[class.pointer-events-none]="setting.data.settingGroupAssessment=='1'">
ไม่เเสดงผล
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label mt-10">เเสดงผลประเมินเวลาทำงาน *</label>
<div class="box-body">
<div class="grid grid-cols-6 flex gap-x-6">
<div class="flex col-span-1 mt-5">
<input type="radio" name="radio3" class="ti-form-radio" id="hs-radio-group-5" checked>
<label for="hs-radio-group-1" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 font-bold dark:text-white/70">เเสดงผล</label>
</div>
<div class="flex col-span-2 mt-5 ml-4rem"> <div id="assessment-system-configurtion-alert-modal" class="hs-overlay hidden ti-modal">
<input type="radio" name="radio3" class="ti-form-radio" id="hs-radio-group-6"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<label for="hs-radio-group-2" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 font-bold dark:text-white/70">ไม่เเสดงผล</label> <div class="max-h-full overflow-hidden ti-modal-content w-full">
</div> <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="#assessment-system-configurtion-alert-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> <div class="flex justify-end mt-2rem mb-1rem">
</div> <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"
</div> data-hs-overlay="#assessment-system-configurtion-alert-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#assessment-system-configurtion-alert-modal" (click)="saveSetting()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div> </div>
\ No newline at end of file
src/app/components/performance-management-evaluation/setting-performance-evalution/assessment-system-configuration/assessment-system-configuration.component.scss
.button-clear {
position: absolute;
top: 96px;
z-index: 1;
right: 41vw;
}
.button-help {
position: absolute;
top: 0px;
z-index: 1;
right: 0vw;
margin: 4.2rem;
margin-right: 10px; /* เพิ่มใหม่ 12/16*/
}
a.custom-link {
padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
}
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
width: 100%;
cursor: pointer;
margin-bottom: 10px;
height: 20%;
}
.nav-item {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link {
text-decoration: none;
padding: 10px 20px;
display: inline-block;
font-size: large;
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: #ccc;
border-radius: 5px 5px 0px 0px;
}
.nav-link:hover {
background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active {
color: #ffffff; /* สีตัวอักษรในสถานะ active */
font-size: large;
border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
background-color: rgb(var(--color-primary));
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: rgb(var(--color-primary));
border-radius: 5px 5px 0px 0px;
}
.tab-content {
margin-top: 20px;
}
.tab-pane.active {
display: block;
}
.nav-item-text {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link-text {
text-decoration: none;
display: inline-block;
font-size: large;
color: #569bf5;
border-bottom: 2px solid #569bf5;
line-height: 0.8;
}
.ti-pagination .page-link.active {
background-color: #569bf5;
color: white;
border-radius: 50%;
padding: 8px 12px;
}
.box-body{
padding: 0rem;
}
.page{
min-height: 0vh;
}
.ti-modal-content-alert{
width: 35%; /* ความกว้างที่คุณต้องการ */
position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
top: 50%; /* ให้อยู่กลางในแนวตั้ง */
left: 50%; /* ให้อยู่กลางในแนวนอน */
transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
background-color: #ffffff;
}
.header-title-type {
width: 100%;
min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
align-items: center; /* จัดกลางแนวตั้ง */
padding-top: 50px;
padding-bottom: 1rem;
}
.body-content{
margin-bottom: 30px;
height: 100%;
width: 100%;
}
table {
width: 50%;
border-collapse: collapse;
border: 1px solid black;
}
th{
font-weight: bold;
}
th, td {
border: 1px solid black; /* เส้นขอบของเซลล์ */
padding: 15px;
text-align: center;
}
th:first-child{
width: 125px;
font-size: 18px;
}
td{
padding-top: 8px;
padding-bottom: 8px;
}
td:first-child{
font-size: 18px;
font-weight: bold;
}
td span {
display: inline-block; /*span มีลักษณะเป็นกรอบ */
padding: 5px 10px;
border: 1px solid black;
border-radius: 10px;
background-color: #f9f9f9;
width: 60px;
}
input[type="radio"]:checked {
background-color: #569BF5;
border-color: #569BF5;
}
\ No newline at end of file
src/app/components/performance-management-evaluation/setting-performance-evalution/assessment-system-configuration/assessment-system-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 { SettingAssessmentModel, MySettingAssessmentModel } from 'src/app/shared/model/setting-assessment.model';
import { SettingAssessmentService } from 'src/app/shared/services/setting-assessment.service';
@Component({ @Component({
selector: 'app-assessment-system-configuration', selector: 'app-assessment-system-configuration',
templateUrl: './assessment-system-configuration.component.html', templateUrl: './assessment-system-configuration.component.html',
styleUrls: ['./assessment-system-configuration.component.scss'] styleUrls: ['./assessment-system-configuration.component.scss']
}) })
export class AssessmentSystemConfigurationComponent { export class AssessmentSystemConfigurationComponent {
@Input() pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'การตั้งค่า', 'กำหนดค่าระบบการประเมิน']; setting: { loading: boolean, data: SettingAssessmentModel } = { loading: false, data: new MySettingAssessmentModel() }
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>(); constructor(private settingAssessmentService: SettingAssessmentService,
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น private toastr: ToastrService,
isChecked: boolean = false; private cdr: ChangeDetectorRef
) { }
// ฟังก์ชันในการเปลี่ยนแท็บ ngOnInit(): void {
changeTab(tab: { id: string, text: string }) { this.getSettingList()
this.sendPathTitle.emit(['การประเมินจัดการประสิทธิภาพ', 'การตั้งค่า', tab.text]); }
this.activeTab = tab.id; getSettingList() {
} this.setting.loading = true
this.settingAssessmentService.get().subscribe({
toggleCheckbox(): void { next: response => {
this.isChecked = !this.isChecked; this.setting.data = new MySettingAssessmentModel(response)
} this.setting.loading = false
this.cdr.detectChanges()
// การจัดการการเปิดปิด modal }, error: error => {
modalOptions: { this.setting.loading = false
[nameModal: string]: { this.cdr.detectChanges()
isModalOpen: boolean; }
modalSize: string; })
backdropClose: boolean; }
}; saveSetting() {
} = { this.setting.loading = true
"add": { // this.settingAssessmentService.post(new MySettingAssessmentModel({ ...this.setting.data, expectationLevel: +(this.setting.data.expectationLevel) })).subscribe({
isModalOpen: false, // next: response => {
modalSize: 'm', // if (response.success) {
backdropClose: true, // this.showAlert(response.message, 'success')
}, // this.getSettingList()
"edit": { // } else {
isModalOpen: false, // this.showAlert(response.message, 'error')
modalSize: 'm', // this.setting.loading = false
backdropClose: true, // this.cdr.detectChanges()
} // }
}; // }, error: error => {
// this.showAlert(error.message, 'error')
openModal(name: string, size: string, closeOnBackdrop?: boolean) { // this.setting.loading = false
this.modalOptions[name].modalSize = size; // this.cdr.detectChanges()
this.modalOptions[name].backdropClose = closeOnBackdrop || false; // }
this.modalOptions[name].isModalOpen = true; // })
this.currentModal = name; // ตั้งค่าค่าของ currentModal เป็น 'add' หรือ 'edit' }
document.body.style.overflow = 'hidden';
} showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen(): boolean {
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // ตรวจสอบว่า modal อื่นยังเปิดอยู่หรือไม่
}
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addUser() {
}
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, timeOut: 3000,
positionClass: 'toast-top-right', positionClass: 'toast-top-right',
}); })
} }
}
}
\ No newline at end of file
src/app/components/performance-management-evaluation/setting-performance-evalution/setting-performance-evalution.component.html
...@@ -10,15 +10,15 @@ ...@@ -10,15 +10,15 @@
<nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse"> <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
<a class="text-base font-medium hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary active" <a class="text-base font-medium hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary active"
href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1" href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
aria-controls="underline-1" (click)="pathTitle = ['การประเมินจัดการประสิทธิภาพ','การตั้งค่า','กำหนดค่าระบบการประเมิน']"> aria-controls="underline-1"
(click)="pathTitle = ['การประเมินจัดการประสิทธิภาพ','การตั้งค่า','กำหนดค่าระบบการประเมิน']">
กำหนดค่าระบบการประเมิน กำหนดค่าระบบการประเมิน
</a> </a>
</nav> </nav>
</div> </div>
<div class="mt-3 px-3rem"> <div class="mt-3 px-3rem">
<div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1"> <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
<app-assessment-system-configuration [pathTitle]="pathTitle" <app-assessment-system-configuration></app-assessment-system-configuration>
(sendPathTitle)="pathTitle=$event"></app-assessment-system-configuration>
</div> </div>
</div> </div>
</div> </div>
......
src/app/shared/model/competency-grades.model.ts
...@@ -17,15 +17,15 @@ export class MyCompetencyGradeModel implements CompetencyGradeModel { ...@@ -17,15 +17,15 @@ export class MyCompetencyGradeModel implements CompetencyGradeModel {
gradeMaxScore: number gradeMaxScore: number
gradeMinScore: number gradeMinScore: number
weight: number weight: number
constructor(data: Partial<CompetencyGradeModel>) { constructor(data?: Partial<CompetencyGradeModel>) {
this.gradeId = data.gradeId || "" this.gradeId = data?.gradeId || ""
this.companyId = data.companyId || "" this.companyId = data?.companyId || ""
this.edesc = data.edesc || "" this.edesc = data?.edesc || ""
this.tdesc = data.tdesc || "" this.tdesc = data?.tdesc || ""
this.gradeDetail = data.gradeDetail || "" this.gradeDetail = data?.gradeDetail || ""
this.gradeMaxScore = data.gradeMaxScore ?? 0 this.gradeMaxScore = data?.gradeMaxScore ?? 0
this.gradeMinScore = data.gradeMinScore ?? 0 this.gradeMinScore = data?.gradeMinScore ?? 0
this.weight = data.weight ?? 0 this.weight = data?.weight ?? 0
} }
} }
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