|
|
|
@ -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 { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
|
|
|
import { Button } from 'reactstrap'; |
|
|
|
import { Button } from 'reactstrap'; |
|
|
|
import moment from 'moment'; |
|
|
|
import moment from 'moment'; |
|
|
|
@ -6,13 +6,18 @@ import 'antd/dist/antd.css'; |
|
|
|
import _ from 'underscore' |
|
|
|
import _ from 'underscore' |
|
|
|
import './style.css' |
|
|
|
import './style.css' |
|
|
|
import { formatThousand, sortBy } from '../../../const/CustomFunc'; |
|
|
|
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) => { |
|
|
|
const createMarkup = (element) => { |
|
|
|
return {__html: 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 [proyekName, setProyekName] = useState("") |
|
|
|
const [description, setDescription] = useState("") |
|
|
|
const [description, setDescription] = useState("") |
|
|
|
const [shortname, setKodeShortname] = useState("") |
|
|
|
const [shortname, setKodeShortname] = useState("") |
|
|
|
@ -41,6 +46,17 @@ const createMarkup = (element) => { |
|
|
|
const [K3Search, setDataK3Search] = useState("") |
|
|
|
const [K3Search, setDataK3Search] = useState("") |
|
|
|
const [HR, setAssignHR] = useState("") |
|
|
|
const [HR, setAssignHR] = useState("") |
|
|
|
const formatDate = "DD-MM-YYYY"; |
|
|
|
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(() => { |
|
|
|
useEffect(() => { |
|
|
|
if(!openDialog){ |
|
|
|
if(!openDialog){ |
|
|
|
setProyekName("") |
|
|
|
setProyekName("") |
|
|
|
@ -156,6 +172,20 @@ const createMarkup = (element) => { |
|
|
|
} |
|
|
|
} |
|
|
|
}, [assignHR]); |
|
|
|
}, [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 = () => { |
|
|
|
const RenderParticipant = () => { |
|
|
|
if(participants && participants.length > 0){ |
|
|
|
if(participants && participants.length > 0){ |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
@ -353,26 +383,17 @@ const createMarkup = (element) => { |
|
|
|
marginLeft: '5pt', |
|
|
|
marginLeft: '5pt', |
|
|
|
marginTop: '2pt', |
|
|
|
marginTop: '2pt', |
|
|
|
marginBottom: '2pt', |
|
|
|
marginBottom: '2pt', |
|
|
|
fontFamily: 'Arial', |
|
|
|
|
|
|
|
fontSize: '10pt', |
|
|
|
fontSize: '10pt', |
|
|
|
fontWeight: 'bold', |
|
|
|
fontWeight: 'bold', |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const italicStyle = { |
|
|
|
|
|
|
|
fontStyle: 'italic' |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
const boldStyle = { |
|
|
|
|
|
|
|
fontWeight: 'bold', |
|
|
|
|
|
|
|
fontVariant: 'small-caps', |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const emptyCellStyle = { |
|
|
|
const emptyCellStyle = { |
|
|
|
padding: '0', |
|
|
|
padding: '0', |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const renderForm = () => { |
|
|
|
const renderForm = () => { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div> |
|
|
|
<div id="pdf-content"> |
|
|
|
<table style={tableStyle} className="a"> |
|
|
|
<table style={tableStyle} className="a"> |
|
|
|
<tbody> |
|
|
|
<tbody> |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
@ -480,12 +501,12 @@ const createMarkup = (element) => { |
|
|
|
<tbody> |
|
|
|
<tbody> |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
<td bgcolor="#F2F2F2" style={tdStyle}> |
|
|
|
<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> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
<td style={tdStyle}> |
|
|
|
<td style={tdStyle}> |
|
|
|
<p style={italicStyle}>{objectives ?? '-'}</p> |
|
|
|
<p style={{ fontStyle: 'italic' }}>{objectives ?? '-'}</p> |
|
|
|
</td> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|
</tbody> |
|
|
|
</tbody> |
|
|
|
@ -495,7 +516,7 @@ const createMarkup = (element) => { |
|
|
|
<tbody> |
|
|
|
<tbody> |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
<th style={thStyle}> |
|
|
|
<th style={thStyle}> |
|
|
|
<p style={{ ...pStyle, ...boldStyle }}>3.0 RUANG LINGKUP PROYEK</p> |
|
|
|
<p style={ pStyle }>3.0 RUANG LINGKUP PROYEK</p> |
|
|
|
</th> |
|
|
|
</th> |
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
@ -512,7 +533,7 @@ const createMarkup = (element) => { |
|
|
|
<tbody> |
|
|
|
<tbody> |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
<td colSpan="3" style={thStyle}> |
|
|
|
<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> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
@ -534,7 +555,7 @@ const createMarkup = (element) => { |
|
|
|
<tbody> |
|
|
|
<tbody> |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
<th style={thStyle}> |
|
|
|
<th style={thStyle}> |
|
|
|
<p style={{ ...pStyle, fontVariant: 'small-caps' }}>5.0 STRUKTUR ORGANISASI</p> |
|
|
|
<p style={ pStyle }>5.0 STRUKTUR ORGANISASI</p> |
|
|
|
</th> |
|
|
|
</th> |
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
@ -555,7 +576,7 @@ const createMarkup = (element) => { |
|
|
|
<tbody> |
|
|
|
<tbody> |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
<th colSpan="3" style={thStyle}> |
|
|
|
<th colSpan="3" style={thStyle}> |
|
|
|
<p style={{ ...pStyle, fontVariant: 'small-caps' }}>6.0 TARGET UTAMA & MILESTONE PENCAPAIAN</p> |
|
|
|
<p style={ pStyle }>6.0 TARGET UTAMA & MILESTONE PENCAPAIAN</p> |
|
|
|
</th> |
|
|
|
</th> |
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
@ -577,7 +598,7 @@ const createMarkup = (element) => { |
|
|
|
<tbody> |
|
|
|
<tbody> |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
<td colSpan="2" style={thStyle}> |
|
|
|
<td colSpan="2" style={thStyle}> |
|
|
|
<p style={{ ...pStyle, fontVariant: 'small-caps' }}>7.0 ISU & HAMBATAN UTAMA</p> |
|
|
|
<p style={ pStyle }>7.0 ISU & HAMBATAN UTAMA</p> |
|
|
|
</td> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
@ -591,13 +612,13 @@ const createMarkup = (element) => { |
|
|
|
<RenderIssueProject/> |
|
|
|
<RenderIssueProject/> |
|
|
|
</tbody> |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
</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> </p> |
|
|
|
<p> </p> |
|
|
|
<table style={tableStyle} className="a6"> |
|
|
|
<table style={tableStyle} className="a6"> |
|
|
|
<tbody> |
|
|
|
<tbody> |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
<td colSpan="3" style={thStyle}> |
|
|
|
<td colSpan="3" style={thStyle}> |
|
|
|
<p style={{ ...pStyle, fontVariant: 'small-caps' }}>8.0 RESIKO</p> |
|
|
|
<p style={ pStyle }>8.0 RESIKO</p> |
|
|
|
</td> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
@ -614,7 +635,7 @@ const createMarkup = (element) => { |
|
|
|
<RenderRiskProject/> |
|
|
|
<RenderRiskProject/> |
|
|
|
</tbody> |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
</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> </p> |
|
|
|
<p> </p> |
|
|
|
<table style={tableStyle} className="a7"> |
|
|
|
<table style={tableStyle} className="a7"> |
|
|
|
<tbody> |
|
|
|
<tbody> |
|
|
|
@ -719,9 +740,22 @@ const createMarkup = (element) => { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}> |
|
|
|
<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> |
|
|
|
<ModalBody> |
|
|
|
|
|
|
|
<div ref={reportTemplateRef}> |
|
|
|
{renderForm()} |
|
|
|
{renderForm()} |
|
|
|
|
|
|
|
</div> |
|
|
|
</ModalBody> |
|
|
|
</ModalBody> |
|
|
|
<ModalFooter> |
|
|
|
<ModalFooter> |
|
|
|
<Button color="primary" onClick={closeDialog}>Close</Button> |
|
|
|
<Button color="primary" onClick={closeDialog}>Close</Button> |
|
|
|
|
