แก้ปุ่ม PDF

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

@@ -617,7 +617,7 @@
                   <app-pms-idp [currentTap]="currentTap" [canSave]="canSave" [appraisalIdp]="compentency.data.idp"
                     [evaluaterId]="evaluaterId" [evaluateeId]="evaluateeId"
                     [canEdit]="evaluationForm=='sup'?canEdit:false" [currentStep]="compentency.data.currentStep"
-                    [dateIso]="dateIso" (idpForm)="compentency.data.idp=$event" [complete]="complete"   [pdfPrint]="pdfPrint" (pdfPrinted)="onPdfPrinted()"></app-pms-idp>
+                    [dateIso]="dateIso" (idpForm)="compentency.data.idp=$event" [complete]="complete"></app-pms-idp>
                 </div>
                 <ng-container *ngIf="compentency.data&&canSave">
                   <div class="box-footer text-end space-x-3 rtl:space-x-reverse"
@@ -626,11 +626,11 @@
                       <textarea type="text" class="ti-form-input" rows="2" placeholder="ใส่ Comment ที่นี่"
                         [(ngModel)]="comment"></textarea>
                     </div>
-                    <button (click)="toggleStatusPdfPrint()" class="ti-btn m-0 ti-btn-soft-warning"
+                    <!-- <button (click)="toggleStatusPdfPrint()" class="ti-btn m-0 ti-btn-soft-warning"
                       *ngIf="currentTap == 'แผนพัฒนาบุคลากร'">
                       <i class="ri-draft-fill"></i>
                       PDF
-                    </button>
+                    </button> -->
                     <button (click)="save('approve')" class="ti-btn m-0 ti-btn-soft-secondary"
                       [disabled]="compentencyFormRemain||kpiFormRemain"
                       [class.ti-btn-disabled]="compentencyFormRemain||kpiFormRemain">

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

