ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update styling & export PDF

pull/2/head
wahyuun 1 year ago
parent
a1bac0feda
commit
17e768db37
1 changed files with 35 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 69
      src/views/SimproV2/CreatedProyek/ViewProject.js

69
src/views/SimproV2/CreatedProyek/ViewProject.js
Unescape View File

@ -93,7 +93,7 @@ const createMarkup = (element) => {
setProyekName(projectCharter.nama); setProyekName(projectCharter.nama);
setDescription(projectCharter.keterangan); setDescription(projectCharter.keterangan);
setKodeShortname(projectCharter.kode_sortname); setKodeShortname(projectCharter.kode_sortname);
setLokasiKantor(projectCharter.lokasi_kantor); setLokasiKantor(projectCharter.area_kerja);
setDurasiProyek(projectCharter.durasi_proyek); setDurasiProyek(projectCharter.durasi_proyek);
setMulaiProyek(projectCharter.mulai_proyek); setMulaiProyek(projectCharter.mulai_proyek);
setValueProyek(projectCharter.value_proyek); setValueProyek(projectCharter.value_proyek);
@ -171,12 +171,11 @@ const createMarkup = (element) => {
setAssignHR(assignHR) setAssignHR(assignHR)
} }
}, [assignHR]); }, [assignHR]);
const handleExportPdf = async () => { const handleExportPdf = async () => {
const doc = new jsPDF({ const doc = new jsPDF({
orientation: 'landscape', orientation: 'landscape',
unit: 'px', unit: 'px',
format: [1130, 1000] format: [1106, 1000]
}); });
doc.html(reportTemplateRef.current, { doc.html(reportTemplateRef.current, {
@ -212,8 +211,8 @@ const createMarkup = (element) => {
const K3Number = number[index]; const K3Number = number[index];
return( return(
<tr key={index}> <tr key={index}>
<td style={{...tdStyle, width:50, textAlign:'center' }}><p style={pStyle}>{ K3Number }</p></td> <td style={{...tdStyle, width:50, textAlign:'center' }}><p style={{ ...pStyle, fontWeight:'normal' }}>{ K3Number }</p></td>
<td style={tdStyle} className='plr-10'><p style={pStyle}>{val.checklist_k3_name ? val.checklist_k3_name : "-"}</p></td> <td style={ tdStyle } className='plr-10'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.checklist_k3_name ? val.checklist_k3_name : "-"}</p></td>
</tr> </tr>
) )
}) })
@ -231,10 +230,10 @@ const createMarkup = (element) => {
const ChecklistNumber = number[index]; const ChecklistNumber = number[index];
return( return(
<tr key={index}> <tr key={index}>
<td style={{...tdStyle, width:50, textAlign:'center' }}><p style={pStyle}>{ ChecklistNumber }</p></td> <td style={{...tdStyle, width:50, textAlign:'center' }}><p style={{ ...pStyle, fontWeight:'normal' }}>{ ChecklistNumber }</p></td>
<td style={tdStyle} className='plr-10'><p style={pStyle}>{val.item ? val.item : "-"}</p></td> <td style={ tdStyle } className='plr-10'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.item ? val.item : "-"}</p></td>
<td style={tdStyle} className='plr-10'> <td style={ tdStyle } className='plr-10'>
<p style={pStyle}> <p style={{ ...pStyle, fontWeight:'normal' }}>
{val.status_exist === true ? "Tersedia" : "Tidak tersedia"} {val.status_exist === true ? "Tersedia" : "Tidak tersedia"}
</p> </p>
</td> </td>
@ -254,11 +253,11 @@ const createMarkup = (element) => {
return( return(
<tr key={index}> <tr key={index}>
<td style={{ ...tdStyle, width:50, textAlign:'center' }} className='plr-10'> <td style={{ ...tdStyle, width:50, textAlign:'center' }} className='plr-10'>
<p style={pStyle}> <p style={{ ...pStyle, fontWeight:'normal' }}>
{val.level_issue ? val.level_issue : "-"} {val.level_issue ? val.level_issue : "-"}
</p> </p>
</td> </td>
<td style={tdStyle} className='plr-10'><p style={pStyle}>{val.description ? val.description : "-"}</p></td> <td style={ tdStyle } className='plr-10'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.description ? val.description : "-"}</p></td>
</tr> </tr>
) )
}) })
@ -275,12 +274,12 @@ const createMarkup = (element) => {
return( return(
<tr key={index}> <tr key={index}>
<td style={{ ...tdStyle, width:50, textAlign:'center' }} className='plr-10'> <td style={{ ...tdStyle, width:50, textAlign:'center' }} className='plr-10'>
<p style={pStyle}> <p style={{ ...pStyle, fontWeight:'normal' }}>
{val.level_risk ? val.level_risk : "-"} {val.level_risk ? val.level_risk : "-"}
</p> </p>
</td> </td>
<td style={tdStyle} className='plr-10'><p style={pStyle}>{val.description ? val.description : "-"}</p></td> <td style={ tdStyle } className='plr-10'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.description ? val.description : "-"}</p></td>
<td style={tdStyle} className='plr-10'><p style={pStyle}>{val.preventive_risk ? val.preventive_risk : "-"}</p></td> <td style={ tdStyle } className='plr-10'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.preventive_risk ? val.preventive_risk : "-"}</p></td>
</tr> </tr>
) )
}) })
@ -328,13 +327,13 @@ const createMarkup = (element) => {
return ( return (
<tr key={index}> <tr key={index}>
<td style={tdStyle}> <td style={tdStyle}>
<p style={{ ...pStyle, textAlign:'center' }}>{milestoneLetter}</p> <p style={{ ...pStyle, fontWeight:'normal', textAlign:'center' }}>{milestoneLetter}</p>
</td> </td>
<td className='plr-10' style={tdStyle}> <td className='plr-10' style={tdStyle}>
<p style={{ ...pStyle, color: '#000000' }}>{val.status}</p> <p style={{ ...pStyle, fontWeight:'normal', color: '#000000' }}>{val.status}</p>
</td> </td>
<td className='plr-10' style={{ ...tdStyle, textAlign:'center' }}> <td className='plr-10' style={{ ...tdStyle, textAlign:'center' }}>
<p>&nbsp;{moment(val.deadline).format(formatDate)}</p> <p style={{ ...pStyle, fontWeight:'normal', color: '#000000' }}>&nbsp;{moment(val.deadline).format(formatDate)}</p>
</td> </td>
</tr> </tr>
); );
@ -391,9 +390,16 @@ const createMarkup = (element) => {
padding: '0', padding: '0',
}; };
const paddingTable = {
paddingTop:"20px",
paddingLeft: "30px",
paddingRight: "30px"
}
const renderForm = () => { const renderForm = () => {
return ( return (
<div id="pdf-content"> <div id="pdf-content" style={ paddingTable }>
<h3>Project Charter</h3>
<table style={tableStyle} className="a"> <table style={tableStyle} className="a">
<tbody> <tbody>
<tr> <tr>
@ -406,7 +412,7 @@ const createMarkup = (element) => {
<p style={ pStyle }>Nama Proyek</p> <p style={ pStyle }>Nama Proyek</p>
</td> </td>
<td colSpan="2" style={tdStyle}> <td colSpan="2" style={tdStyle}>
<p style={{ ...pStyle, fontWeight: 'normal', fontStyle: 'italic' }}>{proyekName ?? '-'}</p> <p className="capitalize" style={{ ...pStyle, fontWeight: 'normal' }}>{proyekName ?? '-'}</p>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -414,7 +420,7 @@ const createMarkup = (element) => {
<p style={ pStyle }>Project description</p> <p style={ pStyle }>Project description</p>
</td> </td>
<td colSpan="2" style={tdStyle}> <td colSpan="2" style={tdStyle}>
<p style={{ ...pStyle, fontWeight: 'normal', fontStyle: 'italic' }}>{description ?? '-'}</p> <p style={{ ...pStyle, fontWeight: 'normal' }}>{description ?? '-'}</p>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -462,7 +468,7 @@ const createMarkup = (element) => {
<p style={ pStyle }>Anggaran Proyek</p> <p style={ pStyle }>Anggaran Proyek</p>
</td> </td>
<td colSpan="2" style={tdStyle}> <td colSpan="2" style={tdStyle}>
<p style={{ ...pStyle, fontWeight: 'normal', fontStyle: 'italic' }}>{currency}. {formatThousand(budget)}</p> <p style={{ ...pStyle, fontWeight: 'normal' }}>{currency}. {formatThousand(budget)}</p>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -506,7 +512,7 @@ const createMarkup = (element) => {
</tr> </tr>
<tr> <tr>
<td style={tdStyle}> <td style={tdStyle}>
<p style={{ fontStyle: 'italic' }}>{objectives ?? '-'}</p> <p style={{ ...pStyle, fontWeight:'normal' }} dangerouslySetInnerHTML={createMarkup(objectives ?? '-')}></p>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -645,7 +651,7 @@ const createMarkup = (element) => {
</th> </th>
</tr> </tr>
<tr> <tr>
<p dangerouslySetInnerHTML={createMarkup(lateProyek ?? '-')}></p> <p style={{ ...pStyle, fontWeight:'normal' }} dangerouslySetInnerHTML={createMarkup(lateProyek ?? '-')}></p>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -659,7 +665,7 @@ const createMarkup = (element) => {
</tr> </tr>
<tr> <tr>
<th> <th>
<p style={pStyle}>{projectSuccess ?? '-'}</p> <p style={{ ...pStyle, fontWeight:'normal' }} dangerouslySetInnerHTML={createMarkup(projectSuccess ?? '-')}></p>
</th> </th>
</tr> </tr>
</tbody> </tbody>
@ -674,7 +680,7 @@ const createMarkup = (element) => {
</tr> </tr>
<tr> <tr>
<td> <td>
<p dangerouslySetInnerHTML={createMarkup(assumtionProyek ?? '-')}></p> <p style={{ ...pStyle, fontWeight:'normal' }} dangerouslySetInnerHTML={createMarkup(assumtionProyek ?? '-')}></p>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -741,15 +747,10 @@ const createMarkup = (element) => {
<> <>
<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}> <Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize" toggle={closeDialog}> <ModalHeader className="capitalize" toggle={closeDialog}>
<div style={{ display: "flex", justifyContent: "space-between" }}> <div>
<div> <Tooltip title={t('Export PDF')}>
Project <Button style={{ marginLeft: "5px" }} onClick={(e) => handleExportPdf()}><i className="fa fa-print"></i> Export PDF</Button>
</div> </Tooltip>
<div>
<Tooltip title={t('Export PDF')}>
<Button style={{ marginLeft: "5px" }} onClick={(e) => handleExportPdf()}><i className="fa fa-print"></i></Button>
</Tooltip>
</div>
</div> </div>
</ModalHeader> </ModalHeader>
<ModalBody> <ModalBody>

Write Preview
Loading…
Cancel
Save