From c1f76af68e7708a0cfee25c01ee6d63c4a92de22 Mon Sep 17 00:00:00 2001
From: wahyuun <wahyumind01@gmail.com>
Date: Tue, 3 Oct 2023 09:16:22 +0700
Subject: [PATCH] update styling

---
 .../SimproV2/CreatedProyek/ViewProject.js     | 116 ++++++++++++++----
 1 file changed, 90 insertions(+), 26 deletions(-)

diff --git a/src/views/SimproV2/CreatedProyek/ViewProject.js b/src/views/SimproV2/CreatedProyek/ViewProject.js
index 2d38445..fd566f7 100644
--- a/src/views/SimproV2/CreatedProyek/ViewProject.js
+++ b/src/views/SimproV2/CreatedProyek/ViewProject.js
@@ -7,7 +7,7 @@ import _ from 'underscore'
 import './style.css'
 import { formatThousand, sortBy } from '../../../const/CustomFunc';
 import { BASE_OSPRO, PROYEK_SEARCH} from "../../../const/ApiConst";
-import { Tooltip } from 'antd';
+import { Tooltip, Spin } from 'antd';
 import { useTranslation } from 'react-i18next';
 import axios from "../../../const/interceptorApi"
 import autoTable from "jspdf-autotable";
@@ -47,6 +47,7 @@ const createMarkup = (element) => {
   const [HR, setAssignHR] = useState("")
   const formatDate = "DD-MM-YYYY";
   const reportTemplateRef = useRef(null);
+  const [loading, setLoading] = useState(true);
   const { t } = useTranslation();
   const token = localStorage.getItem("token");
 
@@ -85,6 +86,7 @@ const createMarkup = (element) => {
       setMilestone([])
       setPotentialRisks("")
       setApproval([])
+      setLoading(false)
     }
   }, [openDialog]);
 
@@ -218,7 +220,11 @@ const createMarkup = (element) => {
         })
       )
     }else{
-      return (<tr><td><br></br></td></tr>)
+      return (
+        <tr>
+          <td style={{ ...tdStyle, textAlign: "center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign: "center" }}>-</td>
+        </tr>);
     }
   }
 
@@ -231,7 +237,7 @@ const createMarkup = (element) => {
           return(
             <tr key={index}>
               <td style={{...tdStyle, width:50, textAlign:'center' }}><p style={{ ...pStyle, fontWeight:'normal' }}>{ ChecklistNumber }</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'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.item ?? "-"}</p></td>
               <td style={ tdStyle } className='plr-10'>
               <p style={{ ...pStyle, fontWeight:'normal' }}>
                 {val.status_exist === true ? "Tersedia" : "Tidak tersedia"}
@@ -242,7 +248,12 @@ const createMarkup = (element) => {
         })
       )
     }else{
-      return (<tr><td><br></br></td></tr>)
+      return (
+        <tr>
+          <td style={{ ...tdStyle, textAlign: "center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign: "center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign: "center" }}>-</td>
+        </tr>);
     }
   }
 
@@ -263,7 +274,11 @@ const createMarkup = (element) => {
         })
       )
     }else{
-      return (<tr><td><br></br></td></tr>)
+      return (
+        <tr>
+          <td style={{ ...tdStyle, textAlign:"center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign:"center" }}>-</td>
+        </tr>)
     }
   }
 
@@ -275,17 +290,22 @@ const createMarkup = (element) => {
             <tr key={index}>
               <td style={{ ...tdStyle, width:50, textAlign:'center' }} className='plr-10'>
                 <p style={{ ...pStyle, fontWeight:'normal' }}>
-                  {val.level_risk ? val.level_risk : "-"}
+                  {val.level_risk ?? "-"}
                 </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, fontWeight:'normal' }}>{val.preventive_risk ? val.preventive_risk : "-"}</p></td>
+              <td style={ tdStyle } className='plr-10'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.description ?? "-"}</p></td>
+              <td style={ tdStyle } className='plr-10'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.preventive_risk ?? "-"}</p></td>
             </tr>
           )
         })
       )
     }else{
-      return (<tr><td><br></br></td></tr>)
+      return (
+        <tr>
+          <td style={{ ...tdStyle, textAlign:"center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign:"center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign:"center" }}>-</td>
+        </tr>)
     }
   }
 
@@ -296,20 +316,25 @@ const createMarkup = (element) => {
           return(
           <tr key={index}>
               <td style={tdStyle} className='plr-10'>
-                <p>{val.join_first_name ? val.join_first_name : val.join_first_name}</p>
+                <p>{val.join_first_name ? val.join_first_name : "-"}</p>
               </td>
               <td style={tdStyle} className='plr-10'>
-                <p>{val.join_second_name ? val.join_second_name : val.join_second_name}</p>
+                <p>{val.join_second_name ? val.join_second_name : "-"}</p>
               </td>
               <td style={tdStyle} className='plr-10'>
-                <p>{val.join_second_description ? val.join_second_description : val.join_second_description}</p>
+                <p>{val.join_second_description ? val.join_second_description : "-"}</p>
               </td>
           </tr>
           )
         })
       )
     }else{
-      return (<tr><td><br></br></td></tr>)
+      return (
+        <tr>
+          <td style={{ ...tdStyle, textAlign:"center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign:"center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign:"center" }}>-</td>
+        </tr>)
     }
   }
 
