Merge pull request 'add notif when gantt null' (#32) from Dev-Farhan into staging

Reviewed-on: ibnu/generic-ospro-frontend#32

src/components/BottomModal/BottomModal.js

@@ -6,8 +6,9 @@ import Icon from '@iconify/react'
 import closeCircleOutline from '@iconify/icons-ion/close-circle-outline';
 import removeCircleOutline from '@iconify/icons-ion/remove-circle-outline';
 import windowMaximaze from '@iconify/icons-mdi/window-maximize';
+import { NotificationContainer, NotificationManager } from 'react-notifications';
 
-const BottomModal = ({title, tableHeader, tableData, closeModal, isReady}) => {
+const BottomModal = ({ title, tableHeader, tableData, closeModal, isReady }) => {
     const [tableHeight, setTableHeight] = useState(150)
     const [resizableWidth, setResizableWidth] = useState("100%")
     const [resizableHeight, setResizableHeight] = useState(300)
@@ -39,25 +40,42 @@ const BottomModal = ({title, tableHeader, tableData, closeModal, isReady}) => {
 
     const renderTableRow = (item) => {
         let row = [];
+
         // looping through its object keys (item is an object)
         Object.keys(item).map(key => {
             if (key === 'project_name') {
                 let URL = `/#/dashboard-project/${item['id']}/${item['last_gantt_id']}`;
-                row.push(<td><a href={URL}>{item[key]}</a></td>)
-			} else if(key === 'last_gantt_id') {
-			} else if(key === 'id') {
+                row.push(
+                    <td>
+                        <a
+                            href={URL}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                if (!item['last_gantt_id']) {
+                                    NotificationManager.warning('Data Gantt Belum Tersedia.', 'Warning');
                                 } else {
-                row.push(<td>{item[key]}</td>)
+                                    window.location.href = URL;
                                 }
-        })
-        return row;
+                            }}
+                        >
+                            {item[key]}
+                        </a>
+                    </td>
+                );
+            } else if (key === 'id' || key === 'last_gantt_id') {
+            } else {
+                row.push(<td>{item[key]}</td>);
             }
+        });
+
+        return row;
+    };
 
     const RenderTable = useMemo(() => {
         if (tableData && tableData.length > 0) {
             return (
                 <Table size='sm'>
-                    <thead style={{margin: 0, backgroundColor: '#888888', color: '#FFFFFF', fontSize: 12}}>
+                    <thead style={{ margin: 0, backgroundColor: '#888888', color: '#FFFFFF', fontSize: 12 }}>
                         <tr key={'thead'}>
                             {tableHeader && tableHeader.length > 0 &&
                                 tableHeader.map((item, idx) => (
@@ -66,7 +84,7 @@ const BottomModal = ({title, tableHeader, tableData, closeModal, isReady}) => {
                             }
                         </tr>
                     </thead>
-                    <tbody style={{backgroundColor: '#EEEEEE'}}>
+                    <tbody style={{ backgroundColor: '#EEEEEE' }}>
                         {tableData && tableData.length > 0 &&
                             tableData.map((item, index) => {
                                 return (<tr key={index}>
@@ -85,13 +103,15 @@ const BottomModal = ({title, tableHeader, tableData, closeModal, isReady}) => {
             //         <td style={{ fontWeight: "bold" }} colSpan="4" align="center">No Data Available</td>
             //     </tr>
             // </Table>
-            <div style={{justifyContent: 'center', textAlign: 'center', color: 'red', marginTop: 50, marginBottom: 50}}>
+            <div style={{ justifyContent: 'center', textAlign: 'center', color: 'red', marginTop: 50, marginBottom: 50 }}>
                 No Data Available
             </div>
         )
     }, [tableData, isReady])
 
     return (
+        <>
+            <NotificationContainer />
             <Resizable
                 style={{
                     position: "fixed",
@@ -166,11 +186,12 @@ const BottomModal = ({title, tableHeader, tableData, closeModal, isReady}) => {
                     </Row>
                     <Card style={{ margin: 10 }}>
                         <CardBody style={{ margin: 0, padding: 0, borderRadius: 5, backgroundColor: '#EEEEEE', overflowY: 'auto', height: resizableHeight === 300 ? 240 : 540 }}>
-                        {isReady ? RenderTable : <div style={{flex: 1, textAlign: 'center', marginTop: 50}}>Loading data...</div>}
+                            {isReady ? RenderTable : <div style={{ flex: 1, textAlign: 'center', marginTop: 50 }}>Loading data...</div>}
                         </CardBody>
                     </Card>
                 </div>
             </Resizable>
+        </>
     )
 }