UPDATE เปลี่ยน modal จัดรอบการประเมินใหม่

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

-import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { ToastrService } from 'ngx-toastr';
 import { AppraisalRoundModel, MyAppraisalRoundModel } from 'src/app/shared/model/appraisal-aps.model';
 import { AppraisalModel, MyAppraisalModel } from 'src/app/shared/model/appraisal.model';
@@ -6,7 +7,7 @@ import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/mod
 import { EvaluationModal } from 'src/app/shared/model/evaluation-form.modal';
 import { EvaluationAssessmentService } from 'src/app/shared/services/evaluation-assessment.service';
 import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service';
-
+import Swal from 'sweetalert2';
 @Component({
   selector: 'app-edit-define-document-form',
   templateUrl: './edit-define-document-form.component.html',
@@ -14,6 +15,8 @@ import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle
 })
 
 export class EditDefineDocumentFormComponent {
+  @ViewChild("evaluationFormEmpModal") evaluationFormEmpModal: any;
+  @ViewChild("IndicatorsEmpModal") IndicatorsEmpModal: any;
   @Input() pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'รอบการประเมิน', 'กำหนดฟอร์มเอกสาร', 'เเก้ไขฟอร์มตามรอบการประเมิน'];
   @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
   @Output() sendGroupShow: EventEmitter<string> = new EventEmitter<string>();
