Commit 707e0e02 by Nattana Chaiyamat

idp

parent 779e05b7
......@@ -234,20 +234,44 @@
</td>
<td class="!p-0"></td>
<td class="align-start text-center"
[class.bg-table-gray]="!data.idpDevelopmentPlan||!data.competencyCourse||!data.idpDevelopmentPlan.training">
[class.bg-table-gray]="canEdit?(!data.idpDevelopmentPlan?.training||(formIdp.data.masfromEvaluationIdp.idpStatus!='1' && !data.competencyCourse)):!data.competencyCourse">
<ng-container *ngIf="data.idpDevelopmentPlan&&data.idpDevelopmentPlan.training">
<div class="mb-3" *ngFor="let competencyCourse of data.competencyCourse">
<div class="flex !items-center"
*ngFor="let competencyCourse of data.competencyCourse"
style="min-height: 100px;">
<i class="ti ti-book fs-xxl !fw-b"></i><br>
{{competencyCourse.competencyCourseId }}
</div>
</ng-container>
</td>
<td class="align-start text-center !white-space-normal"
[class.bg-table-gray]="!data.idpDevelopmentPlan||!data.competencyCourse||!data.idpDevelopmentPlan.training">
[class.bg-table-gray]="canEdit?(!data.idpDevelopmentPlan?.training||(formIdp.data.masfromEvaluationIdp.idpStatus!='1' && !data.competencyCourse)):!data.competencyCourse">
<ng-container *ngIf="data.idpDevelopmentPlan&&data.idpDevelopmentPlan.training">
<div class="mb-3" *ngFor="let competencyCourse of data.competencyCourse">
{{competencyCourse.tdesc }}
</div>
<ng-container
*ngFor="let competencyCourse of data.competencyCourse;let l = index;let last=last">
<div class="flex !items-center" style="min-height: 100px;">
{{competencyCourse.tdesc}}
<span class="ciricon border cursor-pointer" *ngIf="canEdit&&formIdp.data.masfromEvaluationIdp.idpStatus=='1'"
(click)="deleteCompetencyCourse(i,l)">
<i class="ri-close-line text-red-500"></i>
</span>
</div>
<button
*ngIf="last&&canEdit&&formIdp.data.masfromEvaluationIdp.idpStatus=='1'"
type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
(click)="openCompetencycourseDialog(i) ">
<i class="ri-add-line"></i>
Add
</button>
</ng-container>
</ng-container>
<ng-container
*ngIf="canEdit&&!data.competencyCourse?.length&&formIdp.data.masfromEvaluationIdp.idpStatus=='1'&&data.idpDevelopmentPlan?.training">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
(click)="openCompetencycourseDialog(i) ">
<i class="ri-add-line"></i>
Add
</button>
</ng-container>
</td>
<td class="!p-0"></td>
......@@ -270,20 +294,20 @@
</table>
</div>
</div>
<div class="py-1rem px-2rem hidden">
<div class="py-1rem px-2rem">
<div class="py-2 grid grid-cols-6 gap-3">
<div class="col-span-6">หมายเหตุ : กรณี HR จัดอบรมให้ต้องเป็นไปตามเกณฑ์ที่ส่วนกลางกำหนดขึ้น</div>
<div class="col-span-6 grid grid-cols-6 gap-2">
<div class="grid col-span-1 grid-cols-6 gap-2">
<div class="col-span-1">
<input type="checkbox" class="ti-form-checkbox" id="idpStatus-0"
[class.pointer-events-none]="formIdp.data.masfromEvaluationIdp.idpStatus=='0'||!canEdit"
<input type="checkbox" class="ti-form-checkbox" id="idpStatus-0" (click)="resetFormIdp()"
[class.pointer-events-none]="formIdp.data.masfromEvaluationIdp.idpStatus=='0'||!canEdit ||formIdp.data.checkStep!='1'"
name="idpStatus" (change)="formIdp.data.masfromEvaluationIdp.idpStatus='0'"
[checked]="formIdp.data.masfromEvaluationIdp.idpStatus=='0'">
</div>
<div class="col-span-5">
<label for="idpStatus-0" class="text-sm text-gray-500"
[class.pointer-events-none]="formIdp.data.masfromEvaluationIdp.idpStatus=='0'||!canEdit">
[class.pointer-events-none]="formIdp.data.masfromEvaluationIdp.idpStatus=='0'||!canEdit ||formIdp.data.checkStep!='1'">
IDP มาตรฐาน
</label>
</div>
......@@ -291,13 +315,13 @@
<div class="grid col-span-1 grid-cols-6 gap-2">
<div class="col-span-1">
<input type="checkbox" class="ti-form-checkbox" id="idpStatus-1"
[class.pointer-events-none]="formIdp.data.masfromEvaluationIdp.idpStatus=='1'||!canEdit"
[class.pointer-events-none]="formIdp.data.masfromEvaluationIdp.idpStatus=='1'||!canEdit ||formIdp.data.checkStep!='1'"
name="idpStatus" (change)="formIdp.data.masfromEvaluationIdp.idpStatus='1'"
[checked]="formIdp.data.masfromEvaluationIdp.idpStatus=='1'">
</div>
<div class="col-span-5">
<label for="idpStatus-1" class="text-sm text-gray-500"
[class.pointer-events-none]="formIdp.data.masfromEvaluationIdp.idpStatus=='1'||!canEdit">
[class.pointer-events-none]="formIdp.data.masfromEvaluationIdp.idpStatus=='1'||!canEdit ||formIdp.data.checkStep!='1'">
IDP ปรับแก้ไข
</label>
</div>
......@@ -424,12 +448,91 @@
</div>
<div class="flex justify-center mb-1rem pb-2rem" *ngIf="canSave">
<button *ngIf="formIdp.data.checkStep!='0'&&formIdp.data.checkStep!='1'" type="submit"
class="ti-btn ti-btn-danger mx-2rem" (click)="save('noApprove')">
ไม่อนุมัติ
</button>
<button type="submit" class="ti-btn ti-btn-success mx-2rem" (click)="save('draft')">
บันทึกร่าง
</button>
<button type="submit" class="ti-btn ti-btn-secondary mx-2rem" (click)="save()">
อนุมัติ
<button type="submit" class="ti-btn ti-btn-secondary mx-2rem" (click)="save('approve')">
<ng-container *ngIf="formIdp.data.checkStep=='0'">
ยืนยันข้อมูล
</ng-container>
<ng-container *ngIf="formIdp.data.checkStep!='0'">
อนุมัติ
</ng-container>
</button>
</div>
</ng-container>
</ng-template>
<ng-template #competencycourseModal let-modal>
<h3 mat-dialog-title>
ข้อมูลหลักสูตรพัฒนาตาม CDR
</h3>
<mat-dialog-content>
<div class="flex justify-end pb-1rem">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="competencycourseTable.search" (ngModelChange)="onCompetencycourseSearch()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
</div>
<div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<ng-container
*ngFor="let item of ['ลำดับ','รหัสหลักสูตร','รายละเอียด (ไทย)','รายละเอียด (อังกฤษ)']; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="!filterCompetencycourse().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="filterCompetencycourse().length">
<tr *ngFor="let item of filterCompetencycourse() | slice:((competencycourseTable.currentPage-1) * competencycourseTable.pageSize) : (((competencycourseTable.currentPage-1) * competencycourseTable.pageSize) + competencycourseTable.pageSize);let i = index"
class="cursor-pointer" (click)="addCompetencycourse(item);closeCompetencycourseDialog()">
<td class="flex justify-center">
{{((competencycourseTable.currentPage-1) * competencycourseTable.pageSize)+(i+1)}}
</td>
<td>{{item.competencyCourseId}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
</tr>
</tbody>
</table>
</div>
<app-pagination [totalItems]="filterCompetencycourse().length" [pageSize]="competencycourseTable.pageSize"
(pageChange)="competencycourseTable.currentPage = $event"
(pageSizeChange)="competencycourseTable.pageSize = $event;competencycourseTable.currentPage = 1"></app-pagination>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button type="button" mat-button [mat-dialog-close]
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
ย้อนกลับ
</button>
</mat-dialog-actions>
</ng-template>
\ No newline at end of file
.ciricon {
height: 12px; /* กำหนดความสูงของวงกลม */
width: 12px; /* กำหนดความกว้างของวงกลม */
background-color: #ffffff;
font-weight: bold;
display: flex; /* ใช้ Flexbox */
justify-content: center; /* จัดตำแหน่งแนวนอนให้กึ่งกลาง */
align-items: center; /* จัดตำแหน่งแนวตั้งให้กึ่งกลาง */
border-radius: 2px; /* ทำให้เป็นวงกลม */
}
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { CompetencycourseMiniModel, MyCompetencycourseMiniModel } from 'src/app/shared/model/competencycourse-mini.model';
import { IdpFormModel } from 'src/app/shared/model/idp-form.model';
import { CompetencycourseService } from 'src/app/shared/services/competencycourse.service';
import { EmployeeService } from 'src/app/shared/services/employee.service';
import { EvaluationIdpService } from 'src/app/shared/services/evaluation-Idp.service';
import Swal from 'sweetalert2';
interface table {
currentPage: number,
page: number[],
search: string,
pageSize: number
}
@Component({
selector: 'app-idp-evalution',
templateUrl: './idp-evalution.component.html',
......@@ -17,21 +27,90 @@ export class IdpEvalutionComponent {
currentDate = new Date()
hoveredCode: string | null = null;
formIdp: { loading: boolean, data?: IdpFormModel } = { loading: false, data: undefined }
originalformIdp?: IdpFormModel
canEdit = false
canSave = false
competencycourse: { loading: boolean, data: CompetencycourseMiniModel[] } = { loading: false, data: [] }
competencycourseTable: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: "",
pageSize: 10
}
competencycourseIndex = -1
@ViewChild("competencycourseModal") competencycourseModal: any;
dialogRefCompetencycourseModal: any
constructor(private evaluationIdpService: EvaluationIdpService,
private employeeService: EmployeeService,
private cdr: ChangeDetectorRef
private competencycourseService: CompetencycourseService,
private cdr: ChangeDetectorRef,
private dialog: MatDialog
) {
}
ngOnInit(): void {
this.getFormIdp()
this.getCompetencycourseMiniList()
}
getCompetencycourseMiniList() {
this.competencycourse.loading = false
this.competencycourseService.getMiniList().subscribe({
next: response => {
this.competencycourse.data = response.map(x => new MyCompetencycourseMiniModel(x))
this.competencycourse.loading = false
this.cdr.detectChanges()
}, error: error => {
this.competencycourse.loading = false
this.cdr.detectChanges()
}
})
}
openCompetencycourseDialog(index: number) {
this.competencycourseIndex = index
this.dialogRefCompetencycourseModal = this.dialog.open(this.competencycourseModal, {
width: '800px',
})
}
closeCompetencycourseDialog() {
this.dialogRefCompetencycourseModal.close()
}
addCompetencycourse(data: CompetencycourseMiniModel) {
if (this.formIdp.data) {
if (this.formIdp.data.competencyIndicatorsCourses1[this.competencycourseIndex].competencyCourse) {
this.formIdp.data.competencyIndicatorsCourses1[this.competencycourseIndex].competencyCourse.push(new MyCompetencycourseMiniModel(data))
} else {
this.formIdp.data.competencyIndicatorsCourses1[this.competencycourseIndex]['competencyCourse'] = [new MyCompetencycourseMiniModel(data)]
}
this.cdr.detectChanges()
}
}
deleteCompetencyCourse(index: number, removeIndex: number) {
if (this.formIdp.data) {
this.formIdp.data.competencyIndicatorsCourses1[index].competencyCourse.splice(removeIndex, 1)
}
}
onCompetencycourseSearch() {
this.competencycourseTable.currentPage = 1
this.competencycourseTable.page = Array.from({ length: Math.ceil(this.filterCompetencycourse().length / 10) }, (_, i) => i + 1);
}
filterCompetencycourse() {
return this.competencycourse.data.filter(x => x.competencyCourseId.toLowerCase().includes(this.competencycourseTable.search.toLowerCase()) ||
x.tdesc.toLowerCase().includes(this.competencycourseTable.search.toLowerCase()) ||
x.edesc.toLowerCase().includes(this.competencycourseTable.search.toLowerCase()))
}
resetFormIdp() {
if (this.originalformIdp && this.formIdp.data) {
this.formIdp.data.competencyIndicatorsCourses1 = JSON.parse(JSON.stringify(this.originalformIdp.competencyIndicatorsCourses1))
}
}
getFormIdp() {
this.formIdp.loading = true
this.evaluationIdpService.getFormIdp(this.evaluationRoundId, this.evaluateeId).subscribe({
next: response => {
this.formIdp.data = JSON.parse(JSON.stringify(response))
this.originalformIdp = JSON.parse(JSON.stringify(response))
if (this.formIdp.data) {
this.canSave = (this.formIdp.data.currentStep == this.formIdp.data.checkStep) && (this.formIdp.data.masfromStatusType.code != 'Boss_finish' && this.formIdp.data.masfromStatusType.code != 'Not_evaluating_yet')
this.canEdit = (this.formIdp.data.currentStep == this.formIdp.data.checkStep && (+(this.formIdp.data.checkStep) <= 1)) && (this.formIdp.data.masfromStatusType.code != 'Boss_finish' && this.formIdp.data.masfromStatusType.code != 'Not_evaluating_yet')
......@@ -75,6 +154,7 @@ export class IdpEvalutionComponent {
}
default: { return }
}
this.formIdp.data.masfromEvaluationIdp.idpStatus = this.formIdp.data.masfromEvaluationIdp.idpStatus ? this.formIdp.data.masfromEvaluationIdp.idpStatus : '0'
this.formIdp.loading = false
this.cdr.detectChanges()
}, error: error => {
......@@ -103,7 +183,34 @@ export class IdpEvalutionComponent {
return `${day}-${month}-${year}`;
}
save(status?: string) {
save(status: 'approve' | 'noApprove' | 'draft') {
let title = ''
let text = ''
let confirmButtonText = ''
let approveStatus = '0'
if (status == 'draft') {
title = 'บันทึกแบบร่าง'
text = 'คุณต้องการบันทึกแบบร่างของการประเมินนี้ใช่หรือไม่'
confirmButtonText = 'ยืนยันการบันทึก'
approveStatus = '1'
} else if (status == 'approve') {
approveStatus = '2'
if (this.formIdp?.data?.checkStep == '0') {
title = 'ยืนยันข้อมูล'
text = 'คุณต้องการยืนยันข้อมูลการประเมินนี้ใช่หรือไม่'
confirmButtonText = 'ยืนยันการบันทึก'
} else {
title == 'อนุมัติ'
text = 'คุณต้องการอนุมัติข้อมูลการประเมินนี้ใช่หรือไม่'
confirmButtonText = 'ยืนยันการอนุมัติ'
}
} else if (status == 'noApprove') {
approveStatus = '0'
title == 'ไม่อนุมัติ'
text = 'คุณต้องการไม่อนุมัติข้อมูลการประเมินนี้ใช่หรือไม่'
confirmButtonText = 'ยืนยันการไม่อนุมัติ'
}
Swal.fire({
iconHtml: `
<div class="flex items-center justify-center rounded-full !h-80px !w-80px" style="background-color: #E8F8EE;">
......@@ -121,10 +228,10 @@ export class IdpEvalutionComponent {
</svg>
</div>
`,
title: status == 'draft' ? 'บันทึกแบบร่าง' : 'อนุมัติข้อมูล',
text: status == 'draft' ? 'คุณต้องการบันทึกแบบร่างของการประเมินนี้ใช่หรือไม่' : 'คุณต้องการอนุมัติข้อมูลการประเมินนี้ใช่หรือไม่',
title: title,
text: text,
showCancelButton: true,
confirmButtonText: status == 'draft' ? 'ยืนยันการบันทึก' : 'ยืนยันการอนุมัติข้อมูล',
confirmButtonText: confirmButtonText,
cancelButtonText: 'ย้อนกลับ',
customClass: {
title: '!swal2-title-mt-20px',
......@@ -135,11 +242,11 @@ export class IdpEvalutionComponent {
},
}).then((result) => {
if (result.isConfirmed && this.formIdp) {
this.saveApi(status)
this.saveApi(approveStatus)
} else if (result.dismiss === Swal.DismissReason.cancel) {
Swal.fire({
title: 'ยกเลิก!',
text: status == 'draft' ? 'การบันทึกถูกยกเลิก' : 'การอนุมัติถูกยกเลิก',
text: 'การบันทึกถูกยกเลิก',
icon: 'error',
customClass: {
confirmButton: '!swal2-button-bg-danger',
......@@ -148,14 +255,15 @@ export class IdpEvalutionComponent {
}
})
}
saveApi(status?: string) {
saveApi(approveStatus: string) {
let body = this.formIdp.data
switch (this.formIdp.data?.currentStep) {
case ("0"): {
body = {
...this.formIdp.data, masfromEvaluationIdp: {
...this.formIdp.data.masfromEvaluationIdp,
apsassessyStatus: status == 'draft' ? '1' : '2'
apsassessyStatus: approveStatus
}
}
break
......@@ -164,7 +272,7 @@ export class IdpEvalutionComponent {
body = {
...this.formIdp.data, masfromEvaluationIdp: {
...this.formIdp.data.masfromEvaluationIdp,
apsapprove1Status: status == 'draft' ? '1' : '2'
apsapprove1Status: approveStatus
}
}
break
......@@ -173,7 +281,8 @@ export class IdpEvalutionComponent {
body = {
...this.formIdp.data, masfromEvaluationIdp: {
...this.formIdp.data.masfromEvaluationIdp,
apsapprove2Status: status == 'draft' ? '1' : '2'
apsapprove1Status: approveStatus == '0' ? approveStatus : this.formIdp.data.masfromEvaluationIdp.apsapprove1Status,
apsapprove2Status: approveStatus
}
}
break
......@@ -182,7 +291,8 @@ export class IdpEvalutionComponent {
body = {
...this.formIdp.data, masfromEvaluationIdp: {
...this.formIdp.data.masfromEvaluationIdp,
apsapprove3Status: status == 'draft' ? '1' : '2'
apsapprove2Status: approveStatus == '0' ? approveStatus : this.formIdp.data.masfromEvaluationIdp.apsapprove2Status,
apsapprove3Status: approveStatus
}
}
break
......@@ -191,7 +301,8 @@ export class IdpEvalutionComponent {
body = {
...this.formIdp.data, masfromEvaluationIdp: {
...this.formIdp.data.masfromEvaluationIdp,
apsapprove4Status: status == 'draft' ? '1' : '2'
apsapprove3Status: approveStatus == '0' ? approveStatus : this.formIdp.data.masfromEvaluationIdp.apsapprove3Status,
apsapprove4Status: approveStatus
}
}
break
......@@ -200,7 +311,8 @@ export class IdpEvalutionComponent {
body = {
...this.formIdp.data, masfromEvaluationIdp: {
...this.formIdp.data.masfromEvaluationIdp,
apsapprove5Status: status == 'draft' ? '1' : '2'
apsapprove4Status: approveStatus == '0' ? approveStatus : this.formIdp.data.masfromEvaluationIdp.apsapprove4Status,
apsapprove5Status: approveStatus
}
}
break
......@@ -212,7 +324,7 @@ export class IdpEvalutionComponent {
if (response.success) {
Swal.fire({
title: 'บันทึกสำเร็จ!',
text: status == 'draft' ? 'การประเมินถูกบันทึกแล้ว' : 'การประเมินถูกอนุมัติแล้ว',
text: 'การประเมินของคุณถูกบันทึกแล้ว',
icon: 'success',
customClass: {
confirmButton: '!swal2-button-bg-green',
......@@ -222,7 +334,7 @@ export class IdpEvalutionComponent {
} else {
Swal.fire({
title: 'ยกเลิก!',
text: status == 'draft' ? 'การบันทึกนถูกยกเลิก' : 'การประเมินไม่ถูกอนุมัติ',
text: 'การบันทึกถูกยกเลิก',
icon: 'error',
customClass: {
confirmButton: '!swal2-button-bg-danger',
......@@ -232,7 +344,7 @@ export class IdpEvalutionComponent {
}, error: error => {
Swal.fire({
title: 'ยกเลิก!',
text: status == 'draft' ? 'การบันทึกถูกยกเลิก' : 'การประเมินไม่ถูกอนุมัติ',
text: 'การบันทึกถูกยกเลิก',
icon: 'error',
customClass: {
confirmButton: '!swal2-button-bg-danger',
......@@ -241,4 +353,6 @@ export class IdpEvalutionComponent {
}
})
}
}
export interface CompetencycourseMiniModel {
competencyCourseId: string
companyId: string
edesc: string
tdesc: string
}
export class MyCompetencycourseMiniModel implements CompetencycourseMiniModel {
competencyCourseId: string
companyId: string
edesc: string
tdesc: string
constructor(data: Partial<CompetencycourseMiniModel>) {
this.competencyCourseId = data.competencyCourseId || ""
this.companyId = data.companyId || ""
this.edesc = data.edesc || ""
this.tdesc = data.tdesc || ""
}
}
......@@ -1463,7 +1463,7 @@ export interface CompetencyIndicatorsCourses1 {
competencyCourseId: string
competencyCourse: CompetencyCourse[]
behavioralIndicators: BehavioralIndicator[]
idpDevelopmentPlan: IdpDevelopmentPlan
idpDevelopmentPlan?: IdpDevelopmentPlan
}
export interface IndicatorsCourses0 {
......
......@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { CompetencycourseModel } from '../model/competencycourse.model';
import { AlertModel } from '../model/alert.model';
import { CompetencycourseMiniModel } from '../model/competencycourse-mini.model';
@Injectable({
providedIn: 'root'
})
......@@ -18,6 +19,9 @@ export class CompetencycourseService {
getList(): Observable<CompetencycourseModel[]> {
return this.http.get<CompetencycourseModel[]>(this.urlApi + "/lists")
}
getMiniList(): Observable<CompetencycourseMiniModel[]> {
return this.http.get<CompetencycourseMiniModel[]>(this.urlApi + "/mini/lists")
}
post(body: CompetencycourseModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body)
}
......
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