add export PDF Project Charter

src/views/SimproV2/CreatedProyek/ViewProject.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef  } from 'react'
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { Button } from 'reactstrap';
 import moment from 'moment';
@@ -6,13 +6,18 @@ import 'antd/dist/antd.css';
 import _ from 'underscore'
 import './style.css'
 import { formatThousand, sortBy } from '../../../const/CustomFunc';
-import { BASE_OSPRO } from "../../../const/ApiConst";
+import { BASE_OSPRO, PROYEK_SEARCH} from "../../../const/ApiConst";
+import { Tooltip } from 'antd';
+import { useTranslation } from 'react-i18next';
+import axios from "../../../const/interceptorApi"
+import autoTable from "jspdf-autotable";
+import jsPDF from "jspdf";
 
 const createMarkup = (element) => {
   return {__html: element};
 }
 
-  const ViewProject = ({ openDialog, closeDialog, toggleDialog, projectCharter, projectParticipant, projectChecklist, projectIssue, projectRisk, projectMilestone, projectApproval, projectManager, projectK3, assignHR, projectImage }) => {
+  const ViewProject = ({ idTask, openDialog, closeDialog, toggleDialog, projectCharter, projectParticipant, projectChecklist, projectIssue, projectRisk, projectMilestone, projectApproval, projectManager, projectK3, assignHR, projectImage }) => {
   const [proyekName, setProyekName] = useState("")
   const [description, setDescription] = useState("")
   const [shortname, setKodeShortname] = useState("")
@@ -41,6 +46,17 @@ const createMarkup = (element) => {
   const [K3Search, setDataK3Search] = useState("")
   const [HR, setAssignHR] = useState("")
   const formatDate = "DD-MM-YYYY";
+  const reportTemplateRef = useRef(null);
+  const { t } = useTranslation();
+  const token = localStorage.getItem("token");
+
+  const HEADER = {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+  };
+
   useEffect(() => {
     if(!openDialog){
       setProyekName("")
@@ -73,7 +89,7 @@ const createMarkup = (element) => {
   }, [openDialog]);
 
   useEffect(() => {
-    if(projectCharter && projectCharter!={}){
+    if (projectCharter && projectCharter != {}) {
       setProyekName(projectCharter.nama);
       setDescription(projectCharter.keterangan);
       setKodeShortname(projectCharter.kode_sortname);
@@ -156,6 +172,20 @@ const createMarkup = (element) => {
     }
   }, [assignHR]);
 
+  const handleExportPdf = async () => {
+    const doc = new jsPDF({
+      orientation: 'landscape',
+      unit: 'px',
+      format: [1130, 1000]
+    });
+
+    doc.html(reportTemplateRef.current, {
+			async callback(doc) {
+				await doc.save('Project Charter');
+			},
+		});
+  };
+
   const RenderParticipant = () => {
     if(participants && participants.length > 0){
       return (
@@ -353,26 +383,17 @@ const createMarkup = (element) => {
     marginLeft: '5pt',
     marginTop: '2pt',
     marginBottom: '2pt',
-    fontFamily: 'Arial',
     fontSize: '10pt',
     fontWeight: 'bold',
   };
 
-  const italicStyle = {
-    fontStyle: 'italic'
-  };
-  const boldStyle = {
-      fontWeight: 'bold',
-      fontVariant: 'small-caps',
-  };
-
   const emptyCellStyle = {
     padding: '0',
   };
 
   const renderForm = () => {
     return (
-      <div>
+      <div id="pdf-content">
         <table style={tableStyle} className="a">
           <tbody>
             <tr>
@@ -480,12 +501,12 @@ const createMarkup = (element) => {
           <tbody>
             <tr>
               <td bgcolor="#F2F2F2" style={tdStyle}>
-                <p style={{ ...pStyle, fontVariant: 'small-caps' }}>2.0 OBJEKTIF PROYEK (TUJUAN)</p>
+                <p style={ pStyle }>2.0 OBJEKTIF PROYEK (TUJUAN)</p>
               </td>
             </tr>
             <tr>
               <td style={tdStyle}>
-                <p style={italicStyle}>{objectives ?? '-'}</p>
+                <p style={{ fontStyle: 'italic' }}>{objectives ?? '-'}</p>
               </td>
             </tr>
           </tbody>
@@ -495,7 +516,7 @@ const createMarkup = (element) => {
           <tbody>
             <tr>
               <th style={thStyle}>
-                <p style={{ ...pStyle, ...boldStyle }}>3.0 RUANG LINGKUP PROYEK</p>
+                <p style={ pStyle }>3.0 RUANG LINGKUP PROYEK</p>
               </th>
             </tr>
             <tr>
@@ -512,7 +533,7 @@ const createMarkup = (element) => {
           <tbody>
             <tr>
               <td colSpan="3" style={thStyle}>
-                <p style={{ ...pStyle, fontVariant: 'small-caps' }}>4.0 ANGGOTA PROYEK</p>
+                <p style={ pStyle }>4.0 ANGGOTA PROYEK</p>
               </td>
             </tr>
             <tr>
@@ -534,7 +555,7 @@ const createMarkup = (element) => {
           <tbody>
             <tr>
               <th style={thStyle}>
-                <p style={{ ...pStyle, fontVariant: 'small-caps' }}>5.0 STRUKTUR ORGANISASI</p>
+                <p style={ pStyle }>5.0 STRUKTUR ORGANISASI</p>
               </th>
             </tr>
             <tr>
@@ -555,7 +576,7 @@ const createMarkup = (element) => {
           <tbody>
             <tr>
               <th colSpan="3" style={thStyle}>
-                <p style={{ ...pStyle, fontVariant: 'small-caps' }}>6.0 TARGET UTAMA &amp; MILESTONE PENCAPAIAN</p>
+                <p style={ pStyle }>6.0 TARGET UTAMA &amp; MILESTONE PENCAPAIAN</p>
               </th>
             </tr>
             <tr>
@@ -577,7 +598,7 @@ const createMarkup = (element) => {
           <tbody>
             <tr>
               <td colSpan="2" style={thStyle}>
-                <p style={{ ...pStyle, fontVariant: 'small-caps' }}>7.0 ISU &amp; HAMBATAN UTAMA</p>
+                <p style={ pStyle }>7.0 ISU &amp; HAMBATAN UTAMA</p>
               </td>
             </tr>
             <tr>
@@ -591,13 +612,13 @@ const createMarkup = (element) => {
             <RenderIssueProject/>
           </tbody>
         </table>
-        <p style={{ ...pStyle, fontSize: '10pt', fontStyle: 'italic' }}>*Skala 1 ke 7 (1 = kecil, 7 = besar)</p>
+        <p style={{ ...pStyle, fontSize: '10pt', fontWeight: 'normal', fontStyle: 'italic' }}>*Skala 1 ke 7 (1 = kecil, 7 = besar)</p>
         <p>&nbsp;</p>
         <table style={tableStyle} className="a6">
         <tbody>
             <tr>
               <td colSpan="3" style={thStyle}>
-                <p style={{ ...pStyle, fontVariant: 'small-caps' }}>8.0 RESIKO</p>
+                <p style={ pStyle }>8.0 RESIKO</p>
               </td>
             </tr>
             <tr>
@@ -614,7 +635,7 @@ const createMarkup = (element) => {
             <RenderRiskProject/>
           </tbody>
         </table>
-        <p style={{ ...pStyle, fontSize: '10pt', fontStyle: 'italic' }}>*Skala 1 ke 7 (1 = kecil, 7 = besar)</p>
+        <p style={{ ...pStyle, fontSize: '10pt', fontWeight: 'normal', fontStyle: 'italic' }}>*Skala 1 ke 7 (1 = kecil, 7 = besar)</p>
         <p>&nbsp;</p>
         <table style={tableStyle} className="a7">
           <tbody>
@@ -719,9 +740,22 @@ const createMarkup = (element) => {
   return (
     <>
       <Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
-        <ModalHeader className="capitalize" toggle={closeDialog}>Project</ModalHeader>
+        <ModalHeader className="capitalize" toggle={closeDialog}>
+          <div style={{ display: "flex", justifyContent: "space-between" }}>
+            <div>
+              Project
+            </div>
+            <div>
+              <Tooltip title={t('Export PDF')}>
+                  <Button style={{ marginLeft: "5px" }} onClick={(e) => handleExportPdf()}><i className="fa fa-print"></i></Button>
+              </Tooltip>
+            </div>
+          </div>
+        </ModalHeader>
         <ModalBody>
+          <div ref={reportTemplateRef}>
             {renderForm()}
+          </div>
         </ModalBody>
         <ModalFooter>
           <Button color="primary" onClick={closeDialog}>Close</Button>