Commit fd62e365 by Nattana Chaiyamat

รอบการประเมิน

parent 48a24b75
<ng-container *ngTemplateOutlet="competency"></ng-container>
<ng-template #competency>
<div class="flex flex-col gap-2">
<div class="flex flex-row gap-2 relative">
<div class="flex flex-col">
<div class="flex flex-row py-2 gap-2 sticky" style="top:0;z-index:2;background: white;">
<ng-container *ngFor="let appraisalCompentency of appraisalCompentencyList ;let i=index">
<button type="button" class="flex justify-center !items-center border bg-white p-2 text-center"
style="border-radius:20px;width: 100px"
......@@ -26,7 +26,7 @@
style="padding: 1px;border-radius:5px;font-size:27px" (click)="allBiOpen(false)"></i>
</div>
</div>
<div #scrollContainer class="flex flex-col gap-2 relative" style="overflow-y: auto;" [ngStyle]="{'height': canSave?'calc(100vh - 472px)':'calc(100vh - 343px)'}">
<div class="flex flex-col gap-2 relative" style="overflow-y: auto;min-height: calc(100vh - 480px);">
<ng-container *ngFor="let item2 of appraisalCompentencyFilter();let i = index;let f= first">
<button type="button" [attr.id]="'menu-' + i" class="p-4 w-full bg-secondary text-white text-left"
style="border-radius:20px"
......@@ -133,8 +133,8 @@
</table>
</ng-container>
</ng-container>
<button *ngIf="appraisalCompentencyFilter().length" [attr.id]="'menu-' + appraisalCompentencyFilter().length" type="button"
class="p-4 w-full bg-secondary text-white text-left" style="border-radius:20px"
<button *ngIf="appraisalCompentencyFilter().length" [attr.id]="'menu-' + appraisalCompentencyFilter().length"
type="button" class="p-4 w-full bg-secondary text-white text-left" style="border-radius:20px"
(click)="scrollToMenu(appraisalCompentencyFilter().length);allBiOpen(!biOpen.get('สรุป'),'สรุป')">
<span style="padding-left:50px">
สรุป
......
......@@ -60,6 +60,9 @@ export class PmsCompetencyComponent {
inforWeight: Map<string, string> = new Map<string, string>()
inforGap: Map<string, string> = new Map<string, string>()
@Output() scrollToMenuId: EventEmitter<any> = new EventEmitter<any>();
constructor(private appraisalService: AppraisalService,
private employeeService: EmployeeService,
private cdr: ChangeDetectorRef,
......@@ -76,7 +79,7 @@ export class PmsCompetencyComponent {
this.getEvaluatee()
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['currentTap']?.currentValue||changes['appraisalCompentencyList']?.currentValue) {
if (changes['currentTap']?.currentValue || changes['appraisalCompentencyList']?.currentValue) {
if (this.appraisalCompentencyList.length) {
this.currentPart = this.fCurrentPart == '' ? this.appraisalCompentencyList[0].comType : this.fCurrentPart
}
......@@ -332,14 +335,7 @@ export class PmsCompetencyComponent {
}
scrollToMenu(index: number) {
setTimeout(() => {
const container = this.scrollContainer?.nativeElement as HTMLElement;
const target = container.querySelector('#menu-' + index) as HTMLElement;
if (container && target) {
container.scrollTop = target.offsetTop;
}
}, 0);
this.scrollToMenuId.emit('menu-' + index);
}
}
......@@ -35,7 +35,7 @@
</div>
<div class="w-1/2">
<div class="font-size-18px font-weight-700 text-primary text-right">
สถานะผู้ประเมิน&nbsp;:&nbsp;{{currentStepText()}}
สถานะผู้ประเมิน&nbsp;:&nbsp;{{currentStepTextShow()}}
</div>
</div>
</div>
......@@ -216,18 +216,80 @@
</div>
</div>
<div class="box-body py-2" [class.hidden]="menuClose.get('สรุปผลประเมิน')">
<div class='flex flex-col' *ngFor="let item of kpiScorePart; let i=index">
<div class='flex flex-row'>
<div style="width: 25%;">
{{item.text}}
</div>
<div style="width: 10%;">
:
</div>
<div style="width: 65%;">
{{item.score}}
</div>
<div class='flex flex-row gap-2'>
<div class="flex-1 flex flex-col gap-2">
<ng-container *ngFor="let item of kpiScorePart; let i=index">
<ng-container *ngIf="i<4 && i< kpiScorePart.length-2">
<div class="flex flex-row">
<div class="flex-1" style="align-content:center">
{{item.text}}
</div>
<div class="flex-1 border border-secondary text-center align-center"
style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
{{item.score}}
</div>
</div>
</ng-container>
</ng-container>
<ng-container *ngFor="let item of kpiScorePart; let i=index">
<ng-container *ngIf="i >= kpiScorePart.length-2">
<div class="flex flex-row">
<div class="flex-1 font-size-18px font-weight-700" style="align-content:center">
{{item.text}}
</div>
<div class="flex-1 border border-secondary text-center align-center"
style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
{{item.score}}
</div>
</div>
</ng-container>
</ng-container>
</div>
<div class="flex-1 flex flex-col gap-2">
<ng-container *ngFor="let item of kpiScorePart; let i=index">
<ng-container *ngIf="i>=4 && i< kpiScorePart.length-2">
<div class="flex flex-row">
<div class="flex-1" style="align-content:center">
{{item.text}}
</div>
<div class="flex-1 border border-secondary text-center align-center"
style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
{{item.score}}
</div>
</div>
</ng-container>
</ng-container>
</div>
<!-- <div class="w-1/2 flex flex-row gap-2">
<ng-container *ngFor="let item of kpiScorePart; let i=index">
<ng-container *ngIf="true">
<div class="flex-1 flex flex-col gap-2">
<div class="flex-1 w-1/2">
{{item.text}}
</div>
<div class="flex-1 w-1/2 border border-secondary text-center align-center"
style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
{{item.score}}
</div>
</div>
</ng-container>
</ng-container>
</div>
<div class="w-1/2 flex flex-row gap-2">
<ng-container *ngFor="let item of kpiScorePart; let i=index">
<ng-container *ngIf="true">
<div class="flex-1 flex flex-col gap-2">
<div class="flex-1 w-1/2">
{{item.text}}
</div>
<div class="flex-1 w-1/2 border border-secondary text-center align-center"
style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
{{item.score}}
</div>
</div>
</ng-container>
</ng-container>
</div> -->
</div>
</div>
</div>
......@@ -267,23 +329,22 @@
<div class="flex w-full pb-4">
<div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
<div class="sm:flex">
<h3 class="text-start my-auto text-gray-500 dark:text-white/70" style="line-height: 1.5">
<span class="text-dark dark:text-white">
<h3 class="text-start my-auto text-gray-500 " style="line-height: 1.5">
<p class="font-medium ">
{{assessmentStatusText(compentency.data.currentStep,i,returnField(compentency.data,apsEmp+'.status'))}}
</p>
<p class="font-medium ">
<ng-container *ngIf="i==0">
ผู้รับการประเมิน
</ng-container>
<ng-container *ngIf="i>0">
ผู้อนุมัติลำดับที่ {{i}}
</ng-container>
</span>
<br>
<span class="text-dark dark:text-white">
</p>
<p class="font-medium ">
{{returnField(compentency.data,apsEmp+'.thFullName')}}
</span>
<br>
<p class="text-xs text-gray-500 dark:text-white/70">
{{assessmentStatusText(compentency.data.currentStep,i,returnField(compentency.data,apsEmp+'.status'))}}
</p>
</h3>
</div>
</div>
......@@ -325,24 +386,20 @@
<div class="flex w-full pb-4">
<div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
<div class="w-full">
<h3 class="text-start my-auto text-gray-500 dark:text-white/70" style="line-height: 1.5">
<span class="text-dark dark:text-white" style="white-space: nowrap;">
<h3 class="text-start my-auto text-gray-500 " style="line-height: 1.5">
<p class="font-medium" style="white-space: nowrap;">
{{statusCompetencyText(item.statusType)}}
</p>
<p class="font-medium">
{{item.thFullName}}
</span>
<br>
<div style="display: flex;justify-content :space-between;">
<p class="text-xs text-gray-500 dark:text-white/70">
{{statusCompetencyText(item.statusType)}}
</p>
<p class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs">
{{convertDate(item.commentDate)}}
</p>
</div>
</p>
<p class="font-medium text-right">
{{convertDate(item.commentDate)}}
</p>
</h3>
</div>
<div *ngIf="item.comment"
class="border border-gray-200 bg-gray-50 dark:bg-black/20 dark:border-white/10 p-4 rounded-sm">
<p class="text-start text-xs text-gray-500 dark:text-white/70" style="line-height: 1.5">
<div *ngIf="item.comment" class="border border-gray-200 bg-gray-50 p-4 rounded-sm m-0">
<p class="text-start text-xs text-gray-500 " style="line-height: 1.5">
{{item.comment}}
</p>
</div>
......@@ -368,7 +425,7 @@
style="padding: 1px;font-size:27px;height:33px" (click)="menuClose.set('ข้อมูลรายละเอียด',false)"></i>
</div>
</div>
<div class="box m-0" style="border-radius:20px">
<div class="box m-0" style="border-radius:20px;">
<div class="box-header">
<div class="flex flex-row gap-2">
<ng-container
......@@ -403,8 +460,9 @@
</ng-container>
</div>
</div>
<div class="box-body pt-2" *ngIf="compentency.data&&evaluaterId&&evaluateeId" [class.pb-0]="canSave">
<div [class.hidden]="currentTap!='ข้อมูลการประเมิน'">
<div #scrollContainer class="box-body pt-0" *ngIf="compentency.data&&evaluaterId&&evaluateeId"
style="overflow-y: auto; height: calc(100vh - 253px)">
<div class="min-height: calc(100vh - 406px);" [class.hidden]="currentTap!='ข้อมูลการประเมิน'">
<app-pms-information [statusType]="compentency.data.statusType" [canSave]="canSave"
[appraisalPms]="compentency.data.pms" [appraisalCompentencyList]="compentency.data.competency"
[inforGap]="inforGap" [inforWeight]="inforWeight"
......@@ -413,7 +471,7 @@
[kpiName]="compentency.data.tdesc" (sendCurrentTap)="currentTap=$event"
(sendCurrentPart)="currentPart=$event"></app-pms-information>
</div>
<div [class.hidden]="currentTap!='แบบประเมินสมรรถนะ'">
<div class="min-height: calc(100vh - 406px);" [class.hidden]="currentTap!='แบบประเมินสมรรถนะ'">
<app-pms-competency [currentTap]="currentTap" [canSave]="canSave" [fCurrentPart]="currentPart"
[appraisalCompentencyList]="compentency.data.competency" [evaluaterId]="evaluaterId"
[evaluateeId]="evaluateeId" [canEdit]="canEdit" [currentStep]="compentency.data.currentStep"
......@@ -421,49 +479,56 @@
(compentencyWeightScore)="compentencyWeightScore=$event" (compentencyGap)="compentencyGap=$event"
(compentencyFormRemain)="compentencyFormRemain=$event"
(compentencyForm)="compentency.data.competency=$event" (sendInforGap)="inforGap=$event"
(sendInforWeight)="inforWeight=$event"></app-pms-competency>
(sendInforWeight)="inforWeight=$event" (scrollToMenuId)="scrollToMenu($event)"></app-pms-competency>
</div>
<div [class.hidden]="currentTap!='ประเมินผลการปฏิบัติงาน'&&currentTap!='สรุปคะแนนและข้อเสนอแนะ'">
<div class="min-height: calc(100vh - 406px);"
[class.hidden]="currentTap!='ประเมินผลการปฏิบัติงาน'&&currentTap!='สรุปคะแนนและข้อเสนอแนะ'">
<app-pms-kpi [canSave]="canSave" [appraisalPms]="compentency.data.pms" [currentTap]="currentTap"
[evaluaterId]="evaluaterId" [evaluateeId]="evaluateeId" [canEdit]="canEdit"
[currentStep]="compentency.data.currentStep" [dateIso]="dateIso"
(kpiFormRemain)="kpiFormRemain=$event" (scorePart)="kpiScorePart=$event"
(kpiForm)="compentency.data.pms=$event"></app-pms-kpi>
(kpiForm)="compentency.data.pms=$event" (scrollToMenuId)="scrollToMenu($event)"></app-pms-kpi>
</div>
<div [class.hidden]="currentTap!='แผนพัฒนาบุคคลากร'">
<div class="min-height: calc(100vh - 406px);" [class.hidden]="currentTap!='แผนพัฒนาบุคคลากร'">
<app-pms-idp [currentTap]="currentTap" [canSave]="canSave" [appraisalIdp]="compentency.data.idp"
[evaluaterId]="evaluaterId" [evaluateeId]="evaluateeId"
[canEdit]="evaluationForm=='sup'?canEdit:false" [currentStep]="compentency.data.currentStep"
[dateIso]="dateIso" (idpForm)="compentency.data.idp=$event"></app-pms-idp>
</div>
<ng-container *ngIf="compentency.data&&canSave">
<div class="box-footer text-end space-x-3 rtl:space-x-reverse"
style="margin: 0.5rem -24px -24px -24px;">
<div class="pb-4 space-y-3 dark:border-white/10">
<textarea type="text" class="ti-form-input" rows="2" placeholder="ใส่ Comment ที่นี่"
[(ngModel)]="comment"></textarea>
</div>
<button (click)="save('approve')" class="ti-btn m-0 ti-btn-soft-secondary"
[disabled]="compentencyFormRemain||kpiFormRemain"
[class.ti-btn-disabled]="compentencyFormRemain||kpiFormRemain">
<i class="ri-save-3-fill"></i>
<ng-container *ngIf="compentency.data.currentStep == '0'">
ยืนยันข้อมูล
</ng-container>
<ng-container *ngIf="compentency.data.currentStep != '0'">
อนุมัติ
</ng-container>
</button>
<button (click)="save('draft')" class="ti-btn m-0 ti-btn-soft-success"
*ngIf="compentency.data.currentStep == '0'||compentency.data.currentStep == '1'">
<i class="ri-draft-fill"></i>
บันทึกร่าง
</button>
<button (click)="save('noApprove')" class="ti-btn m-0 ti-btn-soft-danger"
*ngIf="compentency.data.currentStep != '0' && compentency.data.currentStep != '1'">
<i class="ri-reply-fill"></i>
ไม่อนุมัติ
</button>
</div>
</ng-container>
</div>
<div *ngIf="compentency.data&&canSave" class="box-footer text-end space-x-3 rtl:space-x-reverse">
<div class="pb-4 space-y-3 dark:border-white/10">
<textarea type="text" class="ti-form-input" rows="2" placeholder="ใส่ Comment ที่นี่"
[(ngModel)]="comment"></textarea>
</div>
<button (click)="save('approve')" class="ti-btn m-0 ti-btn-soft-secondary"
[disabled]="compentencyFormRemain||kpiFormRemain"
[class.ti-btn-disabled]="compentencyFormRemain||kpiFormRemain">
<i class="ri-save-3-fill"></i>
<ng-container *ngIf="compentency.data.currentStep == '0'">
ยืนยันข้อมูล
</ng-container>
<ng-container *ngIf="compentency.data.currentStep != '0'">
อนุมัติ
</ng-container>
</button>
<button (click)="save('draft')" class="ti-btn m-0 ti-btn-soft-success"
*ngIf="compentency.data.currentStep == '0'||compentency.data.currentStep == '1'">
<i class="ri-draft-fill"></i>
บันทึกร่าง
</button>
<button (click)="save('noApprove')" class="ti-btn m-0 ti-btn-soft-danger"
*ngIf="compentency.data.currentStep != '0' && compentency.data.currentStep != '1'">
<i class="ri-reply-fill"></i>
ไม่อนุมัติ
</button>
</div>
<!-- <div class="box-footer text-end space-x-3 rtl:space-x-reverse">
</div> -->
</div>
</div>
</div>
......
import { ChangeDetectorRef, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { CompetencyModel } from 'src/app/shared/model/competency.model';
import { EmployeeModel, MyEmployeeModel } from 'src/app/shared/model/employee.model';
......@@ -62,6 +62,10 @@ export class PmsFormEmployeeComponent {
hasPushedState = false;
companyId = ""
@ViewChild('scrollContainer') scrollContainer!: ElementRef;
constructor(
private router: Router,
private employeeService: EmployeeService,
......@@ -89,6 +93,24 @@ export class PmsFormEmployeeComponent {
}
return ""
}
currentStepTextShow = () => {
if (this.compentency.data) {
if (this.compentency.data.apsassessy.employeeId == this.evaluaterId) {
return "ผู้ประเมิน"
} else if (this.compentency.data.apsapprove1.employeeId == this.evaluaterId) {
return "ผู้อนุมัติลำดับที่ 1"
} else if (this.compentency.data.apsapprove2.employeeId == this.evaluaterId) {
return "ผู้อนุมัติลำดับที่ 2"
} else if (this.compentency.data.apsapprove3.employeeId == this.evaluaterId) {
return "ผู้อนุมัติลำดับที่ 3"
} else if (this.compentency.data.apsapprove4.employeeId == this.evaluaterId) {
return "ผู้อนุมัติลำดับที่ 4"
} else if (this.compentency.data.apsapprove5.employeeId == this.evaluaterId) {
return "ผู้อนุมัติลำดับที่ 5"
}
}
return ""
}
gradeStar = (grade: string) => {
if (grade == 'A') {
......@@ -693,4 +715,20 @@ export class PmsFormEmployeeComponent {
return { full, mini };
}
scrollToMenu(id: string) {
setTimeout(() => {
const container = this.scrollContainer?.nativeElement as HTMLElement;
const target = document.getElementById(id);
if (container && target) {
const containerTop = container.getBoundingClientRect().top;
const targetTop = target.getBoundingClientRect().top;
const scrollOffset = targetTop - containerTop - 65;
container.scrollTop += scrollOffset;
}
}, 0);
}
}
\ No newline at end of file
<ng-container *ngTemplateOutlet="idpEvaluation"></ng-container>
<ng-template #idpEvaluation>
<ng-container *ngIf="appraisalIdp">
<div style="overflow-y: auto;" [ngStyle]="{'height': canSave?'calc(100vh - 414px)':'calc(100vh - 285px)'}">
<div class="pt-1 pb-2">
<div style="overflow-y: auto;" style="padding-top: 1rem">
<div class="pb-2">
<div class="font-size-18px font-weight-700 text-gray-500">
ส่วนที่ 1: ข้อมูลทั่วไป
</div>
......
<div class="flex flex-col gap-2" style="overflow-y: auto;"
[ngStyle]="{'height': canSave?'calc(100vh - 414px)':'calc(100vh - 285px)'}">
<div class="flex flex-col gap-2 pt-2" style="overflow-y: auto;min-height: calc(100vh - 422px)">
<div class="flex">
<button type="button" class="p-4 w-full bg-secondary text-white text-left" style="border-radius:20px"
(click)="menuClose.set('Compentency',!menuClose.get('Compentency'))">
......@@ -38,8 +37,7 @@
</td>
<td class="py-2 text-center" style="vertical-align: top">
<div class="flex justify-center">
<button type="button" class="ti-btn rounded-sm"
[class]="statusButtonClass(statusType)"
<button type="button" class="ti-btn rounded-sm" [class]="statusButtonClass(statusType)"
(click)="sendCurrentTap.emit('แบบประเมินสมรรถนะ');sendCurrentPart.emit(statusType)"
style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;">
{{item.comType}}
......
......@@ -2,8 +2,8 @@
<ng-template #pmsEvaluation>
<ng-container *ngIf="appraisalPms">
<div class="flex flex-col gap-2">
<div class="flex flex-row gap-2">
<div class="flex flex-col">
<div class="flex py-2 flex-row gap-2 sticky" style="top:0;z-index:2;background: white;">
<ng-container *ngFor="let item of partShow;let i=index">
<button type="button" class="flex justify-center !items-center border bg-white p-1 text-center"
(click)="scrollToMenu(currentTap == 'ประเมินผลการปฏิบัติงาน'?('menu-part-'+(i+1)):('menu-part-'+(i+8)));currentPart=item;toggleAllParts(true,item)"
......@@ -34,8 +34,7 @@
(click)="toggleAllParts(false);currentPart=''"></i>
</div>
</div>
<div #scrollContainer class="flex flex-col gap-2" style="overflow-y: auto;"
[ngStyle]="{'height': canSave?'calc(100vh - 471px)':'calc(100vh - 342px)'}">
<div class="flex flex-col gap-2" style="min-height: calc(100vh - 479px);">
<ng-container *ngIf="currentTap=='ประเมินผลการปฏิบัติงาน'">
<ng-container *ngIf="appraisalPms?.part1Detail?.length then part1 else noData"></ng-container>
<ng-container *ngIf="appraisalPms?.part2Detail?.length then part2 else noData"></ng-container>
......@@ -72,7 +71,7 @@
<th scope="col">ตัวชี้วัด</th>
<th scope="col">น้ำหนัก</th>
<th scope="col">เพิ่มเติม</th>
<th scope="col">ค่าเป้าหมาย</th>
<th scope="col" style="width: 300px">ค่าเป้าหมาย</th>
<th scope="col">คะแนน</th>
</tr>
</thead>
......@@ -170,7 +169,7 @@
(mouseenter)="partScore.set(item.groupAssessment1.pmsTopic.pmsTopicId,item2)"
(mouseleave)="partScore.clear()"
(click)="setScore(item,item2);allFormRemain()" [ngClass]="{'!border-secondary !text-secondary':(evaluaterId==evaluateeId?item.scoreTopicExpectation>=item2:item.scoreTopicExpectationBoss>=item2)||(partScore.get(item.groupAssessment1.pmsTopic.pmsTopicId) ?? 0)>=item2,
'pointer-events-none':!canEdit}">
'pointer-events-none':!canEdit}">
{{item2}}
</button>
</ng-container>
......
......@@ -94,7 +94,8 @@ export class PmsKpiComponent {
@Output() scorePart: EventEmitter<any> = new EventEmitter<any>();
groupGrade: { loading: boolean, dataList: CompetencyGradeModel[] } = { loading: false, dataList: [] }
@ViewChild('scrollContainer') scrollContainer!: ElementRef;
@Output() scrollToMenuId: EventEmitter<any> = new EventEmitter<any>();
constructor(private appraisalService: AppraisalService,
private pmsGroupGradeService: PmsGroupGradeService,
private employeeService: EmployeeService,
......@@ -542,17 +543,6 @@ export class PmsKpiComponent {
}
scrollToMenu(id: string) {
setTimeout(() => {
const container = this.scrollContainer?.nativeElement as HTMLElement;
const target = document.getElementById(id);
if (container && target) {
const containerTop = container.getBoundingClientRect().top;
const targetTop = target.getBoundingClientRect().top;
const scrollOffset = targetTop - containerTop;
container.scrollTop += scrollOffset;
}
}, 0);
this.scrollToMenuId.emit(id);
}
}
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