@@ -25,7 +28,7 @@ export class EditDefineDocumentFormComponent {
   search = ""
 
   assessmentList: AppraisalModel[] = []
-
+  loadingAssessmentList = false
   evaluationRound: EvaluationCycleModel = new MyEvaluationCycleModel()
 
   isChecked: boolean = false;
@@ -57,10 +60,12 @@ export class EditDefineDocumentFormComponent {
   pageIndicator = Array.from({ length: 1 }, (_, i) => i + 1);
   pageSizeIndicator = 10
   competencyTopicIds: string[] = []
+  dialogRef:any
   constructor(private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
     private evaluationAssessmentService: EvaluationAssessmentService,
-    private evaluationCycleService: EvaluationCycleService
+    private evaluationCycleService: EvaluationCycleService,
+    private dialog: MatDialog
   ) {
 
   }
@@ -93,10 +98,12 @@ export class EditDefineDocumentFormComponent {
 
   }
   getAssessmentList() {
+    this.loadingAssessmentList = true
     this.evaluationAssessmentService.getById(this.evaluationRoundId!).subscribe({
       next: response => {
         this.assessmentList = response
         this.searchChange()
+        this.loadingAssessmentList = false
         this.cdr.detectChanges();
       },
       error: err => {
@@ -121,11 +128,11 @@ export class EditDefineDocumentFormComponent {
   }
 
 
-  saveAssessmentOne(item:AppraisalModel) {
+  saveAssessmentOne(item: AppraisalModel) {
     this.evaluationAssessmentService.post(item).subscribe({
       next: response => {
         if (response.success) {
-            this.showAlert(response.message, 'success')
+          this.showAlertToastr(response.message, 'success')
         } else {
         }
       }
@@ -157,6 +164,17 @@ export class EditDefineDocumentFormComponent {
       if (this.empassessmentList) {
         this.empassessmentList.masfromTopic = this.empassessmentRoundListCheckbox.map(x => x.item) as any;
       }
+      Swal.fire({
+        icon: 'question',
+        title: 'แจ้งเตือน',
+        text: 'ยืนยันการบันทึกข้อมูลหรือไม่',
+        showCancelButton: true,
+        confirmButtonText: 'บันทึกข้อมูล',
+        cancelButtonText: 'ย้อนกลับ',
+        reverseButtons: true,
+      }).then((result) => {
+        console.log("🚀 ~ EditDefineDocumentFormComponent ~ saveIndicators ~ result:", result)
+        if (result.isConfirmed) {
           this.evaluationAssessmentService.postList([this.empassessmentList]).subscribe({
             next: response => {
               if (response.success) {
@@ -164,12 +182,17 @@ export class EditDefineDocumentFormComponent {
                 this.getApsassessy();
                 this.getApsassessyMini();
                 this.cdr.detectChanges();
+                // this.closeDialog();
               }
             }, error: err => {
               console.error('Error fetching evaluation cycles:', err);
             }
           })
-    }else {
+        } 
+      });
+
+
+    } else {
       this.showAlert('กรุณาเลือกรายการ', 'error');
     }
   }
@@ -297,17 +320,34 @@ export class EditDefineDocumentFormComponent {
     const filteredData = this.filterIndicators();
     this.pageIndicator = Array.from({ length: Math.ceil(filteredData.length / this.pageSizeIndicator) }, (_, i) => i + 1);
   }
+  openModalIndicators() {
+    const modalRef = this.dialog.open(this.IndicatorsEmpModal, {
+      width: '60vw',
+      enterAnimationDuration: '300ms', // ระยะเวลาการเปิด
+      exitAnimationDuration: '150ms',  // ระยะเวลาการปิด
+      disableClose: false,
+    });
+  }
   addIndicators(item: AppraisalRoundModel) {
     this.empassessmentRoundListCheckbox.push({ checkbox: false, item })
     this.competencyTopicIds.push(item.groupAssessment1?.competencyIndicatorsCourses1Mini?.competencyIndicatorsCourses0?.competencyTopic?.competencyTopicId)
     this.indicatorChange();
-    this.closeModalClass('form-assessment')
   }
 
   //############################# ปิด Modal Indicators #############################
 
 
   showAlert(text: string, type: 'success' | 'error') {
+    Swal.fire({
+      title: 'แจ้งเตือน',
+      text: text,
+      icon: type,
+      confirmButtonText: 'ตกลง',
+    });
+
+   
+  }
+    showAlertToastr(text: string, type: 'success' | 'error') {
     this.toastr[type](text, 'แจ้งเตือน', {
       timeOut: 3000,
       positionClass: 'toast-top-right',
@@ -315,22 +355,22 @@ export class EditDefineDocumentFormComponent {
   }
 
   openModalClass(id: string, type?: string) {
-    this.typeForm = type ?? ""
-    if (id == 'modal-alert') {
-      if (type == 'deleteForm') {
-        this.msg = 'ยืนยันการลบรายการ'
-      } else if (type == 'addForm' || type == 'addIndicator') {
-        this.msg = 'ยืนยันการบันทึกรายการ'
-      }
-    }
-    if (id) {
-      document.getElementById(id)?.classList.add('open');
-      document.getElementById(id)?.classList.remove('hidden');
-      setTimeout(() => {
-        document.getElementById(id)?.setAttribute('aria-overlay', 'false')
+    // this.typeForm = type ?? ""
+    // if (id == 'modal-alert') {
+    //   if (type == 'deleteForm') {
+    //     this.msg = 'ยืนยันการลบรายการ'
+    //   } else if (type == 'addForm' || type == 'addIndicator') {
+    //     this.msg = 'ยืนยันการบันทึกรายการ'
+    //   }
+    // }
+    // if (id) {
+    //   document.getElementById(id)?.classList.add('open');
+    //   document.getElementById(id)?.classList.remove('hidden');
+    //   setTimeout(() => {
+    //     document.getElementById(id)?.setAttribute('aria-overlay', 'false')
 
-      }, 10);
-    }
+    //   }, 10);
+    // }
 
     this.isChecked = false;
     this.numDataListChecked = 0;
@@ -345,6 +385,13 @@ export class EditDefineDocumentFormComponent {
 
 
   openAddRoundModel(evaluationRoundId: string, apsassessy: string, item: AppraisalModel, model: string) {
+    this.dialogRef = this.dialog.open(this.evaluationFormEmpModal, {
+      width: '80vw',
+      disableClose: false,
+      enterAnimationDuration: '300ms', // ระยะเวลาการเปิด
+      exitAnimationDuration: '150ms',  // ระยะเวลาการปิด
+    });
+
     this.searchIndicator = ""
     this.selectEmp = item
     this.openModalClass(model);
@@ -355,7 +402,9 @@ export class EditDefineDocumentFormComponent {
 
   }
 
-
+  closeDialog() {
+    this.dialogRef.close()
+  }
 
 
 

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

@@ -139,8 +139,7 @@
               (click)="modalStatus='edit';modalStatusEdit=(item.data.statusFrom.code== '0'?true:false);setData(item.data)"
               data-hs-overlay="#evaluation-cycle-page-modal"></i>
             <i class="ti ti-user cursor-pointer i-gray fs-l px-1" *ngIf="item.data.statusFrom.code =='1'"
-              data-hs-overlay="#evaluation-cycle-person-modal"
-              (click)="openModal('evaluation-cycle-person-modal',item.data.evaluationRoundId)"></i>
+              (click)="openModal(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-page-alert-modal"></i> -->
             <!-- <span class="badge text-white m-1" *ngIf="item.data.statusCode.code!='1'"
@@ -439,6 +438,22 @@
   </div>
 </div>
 
+<ng-template #evaluationRoundModal let-modal>
+  <h3 mat-dialog-title>
+            เเก้ไขเเบบฟอร์มตามรอบการประเมิน
+  </h3>
+  <mat-dialog-content >
+    <app-edit-define-document-form *ngIf="evaluationRoundId"
+    [evaluationRoundId]="evaluationRoundId"></app-edit-define-document-form>
+  </mat-dialog-content>
+  <mat-dialog-actions align="end">
+      <button type="button"  mat-button [mat-dialog-close]
+      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">
+      ย้อนกลับ
+  </button>
+  </mat-dialog-actions>
+</ng-template>
+
 <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">

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

+.dialog-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
\ No newline at end of file

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

-import { ChangeDetectorRef, Component, EventEmitter, Output, Renderer2 } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Output, Renderer2, ViewChild } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
 import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/model/evaluation-cycle.model';
 import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service';
@@ -6,6 +6,7 @@ import { MyStatusCodeModel, StatusCodeModel } from 'src/app/shared/model/status-
 import { EvaluationAssessmentService } from 'src/app/shared/services/evaluation-assessment.service';
 import { PLService } from 'src/app/shared/services/pl.service';
 import { PLModel, MyPLModel } from 'src/app/shared/model/pl.model';
+import { MatDialog } from '@angular/material/dialog';
 export interface DataModal {
   search: string,
   currentPage: number,
@@ -18,6 +19,7 @@ export interface DataModal {
 })
 export class EvaluationCycleComponent {
   @Output() evaluationRoundIdChange = new EventEmitter<string>();
+  @ViewChild("evaluationRoundModal") evaluationRoundModal: any;
   apsPeriodStart: string = '';
   apsPeriodEnd: string = '';
 
@@ -48,11 +50,13 @@ export class EvaluationCycleComponent {
     (this.currentDate.getFullYear() + 1) + "",
   ]
   modalStatusEdit = false
+  dialogFormRef: any
   constructor(private evaluationCycleService: EvaluationCycleService,
     private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
     private renderer: Renderer2,
-    private pLService: PLService
+    private pLService: PLService,
+     private dialog: MatDialog
   ) { }
 
   ngOnInit(): void {
@@ -60,6 +64,7 @@ export class EvaluationCycleComponent {
     this.unlisten = this.renderer.listen('document', 'keydown', (event) => {
       if (event.key === 'Escape') {
         this.evaluationRoundId = ''
+        this.dialogFormRef.close();
       }
     });
     this.getPlList()
@@ -214,17 +219,26 @@ export class EvaluationCycleComponent {
     }
   }
 
-  openModal(id: string, evaluationRoundId: string) {
+  openModal(evaluationRoundId: string) {
     this.evaluationRoundId = ''
-    if (id == 'evaluation-cycle-person-modal') {
+    this.dialogFormRef = this.dialog.open(this.evaluationRoundModal, {
+      width: '80vw', 
+      disableClose: true,
+      enterAnimationDuration: '300ms', // ระยะเวลาการเปิด
+      exitAnimationDuration: '150ms',  // ระยะเวลาการปิด
+    });
     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);
-    }
+
+    // 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);
+    // }
   }
 
   searchModalChange(dataList: any[]) {