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

src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.html

@@ -32,14 +32,14 @@
       </div>
       <div class="px-1">
         <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
-          data-hs-overlay="#evaluation-cycle-modal" (click)="modalStatus='add';setData()">
+          data-hs-overlay="#evaluation-cycle-page-modal" (click)="modalStatus='add';setData()">
           <i class="ri-add-line"></i>
           Add
         </button>
       </div>
       <div class="px-1">
         <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
-          data-hs-overlay="#evaluation-cycle-alert-modal" (click)="modalStatus='deleteGroup';setData()">
+          data-hs-overlay="#evaluation-cycle-page-alert-modal" (click)="modalStatus='deleteGroup';setData()">
           <i class="ti ti-trash fs-l"></i>
           Delete
         </button>
@@ -95,7 +95,7 @@
               [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
           </td>
           <td>
-            <!-- <i class="ti ti-user cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-modal" (click)="openModal('evaluation-cycle-modal',item.data.evaluationRoundId)"></i> -->
+            <!-- <i class="ti ti-user cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-person-modal" (click)="openModal('evaluation-cycle-person-modal',item.data.evaluationRoundId)"></i> -->
             <label for="checkbox-{{item.data.evaluationRoundId}}">&nbsp;{{item.data.evaluationRoundId}}</label>
           </td>
           <td>{{item.data.tdesc}}</td>
@@ -136,11 +136,11 @@
           </td>
           <td class="flex justify-center items-center">
             <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)"
-              data-hs-overlay="#evaluation-cycle-modal"></i>
+              data-hs-overlay="#evaluation-cycle-page-modal"></i>
             <i class="ti ti-user cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-person-modal"
               (click)="openModal('evaluation-cycle-person-modal',item.data.evaluationRoundId)"></i>
             <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="modalStatus='delete';setData(item.data)"
-              data-hs-overlay="#evaluation-cycle-alert-modal"></i>
+              data-hs-overlay="#evaluation-cycle-page-alert-modal"></i>
             <!-- <span class="badge text-white m-1" *ngIf="item.data.statusCode.code!='1'"
               [ngClass]="{'bg-primary':item.data.statusCode.code=='1','bg-gray-400':item.data.statusCode.code!='3'}">ปิดรอบประเมิน</span>
             <span class="badge text-white m-1 bg-secondary"  *ngIf="item.data.statusCode.code=='0'">สร้างแบบฟอร์ม</span> -->
@@ -207,7 +207,7 @@
   </nav>
 </div>
 
-<div id="evaluation-cycle-modal" class="hs-overlay hidden ti-modal">
+<div id="evaluation-cycle-page-modal" class="hs-overlay hidden ti-modal">
   <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
     <div class="max-h-full overflow-hidden ti-modal-content">
       <div class="ti-modal-header">
@@ -216,7 +216,7 @@
         </h3>
         <div class="flex justify-end">
           <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-            data-hs-overlay="#evaluation-cycle-modal">
+            data-hs-overlay="#evaluation-cycle-page-modal">
             <span class="sr-only">Close</span>
             <i class="ti ti-circle-x fs-xxl"></i>
           </button>
@@ -298,10 +298,10 @@
         <div class="flex justify-end mt-2rem mb-1rem">
           <button type="button"
             class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
-            data-hs-overlay="#evaluation-cycle-modal">
+            data-hs-overlay="#evaluation-cycle-page-modal">
             ย้อนกลับ
           </button>
-          <button type="button" class="ti-btn ti-btn-success" data-hs-overlay="#evaluation-cycle-alert-modal"
+          <button type="button" class="ti-btn ti-btn-success" data-hs-overlay="#evaluation-cycle-page-alert-modal"
             [class.ti-btn-disabled]="!dataSelect.evaluationRoundId||!dataSelect.tdesc||!dataSelect.apsyear||!dataSelect.apsPeriodStart||!dataSelect.apsPeriodEnd"
             [disabled]="!dataSelect.evaluationRoundId||!dataSelect.tdesc||!dataSelect.apsyear||!dataSelect.apsPeriodStart||!dataSelect.apsPeriodEnd">
             บันทึกข้อมูล
@@ -312,7 +312,7 @@
   </div>
 </div>
 
-<div id="evaluation-cycle-alert-modal" class="hs-overlay hidden ti-modal">
+<div id="evaluation-cycle-page-alert-modal" class="hs-overlay hidden ti-modal">
   <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
     <div class="max-h-full overflow-hidden ti-modal-content w-full">
       <div class="ti-modal-header">
@@ -322,14 +322,14 @@
         <div class="flex justify-end">
           <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
             <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-              data-hs-overlay="#evaluation-cycle-modal">
