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

src/app/components/performance-evaluation/pms-form-employee/pms-competency/pms-competency.component.html

 <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">
           สรุป

src/app/components/performance-evaluation/pms-form-employee/pms-competency/pms-competency.component.ts

@@ -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);
   }
 
 }

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 { 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

src/app/components/performance-evaluation/pms-form-employee/pms-idp/pms-idp.component.html

 <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>

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;"
-    [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}}

src/app/components/performance-evaluation/pms-form-employee/pms-kpi/pms-kpi.component.html

@@ -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>

src/app/components/performance-evaluation/pms-form-employee/pms-kpi/pms-kpi.component.ts

@@ -94,6 +94,7 @@ 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,
@@ -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);
   }
 }