ประเมินผล

.gitignore

 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # Compiled output
-/dist
+# /dist
 *.zip
 /tmp
 /out-tsc
@@ -42,3 +42,4 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+dist/

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

@@ -8,16 +8,13 @@
         [attr.aria-controls]="'hs-tab-js-vertical-'+i">
         <div class="w-full flex items-center " style="justify-content :space-between;">
           {{appraisalCompentency.comType}}
-          <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-              fill="currentColor" [class.fill-mute]="!onFormCompleted(i)" [class.fill-success]="onFormCompleted(i)">
-            </path>
-            <path
-              d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-              fill="currentColor"></path>
-          </svg>
+          <span class="d-flex align-items-center justify-content-center rounded-circle text-white"
+            [class.bg-danger]="formRemain(i)" [class.bg-success]="!formRemain(i)">
+            <ng-container *ngIf="formRemain(i)">
+              {{formRemain(i)}}
+            </ng-container>
+            <i *ngIf="!formRemain(i)" class="ti ti-check"></i>
+          </span>
         </div>
       </button>
     </nav>
@@ -62,23 +59,20 @@
           <div class="pb-2rem px-2rem">
             <div *ngIf="appraisalCompentencyFilter().length">
               <div class="hs-accordion-group w-full" data-hs-accordion-always-open>
-                <ng-container *ngFor="let item2 of appraisalCompentencyFilter();let i = index">
+                <ng-container *ngFor="let item2 of appraisalCompentencyFilter();let i = index;let f= first">
                   <div
-                    class="hs-accordion active overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
+                    class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
                     [id]="'hs-primary-heading-'+i">
                     <button (click)="scrollToTable($event)"
                       class="hs-accordion-toggle hs-accordion-active:text-white hs-accordion-active:bg-secondary group py-4 px-5 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-white dark:text-gray-200 dark:hover:text-white/80"
                       [attr.aria-controls]="'hs-primary-collapse-'+i" type="button">
-                      <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16"
-                        fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path
-                          d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-                          fill="currentColor" [class.fill-mute]="!onInFormCompleted(item2)"
-                          [class.fill-success]="onInFormCompleted(item2)"></path>
-                        <path
-                          d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-                          fill="currentColor"></path>
-                      </svg>
+                      <span class="d-flex align-items-center justify-content-center rounded-circle text-white"
+                        [class.bg-danger]="inFormRemain(item2)" [class.bg-success]="!inFormRemain(item2)">
+                        <ng-container *ngIf="inFormRemain(item2)">
+                          {{inFormRemain(item2)}}
+                        </ng-container>
+                        <i *ngIf="!inFormRemain(item2)" class="ti ti-check"></i>
+                      </span>
                       <span>
                         {{item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}
                         :
@@ -98,7 +92,7 @@
                       </svg>
                     </button>
                     <div [id]="'hs-primary-collapse-'+i"
-                      class="hs-accordion-content !w-full overflow-hidden transition-[height] duration-300"
+                      class="hs-accordion-content hidden !w-full overflow-hidden transition-[height] duration-300"
                       [attr.aria-labelledby]="'hs-primary-heading-'+i">
                       <div class="box-body">
                         <div class="space-y-4">
@@ -126,7 +120,6 @@
                                           </div>
                                         </div>
                                       </div>
-
                                     </div>
                                   </div>
                                 </div>
@@ -249,7 +242,7 @@
               </table>
             </div>
           </div>
-          <div class="py-1rem px-2rem">
+          <!-- <div class="py-1rem px-2rem">
             <div class="py-2 grid grid-cols-7 gap-3">
               <div class="col-span-1">ผู้รับการประเมิน</div>
               <div class="col-span-1">
@@ -404,7 +397,7 @@
                 อนุมัติ
               </ng-container>
             </button>
-          </div>
+          </div> -->
         </ng-container>
       </div>
     </div>

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

@@ -19,12 +19,13 @@ export class PmsCompetencyComponent {
   @Input() appraisalCompentencyList: Competency[] = []
   appraisalCompentencyIndex = 0
   @Output() sendReturnPath: EventEmitter<any> = new EventEmitter<any>();
-  @Output() allFormCompleted: EventEmitter<any> = new EventEmitter<any>();
-  canEdit = false
-  canSave = false
+  @Output() compentencyFormRemain: EventEmitter<any> = new EventEmitter<any>();
+  @Output() compentencyForm: EventEmitter<any> = new EventEmitter<any>();
+  @Input() canEdit = false
+  @Input() currentStep = ""
+  @Input() dateIso = ""
   hoveredCode: string | null = null;
   hoveredCode2: string | null = null;
-  currentDate = new Date()
 
   setting: { loading: boolean, data: SettingAssessmentModel } = { loading: false, data: new MySettingAssessmentModel() }
 
@@ -85,49 +86,33 @@ export class PmsCompetencyComponent {
       this.appraisalCompentencyIndex = index
       this.currentTap = this.appraisalCompentencyList[this.appraisalCompentencyIndex].comType
       this.cdr.detectChanges()
-      if (this.appraisalCompentencyList[this.appraisalCompentencyIndex]?.masfromEvaluationAssessment1lList[0]) {
-        this.canSave = (this.appraisalCompentencyList[this.appraisalCompentencyIndex].currentStep == this.appraisalCompentencyList[this.appraisalCompentencyIndex].checkStep) && this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromStatusType.code != 'Boss_finish' && this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromStatusType.code != 'Not_evaluating_yet'
-        this.canEdit = (this.appraisalCompentencyList[this.appraisalCompentencyIndex].currentStep == this.appraisalCompentencyList[this.appraisalCompentencyIndex].checkStep && (+(this.appraisalCompentencyList[this.appraisalCompentencyIndex].checkStep) <= 1)) && this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromStatusType.code != 'Boss_finish' && this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromStatusType.code != 'Not_evaluating_yet'
-        switch (this.appraisalCompentencyList[this.appraisalCompentencyIndex]?.currentStep) {
+      switch (this.currentStep) {
         case ("0"): {
-            if (this.canSave) {
-              this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].apsassessyDate = this.currentDate.toISOString().split('T')[0];
-            }
+          this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].apsassessyDate = this.dateIso
           break
         }
         case ("1"): {
-            if (this.canSave) {
-              this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].apsapprove1Date = this.currentDate.toISOString().split('T')[0];
-            }
+          this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].apsapprove1Date = this.dateIso
           break
         }
         case ("2"): {
-            if (this.canSave) {
-              this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].apsapprove2Date = this.currentDate.toISOString().split('T')[0];
-            }
+          this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].apsapprove2Date = this.dateIso
           break
         }
         case ("3"): {
-            if (this.canSave) {
-              this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].apsapprove3Date = this.currentDate.toISOString().split('T')[0];
-            }
+          this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].apsapprove3Date = this.dateIso
           break
         }
         case ("4"): {
-            if (this.canSave) {
-              this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].apsapprove4Date = this.currentDate.toISOString().split('T')[0];
-            }
+          this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].apsapprove4Date = this.dateIso
           break
         }
         case ("5"): {
-            if (this.canSave) {
-              this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].apsapprove5Date = this.currentDate.toISOString().split('T')[0];
-            }
+          this.appraisalCompentencyList[this.appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].apsapprove5Date = this.dateIso
           break
         }
         default: { return }
       }
-      }
       this.calnumberCheck()
       this.cdr.detectChanges()
     }
@@ -423,23 +408,25 @@ export class PmsCompetencyComponent {
     // })
   }
 
-  onInFormCompleted(data: MasfromEvaluationAssessment2List) {
-    return data.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList.every(x => x.competencyBehavioral.scoreTopicExpectation != 0)
-  }
-  onFormCompleted(index: number) {
-    const formCompleted = this.appraisalCompentencyList[index]?.masfromEvaluationAssessment1lList[0].masfromEvaluationAssessment2List.every(data =>
-      data.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList.every(x => x.competencyBehavioral.scoreTopicExpectation != 0)
-    )
-    this.onAllFormCompleted()
-    return formCompleted
-  }
-  onAllFormCompleted() {
-    const formCompleted = this.appraisalCompentencyList.every(data => {
-      data.masfromEvaluationAssessment1lList[0].masfromEvaluationAssessment2List.every(data =>
-        data.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList.every(x => x.competencyBehavioral.scoreTopicExpectation != 0)
-      )
-    })
-    this.allFormCompleted.emit(formCompleted)
+  inFormRemain(data: MasfromEvaluationAssessment2List) {
+    const remain = data.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList.filter(x => x.competencyBehavioral.scoreTopicExpectation == 0).length
+    return remain
+  }
+  formRemain(index: number) {
+    const remain = this.appraisalCompentencyList[index]?.masfromEvaluationAssessment1lList[0].masfromEvaluationAssessment2List.map(data =>
+      this.inFormRemain(data)
+    ).filter(data => data != 0).length
+    this.allFormRemain()
+    return remain
+  }
+  allFormRemain() {
+    const remain = this.appraisalCompentencyList.map((_, i) =>
+      this.appraisalCompentencyList[i]?.masfromEvaluationAssessment1lList[0].masfromEvaluationAssessment2List.map(data =>
+        this.inFormRemain(data)
+      ).filter(data => data != 0).length
+    ).filter(data => data != 0).length
+    this.compentencyForm.emit(this.appraisalCompentencyList)
+    this.compentencyFormRemain.emit(remain)
   }
 
   scrollToTable(event: MouseEvent) {

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

@@ -80,12 +80,8 @@
               </div>
             </div>
           </div>
-
         </div>
-
-        <!-- Start::main-content -->
         <div class="main-content -mt-28">
-          <!-- Start::row-1 -->
           <div class="grid grid-cols-12 gap-x-6">
             <div class="col-span-12 xxl:col-span-3">
               <div class="box">
@@ -152,72 +148,20 @@
                   </div>
                 </div>
                 <div class="box-body space-y-4 text-center">
-                  <div class="flex flex-row">
+                  <ng-container
+                    *ngFor="let apsEmp of ['apsassessy','apsapprove1','apsapprove2','apsapprove3','apsapprove4','apsapprove5']; let i=index ; let f=first">
+                    <div class="flex flex-row" *ngIf="returnField(item,apsEmp+'.thFullName')">
                       <div class="mx-auto relative">
-                      <div class="h-full w-6 flex items-center justify-center pb-4">
+                        <div class="h-full flex items-center justify-center pb-4" style="width: 32px;">
                           <div class="h-full w-[3px] bg-gray-100 pointer-events-none"></div>
                         </div>
                         <div class="absolute  rounded-full text-center  align-center"
                           style="justify-items:center;top:-5px">
-                        <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16"
-                          fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <path
-                            d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-                            fill="currentColor" class="fill-success"></path>
-                          <!-- fill-mute -->
-                          <!-- fill-warning -->
-                          <!-- fill-success -->
-                          <!-- fill-danger -->
-                          <path
-                            d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-                            fill="currentColor"></path>
-                        </svg>
-                      </div>
-                      <!-- <div
-                        class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]">
-                        <img src="./assets/img/users/21.jpg" class="rounded-full" alt="timeline-img" />
-                      </div> -->
-                    </div>
-                    <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">
-                              ผู้รับการประเมิน
-                            </span>
-                            <br>
-                            <span class="text-dark dark:text-white">
-                              วีรพงศ์test_UAT สกุลทดสอบ1
+                          <span class="d-flex align-items-center justify-content-center rounded-circle text-white"
+                            [class]="assessmentStatusClass(item.currentStep,i,returnField(item,apsEmp+'.status'))">
+                            <i
+                              [class]="assessmentStatusIcon(item.currentStep,i,returnField(item,apsEmp+'.status'))"></i>
                           </span>
-                            <br>
-                            <p class="text-xs text-gray-500 dark:text-white/70">
-                              ประเมินแล้ว
-                            </p>
-                          </h3>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="flex flex-row">
-                    <div class="mx-auto relative">
-                      <div class="h-full w-6 flex items-center justify-center pb-4">
-                        <div class="h-full w-[3px] bg-gray-100 pointer-events-none"></div>
-                      </div>
-                      <div class="absolute  rounded-full text-center  align-center"
-                        style="justify-items:center;top:-5px">
-                        <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16"
-                          fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <path
-                            d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-                            fill="currentColor" class="fill-mute"></path>
-                          <!-- fill-mute -->
-                          <!-- fill-warning -->
-                          <!-- fill-success -->
-                          <!-- fill-danger -->
-                          <path
-                            d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-                            fill="currentColor"></path>
-                        </svg>
                         </div>
                       </div>
                       <div class="flex w-full pb-4">
@@ -225,83 +169,74 @@
                           <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">
-                              ผู้ประเมิน1
+                                <ng-container *ngIf="f">
+                                  ผู้รับการประเมิน
+                                </ng-container>
+                                <ng-container *ngIf="!f&&returnField(item,'apsassessy'+(i+1)+'.thFullName')">
+                                  ผู้ประเมิน{{i}}
+                                </ng-container>
+                                <ng-container *ngIf="!f&&!returnField(item,'apsassessy'+(i+1)+'.thFullName')">
+                                  ผู้อนุมัติ
+                                </ng-container>
                               </span>
                               <br>
                               <span class="text-dark dark:text-white">
-                              วีรพงศ์test_UAT สกุลทดสอบ1
+                                {{returnField(item,apsEmp+'.thFullName')}}
                               </span>
                               <br>
                               <p class="text-xs text-gray-500 dark:text-white/70">
-                              ยังไม่ถึงขั้นตอนดำเนินการ
+                                {{assessmentStatusText(item.currentStep,i,returnField(item,apsEmp+'.status'))}}
                               </p>
                             </h3>
                           </div>
                         </div>
                       </div>
                     </div>
+                  </ng-container>
                 </div>
               </div>
-              <div class="box">
+              <div class="box" *ngIf="commentAllFilter().length">
                 <div class="box-header">
                   <div class="flex justify-between">
                     <h5 class="box-title">Timeline</h5>
                   </div>
                 </div>
                 <div class="box-body space-y-4 text-center">
-                  <div class="flex flex-row" *ngFor="let item of [
-                  ' ไม่รู้จะพูดยังไงดี นอกจากคำว่าประทับใจมาก ๆ ทุกอย่างลงตัว ทั้งอารมณ์ ความรู้สึก และบรรยากาศขอบคุณที่สร้างสรรค์อะไรดี ๆแบบนี้ออกมาให้ได้เห็น',
-                   'ตอนแรกก็ไม่ได้คาดหวังอะไรขนาดนั้น แต่พอได้สัมผัสจริง ๆ มันเกินคาดมาก มีความสุขแบบที่ไม่ได้รู้สึกมานานแล้ว อยากบอกว่าทำต่อไปนะ เราเชื่อว่ามีอีกหลายคนที่รู้สึกเหมือนกัน',
-                    'นั่งอ่านวนอยู่หลายรอบเลยอะ ทุกคำ ทุกภาพ มันสะกิดใจแบบอธิบายไม่ถูก อยากให้คนที่ยังลังเลได้ลองเปิดใจดูจริง ๆ', 
-                    'เอาจริง ๆ ไม่ค่อยเจออะไรที่ทำให้ยิ้มได้แบบนี้บ่อย ๆ นะ มันเป็นความรู้สึกเล็ก ๆ ที่โคตรยิ่งใหญ่สำหรับเรา ขอบคุณที่ทำให้โลกใบนี้ดูน่ารักขึ้นอีกนิดนึง'
-                    ]; let i=index">
+                  <div class="flex flex-row" *ngFor="let item of commentAllFilter(); let i=index">
                     <div class="mx-auto relative">
