design จอเมนูใหม่

src/app/components/dashboard/dashboard-routing.module.ts

@@ -83,7 +83,7 @@ const routes: Routes = [
 
       // myComponent
       { path: "ess/profile", component: EssProfileComponent },
-      { path: "ess/self-evaluation", title: 'ประเมินตนเอง', component: SelfEvaluationComponent },
+      { path: "ess/self-evaluation", title: 'ประเมินตนเอง', redirectTo: 'ess/self-evaluation/info' },
       { path: "ess/self-evaluation/:part", title: 'ประเมินตนเอง', component: SelfEvaluationComponent },
       { path: "admin/day-type-registry", title: 'ทะเบียนประเภทวัน', component: DayTypeRegistryComponent },
       { path: "admin/company-registration", title: 'ทะเบียนบริษัท', component: CompanyRegistrationComponent },
@@ -106,6 +106,7 @@ const routes: Routes = [
       { path: "admin/job-position-indicators", title: 'ตัวชี้วัดของตำแหน่งงาน', component: JobPositionIndicatorsComponent },
       { path: "admin/evaluation-cycle-performance", title: 'รอบการประเมิน', component: EvaluationCyclePerformanceComponent },
       { path: "ess/supervisor-evaluation", title: 'ประเมินโดยหัวหน้า', component: SupervisorEvaluationComponent },
+      { path: "ess/supervisor-evaluation/:part", title: 'ประเมินโดยหัวหน้า', component: SupervisorEvaluationComponent },
       { path: "ess/pms-evaluation", title: 'ประเมินผล PMS', component: PmsFormEmployeeComponent },
       { path: "admin/employee-registration", title: 'ทะเบียนพนักงาน', component: EmployeeRegistrationComponent },
       { path: "admin/name-registration-perfomance", title: 'คลังข้อมูลการบริหารผลงาน', component: NameRegistrationPerfomanceComponent },

src/app/components/employee-self-service/employee-self-service.component.scss

@@ -193,3 +193,203 @@ $shadow-deep : 0 20px 42px -16px rgba(0, 0, 0, .24);
   word-break: break-word;
 }
 
+// div {
+//   border: black 1px solid;
+//   min-height: 20px;
+// }
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.col {
+  flex: 1;
+}
+
+@for $i from 1 through 12 {
+  $width: (
+    $i / 12) * 100%;
+
+  .col-#{$i} {
+    flex: 0 0 $width;
+    max-width: $width;
+  }
+}
+
+.col-start {
+  display: flex;
+  justify-content: start;
+}
+
+.col-center {
+  display: flex;
+  justify-content: center;
+}
+
+.row-top {
+  display: flex;
+  align-items: start;
+  align-content: start;
+}
+
+.row-center {
+  display: flex;
+  align-items: center;
+}
+
+.relative {
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.dashboard-link {
+  font-size: .9rem;
+  color: #64748b;
+  transition: color .25s;
+
+  &:hover {
+    color: #3b82f6;
+  }
+}
+
+
+.dashboard-box {
+  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2
+  );
+border: 1px solid transparent;
+border-radius: 30px;
+background-image: linear-gradient(white, white),
+  linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
+background-origin: border-box;
+background-clip: content-box,
+  border-box;
+transition: transform $dur $easing,
+  box-shadow $dur $easing;
+
+&:hover {
+  transform: translateY(-6px);
+  box-shadow: $shadow-deep;
+}
+
+&:hover::before {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border-radius: inherit;
+  background: linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
+  filter: blur(34px);
+  opacity: .17;
+  z-index: -1;
+  transition: opacity $dur;
+  opacity: .27;
+  border: 1px solid;
+}
+
+.sub-box {
+  padding: 15px;
+}
+}
+
+
+.menu-box {
+  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
+  border: 1px solid transparent;
+  border-radius: 30px;
+  background-image: linear-gradient(white, white),
+    linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
+  background-origin: border-box;
+  background-clip: content-box,
+    border-box;
+  transition: transform $dur $easing,
+    box-shadow $dur $easing;
+
+  &:hover {
+    transform: translateY(-6px);
+    box-shadow: $shadow-deep;
+  }
+
+  &:hover::before {
+    content: '';
+    position: absolute;
+    inset: -3px;
+    border-radius: inherit;
+    // background: linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
+    filter: blur(34px);
+    opacity: .17;
+    z-index: -1;
+    transition: opacity $dur;
+    opacity: .27;
+    border: 1px solid;
+  }
+
+  .sub-box {
+    padding: 15px;
+  }
+}
+
+.text-blue {
+  color: #3b82f6;
+}
+
+.text-title {
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 2.25rem;
+  pointer-events: none;
+  word-break: break-word;
+}
+
+.text-menu {
+  font-weight: 500;
+  font-size: 1rem;
+  transition: color .25s;
+}
+
+.table-link {
+  transition: color 0.25s;
+
+  &[data-disable-hover="false"]:hover .text-menu a {
+    color: #3b82f6;
+    cursor: pointer;
+
+    &.table-link-link {
+      text-decoration: underline;
+    }
+  }
+
+  &[data-disable-hover="true"] {
+    opacity: 0.5;
+    cursor: default;
+  }
+}
+
+.sub-box-menu {
+  border: #3b82f6 1px solid;
+  border-radius: 15px;
+  min-height: 50px;
+
+  &:hover {
+    cursor: pointer;
+    background: rgba(59, 130, 246, 0.2);
+  }
+
+  &[data-disable-hover="true"] {
+    --tw-bg-opacity: 1;
+    background-color: rgb(226 232 240 / var(--tw-bg-opacity));
+
+    &:hover {
+      background-color: rgb(226 232 240 / var(--tw-bg-opacity));
+      cursor: default;
+    }
+  }
+}
+
+
+.text-no {
+  font-weight: 600;
+  font-size: 1.5rem;
+}
\ No newline at end of file