@@ -330,17 +355,25 @@ const createMarkup = (element) => {
                 <p style={{ ...pStyle, fontWeight:'normal', textAlign:'center' }}>{milestoneLetter}</p>
               </td>
               <td className='plr-10' style={tdStyle}>
-                <p style={{ ...pStyle, fontWeight:'normal', color: '#000000' }}>{val.status}</p>
+                <p style={{ ...pStyle, fontWeight:'normal', color: '#000000' }}>{val.status ?? "-"}</p>
               </td>
               <td className='plr-10' style={{ ...tdStyle, textAlign:'center' }}>
-                <p style={{ ...pStyle, fontWeight:'normal', color: '#000000' }}>&nbsp;{moment(val.deadline).format(formatDate)}</p>
+                <p style={{ ...pStyle, fontWeight: 'normal', color: '#000000' }}>
+
+                  &nbsp;{moment(val.deadline).format(formatDate)}
+                </p>
               </td>
             </tr>
           );
         })
       );
     } else {
-      return (<tr><td><br></br></td></tr>);
+      return (
+        <tr>
+          <td style={{ ...tdStyle, textAlign: "center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign: "center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign: "center" }}>-</td>
+        </tr>);
     }
   }
 
@@ -358,7 +391,10 @@ const createMarkup = (element) => {
         })
       )
     }else{
-      return (<tr><td><br></br></td></tr>)
+      return (
+        <tr>
+          <td style={{ textAlign:"center" }}>&nbsp;-</td>
+        </tr>)
     }
   }
 
@@ -420,7 +456,7 @@ const createMarkup = (element) => {
                 <p style={ pStyle }>Project description</p>
               </td>
               <td colSpan="2" style={tdStyle}>
-                <p style={{ ...pStyle, fontWeight: 'normal' }}>{description ?? '-'}</p>
+                <p style={{ ...pStyle, fontWeight: 'normal' }}>{description != "" ? description : '-'}</p>
               </td>
             </tr>
             <tr>
@@ -436,7 +472,7 @@ const createMarkup = (element) => {
                 <p style={ pStyle }>Lokasi Proyek</p>
               </td>
               <td colSpan="2" style={tdStyle}>
-                <p>&nbsp;{lokasi ?? '-' }</p>
+                <p>&nbsp;{lokasi != "" ? lokasi :'-' }</p>
               </td>
             </tr>
             <tr>
@@ -489,7 +525,7 @@ const createMarkup = (element) => {
                 <p style={ pStyle }>Project Manager</p>
               </td>
               <td colSpan="2" style={tdStyle}>
-                <p>&nbsp;{PM}</p>
+                <p>&nbsp;{PM ?? "-"}</p>
               </td>
             </tr>
             <tr>
@@ -512,7 +548,13 @@ const createMarkup = (element) => {
             </tr>
             <tr>
               <td style={tdStyle}>
-                <p style={{ ...pStyle, fontWeight:'normal' }} dangerouslySetInnerHTML={createMarkup(objectives ?? '-')}></p>
+                <p style={{ ...pStyle, fontWeight: 'normal' }}>
+                  {objectives ? (
+                    <span dangerouslySetInnerHTML={createMarkup(objectives)} />
+                  ) : (
+                    '-'
+                  )}
+                </p>
               </td>
             </tr>
           </tbody>
@@ -528,7 +570,11 @@ const createMarkup = (element) => {
             <tr>
               <td style={tdStyle}>
                 <ul>
-                  <li style={pStyle}>{ scoupeProyek ?? '-' }</li>
+                  {scoupeProyek ? (
+                    <li style={pStyle}>{ scoupeProyek ?? '-' }</li>
+                  ) : (
+                    "-"
+                  )}
                 </ul>
               </td>
             </tr>
@@ -568,7 +614,7 @@ const createMarkup = (element) => {
               <th style={emptyCellStyle}>
                 <p>&nbsp;
                   {image ? (
-                    <img src={`${BASE_OSPRO}/assets/image/` + image} style={{ width: "50px" }}></img>
+                    <img src={`${BASE_OSPRO}/assets/image/` + image} style={{ maxWidth: "100%" }}></img>
                   ) : (
                     '-'
                   )}
@@ -651,7 +697,13 @@ const createMarkup = (element) => {
               </th>
             </tr>
             <tr>
-            <p style={{ ...pStyle, fontWeight:'normal' }} dangerouslySetInnerHTML={createMarkup(lateProyek ?? '-')}></p>
+            <p style={{ ...pStyle, fontWeight: 'normal' }}>
+            {lateProyek ? (
+              <span dangerouslySetInnerHTML={createMarkup(lateProyek)} />
+            ) : (
+              "-"
+            )}
+            </p>
             </tr>
           </tbody>
         </table>
@@ -665,7 +717,13 @@ const createMarkup = (element) => {
             </tr>
             <tr>
               <th>
-                <p style={{ ...pStyle, fontWeight:'normal' }} dangerouslySetInnerHTML={createMarkup(projectSuccess ?? '-')}></p>
+                <p style={{ ...pStyle, fontWeight: 'normal' }}>
+                  {projectSuccess ? (
+                    <span dangerouslySetInnerHTML={createMarkup(projectSuccess)} />
+                  ) : (
+                    '-'
+                  )}
+                </p>
               </th>
             </tr>
           </tbody>
@@ -680,7 +738,13 @@ const createMarkup = (element) => {
             </tr>
             <tr>
               <td>
-              <p style={{ ...pStyle, fontWeight:'normal' }} dangerouslySetInnerHTML={createMarkup(assumtionProyek ?? '-')}></p>
+              <p style={{ ...pStyle, fontWeight: 'normal' }}>
+                {assumtionProyek ? (
+                  <span dangerouslySetInnerHTML={createMarkup(assumtionProyek)} />
+                ) : (
+                  '-'
+                )}
+              </p>
               </td>
             </tr>
           </tbody>