create view project charter (risk, issue, checklist)

src/views/SimproV2/CreatedProyek/ViewProject.js

@@ -12,7 +12,7 @@ const createMarkup = (element) => {
   return {__html: element};
 }
 
-  const ViewProject = ({ openDialog, closeDialog, toggleDialog, projectCharter, projectParticipant, projectMilestone, projectApproval, projectManager, projectK3, assignHR, projectImage }) => {
+  const ViewProject = ({ 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("")
@@ -27,6 +27,9 @@ const createMarkup = (element) => {
   const [objectives, setObjective] = useState("")
   const [projectSuccess, setProjectSuccess] = useState("")
   const [participants, setParticipants] = useState("")
+  const [checklists, setChecklists] = useState("")
+  const [risks, setRisks] = useState("")
+  const [issues, setIssues] = useState("")
   const [image, setImage] = useState("")
   const [budget, setBudget] = useState("")
   const [currency, setCurrency] = useState("")
@@ -54,6 +57,9 @@ const createMarkup = (element) => {
       setObjective("")
       setProjectSuccess("")
       setParticipants([])
+      setChecklists([])
+      setIssues([])
+      setRisks([])
       setDataK3Search([])
       setAssignHR([])
       setImage("")
@@ -100,6 +106,24 @@ const createMarkup = (element) => {
     }
   }, [projectParticipant]);
 
+  useEffect(() => {
+    if(projectChecklist && projectChecklist.length > 0){
+      setChecklists(projectChecklist)
+    }
+  }, [projectChecklist]);
+
+  useEffect(() => {
+    if(projectIssue && projectIssue.length > 0){
+      setIssues(projectIssue)
+    }
+  }, [projectIssue]);
+
+  useEffect(() => {
+    if(projectRisk && projectRisk.length > 0){
+      setRisks(projectRisk)
+    }
+  }, [projectRisk]);
+
   useEffect(() => {
     if(projectMilestone && projectMilestone.length > 0){
       setMilestone(projectMilestone)
@@ -158,8 +182,8 @@ const createMarkup = (element) => {
         const K3Number = number[index];
           return(
             <tr key={index}>
-              <td style={tdStyle}><p style={pStyle}>{ K3Number }</p></td>
+            <td style={{...tdStyle, width:50, textAlign:'center' }}><p style={pStyle}>{ K3Number }</p></td>
-            <td style={tdStyle} className='plr-10'><p style={pStyle}>{val.checklist_k3_name ? val.checklist_k3_name : val.checklist_k3_name}</p></td>
+            <td style={tdStyle} className='plr-10'><p style={pStyle}>{val.checklist_k3_name ? val.checklist_k3_name : "-"}</p></td>
           </tr>
           )
         })
@@ -169,6 +193,73 @@ const createMarkup = (element) => {
     }
   }
 
+  const RenderChecklistProject = () => {
+    if (checklists && checklists.length > 0) {
+      const number = "123456789";
+      return (
+        checklists.map((val, index) => {
+        const ChecklistNumber = number[index];
+          return(
+            <tr key={index}>
+              <td style={{...tdStyle, width:50, textAlign:'center' }}><p style={pStyle}>{ 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}>
+                {val.status_exist === true ? "Tersedia" : "Tidak tersedia"}
+              </p>
+              </td>
+            </tr>
+          )
+        })
+      )
+    }else{
+      return (<tr><td><br></br></td></tr>)
+    }
+  }
+
+  const RenderIssueProject = () => {
+    if (issues && issues.length > 0) {
+      return (
+        issues.map((val, index) => {
+          return(
+            <tr key={index}>
+              <td style={{ ...tdStyle, width:50, textAlign:'center' }} className='plr-10'>
+                <p style={pStyle}>
+                  {val.level_issue ? val.level_issue : "-"}
+                </p>
+              </td>
+              <td style={tdStyle} className='plr-10'><p style={pStyle}>{val.description ? val.description : "-"}</p></td>
+            </tr>
+          )
+        })
+      )
+    }else{
+      return (<tr><td><br></br></td></tr>)
+    }
+  }
+
+  const RenderRiskProject = () => {
+    if (risks && risks.length > 0) {
+      return (
+        risks.map((val, index) => {
+          return(
+            <tr key={index}>
+              <td style={{ ...tdStyle, width:50, textAlign:'center' }} className='plr-10'>
+                <p style={pStyle}>
+                  {val.level_risk ? val.level_risk : "-"}
+                </p>
+              </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}>{val.preventive_risk ? val.preventive_risk : "-"}</p></td>
+            </tr>
+          )
+        })
+      )
+    }else{
+      return (<tr><td><br></br></td></tr>)
+    }
+  }
+
   const RenderAssignHR = () => {
     if (HR && HR.length > 0) {
       return (
@@ -425,14 +516,14 @@ const createMarkup = (element) => {
               </td>
             </tr>
             <tr>
-              <td style={tdStyle}>
+              <td style={{ ...thStyle, textAlign:'center' }}>
-                <p style={pStyle}>Nama</p>
+                <p style={{ ...pStyle, color: '#000000', fontWeight: 'bold' }}>Nama</p>
               </td>
-              <td style={tdStyle}>
+              <td style={{ ...thStyle, textAlign:'center' }}>
-                <p style={pStyle}>Posisi</p>
+                <p style={{ ...pStyle, color: '#000000', fontWeight: 'bold', }}>Posisi</p>
               </td>
-              <td style={tdStyle}>
+              <td style={{ ...thStyle, textAlign:'center' }}>
-                <p style={pStyle}>Tugas dan Tanggung Jawab</p>
+                <p style={{ ...pStyle, color: '#000000', fontWeight: 'bold' }}>Tugas dan Tanggung Jawab</p>
               </td>
             </tr>
             < RenderAssignHR/>
@@ -469,13 +560,13 @@ const createMarkup = (element) => {
             </tr>
             <tr>
               <td style={thStyle}>
-                <p style={{ pStyle, textAlign:'center' }}>Item</p>
+                <p style={{ ...pStyle, color: '#000000', fontWeight: 'bold', textAlign:'center' }}>Item</p>
               </td>
               <td style={thStyle}>
-                <p style={{ pStyle, textAlign:'center' }}>Event Besar / Milestone</p>
+                <p style={{ ...pStyle, color: '#000000', fontWeight: 'bold', textAlign:'center' }}>Event Besar / Milestone</p>
               </td>
               <td style={thStyle}>
-                <p style={{ pStyle, textAlign:'center' }}>Tanggal</p>
+                <p style={{ ...pStyle, color: '#000000', fontWeight: 'bold', textAlign:'center' }}>Tanggal</p>
               </td>
             </tr>
             <RenderMilestone />
@@ -497,46 +588,30 @@ const createMarkup = (element) => {
                 <p style={{ ...pStyle, fontWeight: 'bold', textAlign: 'center' }}>Penjelasan</p>
               </td>
             </tr>
-            <tr>
+            <RenderIssueProject/>
-              <td style={tdStyle}>
-                <p>&nbsp;</p>
-              </td>
-              <td style={tdStyle}>
-                <p>&nbsp;</p>
-              </td>
-            </tr>
-            <tr>
-              <td style={tdStyle}>
-                <p>&nbsp;</p>
-              </td>
-              <td style={tdStyle}>
-                <p>&nbsp;</p>
-              </td>
-            </tr>
-            <tr>
-              <td style={tdStyle}>
-                <p>&nbsp;</p>
-              </td>
-              <td style={tdStyle}>
-                <p>&nbsp;</p>
-              </td>
-            </tr>
           </tbody>
         </table>
         <p style={{ ...pStyle, fontSize: '10pt', fontStyle: 'italic' }}>*Skala 1 ke 7 (1 = kecil, 7 = besar)</p>
         <p>&nbsp;</p>
         <table style={tableStyle} className="a6">
-          <tbody>
+        <tbody>
             <tr>
               <td colSpan="3" style={thStyle}>
-                <p style={pStyle}>8.0 RESIKO </p>
+                <p style={{ ...pStyle, fontVariant: 'small-caps' }}>8.0 RESIKO</p>
               </td>
             </tr>
             <tr>
-              <td>
+              <td style={thStyle}>
-                <p dangerouslySetInnerHTML={createMarkup(potentialRisks ?? '-')}></p>
+                <p style={{ ...pStyle, color: '#000000', fontWeight: 'bold', textAlign: 'center' }}>Tingkat Dampak Resiko</p>
+              </td>
+              <td style={thStyle}>
+                <p style={{ ...pStyle, color: '#000000', fontWeight: 'bold', textAlign: 'center' }}>Penjelasan</p>
+              </td>
+              <td style={thStyle}>
+                <p style={{ ...pStyle, color: '#000000', fontWeight: 'bold', textAlign: 'center' }}>Pencegahan</p>
               </td>
             </tr>
+            <RenderRiskProject/>
           </tbody>
         </table>
         <p style={{ ...pStyle, fontSize: '10pt', fontStyle: 'italic' }}>*Skala 1 ke 7 (1 = kecil, 7 = besar)</p>
@@ -592,97 +667,32 @@ const createMarkup = (element) => {
               </td>
             </tr>
             <tr>
-              <td style={thStyle}>
+              <td style={{ ...thStyle, textAlign:'center' }}>
                 <p style={pStyle}><span style={{ fontWeight: 'bold' }}>NO</span></p>
               </td>
-              <td style={thStyle}>
+              <td style={{ ...thStyle, textAlign:'center' }}>
                 <p style={pStyle}><span style={{ fontWeight: 'bold' }}>ITEM</span></p>
               </td>
-              <td style={thStyle}>
+              <td style={{ ...thStyle, textAlign:'center' }}>
                 <p style={pStyle}><span style={{ fontWeight: 'bold' }}>KETERSEDIAAN</span></p>
               </td>
             </tr>
-            <tr>
+            <RenderChecklistProject/>
-              <td style={tdStyle}>
-                <p style={pStyle}>1</p>
-              </td>
-              <td style={tdStyle}>
-                <p style={{ ...pStyle, color: '#000000' }}>Gudang regional</p>
-              </td>
-              <td style={tdStyle}>
-                <p>&nbsp;</p>
-              </td>
-            </tr>
-            <tr>
-              <td style={tdStyle}>
-                <p style={pStyle}>2</p>
-              </td>
-              <td style={tdStyle}>
-                <p style={{ ...pStyle, color: '#000000' }}>Kantor regional</p>
-              </td>
-              <td style={tdStyle}>
-                <p>&nbsp;</p>
-              </td>
-            </tr>
-            <tr>
-              <td style={tdStyle}>
-                <p style={pStyle}>3</p>
-              </td>
-              <td style={tdStyle}>
-                <p style={{ ...pStyle, color: '#000000' }}>Tim yang bersertifikasi</p>
-              </td>
-              <td style={tdStyle}>
-                <p>&nbsp;</p>
-              </td>
-            </tr>
-            <tr>
-              <td style={tdStyle}>
-                <p style={{ ...pStyle, color: '#FF0000' }}>4</p>
-              </td>
-              <td style={tdStyle}>
-                <p style={{ ...pStyle, color: '#FF0000' }}>Alat Perlindungan Diri (Helm, Safety Harness, Dll)</p>
-              </td>
-              <td style={tdStyle}>
-                <p>&nbsp;</p>
-              </td>
-            </tr>
-            <tr>
-              <td style={tdStyle}>
-                <p>&nbsp;</p>
-              </td>
-              <td style={tdStyle}>
-                <p style={pStyle}>.....</p>
-              </td>
-              <td style={tdStyle}>
-                <p>&nbsp;</p>
-              </td>
-            </tr>
-            <tr>
-              <td style={tdStyle}>
-                <p>&nbsp;</p>
-              </td>
-              <td style={tdStyle}>
-                <p style={{ ...pStyle, fontStyle: 'italic' }}>Item di atas hanyalah contoh saja</p>
-              </td>
-              <td style={tdStyle}>
-                <p>&nbsp;</p>
-              </td>
-            </tr>
           </tbody>
         </table>
         <p>&nbsp;</p>
         <table style={tableStyle} className="ab">
           <tbody>
             <tr>
-              <td colSpan="3" style={thStyle}>
+              <td colSpan="3" style={ thStyle }>
                 <p style={pStyle}>13.0 KESEHATAN & KESELAMATAN KERJA (K3)</p>
               </td>
             </tr>
             <tr>
-              <td style={tdStyle}>
+              <td style={{ ...thStyle, textAlign:'center' }}>
                 <p style={pStyle}>NO</p>
               </td>
-              <td style={tdStyle}>
+              <td style={{ ...thStyle, textAlign:'center' }}>
                 <p style={pStyle}>ITEM</p>
               </td>
             </tr>