Skip to content

M
myAppraisal
Commit ec9cdf18 by Nakarin Luankla
Options

Merge branch 'DEV' of https://mygit.myhr.co.th/angular/myAppraisal into DEV

parents 23e93f30 cdc2d0e7
Showing with 693 additions and 731 deletions
src/app/components/company-components/account-settings/manage-user/manage-user.component.html
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
*ngFor="let item of ['ชื่อล็อคอิน','รหัสพนักงาน','ชื่อ','นามสกุล','สถานะ','การจัดการ']; let f = first; let l = last; let i = index"> *ngFor="let item of ['ชื่อล็อกอิน','รหัสพนักงาน','ชื่อ','นามสกุล','สถานะ','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center"> <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<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="!l">
...@@ -154,7 +154,7 @@ ...@@ -154,7 +154,7 @@
</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 class="ti-form-label mt-2rem">ชื่อล็อคอิน</label> <label class="ti-form-label mt-2rem">ชื่อล็อกอิน</label>
<input type="text" class="ti-form-input bg-input-readonly" readonly <input type="text" class="ti-form-input bg-input-readonly" readonly
[(ngModel)]="userPassword.usernameId"> [(ngModel)]="userPassword.usernameId">
<label class="ti-form-label mt-2rem">รหัสพนักงาน</label> <label class="ti-form-label mt-2rem">รหัสพนักงาน</label>
......
src/app/components/company-components/account-settings/set-a-password/set-a-password.component.html
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
*ngFor="let item of ['ชื่อล็อคอิน','รหัสพนักงาน','ชื่อ','นามสกุล','สถานะ','การจัดการ']; let f = first; let l = last; let i = index"> *ngFor="let item of ['ชื่อล็อกอิน','รหัสพนักงาน','ชื่อ','นามสกุล','สถานะ','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center"> <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<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="!l">
...@@ -153,12 +153,12 @@ ...@@ -153,12 +153,12 @@
</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 class="ti-form-label mt-2rem">ชื่อล็อคอิน</label> <label class="ti-form-label mt-2rem">ชื่อล็อกอิน</label>
<input type="text" class="ti-form-input bg-input-readonly" readonly <input type="text" class="ti-form-input bg-input-readonly" readonly
[(ngModel)]="userPassword.usernameId"> [(ngModel)]="userPassword.usernameId">
<label class="ti-form-label mt-2rem">รหัสพนักงาน</label> <label class="ti-form-label mt-2rem">รหัสพนักงาน</label>
<input type="text" class="ti-form-input bg-input-readonly" readonly [(ngModel)]="userPassword.empId"> <input type="text" class="ti-form-input bg-input-readonly" readonly [(ngModel)]="userPassword.empId">
<label class="ti-form-label mt-2rem">กำหนดผ่านใหม่*</label> <label class="ti-form-label mt-2rem">กำหนดรหัสผ่านใหม่*</label>
<input type="text" class="masked-input ti-form-input" [(ngModel)]="userPassword.newPassword"> <input type="text" class="masked-input ti-form-input" [(ngModel)]="userPassword.newPassword">
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <button type="button"
......
src/app/components/company-components/account-settings/user-settings/user-settings.component.html
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
*ngFor="let item of ['','ชื่อล็อคอิน','รหัสพนักงาน','ชื่อ','นามสกุล','สถานะ','การจัดการ']; let f = first; let l = last; let i = index"> *ngFor="let item of ['','ชื่อล็อกอิน','รหัสพนักงาน','ชื่อ','นามสกุล','สถานะ','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center"> <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<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&&!f"> <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l&&!f">
...@@ -212,7 +212,7 @@ ...@@ -212,7 +212,7 @@
</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 class="ti-form-label mt-2rem">ชื่อล็อคอิน*</label> <label class="ti-form-label mt-2rem">ชื่อล็อกอิน*</label>
<input type="text" class="ti-form-input" <input type="text" class="ti-form-input"
oninput="this.value = this.value.replace(/[\u0E00-\u0E7F]/g, '')" oninput="this.value = this.value.replace(/[\u0E00-\u0E7F]/g, '')"
[ngClass]="{'bg-input-readonly':currentModal=='edit'}" [readonly]="currentModal=='edit'" [ngClass]="{'bg-input-readonly':currentModal=='edit'}" [readonly]="currentModal=='edit'"
......
src/app/components/company-components/account-settings/user-settings/user-settings.component.ts
...@@ -284,14 +284,11 @@ export class UserSettingsComponent { ...@@ -284,14 +284,11 @@ export class UserSettingsComponent {
clearDataUser(currentModal: string) { clearDataUser(currentModal: string) {
if (currentModal == 'add') { if (currentModal == 'add') {
this.user.select.usernameId = '' this.selectUser()
this.user.select.employee.employeeId = ''
this.user.select.role.roleId = ''
this.user.select.level.userLevel = ''
} else if (currentModal == 'edit') { } else if (currentModal == 'edit') {
this.user.select.employee.employeeId = '' this.selectEmployee()
this.user.select.role.roleId = '' this.selectRole()
this.user.select.level.userLevel = '' this.selectLevel()
} }
} }
showAlert(text: string, type: 'success' | 'error') { showAlert(text: string, type: 'success' | 'error') {
......
src/app/components/competency-assessment/course-registration/development-course/development-course.component.html
...@@ -196,27 +196,6 @@ ...@@ -196,27 +196,6 @@
</div> </div>
</div> </div>
<div id="development-course-modal" class="hs-overlay hidden ti-modal"> <div id="development-course-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">
...@@ -225,7 +204,7 @@ ...@@ -225,7 +204,7 @@
เพิ่มหลักสูตรการพัฒนา เพิ่มหลักสูตรการพัฒนา
</h3> </h3>
<h3 class="text-xxl font-bold text-primary" *ngIf="currentModal=='edit'"> <h3 class="text-xxl font-bold text-primary" *ngIf="currentModal=='edit'">
แก้ไขหัวข้อสมรรถนะ แก้ไขหลักสูตรการพัฒนา
</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"
......
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.html
...@@ -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"
data-hs-overlay="#evaluation-cycle-page-modal" (click)="modalStatus='add';setData()"> data-hs-overlay="#evaluation-cycle-page-modal" (click)="modalStatus='add';setData()">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
Add Add
</button> </button>
</div> </div>
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md" <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
data-hs-overlay="#evaluation-cycle-page-alert-modal" (click)="modalStatus='deleteGroup';setData()"> data-hs-overlay="#evaluation-cycle-page-alert-modal" (click)="modalStatus='deleteGroup';setData()">
<i class="ti ti-trash fs-l"></i> <i class="ti ti-trash fs-l"></i>
Delete Delete
</button> </button>
</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>
...@@ -137,31 +137,29 @@ ...@@ -137,31 +137,29 @@
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)" <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> data-hs-overlay="#evaluation-cycle-page-modal"></i>
<i class="ti ti-user cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-person-modal"></i> <i class="ti ti-user cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-person-modal"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-delete-modal"></i> <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (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'" <!-- <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> [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 bg-secondary" *ngIf="item.data.statusCode.code=='0'">สร้างแบบฟอร์ม</span> -->
<span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '0'" <span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '0'" [ngClass]="{
[ngClass]="{
'bg-primary': item.data.statusCode.code == '0', 'bg-primary': item.data.statusCode.code == '0',
'text-white': item.data.statusCode.code == '0' 'text-white': item.data.statusCode.code == '0'
}"> }">
ปิดรอบประเมิน ปิดรอบประเมิน
</span> </span>
<span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '1'" <span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '1'" [ngClass]="{
[ngClass]="{
'bg-secondary': item.data.statusCode.code == '1', 'bg-secondary': item.data.statusCode.code == '1',
'text-white': item.data.statusCode.code == '1' 'text-white': item.data.statusCode.code == '1'
}"> }">
สร้างแบบฟอร์ม สร้างแบบฟอร์ม
</span> </span>
<span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '2'" <span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '2'" [ngClass]="{
[ngClass]="{
'bg-gray-400': item.data.statusCode.code == '2', 'bg-gray-400': item.data.statusCode.code == '2',
'text-white': item.data.statusCode.code == '2' 'text-white': item.data.statusCode.code == '2'
}"> }">
ปิดรอบประเมิน ปิดรอบประเมิน
</span> </span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -250,24 +248,25 @@ ...@@ -250,24 +248,25 @@
</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.evaluationRoundId"> [(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"> <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" [(ngModel)]="dataSelect.edesc"> <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="dataSelect.edesc">
<label for="input-label" class="ti-form-label mt-2rem">ปีการประเมิน</label> <label for="input-label" class="ti-form-label mt-2rem">ปีการประเมิน*</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.apsyear"> <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"> <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"> <input type="date" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.apsPeriodEnd">
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
...@@ -276,10 +275,11 @@ ...@@ -276,10 +275,11 @@
data-hs-overlay="#evaluation-cycle-page-modal"> data-hs-overlay="#evaluation-cycle-page-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="#evaluation-cycle-page-alert-modal"
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> </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 { ToastrService } from 'ngx-toastr';
import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/model/evaluation-cycle.model'; import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/model/evaluation-cycle.model';
import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service'; import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service';
import { MyStatusCodeModel, StatusCodeModel } from 'src/app/shared/model/status-code.model'; import { MyStatusCodeModel, StatusCodeModel } from 'src/app/shared/model/status-code.model';
export interface DataModel { export interface DataModel {
evaluationRoundId: string; evaluationRoundId: string;
tdesc: string; tdesc: string;
edesc: string; edesc: string;
apsyear: string; apsyear: string;
apsPeriodStart: string; apsPeriodStart: string;
apsPeriodEnd: string; apsPeriodEnd: string;
statusCode: StatusCodeModel; statusCode: StatusCodeModel;
} }
@Component({ @Component({
selector: 'app-evaluation-cycle', selector: 'app-evaluation-cycle',
templateUrl: './evaluation-cycle.component.html', templateUrl: './evaluation-cycle.component.html',
styleUrls: ['./evaluation-cycle.component.scss'] styleUrls: ['./evaluation-cycle.component.scss']
}) })
export class EvaluationCycleComponent { export class EvaluationCycleComponent {
apsPeriodStart: string = ''; apsPeriodStart: string = '';
apsPeriodEnd: string = ''; apsPeriodEnd: string = '';
currentPage = 1 currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
...@@ -30,7 +30,7 @@ export class EvaluationCycleComponent { ...@@ -30,7 +30,7 @@ export class EvaluationCycleComponent {
evaluation_cyclelist: { check: boolean, data: DataModel }[] = [] evaluation_cyclelist: { check: boolean, data: DataModel }[] = []
evaluation_cycle: EvaluationCycleModel = new MyEvaluationCycleModel({}) evaluation_cycle: EvaluationCycleModel = new MyEvaluationCycleModel({})
dataLoading = false 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; itemToDelete: EvaluationCycleModel | null = null;
isDataListChecked = false isDataListChecked = false
isDataListCheckedAll = false isDataListCheckedAll = false
...@@ -40,82 +40,92 @@ export class EvaluationCycleComponent { ...@@ -40,82 +40,92 @@ export class EvaluationCycleComponent {
private toastr: ToastrService, private toastr: ToastrService,
private cdr: ChangeDetectorRef private cdr: ChangeDetectorRef
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.getEvaluationCycleList() this.getEvaluationCycleList()
} }
getEvaluationCycleList() { getEvaluationCycleList() {
this.dataLoading = true
this.evaluationCycleService.getList().subscribe({ this.evaluationCycleService.getList().subscribe({
next: response => { next: response => {
console.log('API response:', response);
this.evaluation_cyclelist = response.map(x => ({ this.evaluation_cyclelist = response.map(x => ({
check: false, check: false,
data: { data: {
evaluationRoundId: x.evaluationRoundId, evaluationRoundId: x.evaluationRoundId,
tdesc: x.tdesc, tdesc: x.tdesc,
edesc: x.edesc, edesc: x.edesc,
apsyear: x.apsyear, apsyear: x.apsyear,
apsPeriodStart: x.apsPeriodStart, apsPeriodStart: x.apsPeriodStart,
apsPeriodEnd: x.apsPeriodEnd, apsPeriodEnd: x.apsPeriodEnd,
statusCode: new MyStatusCodeModel(x.statusCode || {}) statusCode: new MyStatusCodeModel(x.statusCode || {})
} }
})); }));
this.dataLoading = false
this.isDataListCheckedAll = false
this.dataListCheckAll()
this.searchChange(); this.searchChange();
this.cdr.detectChanges(); this.cdr.detectChanges();
}, },
error: err => { error: err => {
console.error('Error fetching evaluation cycles:', err); this.dataLoading = false
this.cdr.detectChanges();
} }
}); });
} }
dataListCheck() { dataListCheckAll() {
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() {
const selectAll = this.isDataListCheckedAll; const selectAll = this.isDataListCheckedAll;
this.evaluation_cyclelist.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
this.page = Array.from({ length: Math.ceil(this.evaluation_cycleListFilter().length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(this.evaluation_cycleListFilter().length / 10) }, (_, i) => i + 1);
this.dataListCheck()
} }
evaluation_cycleListFilter() { evaluation_cycleListFilter() {
return this.evaluation_cyclelist.filter(x => { return this.evaluation_cyclelist.filter(x => {
const data = x.data 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; return match;
}); });
} }
setData(data?: DataModel) { setData(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || { this.dataSelect = JSON.parse(JSON.stringify(data || {
evaluationRoundId: "", evaluationRoundId: "",
tdesc: "", tdesc: "",
edesc: "", edesc: "",
apsyear: "", apsyear: "",
apsPeriodStart: "", apsPeriodStart: "",
apsPeriodEnd: "", apsPeriodEnd: "",
statusCode: new MyStatusCodeModel({}) statusCode: new MyStatusCodeModel({})
})); }));
} }
addevaluation_cycle() { 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 }) 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({ this.evaluationCycleService.post(body).subscribe({
next: response => { next: response => {
if (response.success) { if (response.success) {
this.showAlert(response.message, 'success') this.showAlert(response.message, 'success')
this.getEvaluationCycleList() this.getEvaluationCycleList()
} else { } else {
this.dataLoading = false
this.showAlert(response.message, 'error') this.showAlert(response.message, 'error')
this.cdr.detectChanges()
} }
}, error: error => { }, error: error => {
this.showAlert(error.message, 'error') this.showAlert(error.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
} }
}) })
} }
...@@ -127,16 +137,22 @@ dataListCheckAll() { ...@@ -127,16 +137,22 @@ dataListCheckAll() {
} else { } 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 })) 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({ this.evaluationCycleService.delete(body).subscribe({
next: response => { next: response => {
if (response.success) { if (response.success) {
this.showAlert(response.message, 'success') this.showAlert(response.message, 'success')
this.getEvaluationCycleList() this.getEvaluationCycleList()
} else { } else {
this.dataLoading = false
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()
} }
}) })
} }
......
src/app/components/competency-assessment/setting-competency/competency-configuration/competency-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="#competency-configuration-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">
...@@ -25,58 +25,132 @@ ...@@ -25,58 +25,132 @@
</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="{{ setting.apsyear }}"> <input type="text" class="ti-form-input w-2/3 pr-10"
oninput="this.value = this.value.replace(/\D/g, '')" [(ngModel)]="setting.data.apsyear">
</div> </div>
</div> </div>
<div class="grid grid-cols-3 gap-6 mt-10"> <div class="grid grid-cols-3 gap-6 mt-10">
<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="{{ setting.expectationLevel }}"> <input type="text" class="ti-form-input w-2/3 pr-10"
</div> oninput="this.value = this.value.replace(/\D/g, '')" [(ngModel)]="setting.data.expectationLevel">
</div> </div>
</div>
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label mt-10">จัดการสมรรถนะกับกลุ่ม *</label> <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label mt-10">จัดการสมรรถนะกับกลุ่ม *</label>
<div class="box-body"> <div class="box-body">
<div class="grid grid-cols-6 flex gap-x-6"> <div class="grid grid-cols-6 gap-2">
<div class="flex col-span-1 mt-5"> <div class="grid col-span-1 grid-cols-6 gap-2">
<input type="radio" name="hs-radio-group" class="ti-form-radio" id="hs-radio-group-1" checked> <div class="col-span-1">
<label for="hs-radio-group-1" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 dark:text-white/70">{{ setting.companyId }}</label> <input type="checkbox" class="ti-form-checkbox" id="settingGroupAssessment-0"
</div> [class.pointer-events-none]="setting.data.settingGroupAssessment=='0'"
name="settingGroupAssessment" (change)="setting.data.settingGroupAssessment='0'"
<!-- <div class="flex col-span-2 mt-5 ml-4rem"> [value]="'0'" [checked]="setting.data.settingGroupAssessment=='0'">
<input type="radio" name="hs-radio-group" class="ti-form-radio" id="hs-radio-group-2"> </div>
<label for="hs-radio-group-2" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 dark:text-white/70">ลักษณะงาน ( JD)</label> <div class="col-span-5">
</div> --> <label for="settingGroupAssessment-0" class="text-sm text-gray-500"
[class.pointer-events-none]="setting.data.settingGroupAssessment=='0'">
ระดับพนักงาน (PL)
</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'">
ลักษณะงาน (JD)
</label>
</div>
</div>
</div> </div>
</div> </div>
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label mt-10">น้ำหนักปัจจัยการประเมิน</label> <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label mt-10">น้ำหนักปัจจัยการประเมิน</label>
<div class="overflow-auto contenttable"> <div class="overflow-auto contenttable">
<table> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered"
style="min-width: 75% !important;width: 75% !important">
<thead> <thead>
<tr> <tr>
<th>คะเเนน</th> <th>คะเเนน</th>
<th>5</th> <th class="text-center">5</th>
<th>4</th> <th class="text-center">4</th>
<th>3</th> <th class="text-center">3</th>
<th>2</th> <th class="text-center">2</th>
<th>1</th> <th class="text-center">1</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>น้ำหนัก</td> <td>น้ำหนัก</td>
<td><span>{{ setting.settingScore5 }}</span></td> <td> <input type="text" class="ti-form-input"
<td><span>{{ setting.settingScore4 }}</span></td> oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
<td><span>{{ setting.settingScore3 }}</span></td> onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
<td><span>{{ setting.settingScore2 }}</span></td> [(ngModel)]="setting.data.settingScore5"></td>
<td><span>{{ setting.settingScore1 }}</span></td> <td> <input type="text" class="ti-form-input"
oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
[(ngModel)]="setting.data.settingScore4"></td>
<td> <input type="text" class="ti-form-input"
oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
[(ngModel)]="setting.data.settingScore3"></td>
<td> <input type="text" class="ti-form-input"
oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
[(ngModel)]="setting.data.settingScore2"></td>
<td> <input type="text" class="ti-form-input"
oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
[(ngModel)]="setting.data.settingScore1"></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
<div id="competency-configuration-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="#competency-configuration-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 class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#competency-configuration-alert-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-configuration-alert-modal" (click)="saveSetting()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/competency-assessment/setting-competency/competency-configuration/competency-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/competency-assessment/setting-competency/competency-configuration/competency-configuration.component.ts
...@@ -4,19 +4,12 @@ import { MySettingAssessmentModel, SettingAssessmentModel } from 'src/app/shared ...@@ -4,19 +4,12 @@ import { MySettingAssessmentModel, SettingAssessmentModel } from 'src/app/shared
import { SettingAssessmentService } from 'src/app/shared/services/setting-assessment.service'; import { SettingAssessmentService } from 'src/app/shared/services/setting-assessment.service';
@Component({ @Component({
selector: 'app-competency-configuration', selector: 'app-competency-configuration',
templateUrl: './competency-configuration.component.html', templateUrl: './competency-configuration.component.html',
styleUrls: ['./competency-configuration.component.scss'] styleUrls: ['./competency-configuration.component.scss']
}) })
export class CompetencyConfigurationComponent { export class CompetencyConfigurationComponent {
@Input() pathTitle = ['การประเมินสมรรถนะ', 'การตั้งค่า', 'กำหนดค่าระบบประเมินสมรรถนะ']; setting: { loading: boolean, data: SettingAssessmentModel } = { loading: false, data: new MySettingAssessmentModel() }
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
isChecked: boolean = false;
settingList: SettingAssessmentModel[] = []
settingListLoading = false
setting: SettingAssessmentModel = new MySettingAssessmentModel({})
search = ""
constructor(private settingAssessmentService: SettingAssessmentService, constructor(private settingAssessmentService: SettingAssessmentService,
private toastr: ToastrService, private toastr: ToastrService,
private cdr: ChangeDetectorRef private cdr: ChangeDetectorRef
...@@ -25,58 +18,43 @@ export class CompetencyConfigurationComponent { ...@@ -25,58 +18,43 @@ export class CompetencyConfigurationComponent {
this.getSettingList() this.getSettingList()
} }
getSettingList() { getSettingList() {
this.settingListLoading = true this.setting.loading = true
this.settingAssessmentService.getList().subscribe({ this.settingAssessmentService.get().subscribe({
next: response => { next: response => {
this.settingList = response this.setting.data = new MySettingAssessmentModel(response)
this.settingListLoading = false this.setting.loading = false
this.cdr.detectChanges() this.cdr.detectChanges()
}, error: error => { }, error: error => {
this.settingListLoading = false this.setting.loading = false
this.cdr.detectChanges() this.cdr.detectChanges()
} }
}) })
} }
selectsetting(setting?: SettingAssessmentModel) { saveSetting() {
this.setting = new MySettingAssessmentModel(setting || {}) this.setting.loading = true
} this.settingAssessmentService.post(new MySettingAssessmentModel({ ...this.setting.data, expectationLevel: +(this.setting.data.expectationLevel) })).subscribe({
next: response => {
// showSuccessAdd() { if (response.success) {
// this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', { this.showAlert(response.message, 'success')
// timeOut: 3000, this.getSettingList()
// positionClass: 'toast-top-right', } else {
// }); this.showAlert(response.message, 'error')
// } this.setting.loading = false
// showSuccessDelete() { this.cdr.detectChanges()
// this.toastr.success('ลบข้อมูลสำเร็จ', 'แจ้งเตือน', { }
// timeOut: 3000, }, error: error => {
// positionClass: 'toast-top-right', this.showAlert(error.message, 'error')
// }); this.setting.loading = false
// } this.cdr.detectChanges()
// addsetting() { }
// this.settingAssessmentService.post(this.setting).subscribe((response: any) => { })
// if (response.success) {
// this.showSuccessAdd()
// this.getSettingList()
// }
// })
// }
// deletesetting() {
// this.settingAssessmentService.delete(this.setting).subscribe((response: any) => {
// if (response.success) {
// this.showSuccessDelete()
// this.getSettingList()
// }
// })
// }
changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'การตั้งค่า', tab.text]);
this.activeTab = tab.id;
} }
toggleCheckbox(): void { showAlert(text: string, type: 'success' | 'error') {
this.isChecked = !this.isChecked; this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
})
} }
} }
......
src/app/components/competency-assessment/setting-competency/setting-competency.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-competency-configuration [pathTitle]="pathTitle" <app-competency-configuration></app-competency-configuration>
(sendPathTitle)="pathTitle=$event"></app-competency-configuration>
</div> </div>
</div> </div>
</div> </div>
......
src/app/components/job-detail-components/command-structure/sub-command-structure/sub-command-structure.component.html
...@@ -129,7 +129,7 @@ ...@@ -129,7 +129,7 @@
<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">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
เพิ่มข้อมูลรายละเอียดของงาน เพิ่มข้อมูลโครงสร้างสายการบังคับบัญชา
</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"
...@@ -169,9 +169,9 @@ ...@@ -169,9 +169,9 @@
</div> </div>
</div> </div>
<div class="ti-modal-body mt-1"> <div class="ti-modal-body mt-1">
<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/2 bg-input-readonly" readonly value="001"> <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="001">
<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 h-10 bg-input-readonly" readonly value="Department Manager 1"> <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1">
<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 h-10 bg-input-readonly" readonly value="Department Manager 1"> <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1">
...@@ -236,7 +236,7 @@ ...@@ -236,7 +236,7 @@
<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">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แก้ไขข้อมูลรายละเอียดของงาน แก้ไขข้อมูลโครงสร้างสายการบังคับบัญชา
</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"
...@@ -276,9 +276,9 @@ ...@@ -276,9 +276,9 @@
</div> </div>
</div> </div>
<div class="ti-modal-body mt-1"> <div class="ti-modal-body mt-1">
<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/2 bg-input-readonly" readonly value="001"> <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="001">
<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 h-10 bg-input-readonly" readonly value="Department Manager 1"> <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1">
<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 h-10 bg-input-readonly" readonly value="Department Manager 1"> <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1">
......
src/app/components/job-detail-components/job-detail/work-detail/work-detail.component.html
...@@ -149,7 +149,7 @@ ...@@ -149,7 +149,7 @@
<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">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
เเก้ไขข้อมูลความสามารถในตำเเหน่งงาน เเก้ไขข้อมูลรายละเอียดของงาน
</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"
...@@ -189,12 +189,11 @@ ...@@ -189,12 +189,11 @@
<div class="ti-modal-body" style="padding-top: 0px;"> <div class="ti-modal-body" style="padding-top: 0px;">
<label for="input-label" class="ti-form-label mt-1rem">รหัสงาน</label> <label for="input-label" class="ti-form-label mt-1rem">รหัสงาน</label>
<input type="text" id="input-label" class="ti-form-input bg-input-readonly" readonly [(ngModel)]="selectJob.jobcodeId"> <input type="text" id="input-label" class="ti-form-input bg-input-readonly" readonly [(ngModel)]="selectJob.jobcodeId">
<label for="detail_th" class="ti-form-label mt-1rem">ชื่อลักษณะงาน (ไทย)</label> <label for="detail_th" class="ti-form-label mt-1rem">ชื่อลักษณะงาน (ไทย)*</label>
<input type="text" id="detail_th" class="ti-form-input bg-input-readonly" readonly [(ngModel)]="selectJob.tdesc"> <input type="text" id="detail_th" class="ti-form-input bg-input-readonly" readonly [(ngModel)]="selectJob.tdesc">
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อลักษณะงาน (อังกฤษ)</label> <label for="detail_eng" class="ti-form-label mt-1rem">ชื่อลักษณะงาน (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input bg-input-readonly" readonly [(ngModel)]="selectJob.edesc"> <input type="text" id="detail_eng" class="ti-form-input bg-input-readonly" readonly [(ngModel)]="selectJob.edesc">
<div class="flex space-x-4 justify-center"> <div class="flex space-x-4 justify-center">
<!-- label และ textarea แรก -->
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<label for="input-label" class="ti-form-label mt-2rem">งานบริหาร (Management) </label> <label for="input-label" class="ti-form-label mt-2rem">งานบริหาร (Management) </label>
<textarea id="input-label" class="ti-form-input w-80" rows="4" cols="50" [(ngModel)]="selectJob.serviceWorkText"></textarea> <textarea id="input-label" class="ti-form-input w-80" rows="4" cols="50" [(ngModel)]="selectJob.serviceWorkText"></textarea>
...@@ -207,7 +206,6 @@ ...@@ -207,7 +206,6 @@
</div> </div>
</div> </div>
<div class="flex space-x-4 justify-center"> <div class="flex space-x-4 justify-center">
<!-- label และ textarea แรก -->
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<label for="input-label" class="ti-form-label mt-2rem">งานที่รับผิดชอบ <label for="input-label" class="ti-form-label mt-2rem">งานที่รับผิดชอบ
(งานปฏิบัติ)</label> (งานปฏิบัติ)</label>
...@@ -221,7 +219,6 @@ ...@@ -221,7 +219,6 @@
</div> </div>
</div> </div>
<div class="flex space-x-4 justify-center"> <div class="flex space-x-4 justify-center">
<!-- label และ textarea แรก -->
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<label for="input-label" class="ti-form-label mt-2rem">งานที่ได้รับมอบหมายพิเศษ</label> <label for="input-label" class="ti-form-label mt-2rem">งานที่ได้รับมอบหมายพิเศษ</label>
<textarea id="input-label" class="ti-form-input w-80" rows="4" cols="50" [(ngModel)]="selectJob.specialWorkText"></textarea> <textarea id="input-label" class="ti-form-input w-80" rows="4" cols="50" [(ngModel)]="selectJob.specialWorkText"></textarea>
...@@ -234,7 +231,6 @@ ...@@ -234,7 +231,6 @@
</div> </div>
</div> </div>
<div class="flex space-x-4 justify-center"> <div class="flex space-x-4 justify-center">
<!-- label และ textarea แรก -->
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<label for="input-label" <label for="input-label"
class="ti-form-label mt-2rem">งานที่ทุกตำแหน่งต้องปฏิบัติ</label> class="ti-form-label mt-2rem">งานที่ทุกตำแหน่งต้องปฏิบัติ</label>
...@@ -248,7 +244,6 @@ ...@@ -248,7 +244,6 @@
</div> </div>
</div> </div>
<div class="flex space-x-4 justify-center"> <div class="flex space-x-4 justify-center">
<!-- label และ textarea แรก -->
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<label for="input-label" class="ti-form-label mt-2rem">อื่นๆ</label> <label for="input-label" class="ti-form-label mt-2rem">อื่นๆ</label>
<textarea id="input-label" class="ti-form-input w-80" rows="4" cols="50" [(ngModel)]="selectJob.otherWorkText"></textarea> <textarea id="input-label" class="ti-form-input w-80" rows="4" cols="50" [(ngModel)]="selectJob.otherWorkText"></textarea>
......
src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.html
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<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" <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)="pathTitle = ['การจัดการรายละเอียดงาน','ตัวชี้วัดของตำแหน่งงานd']"> (click)="pathTitle = ['การจัดการรายละเอียดงาน','ตัวชี้วัดของตำแหน่งงาน']">
ตัวชี้วัดของตำแหน่งงาน ตัวชี้วัดของตำแหน่งงาน
</a> </a>
</nav> </nav>
......
src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.html
...@@ -149,7 +149,7 @@ ...@@ -149,7 +149,7 @@
<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">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
เเก้ไขข้อมูลความสามารถในตำเเหน่งงาน เเก้ไขข้อมูลตัวชี้วัดของตำแหน่งงาน
</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"
...@@ -189,7 +189,7 @@ ...@@ -189,7 +189,7 @@
<div class="ti-modal-body" style="padding-top: 0px;"> <div class="ti-modal-body" style="padding-top: 0px;">
<label for="input-label" class="ti-form-label mt-1rem">รหัสงาน</label> <label for="input-label" class="ti-form-label mt-1rem">รหัสงาน</label>
<input type="text" id="input-label" class="ti-form-input bg-input-readonly" readonly [(ngModel)]="selectJob.jobcodeId"> <input type="text" id="input-label" class="ti-form-input bg-input-readonly" readonly [(ngModel)]="selectJob.jobcodeId">
<label for="detail_th" class="ti-form-label mt-1rem">ชื่อลักษณะงาน (ไทย)</label> <label for="detail_th" class="ti-form-label mt-1rem">ชื่อลักษณะงาน (ไทย)*</label>
<input type="text" id="detail_th" class="ti-form-input bg-input-readonly" readonly [(ngModel)]="selectJob.tdesc"> <input type="text" id="detail_th" class="ti-form-input bg-input-readonly" readonly [(ngModel)]="selectJob.tdesc">
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อลักษณะงาน (อังกฤษ)</label> <label for="detail_eng" class="ti-form-label mt-1rem">ชื่อลักษณะงาน (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input bg-input-readonly" readonly [(ngModel)]="selectJob.edesc"> <input type="text" id="detail_eng" class="ti-form-input bg-input-readonly" readonly [(ngModel)]="selectJob.edesc">
......
src/app/components/performance-management-evaluation/assessment-management/evaluation-grouping/edit-evaluation-grouping/edit-evaluation-grouping.component.html
...@@ -12,36 +12,33 @@ ...@@ -12,36 +12,33 @@
</div> </div>
</div> </div>
</div> </div>
<div class="py-2 border-b-2 border-collapse "> <div class="mt-2rem pb-1rem border-b-2 border-collapse ">
<div class="grid grid-cols-3 gap-6 mt-2 "> <div class="grid grid-cols-3">
<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 class="ti-form-label">ระดับพนักงาน</label>
</div> </div>
</div> </div>
<div class="grid"> <div class="grid grid-cols-6">
<input type="text" id="input-label" <input type="text" class="ti-form-input !bg-input-readonly" readonly [(ngModel)]="pl.plId">
class="py-2 px-3 ltr:pr-11 rtl:pl-11 ti-form-input w-full rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10 w-1/2 bg-input-readonly"
readonly [(ngModel)]="pl.tdesc">
</div> </div>
</div> </div>
<div class="header-title-type"> <div class="header-title-type mt-2rem mb-1rem">
<div class="flex justify-between"> <div class="flex justify-between ">
<div class="flex"> <div class="flex">
<!-- Content ของ div แรก -->
<div class="flex gap-x-6"> <div class="flex gap-x-6">
<div class="flex items-center"> <div class="flex items-center">
<input type="checkbox" class="ti-form-checkbox mt-0.5" id="hs-checkbox-group-1"> <input type="checkbox" class="ti-form-checkbox pointer-events-none" [(ngModel)]="isDataListChecked">
<label for="hs-checkbox-group-1" <label class="text-sm text-gray-500 mx-2 pointer-events-none">
class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">0 Selected</label> {{numDataListChecked}} Selected</label>
</div> </div>
<div class="mx-1 flex items-center">
<div class="flex items-center"> <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()"
<!-- <i (click)="toggleCheckbox()" class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
[ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}" <i class="fs-l transition-all duration-200"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i> [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
<label for="hs-checkbox-group-2" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70" </button>
(click)="toggleCheckbox()">Select All</label> --> <label class="text-sm text-gray-500 ml-2">Select All</label>
</div> </div>
</div> </div>
</div> </div>
...@@ -51,7 +48,7 @@ ...@@ -51,7 +48,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"
style="height: 40px;"> 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>
...@@ -60,21 +57,23 @@ ...@@ -60,21 +57,23 @@
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-success h-20px m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-success h-20px m-0 shadow-md"
data-hs-overlay="#edit-evaluation-grouping-alert-add-modal"> data-hs-overlay="#edit-evaluation-grouping-alert-modal" (click)="currentModal='save'">
<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 type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#edit-evaluation-grouping-table-modal-select"> (click)="modal.search='';searchModalChange(pmstopicListFilter())"
data-hs-overlay="#edit-evaluation-grouping-pmstopic-table-modal">
<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-20px 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="#edit-evaluation-grouping-alert-delete-modal"> data-hs-overlay="#edit-evaluation-grouping-alert-modal"
(click)="currentModal='deleteGroup';pmsGroupAssessmentIndex=-1">
<i class="ri-delete-bin-6-line"></i> <i class="ri-delete-bin-6-line"></i>
Delete Delete
</button> </button>
...@@ -92,97 +91,109 @@ ...@@ -92,97 +91,109 @@
<div class="page px-rem"> <div class="page px-rem">
<div class="overflow-auto table-bordered rounded-t-md"> <div class="overflow-auto table-bordered rounded-t-md">
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1"> <div class="overflow-auto shadow-md">
<div class="overflow-auto shadow-md"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover"> <thead>
<thead> <tr>
<tr> <ng-container
<ng-container *ngFor="let item of ['รหัส','ชื่อหัวข้อ','ประเภท','น้ำหนัก','Action']; let f = first; let l = last; let i = index">
*ngFor="let item of ['รหัส','ชื่อหัวข้อ','ประเภท','น้ำหนัก','Action']; let f = first; let l = last; let i = index"> <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary" [class.!text-center]="f || l || item === 'ระดับความหวัง'">
[class.!text-center]="f||l"> <span class="text-sm">{{ item }}</span>
<span class="text-sm">{{ item }}</span> </th>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l&&!f"> </ng-container>
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="50" </tr>
height="16" fill="currentColor" viewBox="0 0 16 16"> </thead>
<path <tbody *ngIf="pmsGroupAssessment.loading">
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"> <tr>
</path> <td class="text-center" colspan="100%">
</svg> <div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1"
</div> role="status" aria-label="loading">
</th> <span class="sr-only">Loading...</span>
</ng-container> </div>
</tr> </td>
</thead> </tr>
<tbody> </tbody>
<tr <tbody *ngIf="!pmsGroupAssessment.loading&&!pmsGroupAssessmentListFilter().length">
*ngFor="let item of[ <tr>
['HS-01', 'C1 CUSTOMER ORIENTED (SQCOME)','HOSHIN','5.0'], <td class="text-center" colspan="100%">
['HS-02', 'C2 MANUFACTURING OPTIMIZATION','HOSHIN','3.0'], ไม่พบข้อมูล
['HS-03', 'C3 INCREASE EMPLOYEE ENGAGEMENT','HOSHIN','3.0'], </td>
['HS-04', 'C4 HEALTHY FINANCIAL','HOSHIN','3.0'], </tr>
['HS-05', 'C5 RISK MANAGEMENT (TAXATION)','HOSHIN','1.0'], </tbody>
['KP-01', 'ประสาทงานกับวิทยากร ผู้เข้ารับการอบรมทั้งภายในเเละภายนอกตามเเผนการฝึกอบรมพัฒนา','KPI','10.0']];let i = index"> <tbody *ngIf="!pmsGroupAssessment.loading&&pmsGroupAssessmentListFilter().length">
<td style="font-size: 12px; width: 10%;" class="text-center"> <tr
<input style="margin-right: 20px;" type="checkbox" *ngFor="let item of pmsGroupAssessmentListFilter()| slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
class="ti-form-checkbox cursor-pointer "> <td class="text-center">
<label>{{item[0]}}</label> <input type="checkbox" class="ti-form-checkbox cursor-pointer"
</td> id="checkbox-{{item.data.pmsTopic.pmsTopicId}}" [(ngModel)]="item.check"
<td style="font-size: 12px; width: 35%; word-break: break-word; white-space: normal;"> (ngModelChange)="dataListCheck()">
{{item[1]}} <label for="checkbox-{{item.data.pmsTopic.pmsTopicId}}">
</td> &nbsp;{{item.data.pmsTopic.pmsTopicId}}
<td style="font-size: 12px; width: 20%;">{{item[2]}}</td> </label>
<td class="text-center" style="font-size: 12px; width: 15%;">{{item[3]}}</td> </td>
<td class="flex justify-center items-center"> <td style="font-size: 12px; width: 60%;">
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" {{item.data.pmsTopic.tdesc}}
data-hs-overlay="#edit-evaluation-grouping-alert-delete-modal"></i> </td>
</td> <td style="font-size: 12px">
</tr> {{item.data.pmsTopic.pmsType.tdesc}}
</tbody> </td>
</table> <td style="font-size: 12px;">
</div> {{item.data.pmsTopic.weight}}
</td>
<td class="flex justify-center">
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
data-hs-overlay="#edit-evaluation-grouping-alert-modal"
(click)="currentModal='delete';pmsGroupAssessmentIndex=(((currentPage-1) * 10)+i);pmsGroupAssessmentIndex=i;searchModalChange(pmstopicListFilter())"></i>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
<div class="body-content" style="margin-top: 20px;"> <nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="nav-tabs"> <ul class="ti-pagination">
<div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center"> <li>
<div class="box-body"> <a aria-label="anchor" class="page-link" href="javascript:void(0);"
<nav class="pagination-style-3 overflow-auto"> (click)="currentPage = (currentPage-1 || 1)">
<ul class="ti-pagination"> <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
<li> </a>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"> </li>
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i> <li *ngFor="let item of page;let f = first;let l = last">
</a> <ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
</li> <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a> </a>
</li> </ng-container>
<li><a class="page-link" href="javascript:void(0);">2</a></li> <ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<li><a class="page-link" href="javascript:void(0);">3</a></li> <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
<li><a class="page-link" href="javascript:void(0);">4</a></li> (click)="currentPage=item">{{item}}
<li><a class="page-link" href="javascript:void(0);">5</a></li> </a>
<li><a class="page-link" href="javascript:void(0);">...</a></li> </ng-container>
<li><a class="page-link" href="javascript:void(0);">31</a></li> <ng-container
<li> *ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"> <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i> </a>
</a> </ng-container>
</li> </li>
</ul> <li>
</nav> <a aria-label="anchor" class="page-link" href="javascript:void(0);"
</div> (click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
</div> <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul> </ul>
<ul class="nav-tabs mt-1"> <ul class="nav-tabs mt-3">
<p>Show 1 to 10 of 50 items</p> <span>Show {{((currentPage-1) * 10)+1}} to {{pmsGroupAssessmentListFilter().length<10
?pmsGroupAssessmentListFilter().length: (currentPage==page.length ? ((currentPage * 10) -
((currentPage * 10) - pmsGroupAssessmentListFilter().length) ) :(currentPage * 10) ) }} of
{{pmsGroupAssessmentListFilter().length}} items</span>
</ul> </ul>
</div> </nav>
</div> </div>
<div id="edit-evaluation-grouping-pmstopic-table-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
<div id="edit-evaluation-grouping-table-modal-select" 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 h-[calc(100%-3.5rem)] items-center">
<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">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
...@@ -190,7 +201,7 @@ ...@@ -190,7 +201,7 @@
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#edit-evaluation-grouping-table-modal-select"> data-hs-overlay="#edit-evaluation-grouping-pmstopic-table-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>
...@@ -202,161 +213,130 @@ ...@@ -202,161 +213,130 @@
<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 " class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name"> placeholder="Search by No. or Name" [(ngModel)]="modal.search"
(ngModelChange)="searchModalChange(pmstopicListFilter())">
<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>
</div> </div>
</div> </div>
</div> </div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div> </div>
<div class="overflow-auto table-bordered" style="border-radius: 5px;"> <div class="page px-rem">
<div class="overflow-auto border"> <div class="overflow-auto table-bordered rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover"> <div class="overflow-auto shadow-md rounded-t-md">
<thead> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<tr> <thead>
<ng-container <tr>
*ngFor="let item of ['รหัส','ชื่อหัวข้อ','ประเภท','น้ำหนัก','Action']; let f = first; let l = last; let i = index"> <ng-container
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary" *ngFor="let item of ['รหัส','ชื่อหัวข้อ','ประเภท','น้ำหนัก','Action']; let f = first; let l = last; let i = index">
[class.!text-center]="f||l"> <th scope="col"
<span class="text-sm">{{ item }}</span> class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" <span class="font-size-12px font-weight-700">{{ item }}</span>
*ngIf="!f && i==1"> <div class="absolute top-1/2 transform -translate-y-1/2 right-0">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" <i class="ti ti-dots-vertical fs-l"></i>
width="30" height="13" fill="currentColor" viewBox="0 0 16 16"> </div>
<path </th>
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"> </ng-container>
</path> </tr>
</svg> </thead>
<tbody *ngIf="pmstopic.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> </div>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" </td>
*ngIf="!f && i==2"> </tr>
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" </tbody>
width="20" height="13" fill="currentColor" viewBox="0 0 16 16"> <tbody *ngIf="!pmstopic.loading&&!pmstopicListFilter().length">
<path <tr>
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"> <td class="text-center" colspan="100%">
</path> ไม่พบข้อมูล
</svg> </td>
</div> </tr>
</th> </tbody>
</ng-container> <tbody *ngIf="!pmstopic.loading&&pmstopicListFilter().length">
</tr> <tr
</thead> *ngFor="let item of pmstopicListFilter() | slice:((modal.currentPage-1) * 10) : (((modal.currentPage-1) * 10) + 10);let i = index">
<tbody> <td class="text-center">
<tr {{item.data.pmsTopicId}}
*ngFor="let item of[ </td>
['HS-01', 'C1 CUSTOMER ORIENTED (SQCOME)','HOSHIN','5.0'], <td>{{item.data.tdesc}}</td>
['HS-02', 'C2 MANUFACTURING OPTIMIZATION','HOSHIN','3.0'], <td>{{item.data.pmsType.tdesc}}</td>
['HS-03', 'C3 INCREASE EMPLOYEE ENGAGEMENT','HOSHIN','3.0'], <td>{{item.data.weight}}</td>
['HS-04', 'C4 HEALTHY FINANCIAL','HOSHIN','3.0'], <td class="text-center"> <button type="button"
['HS-05', 'C5 RISK MANAGEMENT (TAXATION)','HOSHIN','1.0'],
['KP-01', 'ประสาทงานกับวิทยากร ผู้เข้ารับการอบรมทั้งภายในเเละภายนอกตามเเผนการฝึกอบรมพัฒนา','KPI','10.0']];let i = index">
<td style="font-size: 12px; width: 10%;" class="text-center">
{{item[0]}}
</td>
<td
style="font-size: 12px; width: 35%; word-break: break-word; white-space: normal;">
{{item[1]}}
</td>
<td style="font-size: 12px; width: 20%;">{{item[2]}}</td>
<td class="text-center" style="font-size: 12px; width: 15%;">{{item[3]}}</td>
<td class="flex justify-center">
<div class="px-1">
<button type="button"
class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#edit-evaluation-grouping-table-modal-select"> data-hs-overlay="#edit-evaluation-grouping-pmstopic-table-modal"
(click)="selectPmstopic(item.data)">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
Select Select
</button> </button></td>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);"
aria-current="page">1</a></li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</ul>
<ul class="nav-tabs mt-1">
<p>Show 1 to 10 of 50 items</p>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="edit-evaluation-grouping-alert-add-modal" class="hs-overlay hidden ti-modal"> </tr>
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> </tbody>
<div class="max-h-full overflow-hidden ti-modal-content w-full"> </table>
<div class="ti-modal-header"> </div>
<h3 class="text-xxl font-bold text-primary"> </div>
แจ้งเตือน <nav class="pagination-style-3 overflow-auto my-5" *ngIf="modal.page.length">
</h3> <ul class="ti-pagination">
<div class="flex justify-end"> <li>
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <a aria-label="anchor" class="page-link" href="javascript:void(0);"
data-hs-overlay="#edit-evaluation-grouping-alert-add-modal"> (click)="modal.currentPage = (modal.currentPage-1 || 1)">
<span class="sr-only">Close</span> <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
<i class="ti ti-circle-x fs-xxl"></i> </a>
</button> </li>
<li *ngFor="let item of modal.page;let f = first;let l = last">
<ng-container
*ngIf="item==3&&modal.currentPage!=1&&modal.currentPage!=2&&modal.currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
class="ri-more-line"></i>
</a>
</ng-container>
<ng-container
*ngIf="(f||l)||(item==modal.currentPage-1||item==modal.currentPage||item==modal.currentPage+1)">
<a class="page-link" href="javascript:void(0);"
[class.active]="item==modal.currentPage"
(click)="modal.currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==modal.page.length-2&&modal.currentPage!=modal.page.length&&modal.currentPage!=modal.page.length-1&&modal.currentPage!=modal.page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="modal.currentPage = (modal.currentPage > modal.page.length-1 ? modal.currentPage: modal.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((modal.currentPage-1) * 10)+1}} to {{pmstopicListFilter().length<10
?pmstopicListFilter().length: (modal.currentPage==modal.page.length ?
((modal.currentPage * 10) - ((modal.currentPage * 10) - pmstopicListFilter().length)
) :(modal.currentPage * 10) ) }} of {{pmstopicListFilter().length}} items</span>
</ul>
</nav>
</div> </div>
</div> <div class="flex justify-end mt-2rem mb-1rem space-x-4">
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#edit-evaluation-grouping-modal-add"> data-hs-overlay="#edit-evaluation-grouping-pmstopic-table-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<!-- <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#edit-evaluation-grouping-alert-add-modal" (click)="addUser();showSuccess()">
บันทึกข้อมูล
</a> -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="edit-evaluation-grouping-alert-edit-modal" class="hs-overlay hidden ti-modal"> <div id="edit-evaluation-grouping-alert-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header"> <div class="ti-modal-header">
...@@ -365,64 +345,43 @@ ...@@ -365,64 +345,43 @@
</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="#edit-evaluation-grouping-alert-edit-modal"> data-hs-overlay="#edit-evaluation-grouping-alert-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</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" *ngIf="currentModal=='save'">
ยืนยันการเเก้ไขข้อมูลหรือไม่ ยืนยันการบันทึกข้อมูลหรือไม่!
</p>
<p class="mt-1 text-gray-800 dark:text-white/70"
*ngIf="currentModal=='delete'||currentModal=='deleteGroup'">
ยืนยันการลบข้อมูลหรือไม่
</p> </p>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem" *ngIf="currentModal=='save'">
<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="#edit-evaluation-grouping-modal-edit"> data-hs-overlay="#edit-evaluation-grouping-alert-modal">
ย้อนกลับ ย้อนกลับ
</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="#edit-evaluation-grouping-alert-edit-modal" data-hs-overlay="#edit-evaluation-grouping-alert-modal" (click)="savePmsGroupAssessment()">
(click)="addUser();showSuccessEdit()">
บันทึกข้อมูล บันทึกข้อมูล
</a> --> </a>
</div>
</div>
</div>
</div>
</div>
<div id="edit-evaluation-grouping-alert-delete-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#edit-evaluation-grouping-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div> </div>
</div> <div class="flex justify-end mt-2rem mb-1rem"
<div class="ti-modal-body "> *ngIf="currentModal=='delete'||currentModal=='deleteGroup'">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่!
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#edit-evaluation-grouping-alert-delete-modal"> data-hs-overlay="#edit-evaluation-grouping-alert-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="#edit-evaluation-grouping-alert-delete-modal" data-hs-overlay="#edit-evaluation-grouping-alert-modal" (click)="deletePmsGroupAssessment()">
(click)="addUser();showSuccessDelete()">
ลบข้อมูล ลบข้อมูล
</a> --> </a>
</div> </div>
</div> </div>
</div> </div>
......
src/app/components/performance-management-evaluation/assessment-management/evaluation-grouping/edit-evaluation-grouping/edit-evaluation-grouping.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 { MyPLModel, PLModel } from 'src/app/shared/model/pl.model'; import { MyPLModel, PLModel } from 'src/app/shared/model/pl.model';
import { MyPmsGroupAssessmentModel } from 'src/app/shared/model/pms-group-assessment.model';
import { MyPmsGroupAssessment1Model, PmsGroupAssessment1Model } from 'src/app/shared/model/pms-group-assessment1.model'; import { MyPmsGroupAssessment1Model, PmsGroupAssessment1Model } from 'src/app/shared/model/pms-group-assessment1.model';
import { MyPmstopicModel, PmstopicModel } from 'src/app/shared/model/pmstopic.model';
import { PmsGroupAssessmentService } from 'src/app/shared/services/pms-group-assessment.service'; import { PmsGroupAssessmentService } from 'src/app/shared/services/pms-group-assessment.service';
import { PmstopicService } from 'src/app/shared/services/pmstopic.service';
export interface DataModal {
search: string,
currentPage: number,
page: number[]
}
@Component({ @Component({
selector: 'app-edit-evaluation-grouping', selector: 'app-edit-evaluation-grouping',
templateUrl: './edit-evaluation-grouping.component.html', templateUrl: './edit-evaluation-grouping.component.html',
...@@ -14,19 +22,60 @@ export class EditEvaluationGroupingComponent { ...@@ -14,19 +22,60 @@ export class EditEvaluationGroupingComponent {
currentPage = 1 currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
search = "" search = ""
currentModal: 'add' | 'edit' | 'delete' | 'deleteGroup' = "add" currentModal: 'save' | 'delete' | 'deleteGroup' = "save"
modal: DataModal = {
search: "",
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1)
}
pmsGroupAssessment: { loading: boolean, select: PmsGroupAssessment1Model, dataList: { check: boolean, data: PmsGroupAssessment1Model }[] } = { loading: false, select: new MyPmsGroupAssessment1Model(), dataList: [] } pmsGroupAssessment: { loading: boolean, select: PmsGroupAssessment1Model, dataList: { check: boolean, data: PmsGroupAssessment1Model }[] } = { loading: false, select: new MyPmsGroupAssessment1Model(), dataList: [] }
pmsGroupAssessmentIndex = -1
pmstopic: { loading: boolean, select: PmstopicModel, dataList: { check: boolean, data: PmstopicModel }[] } = { loading: false, select: new MyPmstopicModel(), dataList: [] }
numDataListChecked = 0 numDataListChecked = 0
isDataListChecked = false isDataListChecked = false
isDataListCheckedAll = false isDataListCheckedAll = false
constructor(private toastr: ToastrService, constructor(private toastr: ToastrService,
private pmsGroupAssessmentService: PmsGroupAssessmentService, private pmsGroupAssessmentService: PmsGroupAssessmentService,
private cdr: ChangeDetectorRef private cdr: ChangeDetectorRef,
private pmstopicService: PmstopicService
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.getPmsGroupAssessmentBy_plId() this.getPmsGroupAssessmentBy_plId()
this.getPmstopicList()
}
getPmstopicList() {
this.pmstopic.loading = true
this.pmstopicService.getList().subscribe({
next: response => {
this.pmstopic.dataList = response.map(x => ({ check: false, data: new MyPmstopicModel(x) }))
this.isDataListCheckedAll = false
this.dataListCheckAll()
this.pmstopic.loading = false
this.cdr.detectChanges()
}, error: error => {
this.pmstopic.loading = false
this.cdr.detectChanges()
}
})
}
pmstopicListFilter() {
return this.pmstopic.dataList.filter(x => {
const data = x.data
if (this.pmsGroupAssessment.dataList.some(y => y.data.pmsTopic.pmsTopicId == data.pmsTopicId)) {
return
}
const match = data.pmsTopicId.toLowerCase().includes(this.modal.search.toLowerCase()) ||
data.tdesc.toLowerCase().includes(this.modal.search.toLowerCase())
return match
})
}
selectPmstopic(data?: PmstopicModel) {
this.pmsGroupAssessment.dataList.push({ check: false, data: new MyPmsGroupAssessment1Model({ pmsTopic: new MyPmstopicModel(data) }) })
this.isDataListCheckedAll = false
this.dataListCheckAll()
this.cdr.markForCheck()
} }
getPmsGroupAssessmentBy_plId() { getPmsGroupAssessmentBy_plId() {
...@@ -56,6 +105,11 @@ export class EditEvaluationGroupingComponent { ...@@ -56,6 +105,11 @@ export class EditEvaluationGroupingComponent {
this.pmsGroupAssessment.select = new MyPmsGroupAssessment1Model(data) this.pmsGroupAssessment.select = new MyPmsGroupAssessment1Model(data)
} }
searchModalChange(dataList: any[]) {
this.modal.currentPage = 1
this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
this.cdr.markForCheck()
}
searchChange() { searchChange() {
this.currentPage = 1 this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.pmsGroupAssessmentListFilter().length / 10) }, (_, i) => i + 1) this.page = Array.from({ length: Math.ceil(this.pmsGroupAssessmentListFilter().length / 10) }, (_, i) => i + 1)
...@@ -74,6 +128,49 @@ export class EditEvaluationGroupingComponent { ...@@ -74,6 +128,49 @@ export class EditEvaluationGroupingComponent {
this.isDataListChecked = Boolean(this.numDataListChecked) this.isDataListChecked = Boolean(this.numDataListChecked)
} }
savePmsGroupAssessment() {
const body = {
personalLevel: new MyPLModel(this.pl),
companyId: "",
pmsGroupAssessment1List: this.pmsGroupAssessment.dataList.map(x => new MyPmsGroupAssessment1Model(x.data))
}
this.pmsGroupAssessmentService.post(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
} else {
this.showAlert(response.message, 'error')
}
this.cdr.detectChanges()
}, error: error => {
this.showAlert(error.message, 'error')
this.cdr.detectChanges()
}
})
}
deletePmsGroupAssessment() {
switch (this.currentModal) {
case ('delete'): {
this.pmsGroupAssessment.dataList = this.pmsGroupAssessment.dataList.filter((_, i) => i != this.pmsGroupAssessmentIndex)
break;
}
case ('deleteGroup'): {
this.pmsGroupAssessment.dataList = this.pmsGroupAssessment.dataList.filter((x) => !x.check)
break;
}
}
this.isDataListCheckedAll = false
this.dataListCheckAll()
this.cdr.markForCheck()
}
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
})
}
onBack() { onBack() {
this.sendOnEdit.emit(false); this.sendOnEdit.emit(false);
} }
......
src/app/components/performance-management-evaluation/assessment-management/evaluation-grouping/evaluation-grouping.component.html
...@@ -54,8 +54,26 @@ ...@@ -54,8 +54,26 @@
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody> <tbody *ngIf="pl.loading">
<tr *ngFor="let item of pl.dataList;let i = index"> <tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1"
role="status" aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!pl.loading&&!plListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!pl.loading&&plListFilter().length">
<tr
*ngFor="let item of plListFilter()| slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td style="font-size: 12px; padding-left: 4rem;">{{item.data.plId}}</td> <td style="font-size: 12px; padding-left: 4rem;">{{item.data.plId}}</td>
<td style="font-size: 12px; padding-left: 1.5rem; width: 600px;">{{item.data.tdesc}} <td style="font-size: 12px; padding-left: 1.5rem; width: 600px;">{{item.data.tdesc}}
</td> </td>
......
src/app/components/performance-management-evaluation/assessment-management/evaluation-grouping/evaluation-grouping.component.ts
...@@ -99,7 +99,7 @@ export class EvaluationGroupingComponent { ...@@ -99,7 +99,7 @@ export class EvaluationGroupingComponent {
plListFilter() { plListFilter() {
return this.pl.dataList.filter(x => { return this.pl.dataList.filter(x => {
const data = x.data const data = x.data
const match = data.plId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase()); const match = data.plId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase())
return match; return match;
}); });
} }
......
src/app/components/performance-management-evaluation/name-registration-perfomance/assessment-topics/assessment-topics.component.html
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index"> *ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','Action']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center"> <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<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="!l">
...@@ -175,7 +175,8 @@ ...@@ -175,7 +175,8 @@
<div class="w-full flex justify-end"> <div class="w-full flex justify-end">
<div class="absolute flex"> <div class="absolute flex">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md" (click)="clearPmstopic(modalStatus)"> <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md"
(click)="clearPmstopic(modalStatus)">
<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)">
......
src/app/shared/model/setting-assessment.model.ts
export interface SettingAssessmentModel { export interface SettingAssessmentModel {
apsyear: string; apsyear: string;
companyId: string; companyId: string;
expectationLevel: number; expectationLevel: number;
settingGroupAssessment: string; settingGroupAssessment: string;
settingScore5: number; settingScore5: number;
settingScore4: number; settingScore4: number;
settingScore3: number; settingScore3: number;
settingScore2: number; settingScore2: number;
settingScore1: number; settingScore1: number;
}
export class MySettingAssessmentModel implements SettingAssessmentModel {
apsyear: string;
companyId: string;
expectationLevel: number;
settingGroupAssessment: string;
settingScore5: number;
settingScore4: number;
settingScore3: number;
settingScore2: number;
settingScore1: number;
constructor(data?: Partial<SettingAssessmentModel>) {
this.apsyear = data?.apsyear || "";
this.companyId = data?.companyId || "";
this.expectationLevel = data?.expectationLevel ?? 0;
this.settingGroupAssessment = data?.settingGroupAssessment || "";
this.settingScore5 = data?.settingScore5 ?? 0;
this.settingScore4 = data?.settingScore4 ?? 0;
this.settingScore3 = data?.settingScore3 ?? 0;
this.settingScore2 = data?.settingScore2 ?? 0;
this.settingScore1 = data?.settingScore1 ?? 0;
} }
}
export class MySettingAssessmentModel implements SettingAssessmentModel {
apsyear: string;
companyId: string;
expectationLevel: number;
settingGroupAssessment: string;
settingScore5: number;
settingScore4: number;
settingScore3: number;
settingScore2: number;
settingScore1: number;
constructor(data: Partial<SettingAssessmentModel>) {
this.apsyear = data.apsyear || "";
this.companyId = data.companyId || "";
this.expectationLevel = data.expectationLevel ?? 0;
this.settingGroupAssessment = data.settingGroupAssessment || "";
this.settingScore5 = data.settingScore5 ?? 0;
this.settingScore4 = data.settingScore4 ?? 0;
this.settingScore3 = data.settingScore3 ?? 0;
this.settingScore2 = data.settingScore2 ?? 0;
this.settingScore1 = data.settingScore1 ?? 0;
}
}
\ No newline at end of file
src/app/shared/services/setting-assessment.service.ts
...@@ -6,29 +6,29 @@ import { AlertModel } from '../model/alert.model'; ...@@ -6,29 +6,29 @@ import { AlertModel } from '../model/alert.model';
import { SettingAssessmentModel } from '../model/setting-assessment.model'; import { SettingAssessmentModel } from '../model/setting-assessment.model';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class SettingAssessmentService { export class SettingAssessmentService {
api = "/setting-assessment" api = "/setting-assessment"
urlApi = environment.baseUrl + this.api urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) { constructor(private http: HttpClient) {
} }
getList(): Observable<SettingAssessmentModel[]> { get(): Observable<SettingAssessmentModel> {
return this.http.get<SettingAssessmentModel[]>(this.urlApi + "/lists") return this.http.get<SettingAssessmentModel>(this.urlApi + "")
} }
// getById(companyId: string): Observable<SettingAssessmentModel> { // getById(companyId: string): Observable<SettingAssessmentModel> {
// return this.http.get<SettingAssessmentModel>(this.urlApi + "/" + companyId) // return this.http.get<SettingAssessmentModel>(this.urlApi + "/" + companyId)
// } // }
post(body: SettingAssessmentModel): Observable<AlertModel> { post(body: SettingAssessmentModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body) return this.http.post<AlertModel>(this.urlApi, body)
} }
delete(body: SettingAssessmentModel | SettingAssessmentModel[]): Observable<AlertModel> { delete(body: SettingAssessmentModel | SettingAssessmentModel[]): Observable<AlertModel> {
const options = { const options = {
headers: new HttpHeaders({ headers: new HttpHeaders({
"Content-Type": "application/json", "Content-Type": "application/json",
}), }),
body: body body: body
}; };
return this.http.delete<AlertModel>(this.urlApi, options) return this.http.delete<AlertModel>(this.urlApi, options)
} }
} }
src/assets/css/style.css
...@@ -24729,6 +24729,9 @@ div:where(.swal2-container) div:where(.swal2-validation-message) { ...@@ -24729,6 +24729,9 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
.bg-input-readonly { .bg-input-readonly {
background-color: rgb(241 245 249 / var(--tw-bg-opacity)); background-color: rgb(241 245 249 / var(--tw-bg-opacity));
} }
.\!bg-input-readonly {
background-color: rgb(241 245 249) !important;
}
.ml-8 { .ml-8 {
margin-left: 2rem; margin-left: 2rem;
...@@ -24907,10 +24910,9 @@ div:where(.swal2-container) div:where(.swal2-validation-message) { ...@@ -24907,10 +24910,9 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
margin-top: -0.75rem !important; margin-top: -0.75rem !important;
} }
.\!rounded-t-none { .\!rounded-t-none {
border-top-left-radius: 0rem !important; border-top-left-radius: 0rem !important;
border-top-right-radius: 0rem !important; border-top-right-radius: 0rem !important;
} }
.rounded-t-none { .rounded-t-none {
border-top-left-radius: 0rem; border-top-left-radius: 0rem;
...@@ -24919,4 +24921,4 @@ div:where(.swal2-container) div:where(.swal2-validation-message) { ...@@ -24919,4 +24921,4 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
.masked-input { .masked-input {
-webkit-text-security: disc; /* Safari, Chrome */ -webkit-text-security: disc; /* Safari, Chrome */
} }
\ No newline at end of file
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