Merge branch 'DEV' of https://mygit.myhr.co.th/angular/myAppraisal into DEV

# Conflicts:
#	src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.html
#	src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.html
#	src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.ts

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

@@ -315,6 +315,6 @@
 </div>
 
 <ng-container  *ngIf="showFrom" >
-    <app-edit-define-document-form [evaluationRound]="evaluationRound" (showFrom)="showFrom=$event"></app-edit-define-document-form>
+    <!-- <app-edit-define-document-form [evaluationRound]="evaluationRound" (showFrom)="showFrom=$event"></app-edit-define-document-form> -->
 </ng-container>
 

src/app/components/competency-assessment/evaluation-cycle-manager/define-document-form/edit-define-document-form/edit-define-document-form.component.scss

@@ -101,7 +101,8 @@ a.custom-link {
 }
 
 .ti-modal {
-  overflow: auto;
+  overflow: hidden;
+  overflow-y: auto;
 }
 .header-title-type {
   width: 100%;
@@ -115,4 +116,31 @@ a.custom-link {
 }
 .bg-input-readonly{
   background-color:  rgb(241 245 249);
-}
+}
\ No newline at end of file
+.body-content{
+  overflow-y: auto;
+}
+.body-content-table{
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+.ti-switch:checked {
+  background-color: #28a745; /* เปลี่ยนสีพื้นหลังเป็นสีเขียว */
+}
+td span {
+display: inline-block; /*span มีลักษณะเป็นกรอบ */
+padding: 5px 10px;
+border: 1px solid black;
+border-radius: 10px;
+background-color: #f9f9f9;
+width: 80px;
+height: 40px;
+}
+.ti-modal-content{
+width: 35%;  /* ความกว้างที่คุณต้องการ */
+position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
+top: 50%;  /* ให้อยู่กลางในแนวตั้ง */
+left: 50%;  /* ให้อยู่กลางในแนวนอน */
+transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
+background-color: #ffffff;
+}

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

@@ -391,8 +391,10 @@
         </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>
     </div>
   </div>
@@ -465,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-modal" (click)="selectPl(item)">
                 <td class="flex justify-center">
                   {{((modal.currentPage-1) * 10)+(i+1)}}
                 </td>

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

 import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
 import { AppraisalRoundModel, MyAppraisalRoundModel } from 'src/app/shared/model/appraisal-aps.model';
-import { AppraisalFormModel } from 'src/app/shared/model/appraisal-form.model';
 import { AppraisalModel, MyAppraisalModel } from 'src/app/shared/model/appraisal.model';
 import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/model/evaluation-cycle.model';
 import { EvaluationModal } from 'src/app/shared/model/evaluation-form.modal';

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

@@ -139,6 +139,8 @@
               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>
             <!-- <span class="badge text-white m-1" *ngIf="item.data.statusCode.code!='1'"
@@ -301,8 +303,7 @@
             data-hs-overlay="#management-evaluation-cycle-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-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">
             บันทึกข้อมูล
@@ -346,7 +347,6 @@
             ยืนยันการลบข้อมูลหรือไม่
           </ng-container>
         </p>
-
         <div class="flex justify-end mt-2rem mb-1rem">
           <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
             <button type="button"
@@ -379,20 +379,27 @@
 <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 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">
-            <span class="sr-only">Close</span>
-            <i class="ti ti-circle-x fs-xxl"></i>
-          </button>
+      <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>
       </div>
       <div class="ti-modal-body ">
-        <app-edit-evaluation-form></app-edit-evaluation-form>
+        <app-edit-evaluation-form *ngIf="evaluationRoundId"
+          [evaluationRoundId]="evaluationRoundId"></app-edit-evaluation-form>
       </div>
     </div>
   </div>
@@ -463,7 +470,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="#management-evaluation-cycle-modal" (click)="selectPl(item)" >
+                class="cursor-pointer" data-hs-overlay="#management-evaluation-cycle-modal" (click)="selectPl(item)">
                 <td class="flex justify-center">
                   {{((modal.currentPage-1) * 10)+(i+1)}}
                 </td>

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

-import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output, Renderer2 } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
 import { PLModel, MyPLModel } from 'src/app/shared/model/pl.model';
 import { MyPmsMasfromEvaluationModel, PmsMasfromEvaluationModel } from 'src/app/shared/model/pms-masfrom-evaluation.model';
@@ -15,6 +15,7 @@ export interface DataModal {
     styleUrls: ['./management-evaluation-cycle.component.scss']
 })
 export class ManagementCycleComponent {
+    @Output() evaluationRoundIdChange = new EventEmitter<string>();
     apsPeriodStart: string = '';
     apsPeriodEnd: string = '';
 
@@ -30,18 +31,19 @@ export class ManagementCycleComponent {
     isDataListChecked = false
     isDataListCheckedAll = false
     numDataListChecked = 0
-
     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 pLService: PLService,
+        private renderer: Renderer2
     ) { }
 
     ngOnInit(): void {
@@ -81,6 +83,11 @@ 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() {
@@ -198,6 +205,19 @@ export class ManagementCycleComponent {
         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') {
+            this.evaluationRoundId = evaluationRoundId
+            this.evaluationRoundIdChange.emit(evaluationRoundId)
+            setTimeout(() => {
+                document.getElementById(id)?.classList.add('open');
+                document.getElementById(id)?.classList.remove('hidden');
+                document.getElementById(id)?.setAttribute('aria-overlay', 'false');
+            }, 10);
+        }
+    }
 }