src/app/components/employee-self-service/employee-self-service.component.ts

@@ -5,6 +5,7 @@ interface SubModule {
   route?: string;
   file?: string;
 }
+
 @Component({
   selector: 'app-employee-self-service',
   templateUrl: './employee-self-service.component.html',
@@ -23,9 +24,47 @@ export class EmployeeSelfServiceComponent {
     { title: this.sanitizer.bypassSecurityTrustHtml('Profile<p>ข้อมูลพนักงาน'), route: '/ess/profile' },
     { title: this.sanitizer.bypassSecurityTrustHtml('Skill Map<p>ทักษะที่จำเป็นสำหรับแต่ละตำแหน่งงาน'), file: '5._skill_map.pdf' },
     { title: this.sanitizer.bypassSecurityTrustHtml('CDR : Competency Dictionary Roadmap<p>หลักสูตรฝึกอบรมตามระบบสมรรถนะ'), file: '6._CDR.pdf' },
-    { title: this.sanitizer.bypassSecurityTrustHtml('IDP : Individual Development Plan<p>แผนพัฒนารายบุคคล'), route: '/ess/self-evaluation/IDP' },
+    { title: this.sanitizer.bypassSecurityTrustHtml('IDP : Individual Development Plan<p>แผนพัฒนารายบุคคล'), route: '/ess/self-evaluation/idp' },
     { title: this.sanitizer.bypassSecurityTrustHtml('Competency Base Pay<p>ค่าความสามารถพิเศษ') }
   ];
+  generalPages = [
+    { text: "JD", link: "/ess/job-description-emp" },
+    { text: "Profile พนักงาน", link: "/ess/profile" },
+    { text: "Job Family", description: "หน้าใหม่ Job Family" },
+    { text: "Time Attendance", description: "หน้าใหม่ แสดงข้อมูล TA" },
+    { text: "วินัย และการลงโทษ", description: "หน้าใหม่ คล้าย เมนูความดีความผิดของ myHR plus" },
+    { text: "ผลงานดีเด่น", description: "หน้าใหม่" },
+    { text: "Feedback", link: "/ess/self-evaluation/kpi-sum10" },
+    { text: "ดูข้อมูลย้อนหลัง", description: "หน้าใหม่ แสดงListรอบประเมินตั้งแต่รอบล่าสุดถึงย้อนหลัง3ปี" },
+    { text: "Calibrate คะแนน", description: "หน้ารายงานที่มีการ Calibrate และแสดงค่า K" },
+    { text: "ข้อสอบ", link: "/ess/self-evaluation/com" },
+    { text: "Download เอกสาร", description: "เป็น pop up แสดงข้อมูลไฟล์ให้ดาวน์โหลด เหมือนของ myHR plus" }
+  ];
+
+  performancePages = [
+    [{ text: "ประเมิน", link: "/ess/self-evaluation" },
+    { text: "ปัจจัยการประเมิน", link: "/admin/evaluation-factors" },
+    { text: "การจัดการการประเมิน", link: "/admin/assessment-management" }],
+    [{ text: "รายงาน", description: "ไปที่รายงาน" },
+    { text: "แบบฟอร์มการประเมิน", description: "รอทำหน้าใหม่" },
+    { text: "ช่วงเวลาการประเมิน", link: "/admin/evaluation-cycle-performance" }],
+    [{ text: "PIP (Performance Improvement Plan)", description: "ยังไม่มี รอ Phase 2" }]
+  ];
+
+  competencyPages = [
+    [{ text: "ประเมิน", link: "/ess/self-evaluation" },
+    { text: "การจัดการการประเมิน", link: "/admin/competency-management" },
+    { text: "รายงาน", description: "ไปที่รายงาน" }],
+    [{ text: "แบบฟอร์มการประเมิน", description: "รอทำหน้าใหม่" },
+    { text: "ช่วงเวลาการประเมิน", link: "/admin/evaluation-cycle-manager" },
+    { text: "การวิเคราะห์ GAP", description: "รอคอนเฟิร์ม คาดว่าเป็นรายงาน" }],
+    [{ text: "Skill Map", description: "รายงาน Skill Map" },
+    { text: "Competency Mapping", description: "หน้าใหม่ ดูที่ใบงาน #50563" },
+    { text: "CDR", description: "หน้าใหม่ แสดง List หลักสูตร" }],
+    [{ text: "IDP", link: "/ess/self-evaluation/idp" },
+    { text: "Competency Base Pay", description: "รายงาน Competency Base Pay" }]
+  ];
+
   constructor(private sanitizer: DomSanitizer) {
 
   }

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

@@ -564,12 +564,13 @@
                   <ng-container *ngFor="let item of menuList">
                     <button type="button" class="flex-1 flex flex-row border bg-white p-2 justify-center"
                       style="border-radius:20px"
-                      (click)="currentTap=item;(currentTap=='ประเมินผลการปฏิบัติงาน'||currentTap=='สรุปคะแนนและข้อเสนอแนะ'?currentPart='':null)"
-                      [ngClass]="{'!bg-primary text-white':currentTap==item}">
+                      (click)="currentTap=item.text;(currentTap=='ประเมินผลการปฏิบัติงาน'||currentTap=='สรุปคะแนนและข้อเสนอแนะ'?currentPart='':null);"
+                      [ngClass]="{'!bg-primary text-white':currentTap==item.text}"
+                      [routerLink]="evaluationForm=='sup'?null:'../'+item.link">
                       <span class="overflow-hidden text-ellipsis whitespace-nowrap align-center">
-                        {{item}}
+                        {{item.text}}
                       </span>
-                      <ng-container *ngIf="item=='แบบประเมินสมรรถนะ'">
+                      <ng-container *ngIf="item.text=='แบบประเมินสมรรถนะ'">
                         &nbsp;
                         <span class="flex align-center justify-content-center rounded-circle text-white"
                           [class.bg-danger]="compentencyFormRemain" [class.bg-success]="!compentencyFormRemain">
@@ -579,7 +580,7 @@
                           <i *ngIf="!compentencyFormRemain" class="ti ti-check"></i>
                         </span>
                       </ng-container>
-                      <ng-container *ngIf="item=='ประเมินผลการปฏิบัติงาน'">
+                      <ng-container *ngIf="item.text=='ประเมินผลการปฏิบัติงาน'">
                         &nbsp;
                         <span class="flex align-items-center justify-content-center rounded-circle text-white"
                           [class.bg-danger]="kpiFormRemain" [class.bg-success]="!kpiFormRemain">

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

@@ -77,7 +77,12 @@ export class PmsFormEmployeeComponent {
   complete = false
   @ViewChild('scrollContainer') scrollContainer!: ElementRef;
 
-  menuList: string[] = ['ข้อมูลการประเมิน', 'แบบประเมินสมรรถนะ', 'ประเมินผลการปฏิบัติงาน', 'สรุปคะแนนและข้อเสนอแนะ', 'แผนพัฒนาบุคลากร']
+  menuList: { text: string, link: string }[] = [
+    { text: 'ข้อมูลการประเมิน', link: 'info' },
+    { text: 'แบบประเมินสมรรถนะ', link: 'com' },
+    { text: 'ประเมินผลการปฏิบัติงาน', link: 'kpi' },
+    { text: 'สรุปคะแนนและข้อเสนอแนะ', link: 'kpi-sum' },
+    { text: 'แผนพัฒนาบุคลากร', link: 'idp' }]
 
   constructor(
     private router: Router,
@@ -91,7 +96,7 @@ export class PmsFormEmployeeComponent {
   }
 
   findMenu(text: string) {
-    return this.menuList.find(e => e == text)
+    return this.menuList.find(e => e.text == text)
   }
 
   currentStepText = () => {
@@ -291,7 +296,16 @@ export class PmsFormEmployeeComponent {
 
   ngOnInit() {
     this.route.paramMap.subscribe((params: ParamMap) => {
-      if (params.get('part') == 'IDP') {
+      const pathLink = params.get('part')
+      if (pathLink == 'info') {
+        this.firstCurrentTap = 'ข้อมูลการประเมิน'
+      } else if (pathLink == 'com') {
+        this.firstCurrentTap = 'แบบประเมินสมรรถนะ'
+      } else if (pathLink?.includes('kpi-sum')) {
+        this.firstCurrentTap = 'สรุปคะแนนและข้อเสนอแนะ'
+      } else if (pathLink?.includes('kpi')) {
+        this.firstCurrentTap = 'ประเมินผลการปฏิบัติงาน'
+      } else if (pathLink == 'idp') {
         this.firstCurrentTap = 'แผนพัฒนาบุคลากร'
       }
     });

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

@@ -5,7 +5,8 @@ import { EmployeeService } from 'src/app/shared/services/employee.service';
 import { PmsGroupGradeService } from 'src/app/shared/services/pms-group-grade.service';
 import { SettingAssessmentService } from 'src/app/shared/services/setting-assessment.service';
 import { Part5Detail, Pms, PmsTopic } from 'src/app/shared/model/competency.model';
-
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { Location } from '@angular/common';
 export interface Part8Model {
   id: number
   evaluationFactor: string,
@@ -116,11 +117,13 @@ export class PmsKpiComponent {
   @ViewChild('scrollContainer') scrollContainer!: ElementRef;
   @Output() scrollToMenuId: EventEmitter<any> = new EventEmitter<any>();
   tableHover: Map<string, boolean> = new Map<string, boolean>()
-  constructor(private appraisalService: AppraisalService,
+  constructor(private location: Location,
+    private appraisalService: AppraisalService,
     private pmsGroupGradeService: PmsGroupGradeService,
     private employeeService: EmployeeService,
     private cdr: ChangeDetectorRef,
-    private settingAssessmentService: SettingAssessmentService
+    private settingAssessmentService: SettingAssessmentService,
+    private route: ActivatedRoute
   ) {
   }
 
@@ -183,9 +186,20 @@ export class PmsKpiComponent {
       this.sendScorePart()
     }
     if (changes['currentPart']?.currentValue) {
-      this.currentPart = ''
+      this.route.paramMap.subscribe((params: ParamMap) => {
+        const pathLink = params.get('part')
+        if (pathLink?.includes('kpi-sum')) {
+          const path = Number(pathLink.split('kpi-sum')[1])
+          if (path) {
+            this.currentPart = 'PART ' + path
+            this.partOpen.set('PART ' + path, true)
+            this.scrollToMenu('menu-part-' + path)
+          }
+        }
+      });
     }
   }
+
   getAppraisalPmsForm() {
     this.data8List.forEach((x, i) => {
       if (x.id == 1 && this.appraisalPms?.part1Percentage) {