ย้าย เมนูใหม่ จัดการรอบการประเมิน

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

@@ -366,7 +366,8 @@
         </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>

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

@@ -137,8 +137,7 @@
           <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-page-modal"></i>
-            <i class="ti ti-user cursor-pointer i-gray fs-l px-1"
-              data-hs-overlay="#management-evaluation-cycle-person-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-page-alert-modal"></i>
             <!-- <span class="badge text-white m-1" *ngIf="item.data.statusCode.code!='1'"
@@ -352,23 +351,23 @@
   </div>
 </div>
 
-<div id="management-evaluation-cycle-person-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-person-modal">
+          <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 ">
-        <app-edit-evaluation-form></app-edit-evaluation-form>
+        <app-edit-evaluation-form *ngIf="evaluationRoundId" [evaluationRoundId]="evaluationRoundId" ></app-edit-evaluation-form>
       </div>
     </div>
   </div>

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 { MyPmsMasfromEvaluationModel, PmsMasfromEvaluationModel } from 'src/app/shared/model/pms-masfrom-evaluation.model';
 import { PmsMasfromEvaluationCycleService } from 'src/app/shared/services/pms-masfrom-evaluation.service';
@@ -9,6 +9,7 @@ import { PmsMasfromEvaluationCycleService } from 'src/app/shared/services/pms-ma
     styleUrls: ['./management-evaluation-cycle.component.scss']
 })
 export class ManagementCycleComponent {
+    @Output() evaluationRoundIdChange = new EventEmitter<string>();
     apsPeriodStart: string = '';
     apsPeriodEnd: string = '';
 
@@ -24,14 +25,21 @@ export class ManagementCycleComponent {
     isDataListChecked = false
     isDataListCheckedAll = false
     numDataListChecked = 0
-
+    evaluationRoundId = ''
+    private unlisten!: () => void;
     constructor(private pmsMasfromEvaluationCycleService: PmsMasfromEvaluationCycleService,
         private toastr: ToastrService,
-        private cdr: ChangeDetectorRef
+        private cdr: ChangeDetectorRef,
+        private renderer: Renderer2
     ) { }
 
     ngOnInit(): void {
         this.getPmsMasfromEvaluationCycleList()
+        this.unlisten = this.renderer.listen('document', 'keydown', (event) => {
+            if (event.key === 'Escape') {
+                this.evaluationRoundId=''
+            }
+          });
     }
 
     getPmsMasfromEvaluationCycleList() {
@@ -143,6 +151,19 @@ export class ManagementCycleComponent {
             this.setData(new MyPmsMasfromEvaluationModel({ pmsEvaluationRoundId: this.dataSelect.pmsEvaluationRoundId }))
         }
     }
+
+    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);
+        }
+      }
 }