+              data-hs-overlay="#evaluation-cycle-page-modal">
               <span class="sr-only">Close</span>
               <i class="ti ti-circle-x fs-xxl"></i>
             </button>
           </ng-container>
           <ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
             <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-              data-hs-overlay="#evaluation-cycle-alert-modal">
+              data-hs-overlay="#evaluation-cycle-page-alert-modal">
               <span class="sr-only">Close</span>
               <i class="ti ti-circle-x fs-xxl"></i>
             </button>
@@ -350,22 +350,22 @@
           <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
             <button type="button"
               class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
-              data-hs-overlay="#evaluation-cycle-modal">
+              data-hs-overlay="#evaluation-cycle-page-modal">
               ย้อนกลับ
             </button>
-            <a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#evaluation-cycle-alert-modal"
-              (click)="addevaluation_cycle()">
+            <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+              data-hs-overlay="#evaluation-cycle-page-alert-modal" (click)="addevaluation_cycle()">
               บันทึกข้อมูล
             </a>
           </ng-container>
           <ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
             <button type="button"
               class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
-              data-hs-overlay="#evaluation-cycle-alert-modal">
+              data-hs-overlay="#evaluation-cycle-page-alert-modal">
               ย้อนกลับ
             </button>
-            <a class="ti-btn ti-btn-danger" href="javascript:void(0);" data-hs-overlay="#evaluation-cycle-alert-modal"
-              (click)="deleteevaluation_cycle()">
+            <a class="ti-btn ti-btn-danger" href="javascript:void(0);"
+              data-hs-overlay="#evaluation-cycle-page-alert-modal" (click)="deleteevaluation_cycle()">
               ลบข้อมูล
             </a>
           </ng-container>
@@ -391,8 +391,7 @@
         </div>
       </div>
       <div class="ti-modal-body ">
-        <!-- <app-edit-evaluation-form *ngIf="evaluationRoundId"
-          [evaluationRoundId]="evaluationRoundId"></app-edit-evaluation-form>> -->
+        <!-- <app-edit-evaluation-form *ngIf="evaluationRoundId" [evaluationRoundId]="evaluationRoundId" ></app-edit-evaluation-form> -->
         <app-edit-define-document-form *ngIf="evaluationRoundId"
           [evaluationRoundId]="evaluationRoundId"></app-edit-define-document-form>
       </div>
@@ -402,6 +401,7 @@
 
 
 
+
 <div id="evaluation-cycle-pl-table-modal" class="hs-overlay hidden ti-modal">
   <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
     <div class="max-h-full overflow-hidden ti-modal-content">
@@ -411,7 +411,7 @@
         </h3>
         <div class="flex justify-end">
           <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-            data-hs-overlay="#evaluation-cycle-modal">
+            data-hs-overlay="#evaluation-cycle-page-modal">
             <span class="sr-only">Close</span>
             <i class="ti ti-circle-x fs-xxl"></i>
           </button>
@@ -467,7 +467,7 @@
             <tbody *ngIf="!pl.loading&&plListFilter().length">
               <tr
                 *ngFor="let item of plListFilter() | slice:((modal.currentPage-1) * 10) : (((modal.currentPage-1) * 10) + 10);let i = index"
-                class="cursor-pointer" data-hs-overlay="#evaluation-cycle-modal" (click)="selectPl(item)">
+                class="cursor-pointer" data-hs-overlay="#evaluation-cycle-page-modal" (click)="selectPl(item)">
                 <td class="flex justify-center">
                   {{((modal.currentPage-1) * 10)+(i+1)}}
                 </td>
@@ -519,7 +519,7 @@
         <div class="flex justify-end mt-2rem mb-1rem space-x-4">
           <button type="button"
             class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
-            data-hs-overlay="#evaluation-cycle-modal">
+            data-hs-overlay="#evaluation-cycle-page-modal">
             ย้อนกลับ
           </button>
         </div>

src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.ts

@@ -5,7 +5,12 @@ import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle
 import { MyStatusCodeModel, StatusCodeModel } from 'src/app/shared/model/status-code.model';
 import { EvaluationAssessmentService } from 'src/app/shared/services/evaluation-assessment.service';
 import { PLService } from 'src/app/shared/services/pl.service';
