Skip to content

M
mySkill-x
Commit fd62e365 by Nattana Chaiyamat
Options

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

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