@@ -74,7 +74,6 @@ export class PmsFormEmployeeComponent {
 
   complete = false
   @ViewChild('scrollContainer') scrollContainer!: ElementRef;
-  pdfPrint = false;
 
   constructor(
     private router: Router,
@@ -760,13 +759,4 @@ export class PmsFormEmployeeComponent {
     imgElement.src = './assets/img/users/defaultperson.jpg';
   }
 
-toggleStatusPdfPrint() {
-  this.pdfPrint = !this.pdfPrint; // สลับ true/false เพื่อให้ Child จับการเปลี่ยน
-}
-
-onPdfPrinted() {
-  // เมื่อ Child แจ้งว่าพิมพ์เสร็จ ให้รีเซ็ตกลับเป็น false
-  this.pdfPrint = false;
-}
-
 }

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

@@ -2,10 +2,26 @@
 <ng-template #idpEvaluation>
     <ng-container *ngIf="appraisalIdp">
         <div style="overflow-y: auto; padding-top: 1rem"  #pdfArea class="pdf-container">
-            <div class="pb-2">
+
+          <!-- <ng-container *ngIf="pdfPrintCheck === 1">
+            <div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1"
+                                            role="status" aria-label="loading">
+                                            <span class="sr-only">Loading...</span>
+                                        </div>
+          </ng-container> -->
+
+          <ng-container>
+            <div class="pb-2 flex justify-between items-center">
                 <div class="font-size-18px font-weight-700 text-gray-500">
                     ส่วนที่ 1: ข้อมูลทั่วไป
                 </div>
+                <!-- <button class="ti-btn m-0 ti-btn-soft-warning" *ngIf="pdfPrintCheck == 0" (click)="exportPdf()" >
+                  <i class="ri-draft-fill"></i>
+                  PDF
+                </button> -->
+                <button class="ti-btn m-0 ti-btn-soft-warning" data-html2canvas-ignore="true" data-hide-in-pdf (click)="exportPdf()">
+                  <i class="ri-draft-fill"></i> PDF
+                </button>
             </div>
             <div class="pt-2 pb-2rem">
                 <div class="flex flex-row gap-2 ">
@@ -344,7 +360,7 @@
                                         </ng-container>
                                         </ng-container>
 
-                                        <ng-container *ngIf="pdfPrintCheck == 1">
+                                        <ng-container *ngIf="pdfPrintCheck != 0">
                                           {{convertDateFormat(appraisalIdp.masfromEvaluationRound.apsPeriodStart)}}
                                             <ng-container
                                                 *ngIf="appraisalIdp.masfromEvaluationRound.apsPeriodStart &&appraisalIdp.masfromEvaluationRound.apsPeriodEnd">
@@ -361,6 +377,9 @@
                     </table>
                 </div>
             </div>
+          </ng-container>
+
+
         </div>
     </ng-container>
 </ng-template>

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

@@ -37,7 +37,7 @@ export class PmsIdpComponent {
   @Output() idpForm: EventEmitter<any> = new EventEmitter<any>();
   @Input() pdfPrint = false;
   @Output() pdfPrinted = new EventEmitter<void>();
-  pdfPrintCheck = 0
+  pdfPrintCheck: 0 | 1 = 0
   @ViewChild('pdfArea') pdfArea!: ElementRef<HTMLElement>;
 
   competencycourse: { loading: boolean, data: CompetencycourseMiniModel[] } = { loading: false, data: [] }
@@ -48,6 +48,7 @@ export class PmsIdpComponent {
     pageSize: 10
   }
   competencycourseIndex = -1
+  pdfLoading = true
   @ViewChild("competencycourseModal") competencycourseModal: any;
   dialogRefCompetencycourseModal: any
   constructor(private evaluationIdpService: EvaluationIdpService,
@@ -62,17 +63,6 @@ export class PmsIdpComponent {
     this.getCompetencycourseMiniList()
   }
   ngOnChanges(changes: SimpleChanges): void {
-        if (changes['pdfPrint']) {
-      const { previousValue, currentValue } = changes['pdfPrint'];
-      console.log('pdfPrint changed:', previousValue, '→', currentValue);
-
-      // สั่งพิมพ์เฉพาะตอนเป็น true
-      if (currentValue === true) {
-        this.pdfPrintCheck = 1
-        this.exportPdf();
-        this.pdfPrinted.emit(); // แจ้ง Parent ให้รีเซ็ต flag
-      }
-    }
     if (changes['currentTap']?.currentValue || changes['appraisalIdp']?.currentValue) {
       this.getFormIdp()
     }
@@ -189,163 +179,167 @@ export class PmsIdpComponent {
   }
 
   print() {
-  window.print();
-}
+    window.print();
+  }
 
-/** ล็อคความกว้างเทียบ A4 (≈794px @96dpi) ให้ layout เสถียรตอนแคปเจอร์ */
-private freezeWidthForA4(el: HTMLElement) {
-  const prev = {
-    width: el.style.width,
-    maxWidth: el.style.maxWidth,
-    transform: el.style.transform,
-    transformOrigin: el.style.transformOrigin,
-  };
-  el.style.width = '794px';
-  el.style.maxWidth = '794px';
-  el.style.transformOrigin = 'top left';
-  el.style.transform = 'scale(1)';
+  /** ล็อคความกว้างเทียบ A4 (≈794px @96dpi) ให้ layout เสถียรตอนแคปเจอร์ */
+  private freezeWidthForA4(el: HTMLElement) {
+    const prev = {
+      width: el.style.width,
+      maxWidth: el.style.maxWidth,
+      transform: el.style.transform,
+      transformOrigin: el.style.transformOrigin,
+    };
+    el.style.width = '794px';
+    el.style.maxWidth = '794px';
+    el.style.transformOrigin = 'top left';
+    el.style.transform = 'scale(1)';
 
-  return () => {
-    el.style.width = prev.width;
-    el.style.maxWidth = prev.maxWidth;
-    el.style.transform = prev.transform;
-    el.style.transformOrigin = prev.transformOrigin;
-  };
-}
+    return () => {
+      el.style.width = prev.width;
+      el.style.maxWidth = prev.maxWidth;
+      el.style.transform = prev.transform;
+      el.style.transformOrigin = prev.transformOrigin;
+    };
+  }
 
-/** ขยายเป็นความกว้างจริง (scrollWidth) แล้วสเกลลงให้พอดี A4 */
-private expandToFullWidthThenScale(el: HTMLElement) {
-  const A4_PX = 794; // ≈ 210mm @ 96dpi
-  const full = el.scrollWidth;               // ความกว้างจริงทั้งหมด (รวมพื้นที่ต้องเลื่อนขวา)
-  const scale = Math.min(1, A4_PX / full);   // สเกลลงให้พอดี A4 (ถ้ากว้างกว่า)
+  /** ขยายเป็นความกว้างจริง (scrollWidth) แล้วสเกลลงให้พอดี A4 */
+  private expandToFullWidthThenScale(el: HTMLElement) {
+    const A4_PX = 794; // ≈ 210mm @ 96dpi
+    const full = el.scrollWidth;               // ความกว้างจริงทั้งหมด (รวมพื้นที่ต้องเลื่อนขวา)
+    const scale = Math.min(1, A4_PX / full);   // สเกลลงให้พอดี A4 (ถ้ากว้างกว่า)
 
-  // เก็บค่าเดิมไว้คืนทีหลัง
-  const prev = {
-    width: el.style.width,
-    maxWidth: el.style.maxWidth,
-    overflowX: el.style.overflowX,
-    transform: el.style.transform,
-    transformOrigin: el.style.transformOrigin,
-  };
+    // เก็บค่าเดิมไว้คืนทีหลัง
+    const prev = {
+      width: el.style.width,
+      maxWidth: el.style.maxWidth,
+      overflowX: el.style.overflowX,
+      transform: el.style.transform,
+      transformOrigin: el.style.transformOrigin,
+    };
 
-  // คลี่ความกว้างออกทั้งหมด แล้วสเกลให้พอดี A4
-  el.style.width = `${full}px`;
-  el.style.maxWidth = 'none';
-  el.style.overflowX = 'visible';
-  el.style.transformOrigin = 'top left';
-  el.style.transform = `scale(${scale})`;
+    // คลี่ความกว้างออกทั้งหมด แล้วสเกลให้พอดี A4
+    el.style.width = `${full}px`;
+    el.style.maxWidth = 'none';
+    el.style.overflowX = 'visible';
+    el.style.transformOrigin = 'top left';
+    el.style.transform = `scale(${scale})`;
 
-  // คืนค่า
-  return () => {
-    el.style.width = prev.width;
-    el.style.maxWidth = prev.maxWidth;
-    el.style.overflowX = prev.overflowX;
-    el.style.transform = prev.transform;
-    el.style.transformOrigin = prev.transformOrigin;
-  };
-}
+    // คืนค่า
+    return () => {
+      el.style.width = prev.width;
+      el.style.maxWidth = prev.maxWidth;
+      el.style.overflowX = prev.overflowX;
+      el.style.transform = prev.transform;
+      el.style.transformOrigin = prev.transformOrigin;
+    };
+  }
 
-/** ทำให้ทุกกล่องใน subtree ไม่ตัดขอบขวา: overflowX => visible, ยกเลิก position:sticky ชั่วคราว */
-private unclipOverflows(el: HTMLElement) {
-  const patched: Array<{node: HTMLElement, prev: Partial<CSSStyleDeclaration>}> = [];
-  const walker = document.createTreeWalker(el, NodeFilter.SHOW_ELEMENT);
+  /** ทำให้ทุกกล่องใน subtree ไม่ตัดขอบขวา: overflowX => visible, ยกเลิก position:sticky ชั่วคราว */
+  private unclipOverflows(el: HTMLElement) {
+    const patched: Array<{ node: HTMLElement, prev: Partial<CSSStyleDeclaration> }> = [];
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_ELEMENT);
 
-  const patchNode = (node: HTMLElement) => {
-    const style = window.getComputedStyle(node);
-    const needOverflowPatch = style.overflowX !== 'visible' || style.overflow !== 'visible';
-    const isSticky = style.position === 'sticky';
+    const patchNode = (node: HTMLElement) => {
+      const style = window.getComputedStyle(node);
+      const needOverflowPatch = style.overflowX !== 'visible' || style.overflow !== 'visible';
+      const isSticky = style.position === 'sticky';
 
-    if (needOverflowPatch || isSticky) {
-      const prev = {
-        overflow: node.style.overflow,
-        overflowX: node.style.overflowX,
-        overflowY: node.style.overflowY,
-        position: node.style.position,
-        clipPath: (node.style as any).clipPath,
-      };
-      patched.push({ node, prev });
+      if (needOverflowPatch || isSticky) {
+        const prev = {
+          overflow: node.style.overflow,
+          overflowX: node.style.overflowX,
+          overflowY: node.style.overflowY,
+          position: node.style.position,
+          clipPath: (node.style as any).clipPath,
+        };
+        patched.push({ node, prev });
 
-      node.style.overflow = 'visible';
-      node.style.overflowX = 'visible';
-      node.style.overflowY = 'visible';
-      if (isSticky) node.style.position = 'static';
-      (node.style as any).clipPath = 'none';
+        node.style.overflow = 'visible';
+        node.style.overflowX = 'visible';
+        node.style.overflowY = 'visible';
+        if (isSticky) node.style.position = 'static';
+        (node.style as any).clipPath = 'none';
+      }
+    };
+
+    // รวม el เองด้วย
+    patchNode(el as HTMLElement);
+    while (walker.nextNode()) {
+      patchNode(walker.currentNode as HTMLElement);
     }
-  };
 
-  // รวม el เองด้วย
-  patchNode(el as HTMLElement);
-  while (walker.nextNode()) {
-    patchNode(walker.currentNode as HTMLElement);
+    // ฟังก์ชันคืนค่าเดิม
+    return () => {
+      for (const { node, prev } of patched) {
+        node.style.overflow = prev.overflow || '';
+        node.style.overflowX = prev.overflowX || '';
+        node.style.overflowY = prev.overflowY || '';
+        node.style.position = prev.position || '';
+        (node.style as any).clipPath = prev.clipPath || '';
+      }
+    };
   }
 
-  // ฟังก์ชันคืนค่าเดิม
-  return () => {
-    for (const { node, prev } of patched) {
-      node.style.overflow = prev.overflow || '';
-      node.style.overflowX = prev.overflowX || '';
-      node.style.overflowY = prev.overflowY || '';
-      node.style.position = prev.position || '';
-      (node.style as any).clipPath = prev.clipPath || '';
-    }
-  };
-}
 
+  // @ViewChild('pdfArea') pdfArea!: ElementRef<HTMLElement>;
 
-// @ViewChild('pdfArea') pdfArea!: ElementRef<HTMLElement>;
+  async exportPdf() {
+    this.pdfPrintCheck = 1
+    const el = this.pdfArea?.nativeElement;
+    if (!el) return;
 
-async exportPdf() {
-  const el = this.pdfArea?.nativeElement;
-  if (!el) return;
+    const mod: any = await import('html2pdf.js');
+    const html2pdf = mod.default ?? mod;
 
-  const mod: any = await import('html2pdf.js');
-  const html2pdf = mod.default ?? mod;
+    // 1) คลี่กว้างจริงแล้วสเกลลงพอดี A4
+    const cleanupScale = this.expandToFullWidthThenScale(el);
+    // 2) ปลดคลิป overflow/sticky ของลูก ๆ ทั้งหมด
+    const cleanupUnclip = this.unclipOverflows(el);
 
-  // 1) คลี่กว้างจริงแล้วสเกลลงพอดี A4
-  const cleanupScale = this.expandToFullWidthThenScale(el);
-  // 2) ปลดคลิป overflow/sticky ของลูก ๆ ทั้งหมด
-  const cleanupUnclip = this.unclipOverflows(el);
+    const prevBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
 
-  const prevBodyOverflow = document.body.style.overflow;
-  document.body.style.overflow = 'hidden';
+    // ขนาดจริงของ element (หลังถูกขยายแล้ว)
+    const fullW = el.scrollWidth;
+    const fullH = el.scrollHeight;
+    const epsilon = 2; // กันเผื่อ
 
-  // ขนาดจริงของ element (หลังถูกขยายแล้ว)
-  const fullW = el.scrollWidth;
-  const fullH = el.scrollHeight;
-  const epsilon = 2; // กันเผื่อ
-
-  const opt = {
-    margin: [10,10,10,10],
-    filename: `pms-${this.evaluateeId || 'employee'}-${new Date().toISOString().slice(0,10)}.pdf`,
-    image: { type: 'jpeg', quality: 0.96 },
-    html2canvas: {
-      scale: 2,
-      useCORS: true,
-      logging: false,
-      scrollX: 0,
-      scrollY: -window.scrollY,
-      // 👇 บอกขนาดที่จะเรนเดอร์ให้เท่าของจริงทั้งหมด
-      width:  800,
-      // height: fullH,
-      height: Math.max(0, fullH - epsilon),
-      windowWidth:  800,
-      // windowHeight: fullH,
-      windowHeight: Math.max(0, fullH - epsilon),
-      // foreignObjectRendering: true, // ลองเปิดถ้า layout ยังเพี้ยน (มีข้อจำกัดกับบางเคส)
-    },
-    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
-    pagebreak: { mode: ['css','legacy'], avoid: ['.no-break','table','img'] }
-  };
+    const opt = {
+      margin: [10, 10, 10, 10],
+      filename: `pms-${this.evaluateeId || 'employee'}-${new Date().toISOString().slice(0, 10)}.pdf`,
+      image: { type: 'jpeg', quality: 0.96 },
+      html2canvas: {
+        scale: 2,
+        useCORS: true,
+        logging: false,
+        scrollX: 0,
+        scrollY: -window.scrollY,
+        // 👇 บอกขนาดที่จะเรนเดอร์ให้เท่าของจริงทั้งหมด
+        width: 800,
+        // height: fullH,
+        height: Math.max(0, fullH - epsilon),
+        windowWidth: 800,
+        // windowHeight: fullH,
+        windowHeight: Math.max(0, fullH - epsilon),
+        // foreignObjectRendering: true, // ลองเปิดถ้า layout ยังเพี้ยน (มีข้อจำกัดกับบางเคส)
+      },
+      jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
+      pagebreak: { mode: ['css', 'legacy'], avoid: ['.no-break', 'table', 'img'] },
+      onclone: (doc:any) => {
+    doc.querySelectorAll('[data-hide-in-pdf]').forEach((el:any) => el.remove());
+  }
+    };
 
-  try {
-    await html2pdf().from(el).set(opt).save();
-  } finally {
-    cleanupUnclip();
-    cleanupScale();
-    document.body.style.overflow = prevBodyOverflow;
+    try {
+      await html2pdf().from(el).set(opt).save();
+    } finally {
+      cleanupUnclip();
+      cleanupScale();
+      document.body.style.overflow = prevBodyOverflow;
+    }
+    this.pdfPrintCheck = 0
   }
-  this.pdfPrintCheck = 0
-}
 
 
 }