-import { MyPLModel, PLModel } from 'src/app/shared/model/pl.model';
+import { PLModel, MyPLModel } from 'src/app/shared/model/pl.model';
+export interface DataModal {
+  search: string,
+  currentPage: number,
+  page: number[]
+}
 
 export interface DataModel {
   evaluationRoundId: string;
@@ -16,11 +21,7 @@ export interface DataModel {
   apsPeriodEnd: string;
   statusCode: StatusCodeModel;
 }
-export interface DataModal {
-  search: string,
-  currentPage: number,
-  page: number[]
-}
+
 @Component({
   selector: 'app-evaluation-cycle',
   templateUrl: './evaluation-cycle.component.html',
@@ -52,12 +53,13 @@ export class EvaluationCycleComponent {
     page: Array.from({ length: 1 }, (_, i) => i + 1)
   }
   pl: { loading: boolean, selectList: PLModel[], selectIndex: number, dataList: PLModel[] } = { loading: false, selectList: [new MyPLModel()], selectIndex: -1, dataList: [] }
+
+
   constructor(private evaluationCycleService: EvaluationCycleService,
     private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
     private renderer: Renderer2,
     private pLService: PLService
-
   ) { }
 
   ngOnInit(): void {
@@ -250,11 +252,11 @@ export class EvaluationCycleComponent {
     }
   }
 
-
   searchModalChange(dataList: any[]) {
     this.modal.currentPage = 1
     this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
   }
+
 }
 
 

src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.html

@@ -32,14 +32,14 @@
       </div>
       <div class="px-1">
         <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
-          data-hs-overlay="#management-evaluation-cycle-modal" (click)="modalStatus='add';setData()">
+          data-hs-overlay="#management-evaluation-cycle-page-modal" (click)="modalStatus='add';setData()">
           <i class="ri-add-line"></i>
           Add
         </button>
       </div>
       <div class="px-1">
         <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
-          data-hs-overlay="#management-evaluation-cycle-alert-modal" (click)="modalStatus='deleteGroup';setData()">
+          data-hs-overlay="#management-evaluation-cycle-page-alert-modal" (click)="modalStatus='deleteGroup';setData()">
           <i class="ti ti-trash fs-l"></i>
           Delete
         </button>
@@ -136,13 +136,11 @@
           </td>
           <td class="flex justify-center items-center">
             <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)"
-              data-hs-overlay="#management-evaluation-cycle-modal"></i>
-            <i class="ti ti-user cursor-pointer i-gray fs-l px-1"
               data-hs-overlay="#management-evaluation-cycle-page-modal"></i>
             <i class="ti ti-user cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-person-modal"
               (click)="openModal('evaluation-cycle-person-modal',item.data.pmsEvaluationRoundId)"></i>
             <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="modalStatus='delete';setData(item.data)"
-              data-hs-overlay="#management-evaluation-cycle-alert-modal"></i>
+              data-hs-overlay="#management-evaluation-cycle-page-alert-modal"></i>
             <!-- <span class="badge text-white m-1" *ngIf="item.data.statusCode.code!='1'"
               [ngClass]="{'bg-primary':item.data.statusCode.code=='1','bg-gray-400':item.data.statusCode.code!='3'}">ปิดรอบประเมิน</span>
             <span class="badge text-white m-1 bg-secondary"  *ngIf="item.data.statusCode.code=='0'">สร้างแบบฟอร์ม</span> -->
@@ -209,7 +207,7 @@
   </nav>
 </div>
 
-<div id="management-evaluation-cycle-modal" class="hs-overlay hidden ti-modal">
+<div id="management-evaluation-cycle-page-modal" class="hs-overlay hidden ti-modal">
   <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
     <div class="max-h-full overflow-hidden ti-modal-content">
       <div class="ti-modal-header">
@@ -218,7 +216,7 @@
         </h3>
         <div class="flex justify-end">
           <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-            data-hs-overlay="#management-evaluation-cycle-modal">
+            data-hs-overlay="#management-evaluation-cycle-page-modal">
             <span class="sr-only">Close</span>
             <i class="ti ti-circle-x fs-xxl"></i>
           </button>
@@ -300,10 +298,11 @@
         <div class="flex justify-end mt-2rem mb-1rem">
           <button type="button"
             class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
-            data-hs-overlay="#management-evaluation-cycle-modal">
+            data-hs-overlay="#management-evaluation-cycle-page-modal">
             ย้อนกลับ
           </button>
-          <button type="button" class="ti-btn ti-btn-success" data-hs-overlay="#management-evaluation-cycle-alert-modal"
+          <button type="button" class="ti-btn ti-btn-success"
+            data-hs-overlay="#management-evaluation-cycle-page-alert-modal"
             [class.ti-btn-disabled]="!dataSelect.pmsEvaluationRoundId||!dataSelect.tdesc||!dataSelect.apsyear||!dataSelect.apsPeriodStart||!dataSelect.apsPeriodEnd"
             [disabled]="!dataSelect.pmsEvaluationRoundId||!dataSelect.tdesc||!dataSelect.apsyear||!dataSelect.apsPeriodStart||!dataSelect.apsPeriodEnd">
             บันทึกข้อมูล
@@ -314,7 +313,7 @@
   </div>
 </div>
 
-<div id="management-evaluation-cycle-alert-modal" class="hs-overlay hidden ti-modal">
+<div id="management-evaluation-cycle-page-alert-modal" class="hs-overlay hidden ti-modal">
   <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
     <div class="max-h-full overflow-hidden ti-modal-content w-full">
       <div class="ti-modal-header">
@@ -324,14 +323,14 @@
         <div class="flex justify-end">
           <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
             <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-              data-hs-overlay="#management-evaluation-cycle-modal">
+              data-hs-overlay="#management-evaluation-cycle-page-modal">
               <span class="sr-only">Close</span>
               <i class="ti ti-circle-x fs-xxl"></i>
             </button>
           </ng-container>
           <ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
             <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-              data-hs-overlay="#management-evaluation-cycle-alert-modal">
+              data-hs-overlay="#management-evaluation-cycle-page-alert-modal">
               <span class="sr-only">Close</span>
               <i class="ti ti-circle-x fs-xxl"></i>
             </button>
@@ -347,26 +346,27 @@
             ยืนยันการลบข้อมูลหรือไม่
           </ng-container>
         </p>
+
         <div class="flex justify-end mt-2rem mb-1rem">
           <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
             <button type="button"
               class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
-              data-hs-overlay="#management-evaluation-cycle-modal">
+              data-hs-overlay="#management-evaluation-cycle-page-modal">
               ย้อนกลับ
             </button>
             <a class="ti-btn ti-btn-success" href="javascript:void(0);"
-              data-hs-overlay="#management-evaluation-cycle-alert-modal" (click)="addPmsMasfromEvaluation()">
+              data-hs-overlay="#management-evaluation-cycle-page-alert-modal" (click)="addPmsMasfromEvaluation()">
               บันทึกข้อมูล
             </a>
           </ng-container>
           <ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
             <button type="button"
               class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
-              data-hs-overlay="#management-evaluation-cycle-alert-modal">
+              data-hs-overlay="#management-evaluation-cycle-page-alert-modal">
               ย้อนกลับ
             </button>
             <a class="ti-btn ti-btn-danger" href="javascript:void(0);"
-              data-hs-overlay="#management-evaluation-cycle-alert-modal" (click)="deletePmsMasfromEvaluation()">
+              data-hs-overlay="#management-evaluation-cycle-page-alert-modal" (click)="deletePmsMasfromEvaluation()">
               ลบข้อมูล
             </a>
           </ng-container>
@@ -376,25 +376,19 @@
   </div>
 </div>
 
-<div id="management-evaluation-cycle-page-modal" class="hs-overlay hidden ti-modal">
-  <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
-    <div class="max-h-full overflow-hidden ti-modal-content w-full rounded-sm shadow-sm">
-      <div id="evaluation-cycle-person-modal" class="hs-overlay hidden ti-modal">
-        <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out  m-3 lg:!mx-auto " style="min-width: 70%;">
-          <div class="max-h-full overflow-hidden ti-modal-content w-full">
-            <div class="ti-modal-header">
-              <h3 class="text-xxl font-bold text-primary">
-                เเก้ไขเเบบฟอร์มตามรอบการประเมิน
-              </h3>
-              <div class="flex justify-end">
-                <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-                  data-hs-overlay="#management-evaluation-cycle-page-modal" (click)="evaluationRoundId=''">
-                  <span class="sr-only">Close</span>
-                  <i class="ti ti-circle-x fs-xxl"></i>
-                </button>
-              </div>
-            </div>
-          </div>
+<div id="evaluation-cycle-person-modal" class="hs-overlay hidden ti-modal">
+  <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out  m-3 lg:!mx-auto " style="min-width: 70%;">
+    <div class="max-h-full overflow-hidden ti-modal-content w-full">
+      <div class="ti-modal-header">
+        <h3 class="text-xxl font-bold text-primary">
+          เเก้ไขเเบบฟอร์มตามรอบการประเมิน
+        </h3>
+        <div class="flex justify-end">
+          <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" (click)="evaluationRoundId=''"
+            data-hs-overlay="#evaluation-cycle-person-modal">
+            <span class="sr-only">Close</span>
+            <i class="ti ti-circle-x fs-xxl"></i>
+          </button>
         </div>
       </div>
       <div class="ti-modal-body ">
@@ -405,6 +399,10 @@
   </div>
 </div>
 
+
+
+
+
 <div id="management-evaluation-cycle-pl-table-modal" class="hs-overlay hidden ti-modal">
   <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
     <div class="max-h-full overflow-hidden ti-modal-content">
@@ -414,7 +412,7 @@
         </h3>
         <div class="flex justify-end">
           <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-            data-hs-overlay="#management-evaluation-cycle-modal">
+            data-hs-overlay="#management-evaluation-cycle-page-modal">
             <span class="sr-only">Close</span>
             <i class="ti ti-circle-x fs-xxl"></i>
           </button>
@@ -470,7 +468,8 @@
             <tbody *ngIf="!pl.loading&&plListFilter().length">
               <tr
                 *ngFor="let item of plListFilter() | slice:((modal.currentPage-1) * 10) : (((modal.currentPage-1) * 10) + 10);let i = index"
-                class="cursor-pointer" data-hs-overlay="#management-evaluation-cycle-modal" (click)="selectPl(item)">
+                class="cursor-pointer" data-hs-overlay="#management-evaluation-cycle-page-modal"
+                (click)="selectPl(item)">
                 <td class="flex justify-center">
                   {{((modal.currentPage-1) * 10)+(i+1)}}
                 </td>
@@ -522,7 +521,7 @@
         <div class="flex justify-end mt-2rem mb-1rem space-x-4">
           <button type="button"
             class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
-            data-hs-overlay="#management-evaluation-cycle-modal">
+            data-hs-overlay="#management-evaluation-cycle-page-modal">
             ย้อนกลับ
           </button>
         </div>

src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.ts

@@ -9,6 +9,7 @@ export interface DataModal {
     currentPage: number,
     page: number[]
 }
+
 @Component({
     selector: 'app-management-evaluation-cycle',
     templateUrl: './management-evaluation-cycle.component.html',
@@ -31,25 +32,38 @@ export class ManagementCycleComponent {
     isDataListChecked = false
     isDataListCheckedAll = false
     numDataListChecked = 0
+    evaluationRoundId = ''
+    private unlisten!: () => void;
+
     modal: DataModal = {
         search: "",
         currentPage: 1,
         page: Array.from({ length: 1 }, (_, i) => i + 1)
     }
     pl: { loading: boolean, selectList: PLModel[], selectIndex: number, dataList: PLModel[] } = { loading: false, selectList: [new MyPLModel()], selectIndex: -1, dataList: [] }
-    evaluationRoundId = ''
-    private unlisten!: () => void;
+
+
     constructor(private pmsMasfromEvaluationCycleService: PmsMasfromEvaluationCycleService,
         private toastr: ToastrService,
         private cdr: ChangeDetectorRef,
-        private pLService: PLService,
-        private renderer: Renderer2
+        private renderer: Renderer2,
+        private pLService: PLService
     ) { }
 
     ngOnInit(): void {
         this.getPmsMasfromEvaluationCycleList()
+        this.unlisten = this.renderer.listen('document', 'keydown', (event) => {
+            if (event.key === 'Escape') {
+                this.evaluationRoundId = ''
+            }
+        });
         this.getPlList()
     }
+    ngOnDestroy() {
+        if (this.unlisten) {
+            this.unlisten(); // เรียกใช้งานจริง ๆ เพื่อลบ event listener
+        }
+    }
 
     getPlList() {
         this.pl.loading = false
@@ -83,13 +97,9 @@ export class ManagementCycleComponent {
         if (this.pl.selectIndex === this.pl.selectList.length - 1) {
             this.pl.selectList.push(new MyPLModel());
         }
-        this.unlisten = this.renderer.listen('document', 'keydown', (event) => {
-            if (event.key === 'Escape') {
-                this.evaluationRoundId = ''
-            }
-        });
     }
 
+
     getPmsMasfromEvaluationCycleList() {
         this.dataLoading = true
         this.pmsMasfromEvaluationCycleService.getList().subscribe({
@@ -201,11 +211,6 @@ export class ManagementCycleComponent {
         this.pl.selectList = [new MyPLModel()]
     }
 
-    searchModalChange(dataList: any[]) {
-        this.modal.currentPage = 1
-        this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
-    }
-
     openModal(id: string, evaluationRoundId: string) {
         this.evaluationRoundId = ''
         if (id == 'evaluation-cycle-person-modal') {
@@ -218,6 +223,11 @@ export class ManagementCycleComponent {
             }, 10);
         }
     }
+
+    searchModalChange(dataList: any[]) {
+        this.modal.currentPage = 1
+        this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
+    }
 }