-                      <div class="h-full w-6 flex items-center justify-center pb-4">
+                      <div class="h-full flex items-center justify-center pb-4" style="width: 32px;">
                         <div class="h-full w-[3px] bg-gray-100 pointer-events-none"></div>
                       </div>
                       <div class="absolute  rounded-full text-center  align-center"
                         style="justify-items:center;top:-5px">
-                        <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16"
-                          fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <path
-                            d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-                            fill="currentColor" class="fill-success"></path>
-                          <!-- fill-mute -->
-                          <!-- fill-warning -->
-                          <!-- fill-success -->
-                          <!-- fill-danger -->
-                          <path
-                            d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-                            fill="currentColor"></path>
-                        </svg>
-                      </div>
-                      <!-- <div
-                        class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]">
-                        <img src="./assets/img/users/21.jpg" class="rounded-full" alt="timeline-img" />
-                      </div> -->
+                        <span class="d-flex align-items-center justify-content-center rounded-circle text-white"
+                          [class]="statusCompetencyClass(item.statusType)">
+                          <i [class]="statusCompetencyIcon(item.statusType)"></i>
+                        </span>
+                      </div>
                     </div>
                     <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">
+                        <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;">
-                              วีรพงศ์test_UAT สกุลทดสอบ1
+                              {{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">
-                                พ. 05:06 pm
+                                {{convertDate(item.commentDate)}}
                               </p>
                             </div>
                           </h3>
                         </div>
-                        <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">
-                            {{item}}
+                            {{item.comment}}
                           </p>
                         </div>
                       </div>
@@ -325,56 +260,30 @@
                       class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
                       id="profile-item-2" data-hs-tab="#profile-2" aria-controls="profile-2" role="tab">
                       แบบประเมินสมรรถนะ
-                      <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16"
-                        fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path
-                          d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-                          fill="currentColor" [class.fill-mute]="!compentencyFormCompleted"
-                          [class.fill-success]="compentencyFormCompleted"></path>
-                        <!-- fill-mute -->
-                        <!-- fill-warning -->
-                        <!-- fill-success -->
-                        <!-- fill-danger -->
-                        <path
-                          d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-                          fill="currentColor"></path>
-                      </svg>
+                      <span class="d-flex align-items-center justify-content-center rounded-circle text-white"
+                        [class.bg-danger]="compentencyFormRemain" [class.bg-success]="!compentencyFormRemain">
+                        <ng-container *ngIf="compentencyFormRemain">
+                          {{compentencyFormRemain}}
+                        </ng-container>
+                        <i *ngIf="!compentencyFormRemain" class="ti ti-check"></i>
+                      </span>
                     </button>
                     <button type="button" [class.active]="currentTap=='pms'"
                       class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
                       id="profile-item-3" data-hs-tab="#profile-3" aria-controls="profile-3" role="tab">
                       แบบประเมินประสิทธิภาพ
-                      <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16"
-                        fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path
-                          d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-                          fill="currentColor" class="fill-mute"></path>
-                        <!-- fill-mute -->
-                        <!-- fill-warning -->
-                        <!-- fill-success -->
-                        <!-- fill-danger -->
-                        <path
-                          d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-                          fill="currentColor"></path>
-                      </svg>
+                      <span class="d-flex align-items-center justify-content-center rounded-circle text-white"
+                        [class.bg-danger]="kpiFormRemain" [class.bg-success]="!kpiFormRemain">
+                        <ng-container *ngIf="kpiFormRemain">
+                          {{kpiFormRemain}}
+                        </ng-container>
+                        <i *ngIf="!kpiFormRemain" class="ti ti-check"></i>
+                      </span>
                     </button>
                     <button *ngIf="evaluationForm=='sup'" type="button" [class.active]="currentTap=='idp'"
                       class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
                       id="profile-item-4" data-hs-tab="#profile-4" aria-controls="profile-4" role="tab">
                       แผนพัฒนาบุคคลากร
-                      <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16"
-                        fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path
-                          d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-                          fill="currentColor" class="fill-mute"></path>
-                        <!-- fill-mute -->
-                        <!-- fill-warning -->
-                        <!-- fill-success -->
-                        <!-- fill-danger -->
-                        <path
-                          d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-                          fill="currentColor"></path>
-                      </svg>
                     </button>
                     <button type="button" [class.active]="currentTap=='2'"
                       class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
@@ -392,22 +301,26 @@
                     <ng-container *ngIf="compentency.data&&evaluaterId&&evaluateeId">
                       <app-pms-competency [currentTap]="currentTap"
                         [appraisalCompentencyList]="compentency.data.competency" [evaluaterId]="evaluaterId"
-                        [evaluateeId]="evaluateeId"
-                        (allFormCompleted)="compentencyFormCompleted=$event"></app-pms-competency>
+                        [evaluateeId]="evaluateeId" [canEdit]="canEdit" [currentStep]="compentency.data.currentStep"
+                        [dateIso]="dateIso" (compentencyFormRemain)="compentencyFormRemain=$event"
+                        (compentencyForm)="compentency.data.competency=$event"></app-pms-competency>
                     </ng-container>
                   </div>
                   <div id="profile-3" [class.hidden]="currentTap!='pms'" class="text-center" role="tabpanel"
                     aria-labelledby="profile-item-3">
                     <ng-container *ngIf="compentency.data&&evaluateeId&&evaluaterId">
                       <app-pms-kpi [appraisalPms]="compentency.data.pms" [evaluaterId]="evaluaterId"
-                        [evaluateeId]="evaluateeId"></app-pms-kpi>
+                        [evaluateeId]="evaluateeId" [canEdit]="canEdit" [currentStep]="compentency.data.currentStep"
+                        [dateIso]="dateIso" (kpiFormRemain)="kpiFormRemain=$event"
+                        (kpiForm)="compentency.data.pms=$event"></app-pms-kpi>
                     </ng-container>
                   </div>
                   <div id="profile-4" [class.hidden]="currentTap!='idp'" class="text-center" role="tabpanel"
                     aria-labelledby="profile-item-4">
                     <ng-container *ngIf="compentency.data&&evaluateeId&&evaluaterId">
                       <app-pms-idp [appraisalIdp]="compentency.data.idp" [evaluaterId]="evaluaterId"
-                        [evaluateeId]="evaluateeId"></app-pms-idp>
+                        [evaluateeId]="evaluateeId" [canEdit]="canEdit" [currentStep]="compentency.data.currentStep"
+                        [dateIso]="dateIso" (idpForm)="compentency.data.idp=$event"></app-pms-idp>
                     </ng-container>
                   </div>
                   <div id="profile-5" [class.hidden]="currentTap!='2'" class="text-center" role="tabpanel"
@@ -415,31 +328,38 @@
                     <app-pms-summary></app-pms-summary>
                   </div>
                 </div>
-                <div class="box-footer text-end space-x-3 rtl:space-x-reverse">
+                <div *ngIf="compentency.data&&canSave" class="box-footer text-end space-x-3 rtl:space-x-reverse">
                   <div class="p-4 space-y-3 border-t border-gray-200 dark:border-white/10">
-                    <!-- <h5 class="text-base font-semibold"> Add New Question</h5> -->
-                    <!-- <img src="./assets/img/png-images/8.png" alt=""> -->
-                    <textarea class="ti-form-input" rows="4" placeholder="Drop Your Question Here...."></textarea>
-                  </div>
-                  <a href="javascript:void(0);" class="ti-btn m-0 ti-btn-soft-primary"><i
-                      class="ri ri-refresh-line"></i>
-                    ยินยัน</a>
-                  <a href="javascript:void(0);" class="ti-btn m-0 ti-btn-soft-success"><i
-                      class="ri ri-refresh-line"></i>
-                    บันทึกร่าง</a>
-                  <a href="javascript:void(0);" class="ti-btn m-0 ti-btn-soft-secondary"><i
-                      class="ri ri-close-circle-line"></i>
-                    ย้อนกลับ</a>
+                    <textarea type="text" class="ti-form-input" rows="4" 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>
             </div>
-
           </div>
-          <!-- End::row-1 -->
         </div>
-        <!-- Start::main-content -->
       </div>
     </div>
   </div>
-
 </ng-template>
\ No newline at end of file

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

-import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
 import { Router } from '@angular/router';
-import { TypeList } from 'src/app/shared/model/appraisal-subordinate.model';
+import { th } from 'date-fns/locale';
 import { CompetencyModel } from 'src/app/shared/model/competency.model';
 import { EmployeeModel, MyEmployeeModel } from 'src/app/shared/model/employee.model';
 import { AppraisalService } from 'src/app/shared/services/appraisal.service';
 import { EmployeeService } from 'src/app/shared/services/employee.service';
+import Swal from 'sweetalert2';
 
 @Component({
   selector: 'app-pms-form-employee',
@@ -40,8 +41,158 @@ export class PmsFormEmployeeComponent {
 
 
   compentency: { loading: boolean, data?: CompetencyModel, dataList: CompetencyModel[] } = { loading: false, data: undefined, dataList: [] }
-  compentencyFormCompleted = false
+  canSave = false
+  canEdit = false
+  canDraft = false
+  dateIso = ""
+  compentencyFormRemain: number = 0
+  kpiFormRemain: number = 0
   currentDate = new Date()
+  comment = ""
+
+  statusCompetencyText = (status: string) => {
+    if (status === "no access") {
+      return "ยังไม่ถึงขั้นตอนดำเนินการ"
+    } else if (status === "pending") {
+      return "รอดำเนินการ"
+    } else if (status === "evaluating") {
+      return "อยู่ระหว่างดำเนินการ"
+    } else if (status === "completed") {
+      return "ดำเนินการเสร็จสิ้น"
+    } else if (status === "rejected") {
+      return "ส่งกลับ"
+    } else {
+      return ""
+    }
+  }
+
+  statusCompetencyClass = (status: string) => {
+    if (status === "no access") {
+      return "bg-mute"
+    } else if (status === "pending") {
+      return "bg-secondary"
+    } else if (status === "evaluating") {
+      return "bg-warning"
+    } else if (status === "completed") {
+      return "bg-success"
+    } else if (status === "rejected") {
+      return "bg-danger"
+    } else {
+      return ""
+    }
+  }
+  statusCompetencyIcon = (status: string) => {
+    if (status === "no access") {
+      return "ti ti-dots"
+    } else if (status === "pending") {
+      return "ti ti-clock"
+    } else if (status === "evaluating") {
+      return "ri-draft-fill"
+    } else if (status === "completed") {
+      return "ti ti-check"
+    } else if (status === "rejected") {
+      return "ri-reply-fill"
+    } else {
+      return ""
+    }
+  }
+  assessmentStatusText = (currentStep: string, step: number, status: string) => {
+    if (+currentStep < step) {
+      if (status != '3') {
+        return this.statusCompetencyText("no access")
+      } else {
+        return this.statusCompetencyText("rejected")
+      }
+    } else if (+currentStep >= step) {
+      if (status == '0') {
+        return this.statusCompetencyText("pending")
+      } else if (status == '1') {
+        return this.statusCompetencyText("evaluating")
+      } else if (status == '2') {
+        return this.statusCompetencyText("completed")
+      } else {
+        return ""
+      }
+    } else {
+      return ""
+    }
+  }
+  assessmentStatusClass = (currentStep: string, step: number, status: string) => {
+    if (+currentStep < step) {
+      if (status != '3') {
+        return this.statusCompetencyClass("no access")
+      } else {
+        return this.statusCompetencyClass("rejected")
+      }
+    } else if (+currentStep >= step) {
+      if (status == '0') {
+        return this.statusCompetencyClass("pending")
+      } else if (status == '1') {
+        return this.statusCompetencyClass("evaluating")
+      } else if (status == '2') {
+        return this.statusCompetencyClass("completed")
+      } else {
+        return ""
+      }
+    } else {
+      return ""
+    }
+  }
+  assessmentStatusIcon = (currentStep: string, step: number, status: string) => {
+    if (+currentStep < step) {
+      if (status != '3') {
+        return this.statusCompetencyIcon("no access")
+      } else {
+        return this.statusCompetencyIcon("rejected")
+      }
+    } else if (+currentStep >= step) {
+      if (status == '0') {
+        return this.statusCompetencyIcon("pending")
+      } else if (status == '1') {
+        return this.statusCompetencyIcon("evaluating")
+      } else if (status == '2') {
+        return this.statusCompetencyIcon("completed")
+      } else {
+        return ""
+      }
+    } else {
+      return ""
+    }
+  }
+  convertDate = (dateInput?: string | Date): string => {
+    if (!dateInput) return '';
+    let date: Date;
+    if (typeof dateInput === 'string') {
+      // ถ้าเป็น ISO string ที่มี T เช่น "2025-04-30T00:00:00Z"
+      if (dateInput.includes('T')) {
+        date = new Date(dateInput);
+      } else {
+        // ถ้าเป็น 'YYYY-MM-DD' (ไม่มี T)
+        const [year, month, day] = dateInput.split('-').map(Number);
+        date = new Date(year, month - 1, day);
+      }
+    } else {
+      date = dateInput;
+    }
+    // ตรวจสอบว่า date ถูกต้อง (valid date)
+    if (isNaN(date.getTime())) return '';
+
+    return date.toLocaleDateString('th-TH', {
+      weekday: 'short',
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric'
+    });
+  };
+
+
+  hasPushedState = false;
+
+  handleBack = (event: PopStateEvent) => {
+    this.returnPath()
+    this.router.navigate(['/supervisor-evaluation']);
+  };
+
   constructor(
     private router: Router,
     private employeeService: EmployeeService,
@@ -49,10 +200,23 @@ export class PmsFormEmployeeComponent {
     private cdr: ChangeDetectorRef
   ) { }
 
+  ngOnDestroy() {
+    window.removeEventListener('popstate', this.handleBack);
+   
+  }
 
   ngOnInit() {
+    this.dateIso = this.currentDate.toISOString();
     this.getEvaluatee()
     this.getCompentencyAll()
+    // ดัน state ปลอมเข้าไปใน stack
+    if (this.evaluationForm == 'sup') {
+      if (!this.hasPushedState) {
+        history.pushState(null, '', location.href);
+        this.hasPushedState = true;
+      }
+      window.addEventListener('popstate', this.handleBack);
+    }
   }
 
   getCompentencyAll() {
@@ -75,6 +239,9 @@ export class PmsFormEmployeeComponent {
 
   selectDataList(data: CompetencyModel) {
     this.compentency.data = data
+    this.canSave = this.compentency.data.statusType == "pending" || this.compentency.data.statusType == "evaluating"
+    this.canDraft = +this.compentency.data.currentStep <= 1 && (this.compentency.data.statusType == "pending" || this.compentency.data.statusType == "evaluating")
+    this.canEdit = +this.compentency.data.currentStep <= 1 && (this.compentency.data.statusType == "pending" || this.compentency.data.statusType == "evaluating")
   }
 
   getEvaluatee() {
@@ -100,9 +267,8 @@ export class PmsFormEmployeeComponent {
   onSelectFile1(event: any) {
     if (event.target && event.target.files && event.target.files[0]) {
       const reader = new FileReader();
-      reader.readAsDataURL(event.target.files[0]); // read file as data URL
+      reader.readAsDataURL(event.target.files[0]);
       reader.onload = (event: any) => {
-        // called once readAsDataURL is completed
         this.url1 = event.target.result;
       };
     }
@@ -111,9 +277,8 @@ export class PmsFormEmployeeComponent {
   onSelectFile2(event: any) {
     if (event.target && event.target.files && event.target.files[0]) {
       const reader = new FileReader();
-      reader.readAsDataURL(event.target.files[0]); // read file as data URL
+      reader.readAsDataURL(event.target.files[0]);
       reader.onload = (event: any) => {
-        // called once readAsDataURL is completed
         this.url2 = event.target.result;
       };
     }
@@ -129,4 +294,162 @@ export class PmsFormEmployeeComponent {
   returnPath() {
     this.sendReturnPath.emit()
   }
+
+  commentAllFilter() {
+    return this.compentency.data?.commentAll.filter(x => x.statusType == 'reject' ? x.createdBy == this.evaluaterId : x) || []
+  }
+
+  returnField(data: any, field: string): any {
+    return field.split('.').reduce((obj, key) => obj?.[key], data);
+  }
+
+
+
+  save(status: 'approve' | 'noApprove' | 'draft') {
+    if (this.compentency.data) {
+      let title = ''
+      let text = ''
+      let confirmButtonText = ''
+      let approveStatus = '0'
+      if (status == 'draft') {
+        approveStatus = '1'
+        title = 'บันทึกแบบร่าง'
+        text = 'คุณต้องการบันทึกแบบร่างของการประเมินนี้ใช่หรือไม่'
+        confirmButtonText = 'ยืนยันการบันทึก'
+      } else if (status == 'approve') {
+        approveStatus = '2'
+        if (this.compentency.data.currentStep == '0') {
+          title = 'ยืนยันข้อมูล'
+          text = 'คุณต้องการยืนยันข้อมูลการประเมินนี้ใช่หรือไม่'
+          confirmButtonText = 'ยืนยันการบันทึก'
+        } else {
+          title == 'อนุมัติ'
+          text = 'คุณต้องการอนุมัติข้อมูลการประเมินนี้ใช่หรือไม่'
+          confirmButtonText = 'ยืนยันการอนุมัติ'
+        }
+      } else if (status == 'noApprove') {
+        approveStatus = '3'
+        title == 'ไม่อนุมัติ'
+        text = 'คุณต้องการไม่อนุมัติข้อมูลการประเมินนี้ใช่หรือไม่'
+        confirmButtonText = 'ยืนยันการไม่อนุมัติ'
+      }
+      Swal.fire({
+        iconHtml: `
+              <div class="flex items-center justify-center rounded-full !h-80px !w-80px" style="background-color: #E8F8EE;">
+                  <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <rect width="39" height="39" fill="#D2D2D2"/>
+                      <g id="Component">
+                          <g id="alert cart">
+                              <g id="mdi:file-export">
+                                  <circle cx="22.5" cy="19.5" r="33.5" fill="#E8F8EE"/>
+                                  <path d="M9.75 3.25C8.88805 3.25 8.0614 3.59241 7.4519 4.2019C6.84241 4.8114 6.5 5.63805 6.5 6.5V32.5C6.5 33.362 6.84241 34.1886 7.4519 34.7981C8.0614 35.4076 8.88805 35.75 9.75 35.75H29.25C30.112 35.75 30.9386 35.4076 31.5481 34.7981C32.1576 34.1886 32.5 33.362 32.5 32.5V13L22.75 3.25M21.125 5.6875L30.0625 14.625H21.125M14.5113 19.8575H26V31.3463L22.555 27.9013L17.9563 32.5L13.3575 27.9013L17.9563 23.3188" 
+                                  fill="#1DBE5A"/>
+                              </g>
+                          </g>
+                      </g>
+                  </svg>
+              </div>
+              `,
+        title: title,
+        text: text,
+        showCancelButton: true,
+        confirmButtonText: confirmButtonText,
+        cancelButtonText: 'ย้อนกลับ',
+        customClass: {
+          title: '!swal2-title-mt-20px',
+          actions: '!swal2-actions-mt-20px',
+          icon: '!swal2-icon-no-border',
+          confirmButton: '!swal2-button-bg-green',
+          cancelButton: '!swal2-button-bg-gray',
+        },
+      }).then((result) => {
+        if (result.isConfirmed) {
+          this.saveApi(approveStatus)
+        } else if (result.dismiss === Swal.DismissReason.cancel) {
+          Swal.fire({
+            title: 'ยกเลิก!',
+            text: 'การบันทึกถูกยกเลิก',
+            icon: 'error',
+            customClass: {
+              confirmButton: '!swal2-button-bg-danger',
+            }
+          })
+        }
+      })
+    }
+  }
+  saveApi(approveStatus: string) {
+    if (this.compentency.data) {
+      type StepKey = 'apsassessy' | 'apsapprove1' | 'apsapprove2' | 'apsapprove3' | 'apsapprove4' | 'apsapprove5';
+      const steps: StepKey[] = ['apsassessy', 'apsapprove1', 'apsapprove2', 'apsapprove3', 'apsapprove4', 'apsapprove5'];
+      const stepIndex = parseInt(this.compentency.data.currentStep, 10);
+      const updatedData = { ...this.compentency.data };
+      if (approveStatus === '3' && stepIndex >= 2) {
+        const prevKey: StepKey = steps[stepIndex - 1];
+        updatedData[prevKey] = {
+          ...updatedData[prevKey],
+          status: '0',
+        };
+      }
+      const currentKey: StepKey = steps[stepIndex];
+      updatedData[currentKey] = {
+        ...updatedData[currentKey],
+        status: approveStatus,
+      };
+      updatedData.commentAll = this.compentency.data.commentAll
+
+      let statusType = ""
+      if (approveStatus === "1") {
+        statusType = "evaluating"
+      } else if (approveStatus === "2") {
+        statusType = "completed"
+      } else if (approveStatus === "3") {
+        statusType = "rejected"
+      }
+      updatedData.commentAll.push({
+        commentDate: this.dateIso,
+        currentStep: this.compentency.data.currentStep,
+        statusType: statusType,
+        comment: this.comment,
+        createdBy: updatedData[currentKey].employeeId,
+        thFullName: updatedData[currentKey].thFullName,
+        engFullName: updatedData[currentKey].enFullName,
+      })
+      const body = updatedData;
+      this.appraisalService.postCompentencyAll(body).subscribe({
+        next: response => {
+          if (response.success) {
+            this.getCompentencyAll()
+            Swal.fire({
+              title: 'บันทึกสำเร็จ!',
+              text: 'การประเมินของคุณถูกบันทึกแล้ว',
+              icon: 'success',
+              customClass: {
+                confirmButton: '!swal2-button-bg-green',
+              }
+            });
+          } else {
+            Swal.fire({
+              title: 'ยกเลิก!',
+              text: 'การบันทึกถูกยกเลิก',
+              icon: 'error',
+              customClass: {
+                confirmButton: '!swal2-button-bg-danger',
+              }
+            });
+          }
+        }, error: error => {
+          Swal.fire({
+            title: 'ยกเลิก!',
+            text: 'การบันทึกถูกยกเลิก',
+            icon: 'error',
+            customClass: {
+              confirmButton: '!swal2-button-bg-danger',
+            }
+          });
+        }
+      })
+    }
+  }
+
 }

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

@@ -88,6 +88,42 @@
                 ส่วนที่ 2: แนวทางการพัฒนา
             </div>
         </div>
+        <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" (click)="resetFormIdp()"
+                                style="cursor: pointer;"
+                                [class.pointer-events-none]="appraisalIdp.masfromEvaluationIdp.idpStatus=='0'||!canEdit ||appraisalIdp.checkStep!='1'"
+                                name="idpStatus" (change)="appraisalIdp.masfromEvaluationIdp.idpStatus='0'"
+                                [checked]="appraisalIdp.masfromEvaluationIdp.idpStatus=='0'">
+                        </div>
+                        <div class="col-span-5">
+                            <label for="idpStatus-0" class="text-sm text-gray-500"
+                                [class.pointer-events-none]="appraisalIdp.masfromEvaluationIdp.idpStatus=='0'||!canEdit ||appraisalIdp.checkStep!='1'">
+                                IDP มาตรฐาน
+                            </label>
+                        </div>
+                    </div>
+                    <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" style="cursor: pointer;"
+                                [class.pointer-events-none]="appraisalIdp.masfromEvaluationIdp.idpStatus=='1'||!canEdit ||appraisalIdp.checkStep!='1'"
+                                name="idpStatus" (change)="appraisalIdp.masfromEvaluationIdp.idpStatus='1'"
+                                [checked]="appraisalIdp.masfromEvaluationIdp.idpStatus=='1'">
+                        </div>
+                        <div class="col-span-5">
+                            <label for="idpStatus-1" class="text-sm text-gray-500"
+                                [class.pointer-events-none]="appraisalIdp.masfromEvaluationIdp.idpStatus=='1'||!canEdit ||appraisalIdp.checkStep!='1'">
+                                IDP ปรับแก้ไข
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <div class="pb-2rem px-2rem">
             <div class="overflow-auto rounded-top-0.65rem">
                 <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover2">
@@ -276,176 +312,6 @@
                 </table>
             </div>
         </div>
-        <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" (click)="resetFormIdp()"
-                                [class.pointer-events-none]="appraisalIdp.masfromEvaluationIdp.idpStatus=='0'||!canEdit ||appraisalIdp.checkStep!='1'"
-                                name="idpStatus" (change)="appraisalIdp.masfromEvaluationIdp.idpStatus='0'"
-                                [checked]="appraisalIdp.masfromEvaluationIdp.idpStatus=='0'">
-                        </div>
-                        <div class="col-span-5">
-                            <label for="idpStatus-0" class="text-sm text-gray-500"
-                                [class.pointer-events-none]="appraisalIdp.masfromEvaluationIdp.idpStatus=='0'||!canEdit ||appraisalIdp.checkStep!='1'">
-                                IDP มาตรฐาน
-                            </label>
-                        </div>
-                    </div>
-                    <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]="appraisalIdp.masfromEvaluationIdp.idpStatus=='1'||!canEdit ||appraisalIdp.checkStep!='1'"
-                                name="idpStatus" (change)="appraisalIdp.masfromEvaluationIdp.idpStatus='1'"
-                                [checked]="appraisalIdp.masfromEvaluationIdp.idpStatus=='1'">
-                        </div>
-                        <div class="col-span-5">
-                            <label for="idpStatus-1" class="text-sm text-gray-500"
-                                [class.pointer-events-none]="appraisalIdp.masfromEvaluationIdp.idpStatus=='1'||!canEdit ||appraisalIdp.checkStep!='1'">
-                                IDP ปรับแก้ไข
-                            </label>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="py-1rem px-2rem">
-            <div class="py-2 grid grid-cols-7 gap-3">
-                <div class="col-span-1">
-                    {{appraisalIdp.apsapprove2.employeeId?'ผู้ประเมิน1':'ผู้อนุมัติ'}}
-                </div>
-                <div class="col-span-1">
-                    {{appraisalIdp.apsapprove1.thFullName}}</div>
-                <div class="col-span-1">
-                    <input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
-            checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
-                        [checked]="appraisalIdp.masfromEvaluationIdp.apsapprove1Status=='2'">
-                    <label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
-                </div>
-                <div class="col-span-2">
-                    <textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
-                        [class.!bg-input-readonly]="!appraisalIdp||appraisalIdp.currentStep!='1'||!canSave"
-                        [readonly]="!appraisalIdp||appraisalIdp.currentStep!='1'||!canSave"
-                        [(ngModel)]="appraisalIdp.masfromEvaluationIdp.apsapprove1Comment"></textarea>
-                    <span class="pt-2">
-                        วันที่ :
-                        {{convertDate(appraisalIdp.masfromEvaluationIdp.apsapprove1Date)}}
-                    </span>
-                </div>
-            </div>
-            <div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalIdp.apsapprove2.employeeId">
-                <div class="col-span-1">
-                    {{appraisalIdp.apsapprove3.employeeId?'ผู้ประเมิน2':'ผู้อนุมัติ'}}
-                </div>
-                <div class="col-span-1">
-                    {{appraisalIdp.apsapprove2.thFullName}}</div>
-                <div class="col-span-1">
-                    <input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
-            checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
-                        [checked]="appraisalIdp.masfromEvaluationIdp.apsapprove2Status=='2'">
-                    <label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
-                </div>
-                <div class="col-span-2">
-                    <textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
-                        [class.!bg-input-readonly]="!appraisalIdp||appraisalIdp.currentStep!='2'||!canSave"
-                        [readonly]="!appraisalIdp||appraisalIdp.currentStep!='2'||!canSave"
-                        [(ngModel)]="appraisalIdp.masfromEvaluationIdp.apsapprove2Comment"></textarea>
-                    <span class="pt-2">
-                        วันที่ :
-                        {{convertDate(appraisalIdp.masfromEvaluationIdp.apsapprove2Date)}}
-                    </span>
-                </div>
-            </div>
-            <div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalIdp.apsapprove3.employeeId">
-                <div class="col-span-1">
-                    {{appraisalIdp.apsapprove4.employeeId?'ผู้ประเมิน3':'ผู้อนุมัติ'}}
-                </div>
-                <div class="col-span-1">
-                    {{appraisalIdp.apsapprove3.thFullName}}</div>
-                <div class="col-span-1">
-                    <input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
-            checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
-                        [checked]="appraisalIdp.masfromEvaluationIdp.apsapprove3Status=='2'">
-                    <label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
-                </div>
-                <div class="col-span-2">
-                    <textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
-                        [class.!bg-input-readonly]="!appraisalIdp||appraisalIdp.currentStep!='3'||!canSave"
-                        [readonly]="!appraisalIdp||appraisalIdp.currentStep!='3'||!canSave"
-                        [(ngModel)]="appraisalIdp.masfromEvaluationIdp.apsapprove3Comment"></textarea>
-                    <span class="pt-2">
-                        วันที่ :
-                        {{convertDate(appraisalIdp.masfromEvaluationIdp.apsapprove3Date)}}
-                    </span>
-                </div>
-            </div>
-            <div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalIdp.apsapprove4.employeeId">
-                <div class="col-span-1">
-                    {{appraisalIdp.apsapprove5.employeeId?'ผู้ประเมิน4':'ผู้อนุมัติ'}}
-                </div>
-                <div class="col-span-1">
-                    {{appraisalIdp.apsapprove4.thFullName}}</div>
-                <div class="col-span-1">
-                    <input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
-            checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
-                        [checked]="appraisalIdp.masfromEvaluationIdp.apsapprove4Status=='2'">
-                    <label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
-                </div>
-                <div class="col-span-2">
-                    <textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
-                        [class.!bg-input-readonly]="!appraisalIdp||appraisalIdp.currentStep!='4'||!canSave"
-                        [readonly]="!appraisalIdp||appraisalIdp.currentStep!='4'||!canSave"
-                        [(ngModel)]="appraisalIdp.masfromEvaluationIdp.apsapprove4Comment"></textarea>
-                    <span class="pt-2">
-                        วันที่ :
-                        {{convertDate(appraisalIdp.masfromEvaluationIdp.apsapprove4Date)}}
-                    </span>
-                </div>
-            </div>
-            <div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalIdp.apsapprove5.employeeId">
-                <div class="col-span-1">
-                    ผู้อนุมัติ
-                </div>
-                <div class="col-span-1">
-                    {{appraisalIdp.apsapprove5.thFullName}}</div>
-                <div class="col-span-1">
-                    <input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
-            checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
-                        [checked]="appraisalIdp.masfromEvaluationIdp.apsapprove5Status=='2'">
-                    <label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
-                </div>
-                <div class="col-span-2">
-                    <textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
-                        [class.!bg-input-readonly]="!appraisalIdp||appraisalIdp.currentStep!='5'||!canSave"
-                        [readonly]="!appraisalIdp||appraisalIdp.currentStep!='5'||!canSave"
-                        [(ngModel)]="appraisalIdp.masfromEvaluationIdp.apsapprove5Comment"></textarea>
-                    <span class="pt-2">
-                        วันที่ :
-                        {{convertDate(appraisalIdp.masfromEvaluationIdp.apsapprove5Date)}}
-                    </span>
-                </div>
-            </div>
-        </div>
-
-        <div class="flex justify-center mb-1rem pb-2rem" *ngIf="canSave">
-            <button *ngIf="appraisalIdp.checkStep!='0'&&appraisalIdp.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('approve')">
-                <ng-container *ngIf="appraisalIdp.checkStep=='0'">
-                    ยืนยันข้อมูล
-                </ng-container>
-                <ng-container *ngIf="appraisalIdp.checkStep!='0'">
-                    อนุมัติ
-                </ng-container>
-            </button>
-        </div>
     </ng-container>
 </ng-template>
 

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

@@ -6,7 +6,6 @@ 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,
@@ -29,8 +28,10 @@ export class PmsIdpComponent {
   hoveredCode: string | null = null;
   @Input() appraisalIdp?: Idp
   originalformIdp?: IdpFormModel
-  canEdit = false
-  canSave = false
+  @Input() canEdit = false
+  @Input() dateIso = ""
+  @Input() currentStep = ""
+  @Output() idpForm: EventEmitter<any> = new EventEmitter<any>();
 
   competencycourse: { loading: boolean, data: CompetencycourseMiniModel[] } = { loading: false, data: [] }
   competencycourseTable: table = {
@@ -108,44 +109,29 @@ export class PmsIdpComponent {
   }
   getFormIdp() {
     if (this.appraisalIdp) {
-      this.canSave = (this.appraisalIdp.currentStep == this.appraisalIdp.checkStep) && (this.appraisalIdp.masfromStatusType.code != 'Boss_finish' && this.appraisalIdp.masfromStatusType.code != 'Not_evaluating_yet')
-      this.canEdit = (this.appraisalIdp.currentStep == this.appraisalIdp.checkStep && (+(this.appraisalIdp.checkStep) <= 1)) && (this.appraisalIdp.masfromStatusType.code != 'Boss_finish' && this.appraisalIdp.masfromStatusType.code != 'Not_evaluating_yet')
-    }
-    switch (this.appraisalIdp?.currentStep) {
+      switch (this.currentStep) {
         case ("0"): {
-        if (this.canEdit) {
-          this.appraisalIdp.masfromEvaluationIdp.apsassessyDate = this.currentDate.toISOString().split('T')[0];
-        }
+          this.appraisalIdp.masfromEvaluationIdp.apsassessyDate = this.dateIso
           break
         }
         case ("1"): {
-        if (this.canEdit) {
-          this.appraisalIdp.masfromEvaluationIdp.apsapprove1Date = this.currentDate.toISOString().split('T')[0];
-        }
+          this.appraisalIdp.masfromEvaluationIdp.apsapprove1Date = this.dateIso
           break
         }
         case ("2"): {
-        if (this.canEdit) {
-          this.appraisalIdp.masfromEvaluationIdp.apsapprove2Date = this.currentDate.toISOString().split('T')[0];
-        }
+          this.appraisalIdp.masfromEvaluationIdp.apsapprove2Date = this.dateIso
           break
         }
         case ("3"): {
-        if (this.canEdit) {
-          this.appraisalIdp.masfromEvaluationIdp.apsapprove3Date = this.currentDate.toISOString().split('T')[0];
-        }
+          this.appraisalIdp.masfromEvaluationIdp.apsapprove3Date = this.dateIso
           break
         }
         case ("4"): {
-        if (this.canEdit) {
-          this.appraisalIdp.masfromEvaluationIdp.apsapprove4Date = this.currentDate.toISOString().split('T')[0];
-        }
+          this.appraisalIdp.masfromEvaluationIdp.apsapprove4Date = this.dateIso
           break
         }
         case ("5"): {
-        if (this.canEdit) {
-          this.appraisalIdp.masfromEvaluationIdp.apsapprove5Date = this.currentDate.toISOString().split('T')[0];
-        }
+          this.appraisalIdp.masfromEvaluationIdp.apsapprove5Date = this.dateIso
           break
         }
         default: { return }
@@ -153,6 +139,7 @@ export class PmsIdpComponent {
       this.appraisalIdp.masfromEvaluationIdp.idpStatus = this.appraisalIdp.masfromEvaluationIdp.idpStatus ? this.appraisalIdp.masfromEvaluationIdp.idpStatus : '0'
       this.cdr.detectChanges()
     }
+  }
   returnPath() {
     this.sendReturnPath.emit()
   }
@@ -174,175 +161,8 @@ export class PmsIdpComponent {
   }
 
 
-  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.appraisalIdp?.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;">
-                  <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <rect width="39" height="39" fill="#D2D2D2"/>
-                      <g id="Component">
-                          <g id="alert cart">
-                              <g id="mdi:file-export">
-                                  <circle cx="22.5" cy="19.5" r="33.5" fill="#E8F8EE"/>
-                                  <path d="M9.75 3.25C8.88805 3.25 8.0614 3.59241 7.4519 4.2019C6.84241 4.8114 6.5 5.63805 6.5 6.5V32.5C6.5 33.362 6.84241 34.1886 7.4519 34.7981C8.0614 35.4076 8.88805 35.75 9.75 35.75H29.25C30.112 35.75 30.9386 35.4076 31.5481 34.7981C32.1576 34.1886 32.5 33.362 32.5 32.5V13L22.75 3.25M21.125 5.6875L30.0625 14.625H21.125M14.5113 19.8575H26V31.3463L22.555 27.9013L17.9563 32.5L13.3575 27.9013L17.9563 23.3188" 
-                                  fill="#1DBE5A"/>
-                              </g>
-                          </g>
-                      </g>
-                  </svg>
-              </div>
-              `,
-      title: title,
-      text: text,
-      showCancelButton: true,
-      confirmButtonText: confirmButtonText,
-      cancelButtonText: 'ย้อนกลับ',
-      customClass: {
-        title: '!swal2-title-mt-20px',
-        actions: '!swal2-actions-mt-20px',
-        icon: '!swal2-icon-no-border',
-        confirmButton: '!swal2-button-bg-green',
-        cancelButton: '!swal2-button-bg-gray',
-      },
-    }).then((result) => {
-      if (result.isConfirmed && this.appraisalIdp) {
-        this.saveApi(approveStatus)
-      } else if (result.dismiss === Swal.DismissReason.cancel) {
-        Swal.fire({
-          title: 'ยกเลิก!',
-          text: 'การบันทึกถูกยกเลิก',
-          icon: 'error',
-          customClass: {
-            confirmButton: '!swal2-button-bg-danger',
-          }
-        })
-      }
-    })
-  }
-
-  saveApi(approveStatus: string) {
-    let body = this.appraisalIdp
-    switch (this.appraisalIdp?.currentStep) {
-      case ("0"): {
-        body = {
-          ...this.appraisalIdp, masfromEvaluationIdp: {
-            ...this.appraisalIdp.masfromEvaluationIdp,
-            apsassessyStatus: approveStatus
-          }
-        }
-        break
-      }
-      case ("1"): {
-        body = {
-          ...this.appraisalIdp, masfromEvaluationIdp: {
-            ...this.appraisalIdp.masfromEvaluationIdp,
-            apsapprove1Status: approveStatus
-          }
-        }
-        break
-      }
-      case ("2"): {
-        body = {
-          ...this.appraisalIdp, masfromEvaluationIdp: {
-            ...this.appraisalIdp.masfromEvaluationIdp,
-            apsapprove1Status: approveStatus == '0' ? approveStatus : this.appraisalIdp.masfromEvaluationIdp.apsapprove1Status,
-            apsapprove2Status: approveStatus
-          }
-        }
-        break
-      }
-      case ("3"): {
-        body = {
-          ...this.appraisalIdp, masfromEvaluationIdp: {
-            ...this.appraisalIdp.masfromEvaluationIdp,
-            apsapprove2Status: approveStatus == '0' ? approveStatus : this.appraisalIdp.masfromEvaluationIdp.apsapprove2Status,
-            apsapprove3Status: approveStatus
-          }
-        }
-        break
-      }
-      case ("4"): {
-        body = {
-          ...this.appraisalIdp, masfromEvaluationIdp: {
-            ...this.appraisalIdp.masfromEvaluationIdp,
-            apsapprove3Status: approveStatus == '0' ? approveStatus : this.appraisalIdp.masfromEvaluationIdp.apsapprove3Status,
-            apsapprove4Status: approveStatus
-          }
-        }
-        break
-      }
-      case ("5"): {
-        body = {
-          ...this.appraisalIdp, masfromEvaluationIdp: {
-            ...this.appraisalIdp.masfromEvaluationIdp,
-            apsapprove4Status: approveStatus == '0' ? approveStatus : this.appraisalIdp.masfromEvaluationIdp.apsapprove4Status,
-            apsapprove5Status: approveStatus
-          }
-        }
-        break
-      }
-      default: { return }
-    }
-    this.evaluationIdpService.postIdp(body).subscribe({
-      next: response => {
-        if (response.success) {
-          Swal.fire({
-            title: 'บันทึกสำเร็จ!',
-            text: 'การประเมินของคุณถูกบันทึกแล้ว',
-            icon: 'success',
-            customClass: {
-              confirmButton: '!swal2-button-bg-green',
-            }
-          });
-          this.getFormIdp()
-        } else {
-          Swal.fire({
-            title: 'ยกเลิก!',
-            text: 'การบันทึกถูกยกเลิก',
-            icon: 'error',
-            customClass: {
-              confirmButton: '!swal2-button-bg-danger',
+  sendForm() {
+    this.idpForm.emit(this.appraisalIdp)
   }
-          });
-        }
-      }, error: error => {
-        Swal.fire({
-          title: 'ยกเลิก!',
-          text: 'การบันทึกถูกยกเลิก',
-          icon: 'error',
-          customClass: {
-            confirmButton: '!swal2-button-bg-danger',
-          }
-        });
-      }
-    })
-  }
-
 
 }

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

 <ng-container *ngTemplateOutlet="pmsEvaluation"></ng-container>
 
 <ng-template #pmsEvaluation>
-    <!-- <div class="pb-2rem px-2rem pt-1.5rem w-full min-height-50px justify-between items-center">
-        <div class="flex">
-            <button type="button" class="ti-btn ti-btn-outline ti-btn-outline-light h-20px m-0 shadow-md text-blue-500"
-                (click)="returnPath()">
-                <i class="ti ti-chevron-left"></i>
-                ย้อนกลับ
-            </button>
-            <div class="font-size-18px font-weight-700 align-center text-primary pl-1rem">
-                ประเมินผล
-            </div>
-        </div>
-    </div> -->
     <ng-container *ngIf="appraisalPms">
         <div class="pb-2rem px-2rem">
             <div class="font-size-18px font-weight-700 text-primary">
@@ -103,13 +91,15 @@
                             <span>ฝ่าย (Department)</span>
                         </div>
                         <div class="col-span-1 p-2  border pb-4">
-                            <span *ngIf="appraisalPms.apsapprove1.bu1">{{appraisalPms.apsapprove1.bu1.tdesc || ""}}</span>
+                            <span *ngIf="appraisalPms.apsapprove1.bu1">{{appraisalPms.apsapprove1.bu1.tdesc ||
+                                ""}}</span>
                         </div>
                         <div class="col-span-1 p-2  border pb-4">
                             <span>แผนก (Section)</span>
                         </div>
                         <div class="col-span-1 p-2  border pb-4">
-                            <span *ngIf="appraisalPms.apsapprove1.bu2">{{appraisalPms.apsapprove1.bu2.tdesc || ""}}</span>
+                            <span *ngIf="appraisalPms.apsapprove1.bu2">{{appraisalPms.apsapprove1.bu2.tdesc ||
+                                ""}}</span>
                         </div>
                     </div>
                 </div>
@@ -131,165 +121,6 @@
                 </div>
             </div>
         </div>
-
-
-        <div class="py-1rem px-2rem">
-            <div class="py-2 grid grid-cols-7 gap-3">
-                <div class="col-span-1">ผู้รับการประเมิน</div>
-                <div class="col-span-1">
-                    {{appraisalPms.apsassessy.thFullName}}</div>
-                <div class="col-span-1">
-                    <input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
-            checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none "
-                        [checked]="appraisalPms.apsassessyStatus=='2'">
-                    <label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
-                </div>
-                <div class="col-span-2">
-                    <textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
-                        [class.!bg-input-readonly]="!appraisalPms||appraisalPms.currentStep!='0'||!canSave"
-                        [readonly]="!appraisalPms||appraisalPms.currentStep!='0'||!canSave"
-                        [(ngModel)]="appraisalPms.apsassessyComment"></textarea>
-                    <span class="pt-2">
-                        วันที่ :
-                        {{convertDate(appraisalPms.apsassessyDate)}}
-                    </span>
-                </div>
-            </div>
-            <div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalPms.apsapprove1.employeeId">
-                <div class="col-span-1">
-                    {{appraisalPms.apsapprove2.employeeId?'ผู้ประเมิน1':'ผู้อนุมัติ'}}
-                </div>
-                <div class="col-span-1">
-                    {{appraisalPms.apsapprove1.thFullName}}</div>
-                <div class="col-span-1">
-                    <input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
-            checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
-                        [checked]="appraisalPms.apsapprove1Status=='2'">
-                    <label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
-                </div>
-                <div class="col-span-2">
-                    <textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
-                        [class.!bg-input-readonly]="!appraisalPms||appraisalPms.currentStep!='1'||!canSave"
-                        [readonly]="!appraisalPms||appraisalPms.currentStep!='1'||!canSave"
-                        [(ngModel)]="appraisalPms.apsapprove1Comment"></textarea>
-                    <span class="pt-2">
-                        วันที่ :
-                        {{convertDate(appraisalPms.apsapprove1Date)}}
-                    </span>
-                </div>
-            </div>
-            <div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalPms.apsapprove2.employeeId">
-                <div class="col-span-1">
-                    {{appraisalPms.apsapprove3.employeeId?'ผู้ประเมิน2':'ผู้อนุมัติ'}}
-                </div>
-                <div class="col-span-1">
-                    {{appraisalPms.apsapprove2.thFullName}}</div>
-                <div class="col-span-1">
-                    <input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
-            checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
-                        [checked]="appraisalPms.apsapprove2Status=='2'">
-                    <label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
-                </div>
-                <div class="col-span-2">
-                    <textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
-                        [class.!bg-input-readonly]="!appraisalPms||appraisalPms.currentStep!='2'||!canSave"
-                        [readonly]="!appraisalPms||appraisalPms.currentStep!='2'||!canSave"
-                        [(ngModel)]="appraisalPms.apsapprove2Comment"></textarea>
-                    <span class="pt-2">
-                        วันที่ :
-                        {{convertDate(appraisalPms.apsapprove2Date)}}
-                    </span>
-                </div>
-            </div>
-            <div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalPms.apsapprove3.employeeId">
-                <div class="col-span-1">
-                    {{appraisalPms.apsapprove4.employeeId?'ผู้ประเมิน3':'ผู้อนุมัติ'}}
-                </div>
-                <div class="col-span-1">
-                    {{appraisalPms.apsapprove3.thFullName}}</div>
-                <div class="col-span-1">
-                    <input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
-            checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
-                        [checked]="appraisalPms.apsapprove3Status=='2'">
-                    <label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
-                </div>
-                <div class="col-span-2">
-                    <textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
-                        [class.!bg-input-readonly]="!appraisalPms||appraisalPms.currentStep!='3'||!canSave"
-                        [readonly]="!appraisalPms||appraisalPms.currentStep!='3'||!canSave"
-                        [(ngModel)]="appraisalPms.apsapprove3Comment"></textarea>
-                    <span class="pt-2">
-                        วันที่ :
-                        {{convertDate(appraisalPms.apsapprove3Date)}}
-                    </span>
-                </div>
-            </div>
-            <div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalPms.apsapprove4.employeeId">
-                <div class="col-span-1">
-                    {{appraisalPms.apsapprove5.employeeId?'ผู้ประเมิน4':'ผู้อนุมัติ'}}
-                </div>
-                <div class="col-span-1">
-                    {{appraisalPms.apsapprove4.thFullName}}</div>
-                <div class="col-span-1">
-                    <input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
-            checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
-                        [checked]="appraisalPms.apsapprove4Status=='2'">
-                    <label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
-                </div>
-                <div class="col-span-2">
-                    <textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
-                        [class.!bg-input-readonly]="!appraisalPms||appraisalPms.currentStep!='4'||!canSave"
-                        [readonly]="!appraisalPms||appraisalPms.currentStep!='4'||!canSave"
-                        [(ngModel)]="appraisalPms.apsapprove4Comment"></textarea>
-                    <span class="pt-2">
-                        วันที่ :
-                        {{convertDate(appraisalPms.apsapprove4Date)}}
-                    </span>
-                </div>
-            </div>
-            <div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalPms.apsapprove5.employeeId">
-                <div class="col-span-1">
-                    ผู้อนุมัติ
-                </div>
-                <div class="col-span-1">
-                    {{appraisalPms.apsapprove5.thFullName}}</div>
-                <div class="col-span-1">
-                    <input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 
-                    checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
-            checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
-                        [checked]="appraisalPms.apsapprove5Status=='2'">
-                    <label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
-                </div>
-                <div class="col-span-2">
-                    <textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
-                        [class.!bg-input-readonly]="!appraisalPms||appraisalPms.currentStep!='5'||!canSave"
-                        [readonly]="!appraisalPms||appraisalPms.currentStep!='5'||!canSave"
-                        [(ngModel)]="appraisalPms.apsapprove5Comment"></textarea>
-                    <span class="pt-2">
-                        วันที่ :
-                        {{convertDate(appraisalPms.apsapprove5Date)}}
-                    </span>
-                </div>
-            </div>
-        </div>
-
-        <div class="flex justify-center mb-1rem pb-2rem" *ngIf="canSave">
-            <button *ngIf="appraisalPms.checkStep!='0'&&appraisalPms.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('approve')">
-                <ng-container *ngIf="appraisalPms.checkStep=='0'">
-                    ยืนยันข้อมูล
-                </ng-container>
-                <ng-container *ngIf="appraisalPms.checkStep!='0'">
-                    อนุมัติ
-                </ng-container>
-            </button>
-        </div>
     </ng-container>
 </ng-template>
 
@@ -298,20 +129,18 @@
 </ng-template>
 
 <ng-template #part1>
-    <div class="hs-accordion active overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
+    <div class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
         id="hs-primary-heading-1">
         <button (click)="scrollToTable($event)"
             class="hs-accordion-toggle hs-accordion-active:text-white hs-accordion-active:bg-secondary group py-4 px-5 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-white dark:text-gray-200 dark:hover:text-white/80"
             aria-controls="hs-primary-collapse-1" type="button">
-            <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none"
-                xmlns="http://www.w3.org/2000/svg">
-                <path *ngIf="false"
-                    d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-                    fill="currentColor" class="fill-green-500"></path>
-                <path *ngIf="false"
-                    d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-                    fill="currentColor"></path>
-            </svg>
+            <span class="d-flex align-items-center justify-content-center rounded-circle text-white"
+                [class.bg-danger]="part1Remain()" [class.bg-success]="!part1Remain()">
+                <ng-container *ngIf="part1Remain()">
+                    {{part1Remain()}}
+                </ng-container>
+                <i *ngIf="!part1Remain()" class="ti ti-check"></i>
+            </span>
             <span>
                 Part 1 : ประเมินผลการปฏิบัติงานตามนโยบายบริษัท (Corporate KPI)
             </span>
@@ -327,7 +156,7 @@
             </svg>
         </button>
         <div id="hs-primary-collapse-1"
-            class="hs-accordion-content !w-full overflow-hidden transition-[height] duration-300"
+            class="hs-accordion-content hidden !w-full overflow-hidden transition-[height] duration-300"
             aria-labelledby="hs-primary-heading-1">
             <div class="box-body p-0">
                 <div class="space-y-4">
@@ -391,7 +220,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part1radio'+i" class="ti-form-radio" [id]="'part1radioA'+i"
-                                                (click)="setScore(item,5)"
+                                                (click)="setScore(item,5);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==5:item.scoreTopicExpectationBoss==5"><br>
                                             {{item.groupAssessment1.pmsTopic.targetAdetail}}
                                         </td>
@@ -399,7 +228,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part1radio'+i" class="ti-form-radio" [id]="'part1radioB'+i"
-                                                (click)="setScore(item,4)"
+                                                (click)="setScore(item,4);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==4:item.scoreTopicExpectationBoss==4"><br>
                                             {{item.groupAssessment1.pmsTopic.targetBdetail}}
                                         </td>
@@ -407,7 +236,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part1radio'+i" class="ti-form-radio" [id]="'part1radioC'+i"
-                                                (click)="setScore(item,3)"
+                                                (click)="setScore(item,3);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==3:item.scoreTopicExpectationBoss==3"><br>
                                             {{item.groupAssessment1.pmsTopic.targetCdetail}}
                                         </td>
@@ -415,7 +244,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part1radio'+i" class="ti-form-radio" [id]="'part1radioD'+i"
-                                                (click)="setScore(item,2)"
+                                                (click)="setScore(item,2);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==2:item.scoreTopicExpectationBoss==2"><br>
                                             {{item.groupAssessment1.pmsTopic.targetDdetail}}
                                         </td>
@@ -423,7 +252,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part1radio'+i" class="ti-form-radio" [id]="'part1radioE'+i"
-                                                (click)="setScore(item,1)"
+                                                (click)="setScore(item,1);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==1:item.scoreTopicExpectationBoss==1"><br>
                                             {{item.groupAssessment1.pmsTopic.targetEdetail}}
                                         </td>
@@ -506,20 +335,18 @@
 
 
 <ng-template #part2>
-    <div class="hs-accordion active overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
+    <div class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
         id="hs-primary-heading-1">
         <button (click)="scrollToTable($event)"
             class="hs-accordion-toggle hs-accordion-active:text-white hs-accordion-active:bg-secondary group py-4 px-5 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-white dark:text-gray-200 dark:hover:text-white/80"
             aria-controls="hs-primary-collapse-1" type="button">
-            <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none"
-                xmlns="http://www.w3.org/2000/svg">
-                <path *ngIf="false"
-                    d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-                    fill="currentColor" class="fill-green-500"></path>
-                <path *ngIf="false"
-                    d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-                    fill="currentColor"></path>
-            </svg>
+            <span class="d-flex align-items-center justify-content-center rounded-circle text-white"
+                [class.bg-danger]="part2Remain()" [class.bg-success]="!part2Remain()">
+                <ng-container *ngIf="part2Remain()">
+                    {{part2Remain()}}
+                </ng-container>
+                <i *ngIf="!part2Remain()" class="ti ti-check"></i>
+            </span>
             <span>
                 Part 2 : ประเมินผลการปฏิบัติงานประจำ (Department KPI)
             </span>
@@ -535,7 +362,7 @@
             </svg>
         </button>
         <div id="hs-primary-collapse-1"
-            class="hs-accordion-content !w-full overflow-hidden transition-[height] duration-300"
+            class="hs-accordion-content hidden !w-full overflow-hidden transition-[height] duration-300"
             aria-labelledby="hs-primary-heading-1">
             <div class="box-body p-0">
                 <div class="space-y-4">
@@ -596,7 +423,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part2radio'+i" class="ti-form-radio" [id]="'part2radioA'+i"
-                                                (click)="setScore(item,5)"
+                                                (click)="setScore(item,5);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==5:item.scoreTopicExpectationBoss==5"><br>
                                             {{item.groupAssessment1.pmsTopic.targetAdetail}}
                                         </td>
@@ -604,7 +431,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part2radio'+i" class="ti-form-radio" [id]="'part2radioB'+i"
-                                                (click)="setScore(item,4)"
+                                                (click)="setScore(item,4);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==4:item.scoreTopicExpectationBoss==4"><br>
                                             {{item.groupAssessment1.pmsTopic.targetBdetail}}
                                         </td>
@@ -612,7 +439,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part2radio'+i" class="ti-form-radio" [id]="'part2radioC'+i"
-                                                (click)="setScore(item,3)"
+                                                (click)="setScore(item,3);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==3:item.scoreTopicExpectationBoss==3"><br>
                                             {{item.groupAssessment1.pmsTopic.targetCdetail}}
                                         </td>
@@ -620,7 +447,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part2radio'+i" class="ti-form-radio" [id]="'part2radioD'+i"
-                                                (click)="setScore(item,2)"
+                                                (click)="setScore(item,2);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==2:item.scoreTopicExpectationBoss==2"><br>
                                             {{item.groupAssessment1.pmsTopic.targetDdetail}}
                                         </td>
@@ -628,7 +455,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part2radio'+i" class="ti-form-radio" [id]="'part2radioE'+i"
-                                                (click)="setScore(item,1)"
+                                                (click)="setScore(item,1);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==1:item.scoreTopicExpectationBoss==1"><br>
                                             {{item.groupAssessment1.pmsTopic.targetEdetail}}
                                         </td>
@@ -704,20 +531,18 @@
 </ng-template>
 
 <ng-template #part3>
-    <div class="hs-accordion active overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
+    <div class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
         id="hs-primary-heading-1">
         <button (click)="scrollToTable($event)"
             class="hs-accordion-toggle hs-accordion-active:text-white hs-accordion-active:bg-secondary group py-4 px-5 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-white dark:text-gray-200 dark:hover:text-white/80"
             aria-controls="hs-primary-collapse-1" type="button">
-            <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none"
-                xmlns="http://www.w3.org/2000/svg">
-                <path *ngIf="false"
-                    d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-                    fill="currentColor" class="fill-green-500"></path>
-                <path *ngIf="false"
-                    d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-                    fill="currentColor"></path>
-            </svg>
+            <span class="d-flex align-items-center justify-content-center rounded-circle text-white"
+                [class.bg-danger]="part3Remain()" [class.bg-success]="!part3Remain()">
+                <ng-container *ngIf="part3Remain()">
+                    {{part3Remain()}}
+                </ng-container>
+                <i *ngIf="!part3Remain()" class="ti ti-check"></i>
+            </span>
             <span>
                 Part 3 : ประเมินผลการปฏิบัติงานประจำ (Individual KPI)
             </span>
@@ -733,7 +558,7 @@
             </svg>
         </button>
         <div id="hs-primary-collapse-1"
-            class="hs-accordion-content !w-full overflow-hidden transition-[height] duration-300"
+            class="hs-accordion-content hidden !w-full overflow-hidden transition-[height] duration-300"
             aria-labelledby="hs-primary-heading-1">
             <div class="box-body p-0">
                 <div class="space-y-4">
@@ -794,7 +619,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part3radio'+i" class="ti-form-radio" [id]="'part3radioA'+i"
-                                                (click)="setScore(item,5)"
+                                                (click)="setScore(item,5);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==5:item.scoreTopicExpectationBoss==5"><br>
                                             {{item.groupAssessment1.pmsTopic.targetAdetail}}
                                         </td>
@@ -802,7 +627,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part3radio'+i" class="ti-form-radio" [id]="'part3radioB'+i"
-                                                (click)="setScore(item,4)"
+                                                (click)="setScore(item,4);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==4:item.scoreTopicExpectationBoss==4"><br>
                                             {{item.groupAssessment1.pmsTopic.targetBdetail}}
                                         </td>
@@ -810,7 +635,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part3radio'+i" class="ti-form-radio" [id]="'part3radioC'+i"
-                                                (click)="setScore(item,3)"
+                                                (click)="setScore(item,3);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==3:item.scoreTopicExpectationBoss==3"><br>
                                             {{item.groupAssessment1.pmsTopic.targetCdetail}}
                                         </td>
@@ -818,7 +643,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part3radio'+i" class="ti-form-radio" [id]="'part3radioD'+i"
-                                                (click)="setScore(item,2)"
+                                                (click)="setScore(item,2);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==2:item.scoreTopicExpectationBoss==2"><br>
                                             {{item.groupAssessment1.pmsTopic.targetDdetail}}
                                         </td>
@@ -826,7 +651,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part3radio'+i" class="ti-form-radio" [id]="'part3radioE'+i"
-                                                (click)="setScore(item,1)"
+                                                (click)="setScore(item,1);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==1:item.scoreTopicExpectationBoss==1"><br>
                                             {{item.groupAssessment1.pmsTopic.targetEdetail}}
                                         </td>
@@ -902,20 +727,12 @@
 </ng-template>
 
 <ng-template #part4>
-    <div class="hs-accordion active overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
+    <div class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
         id="hs-primary-heading-1">
         <button (click)="scrollToTable($event)"
             class="hs-accordion-toggle hs-accordion-active:text-white hs-accordion-active:bg-secondary group py-4 px-5 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-white dark:text-gray-200 dark:hover:text-white/80"
             aria-controls="hs-primary-collapse-1" type="button">
-            <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none"
-                xmlns="http://www.w3.org/2000/svg">
-                <path *ngIf="false"
-                    d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-                    fill="currentColor" class="fill-green-500"></path>
-                <path *ngIf="false"
-                    d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-                    fill="currentColor"></path>
-            </svg>
+            <div></div>
             <span>
                 Part 4 : ประเมินผลสมรรถนะที่สนับสนุนการปฏิบัติงาน (Competency)
             </span>
@@ -931,7 +748,7 @@
             </svg>
         </button>
         <div id="hs-primary-collapse-1"
-            class="hs-accordion-content !w-full overflow-hidden transition-[height] duration-300"
+            class="hs-accordion-content hidden !w-full overflow-hidden transition-[height] duration-300"
             aria-labelledby="hs-primary-heading-1">
             <div class="box-body p-0">
                 <div class="space-y-4">
@@ -1062,20 +879,18 @@
 
 
 <ng-template #part5>
-    <div class="hs-accordion active overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
+    <div class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
         id="hs-primary-heading-1">
         <button (click)="scrollToTable($event)"
             class="hs-accordion-toggle hs-accordion-active:text-white hs-accordion-active:bg-secondary group py-4 px-5 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-white dark:text-gray-200 dark:hover:text-white/80"
             aria-controls="hs-primary-collapse-1" type="button">
-            <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none"
-                xmlns="http://www.w3.org/2000/svg">
-                <path *ngIf="false"
-                    d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-                    fill="currentColor" class="fill-green-500"></path>
-                <path *ngIf="false"
-                    d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-                    fill="currentColor"></path>
-            </svg>
+            <span class="d-flex align-items-center justify-content-center rounded-circle text-white"
+                [class.bg-danger]="part5Remain()" [class.bg-success]="!part5Remain()">
+                <ng-container *ngIf="part5Remain()">
+                    {{part5Remain()}}
+                </ng-container>
+                <i *ngIf="!part5Remain()" class="ti ti-check"></i>
+            </span>
             <span>
                 Part 5 : อัตราการเข้างาน (Time Attendance)
             </span>
@@ -1091,7 +906,7 @@
             </svg>
         </button>
         <div id="hs-primary-collapse-1"
-            class="hs-accordion-content !w-full overflow-hidden transition-[height] duration-300"
+            class="hs-accordion-content hidden !w-full overflow-hidden transition-[height] duration-300"
             aria-labelledby="hs-primary-heading-1">
             <div class="box-body p-0">
                 <div class="space-y-4">
@@ -1148,7 +963,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part5radio'+i" class="ti-form-radio" [id]="'part5radioA'+i"
-                                                (click)="setScorePart5(item,5)"
+                                                (click)="setScorePart5(item,5);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.pmsWorkingTimScore==5:item.pmsWorkingTimScoreBoss==5"><br>
                                             {{item.targetADetail}}
                                         </td>
@@ -1156,7 +971,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part5radio'+i" class="ti-form-radio" [id]="'part5radioB'+i"
-                                                (click)="setScorePart5(item,4)"
+                                                (click)="setScorePart5(item,4);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.pmsWorkingTimScore==4:item.pmsWorkingTimScoreBoss==4"><br>
                                             {{item.targetBDetail}}
                                         </td>
@@ -1164,7 +979,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part5radio'+i" class="ti-form-radio" [id]="'part5radioC'+i"
-                                                (click)="setScorePart5(item,3)"
+                                                (click)="setScorePart5(item,3);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.pmsWorkingTimScore==3:item.pmsWorkingTimScoreBoss==3"><br>
                                             {{item.targetCDetail}}
                                         </td>
@@ -1172,7 +987,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part5radio'+i" class="ti-form-radio" [id]="'part5radioD'+i"
-                                                (click)="setScorePart5(item,2)"
+                                                (click)="setScorePart5(item,2);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.pmsWorkingTimScore==2:item.pmsWorkingTimScoreBoss==2"><br>
                                             {{item.targetDDetail}}
                                         </td>
@@ -1180,7 +995,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part5radio'+i" class="ti-form-radio" [id]="'part5radioE'+i"
-                                                (click)="setScorePart5(item,1)"
+                                                (click)="setScorePart5(item,1);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.pmsWorkingTimScore==1:item.pmsWorkingTimScoreBoss==1"><br>
                                             {{item.targetEDetail}}
                                         </td>
@@ -1253,20 +1068,18 @@
 </ng-template>
 
 <ng-template #part6>
-    <div class="hs-accordion active overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
+    <div class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
         id="hs-primary-heading-1">
         <button (click)="scrollToTable($event)"
             class="hs-accordion-toggle hs-accordion-active:text-white hs-accordion-active:bg-secondary group py-4 px-5 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-white dark:text-gray-200 dark:hover:text-white/80"
             aria-controls="hs-primary-collapse-1" type="button">
-            <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none"
-                xmlns="http://www.w3.org/2000/svg">
-                <path *ngIf="false"
-                    d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-                    fill="currentColor" class="fill-green-500"></path>
-                <path *ngIf="false"
-                    d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-                    fill="currentColor"></path>
-            </svg>
+            <span class="d-flex align-items-center justify-content-center rounded-circle text-white"
+                [class.bg-danger]="part6Remain()" [class.bg-success]="!part6Remain()">
+                <ng-container *ngIf="part6Remain()">
+                    {{part6Remain()}}
+                </ng-container>
+                <i *ngIf="!part6Remain()" class="ti ti-check"></i>
+            </span>
             <span>
                 Part 6 : งานที่ได้รับมอบหมายเพิ่มเติม (Cross Functional Project Assignment)
             </span>
@@ -1282,7 +1095,7 @@
             </svg>
         </button>
         <div id="hs-primary-collapse-1"
-            class="hs-accordion-content !w-full overflow-hidden transition-[height] duration-300"
+            class="hs-accordion-content hidden !w-full overflow-hidden transition-[height] duration-300"
             aria-labelledby="hs-primary-heading-1">
             <div class="box-body p-0">
                 <div class="space-y-4">
@@ -1345,7 +1158,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part6radio'+i" class="ti-form-radio" [id]="'part6radioA'+i"
-                                                (click)="setScore(item,5)"
+                                                (click)="setScore(item,5);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==5:item.scoreTopicExpectationBoss==5"><br>
                                             {{item.groupAssessment1.pmsTopic.targetAdetail}}
                                         </td>
@@ -1353,7 +1166,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part6radio'+i" class="ti-form-radio" [id]="'part6radioB'+i"
-                                                (click)="setScore(item,4)"
+                                                (click)="setScore(item,4);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==4:item.scoreTopicExpectationBoss==4"><br>
                                             {{item.groupAssessment1.pmsTopic.targetBdetail}}
                                         </td>
@@ -1361,7 +1174,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part6radio'+i" class="ti-form-radio" [id]="'part6radioC'+i"
-                                                (click)="setScore(item,3)"
+                                                (click)="setScore(item,3);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==3:item.scoreTopicExpectationBoss==3"><br>
                                             {{item.groupAssessment1.pmsTopic.targetCdetail}}
                                         </td>
@@ -1369,7 +1182,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part6radio'+i" class="ti-form-radio" [id]="'part6radioD'+i"
-                                                (click)="setScore(item,2)"
+                                                (click)="setScore(item,2);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==2:item.scoreTopicExpectationBoss==2"><br>
                                             {{item.groupAssessment1.pmsTopic.targetDdetail}}
                                         </td>
@@ -1377,7 +1190,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part6radio'+i" class="ti-form-radio" [id]="'part6radioE'+i"
-                                                (click)="setScore(item,1)"
+                                                (click)="setScore(item,1);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==1:item.scoreTopicExpectationBoss==1"><br>
                                             {{item.groupAssessment1.pmsTopic.targetEdetail}}
                                         </td>
@@ -1458,20 +1271,18 @@
 
 
 <ng-template #part7>
-    <div class="hs-accordion active overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
+    <div class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
         id="hs-primary-heading-1">
         <button (click)="scrollToTable($event)"
             class="hs-accordion-toggle hs-accordion-active:text-white hs-accordion-active:bg-secondary group py-4 px-5 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-white dark:text-gray-200 dark:hover:text-white/80"
             aria-controls="hs-primary-collapse-1" type="button">
-            <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none"
-                xmlns="http://www.w3.org/2000/svg">
-                <path *ngIf="false"
-                    d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-                    fill="currentColor" class="fill-green-500"></path>
-                <path *ngIf="false"
-                    d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-                    fill="currentColor"></path>
-            </svg>
+            <span class="d-flex align-items-center justify-content-center rounded-circle text-white"
+                [class.bg-danger]="part7Remain()" [class.bg-success]="!part7Remain()">
+                <ng-container *ngIf="part7Remain()">
+                    {{part7Remain()}}
+                </ng-container>
+                <i *ngIf="!part7Remain()" class="ti ti-check"></i>
+            </span>
             <span>
                 Part 7: กิจกรรมพิเศษ (Special Activities)
             </span>
@@ -1487,7 +1298,7 @@
             </svg>
         </button>
         <div id="hs-primary-collapse-1"
-            class="hs-accordion-content !w-full overflow-hidden transition-[height] duration-300"
+            class="hs-accordion-content hidden !w-full overflow-hidden transition-[height] duration-300"
             aria-labelledby="hs-primary-heading-1">
             <div class="box-body p-0">
                 <div class="space-y-4">
@@ -1550,7 +1361,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part7radio'+i" class="ti-form-radio" [id]="'part7radioA'+i"
-                                                (click)="setScore(item,5)"
+                                                (click)="setScore(item,5);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==5:item.scoreTopicExpectationBoss==5"><br>
                                             {{item.groupAssessment1.pmsTopic.targetAdetail}}
                                         </td>
@@ -1558,7 +1369,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part7radio'+i" class="ti-form-radio" [id]="'part7radioB'+i"
-                                                (click)="setScore(item,4)"
+                                                (click)="setScore(item,4);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==4:item.scoreTopicExpectationBoss==4"><br>
                                             {{item.groupAssessment1.pmsTopic.targetBdetail}}
                                         </td>
@@ -1566,7 +1377,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part7radio'+i" class="ti-form-radio" [id]="'part7radioC'+i"
-                                                (click)="setScore(item,3)"
+                                                (click)="setScore(item,3);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==3:item.scoreTopicExpectationBoss==3"><br>
                                             {{item.groupAssessment1.pmsTopic.targetCdetail}}
                                         </td>
@@ -1574,7 +1385,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part7radio'+i" class="ti-form-radio" [id]="'part7radioD'+i"
-                                                (click)="setScore(item,2)"
+                                                (click)="setScore(item,2);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==2:item.scoreTopicExpectationBoss==2"><br>
                                             {{item.groupAssessment1.pmsTopic.targetDdetail}}
                                         </td>
@@ -1582,7 +1393,7 @@
                                             <input [class.cursor-pointer]="canEdit"
                                                 [class.cursor-not-allowed]="!canEdit" [disabled]="!canEdit" type="radio"
                                                 [name]="'part7radio'+i" class="ti-form-radio" [id]="'part7radioE'+i"
-                                                (click)="setScore(item,1)"
+                                                (click)="setScore(item,1);allFormRemain()"
                                                 [checked]="evaluaterId==evaluateeId?item.scoreTopicExpectation==1:item.scoreTopicExpectationBoss==1"><br>
                                             {{item.groupAssessment1.pmsTopic.targetEdetail}}
                                         </td>
@@ -1663,20 +1474,12 @@
 
 
 <ng-template #part8>
-    <div class="hs-accordion active overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
+    <div class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
         id="hs-primary-heading-1">
         <button (click)="scrollToTable($event)"
             class="hs-accordion-toggle hs-accordion-active:text-white hs-accordion-active:bg-secondary group py-4 px-5 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-white dark:text-gray-200 dark:hover:text-white/80"
             aria-controls="hs-primary-collapse-1" type="button">
-            <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none"
-                xmlns="http://www.w3.org/2000/svg">
-                <path *ngIf="false"
-                    d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-                    fill="currentColor" class="fill-green-500"></path>
-                <path *ngIf="false"
-                    d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-                    fill="currentColor"></path>
-            </svg>
+            <div></div>
             <span>
                 Part 8 : สรุปผลการปฏิบัติงาน (Summary)
             </span>
@@ -1692,7 +1495,7 @@
             </svg>
         </button>
         <div id="hs-primary-collapse-1"
-            class="hs-accordion-content !w-full overflow-hidden transition-[height] duration-300"
+            class="hs-accordion-content hidden !w-full overflow-hidden transition-[height] duration-300"
             aria-labelledby="hs-primary-heading-1">
             <div class="box-body p-0">
                 <div class="space-y-4">
@@ -1773,20 +1576,12 @@
 
 
 <ng-template #part9>
-    <div class="hs-accordion active overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
+    <div class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
         id="hs-primary-heading-1">
         <button (click)="scrollToTable($event)"
             class="hs-accordion-toggle hs-accordion-active:text-white hs-accordion-active:bg-secondary group py-4 px-5 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-white dark:text-gray-200 dark:hover:text-white/80"
             aria-controls="hs-primary-collapse-1" type="button">
-            <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none"
-                xmlns="http://www.w3.org/2000/svg">
-                <path *ngIf="false"
-                    d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-                    fill="currentColor" class="fill-green-500"></path>
-                <path *ngIf="false"
-                    d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-                    fill="currentColor"></path>
-            </svg>
+            <div></div>
             <span>
                 Part 9 : พฤติกรรมบุคคลที่เป็นจุดแข็ง จุดอ่อน และการพัฒนา
                 (EMPLOYEE STRENGTHS , WEAKNESSES AND PLAN TO IMPROVED)
@@ -1803,7 +1598,7 @@
             </svg>
         </button>
         <div id="hs-primary-collapse-1"
-            class="hs-accordion-content !w-full overflow-hidden transition-[height] duration-300"
+            class="hs-accordion-content hidden !w-full overflow-hidden transition-[height] duration-300"
             aria-labelledby="hs-primary-heading-1">
             <div class="box-body p-0">
                 <div class="space-y-4">
@@ -1883,20 +1678,12 @@
 
 
 <ng-template #part10>
-    <div class="hs-accordion active overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
+    <div class="hs-accordion overflow-hidden bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10"
         id="hs-primary-heading-1">
         <button (click)="scrollToTable($event)"
             class="hs-accordion-toggle hs-accordion-active:text-white hs-accordion-active:bg-secondary group py-4 px-5 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-white dark:text-gray-200 dark:hover:text-white/80"
             aria-controls="hs-primary-collapse-1" type="button">
-            <svg class="flex-shrink-0 h-6 w-6 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none"
-                xmlns="http://www.w3.org/2000/svg">
-                <path *ngIf="false"
-                    d="M15.1965 7.85999C15.1965 3.71785 11.8387 0.359985 7.69653 0.359985C3.5544 0.359985 0.196533 3.71785 0.196533 7.85999C0.196533 12.0021 3.5544 15.36 7.69653 15.36C11.8387 15.36 15.1965 12.0021 15.1965 7.85999Z"
-                    fill="currentColor" class="fill-green-500"></path>
-                <path *ngIf="false"
-                    d="M10.9295 4.88618C11.1083 4.67577 11.4238 4.65019 11.6343 4.82904C11.8446 5.00788 11.8702 5.32343 11.6914 5.53383L7.44139 10.5338C7.25974 10.7475 6.93787 10.77 6.72825 10.5837L4.47825 8.5837C4.27186 8.40024 4.25327 8.0842 4.43673 7.87781C4.62019 7.67142 4.93622 7.65283 5.14261 7.83629L7.01053 9.49669L10.9295 4.88618Z"
-                    fill="currentColor"></path>
-            </svg>
+            <div></div>
             <span>
                 Part 10: คำชมหรือรางวัลที่ได้รับ (Conversation, Feedback, Recognise : CFR)
             </span>
@@ -1912,7 +1699,7 @@
             </svg>
         </button>
         <div id="hs-primary-collapse-1"
-            class="hs-accordion-content !w-full overflow-hidden transition-[height] duration-300"
+            class="hs-accordion-content hidden !w-full overflow-hidden transition-[height] duration-300"
             aria-labelledby="hs-primary-heading-1">
             <div class="box-body p-0">
                 <div class="space-y-4">

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

@@ -5,7 +5,6 @@ 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 { Pms } from 'src/app/shared/model/competency.model';
-import Swal from 'sweetalert2';
 
 export interface Part8Model {
   id: number
@@ -88,13 +87,15 @@ export class PmsKpiComponent {
   }]
   part9show = true
   part10show = true
-  canEdit = false
-  canSave = false
-  currentDate = new Date()
   @Input() evaluateeId = ""
   @Input() evaluaterId = ""
   @Input() appraisalPms?: Pms
+  @Input() canEdit = false
+  @Input() currentStep = ""
+  @Input() dateIso = ""
   @Output() sendReturnPath: EventEmitter<any> = new EventEmitter<any>();
+  @Output() kpiFormRemain: EventEmitter<any> = new EventEmitter<any>();
+  @Output() kpiForm: EventEmitter<any> = new EventEmitter<any>();
   groupGrade: { loading: boolean, dataList: CompetencyGradeModel[] } = { loading: false, dataList: [] }
   constructor(private appraisalService: AppraisalService,
     private pmsGroupGradeService: PmsGroupGradeService,
@@ -103,14 +104,90 @@ export class PmsKpiComponent {
     private settingAssessmentService: SettingAssessmentService
   ) {
   }
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['evaluateeId']?.currentValue || changes['evaluaterId']?.currentValue) {
-      this.toggleAllParts(this.evaluateeId == this.evaluaterId)
-    }
-  }
+  // ngOnChanges(changes: SimpleChanges): void {
+  //   if (changes['evaluateeId']?.currentValue || changes['evaluaterId']?.currentValue) {
+  //     this.toggleAllParts(this.evaluateeId == this.evaluaterId)
+  //   }
+  // }
   ngOnInit(): void {
     this.getPmsGroupGradeList()
+    this.getAppraisalPmsForm()
+    this.allFormRemain()
+  }
+
+  getAppraisalPmsForm() {
+    this.data8List.forEach((x, i) => {
+      if (x.id == 1 && this.appraisalPms?.part1Percentage) {
+        x.factors = this.appraisalPms.part1Percentage
+      } else if (x.id == 2 && this.appraisalPms?.part2Percentage) {
+        x.factors = this.appraisalPms.part2Percentage
+      } else if (x.id == 3 && this.appraisalPms?.part3Percentage) {
+        x.factors = this.appraisalPms.part3Percentage
+      } else if (x.id == 4 && this.appraisalPms?.part4Percentage) {
+        x.factors = this.appraisalPms.part4Percentage
+      } else if (x.id == 5 && this.appraisalPms?.part5Percentage) {
+        x.factors = this.appraisalPms.part5Percentage
+      } else if (x.id == 6 && this.appraisalPms?.part6Percentage) {
+        x.factors = this.appraisalPms.part6Percentage
+      } else if (x.id == 7 && this.appraisalPms?.part7Percentage) {
+        x.factors = this.appraisalPms.part7Percentage
+      }
+    })
+    if (!this.appraisalPms?.part1Detail.length) {
+      this.data8List = this.data8List.filter(item => item.id !== 1)
+    }
+    if (!this.appraisalPms?.part2Detail.length) {
+      this.data8List = this.data8List.filter(item => item.id !== 2)
+    }
+    if (!this.appraisalPms?.part3Detail.length) {
+      this.data8List = this.data8List.filter(item => item.id !== 3)
+    }
+    if (!this.appraisalPms?.part4Detail.length) {
+      this.data8List = this.data8List.filter(item => item.id !== 4)
+    }
+    if (!this.appraisalPms?.part5Detail.length) {
+      this.data8List = this.data8List.filter(item => item.id !== 5)
+    }
+    if (!this.appraisalPms?.part6Detail.length) {
+      this.data8List = this.data8List.filter(item => item.id !== 6)
+    }
+    if (!this.appraisalPms?.part7Detail.length) {
+      this.data8List = this.data8List.filter(item => item.id !== 7)
+    }
+    this.changePercentage()
+    if (this.appraisalPms) {
+      switch (this.currentStep) {
+        case ("0"): {
+          this.appraisalPms.apsassessyDate = this.dateIso
+          break
+        }
+        case ("1"): {
+          this.appraisalPms.apsapprove1Date = this.dateIso
+          break
+        }
+        case ("2"): {
+          this.appraisalPms.apsapprove2Date = this.dateIso
+          break
+        }
+        case ("3"): {
+          this.appraisalPms.apsapprove3Date = this.dateIso
+          break
         }
+        case ("4"): {
+          this.appraisalPms.apsapprove4Date = this.dateIso
+          break
+        }
+        case ("5"): {
+          this.appraisalPms.apsapprove5Date = this.dateIso
+          break
+        }
+        default: { return }
+      }
+    }
+    this.cdr.detectChanges()
+  }
+
+
   getPmsGroupGradeList() {
     this.groupGrade.loading = true
     this.pmsGroupGradeService.getGradeList().subscribe({
@@ -335,162 +412,7 @@ export class PmsKpiComponent {
     return date?.toLocaleDateString('th-TH', { day: 'numeric', month: 'long', year: 'numeric' }) || ''
   }
 
-  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.appraisalPms?.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;">
-                  <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <rect width="39" height="39" fill="#D2D2D2"/>
-                      <g id="Component">
-                          <g id="alert cart">
-                              <g id="mdi:file-export">
-                                  <circle cx="22.5" cy="19.5" r="33.5" fill="#E8F8EE"/>
-                                  <path d="M9.75 3.25C8.88805 3.25 8.0614 3.59241 7.4519 4.2019C6.84241 4.8114 6.5 5.63805 6.5 6.5V32.5C6.5 33.362 6.84241 34.1886 7.4519 34.7981C8.0614 35.4076 8.88805 35.75 9.75 35.75H29.25C30.112 35.75 30.9386 35.4076 31.5481 34.7981C32.1576 34.1886 32.5 33.362 32.5 32.5V13L22.75 3.25M21.125 5.6875L30.0625 14.625H21.125M14.5113 19.8575H26V31.3463L22.555 27.9013L17.9563 32.5L13.3575 27.9013L17.9563 23.3188" 
-                                  fill="#1DBE5A"/>
-                              </g>
-                          </g>
-                      </g>
-                  </svg>
-              </div>
-              `,
-      title: title,
-      text: text,
-      showCancelButton: true,
-      confirmButtonText: confirmButtonText,
-      cancelButtonText: 'ย้อนกลับ',
-      customClass: {
-        title: '!swal2-title-mt-20px',
-        actions: '!swal2-actions-mt-20px',
-        icon: '!swal2-icon-no-border',
-        confirmButton: '!swal2-button-bg-green',
-        cancelButton: '!swal2-button-bg-gray',
-      },
-    }).then((result) => {
-      if (result.isConfirmed && this.appraisalPms) {
-        this.saveApi(approveStatus)
-      } else if (result.dismiss === Swal.DismissReason.cancel) {
-        Swal.fire({
-          title: 'ยกเลิก!',
-          text: 'การบันทึกถูกยกเลิก',
-          icon: 'error',
-          customClass: {
-            confirmButton: '!swal2-button-bg-danger',
-          }
-        })
-      }
-    })
-  }
-  saveApi(approveStatus: string) {
-    let body = this.appraisalPms
-    switch (this.appraisalPms?.currentStep) {
-      case ("0"): {
-        body = {
-          ...this.appraisalPms,
-          apsassessyStatus: approveStatus
-        }
-        break
-      }
-      case ("1"): {
-        body = {
-          ...this.appraisalPms,
-          apsapprove1Status: approveStatus
-        }
-        break
-      }
-      case ("2"): {
-        body = {
-          ...this.appraisalPms,
-          apsapprove1Status: approveStatus == '0' ? approveStatus : this.appraisalPms.apsapprove1Status,
-          apsapprove2Status: approveStatus
-        }
-        break
-      }
-      case ("3"): {
-        body = {
-          ...this.appraisalPms,
 
-          apsapprove2Status: approveStatus == '0' ? approveStatus : this.appraisalPms.apsapprove2Status,
-          apsapprove3Status: approveStatus
-        }
-        break
-      }
-      case ("4"): {
-        body = {
-          ...this.appraisalPms,
-          apsapprove3Status: approveStatus == '0' ? approveStatus : this.appraisalPms.apsapprove3Status,
-          apsapprove4Status: approveStatus
-        }
-        break
-      }
-      case ("5"): {
-        body = {
-          ...this.appraisalPms,
-          apsapprove4Status: approveStatus == '0' ? approveStatus : this.appraisalPms.apsapprove4Status,
-          apsapprove5Status: approveStatus
-        }
-        break
-      }
-      default: { return }
-    }
-    this.appraisalService.postPms(body).subscribe({
-      next: response => {
-        if (response.success) {
-          Swal.fire({
-            title: 'บันทึกสำเร็จ!',
-            text: 'การประเมินของคุณถูกบันทึกแล้ว',
-            icon: 'success',
-            customClass: {
-              confirmButton: '!swal2-button-bg-green',
-            }
-          });
-        } else {
-          Swal.fire({
-            title: 'ยกเลิก!',
-            text: 'การบันทึกถูกยกเลิก',
-            icon: 'error',
-            customClass: {
-              confirmButton: '!swal2-button-bg-danger',
-            }
-          });
-        }
-      }, error: error => {
-        Swal.fire({
-          title: 'ยกเลิก!',
-          text: 'การบันทึกถูกยกเลิก',
-          icon: 'error',
-          customClass: {
-            confirmButton: '!swal2-button-bg-danger',
-          }
-        });
-      }
-    })
-  }
 
   toggleAllParts(check: boolean) {
     this.part1show = check
@@ -514,4 +436,70 @@ export class PmsKpiComponent {
     });
   }
 
+  part1Remain() {
+    if (this.appraisalPms?.part1Detail.length) {
+      const remain = this.appraisalPms.part1Detail.filter(x =>
+        x.scoreTopicExpectation == null && x.scoreTopicExpectationBoss == null
+      ).length
+      return remain
+    }
+    return 2
+  }
+
+  part2Remain() {
+    if (this.appraisalPms?.part2Detail.length) {
+      const remain = this.appraisalPms.part2Detail.filter(x =>
+        x.scoreTopicExpectation == null && x.scoreTopicExpectationBoss == null
+      ).length
+      return remain
+    }
+    return 0
+  }
+
+  part3Remain() {
+    if (this.appraisalPms?.part3Detail.length) {
+      const remain = this.appraisalPms.part3Detail.filter(x =>
+        x.scoreTopicExpectation == null && x.scoreTopicExpectationBoss == null
+      ).length
+      return remain
+    }
+    return 0
+  }
+
+  part5Remain() {
+    if (this.appraisalPms?.part5Detail.length) {
+      const remain = this.appraisalPms.part5Detail.filter(x =>
+        x.pmsWorkingTimScore == null && x.pmsWorkingTimScoreBoss == null
+      ).length
+      return remain
+    }
+    return 0
+  }
+
+  part6Remain() {
+    if (this.appraisalPms?.part6Detail.length) {
+      const remain = this.appraisalPms.part6Detail.filter(x =>
+        x.scoreTopicExpectation == null && x.scoreTopicExpectationBoss == null
+      ).length
+      return remain
+    }
+    return 0
+  }
+
+  part7Remain() {
+    if (this.appraisalPms?.part7Detail.length) {
+      const remain = this.appraisalPms.part7Detail.filter(x =>
+        x.scoreTopicExpectation == null && x.scoreTopicExpectationBoss == null
+      ).length
+      return remain
+    }
+    return 0
+  }
+
+  allFormRemain() {
+    const remain = [this.part1Remain(), this.part2Remain(), this.part3Remain(), this.part5Remain(), this.part6Remain(), this.part7Remain()].filter(data => data != 0).length
+    this.kpiForm.emit(this.appraisalPms)
+    this.kpiFormRemain.emit(remain)
+  }
+
 }

src/app/components/performance-evaluation/supervisor-evaluation/supervisor-evaluation.component.html

@@ -108,10 +108,7 @@
                                                 <div class="flex justify-center">
                                                     <button type="button" class="ti-btn rounded-sm "
                                                         *ngFor="let type of item.typeList"
-                                                        [class.ti-btn-soft-mute]="type.statusType == 'Not_evaluating_yet'"
-                                                        [class.ti-btn-soft-secondary]="type.statusType == 'Boss'"
-                                                        [class.ti-btn-soft-warning]="type.statusType == 'BossEvaluating'"
-                                                        [class.ti-btn-soft-success]="type.statusType == 'Boss_finish'"
+                                                        [class]="statusButtonClass(item.statusPms.statusType)"
                                                         style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;"
                                                         (click)="selectSubordinate(item,type.competencyTypeId,subordinate.select?.evaluationRoundId);pageEvalution=type.shortName">
                                                         {{type.shortName}}
@@ -121,10 +118,7 @@
                                             <td class="text-center">
                                                 <div class="flex justify-center">
                                                     <button type="button" class="ti-btn rounded-sm"
-                                                        [class.ti-btn-soft-mute]="item.statusIdp.statusType == 'Not_evaluating_yet'"
-                                                        [class.ti-btn-soft-secondary]="item.statusIdp.statusType == 'Boss'"
-                                                        [class.ti-btn-soft-warning]="item.statusIdp.statusType == 'BossEvaluating'"
-                                                        [class.ti-btn-soft-success]="item.statusIdp.statusType == 'Boss_finish'"
+                                                        [class]="statusButtonClass(item.statusPms.statusType)"
                                                         style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;"
                                                         (click)="selectSubordinate(item,'',subordinate.select?.evaluationRoundId,item.statusIdp.statusType);pageEvalution='idp'">
                                                         IDP
@@ -133,11 +127,8 @@
                                             </td>
                                             <td class="text-center" *ngIf="subordinate.select?.showPms">
                                                 <div class="flex justify-center" *ngIf="item.statusPms">
-                                                    <button type="button" class="ti-btn rounded-sm ti-btn-soft-mute"
-                                                        [class.ti-btn-soft-mute]="item.statusPms.statusType == 'Not_evaluating_yet'"
-                                                        [class.ti-btn-soft-secondary]="item.statusPms.statusType == 'Boss'"
-                                                        [class.ti-btn-soft-warning]="item.statusPms.statusType == 'BossEvaluating'"
-                                                        [class.ti-btn-soft-success]="item.statusPms.statusType == 'Boss_finish'"
+                                                    <button type="button" class="ti-btn rounded-sm"
+                                                        [class]="statusButtonClass(item.statusPms.statusType)"
                                                         style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;"
                                                         (click)="selectSubordinate(item,'',subordinate.select?.evaluationRoundId,item.statusPms.statusType);pageEvalution='pms'">
                                                         PMS

src/app/components/performance-evaluation/supervisor-evaluation/supervisor-evaluation.component.ts

@@ -23,7 +23,21 @@ export class SupervisorEvaluationComponent {
     allCompetencyTypeId: <TypeList[]>[],
     masfromStatusType: ""
   }
-
+  statusButtonClass = (status: string) => {
+    if (status === "no access") {
+      return "ti-btn-soft-mute"
+    } else if (status === "pending") {
+      return "ti-btn-soft-secondary"
+    } else if (status === "evaluating") {
+      return "ti-btn-soft-warning"
+    } else if (status === "completed") {
+      return "ti-btn-soft-success"
+    } else if (status === "rejected") {
+      return "ti-btn-soft-danger"
+    } else {
+      return ""
+    }
+  }
   constructor(private appraisalService: AppraisalService,
     private cdr: ChangeDetectorRef) {
   }

src/app/shared/model/competency.model.ts

@@ -3,9 +3,34 @@ export interface CompetencyModel {
   idp: Idp
   pms: Pms
   statusAll: StatusAll
-  evaluationRoundId: string,
-  tdesc: string,
-  edesc: string,
+  evaluationRoundId: string
+  tdesc: string
+  edesc: string
+  apsassessy: ApsEmp
+  apsapprove1: ApsEmp
+  apsapprove2: ApsEmp
+  apsapprove3: ApsEmp
+  apsapprove4: ApsEmp
+  apsapprove5: ApsEmp
+  currentStep: string
+  statusType: string
+  stepReturn: string
+  commentAll: CommentAll[]
+}
+export interface ApsEmp {
+  employeeId: string
+  status: string
+  thFullName: string
+  enFullName: string
+}
+export interface CommentAll {
+  commentDate: string
+  currentStep: string
+  statusType: string
+  comment: string
+  createdBy: string
+  thFullName: string
+  engFullName: string
 }
 
 export interface Competency {

src/app/shared/services/appraisal.service.ts

@@ -19,6 +19,9 @@ export class AppraisalService {
   getCompentencyAll(apsassessy: string, bossId?: string): Observable<CompetencyModel[]> {
     return this.http.get<CompetencyModel[]>(this.urlApi + "/competencyAll/emp?apsassessy=" + apsassessy + (bossId ? "&bossId=" + bossId : ''))
   }
+  postCompentencyAll(body: CompetencyModel): Observable<AlertModel> {
+    return this.http.post<AlertModel>(this.urlApi + "/appraisalcompetencyAll/emp", body)
+  }
   getFormCompentencyById(evaluationRoundId: string, apsassessy: string, typeId: string): Observable<AppraisalCompentencyModel2> {
     return this.http.get<AppraisalCompentencyModel2>(this.urlApi + "/competency/" + evaluationRoundId + "/" + apsassessy + "/" + typeId)
   }

src/assets/css/style.css

@@ -25046,5 +25046,23 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 100%
+  max-width: 100%;
+}
+
+.rounded-circle {
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  overflow: hidden;
+}
+
+.bg-mute {
+  background-color: #cccccc;
+}
+.\!bg-mute {
+  background-color: #cccccc !important;
 }