From a31b1247a2623b5be53aee82fc00be8a8be4120d Mon Sep 17 00:00:00 2001
From: farhantock <achmadfarhanmushafa@gmail.com>
Date: Mon, 18 Dec 2023 14:45:16 +0700
Subject: [PATCH] add notif when gantt null

---
 src/components/BottomModal/BottomModal.js | 203 ++++++++++++----------
 1 file changed, 112 insertions(+), 91 deletions(-)

diff --git a/src/components/BottomModal/BottomModal.js b/src/components/BottomModal/BottomModal.js
index 69b04c3..27d1bf3 100644
--- a/src/components/BottomModal/BottomModal.js
+++ b/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') {
-			} else {
-                row.push(<td>{item[key]}</td>)
+                row.push(
+                    <td>
+                        <a
+                            href={URL}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                if (!item['last_gantt_id']) {
+                                    NotificationManager.warning('Data Gantt Belum Tersedia.', 'Warning');
+                                } else {
+                                    window.location.href = URL;
+                                }
+                            }}
+                        >
+                            {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,8 +84,8 @@ const BottomModal = ({title, tableHeader, tableData, closeModal, isReady}) => {
                             }
                         </tr>
                     </thead>
-                    <tbody style={{backgroundColor: '#EEEEEE'}}>
-                        {tableData && tableData.length > 0  &&
+                    <tbody style={{ backgroundColor: '#EEEEEE' }}>
+                        {tableData && tableData.length > 0 &&
                             tableData.map((item, index) => {
                                 return (<tr key={index}>
                                     {renderTableRow(item, tableHeader)}
@@ -85,92 +103,95 @@ 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 (
-        <Resizable
-            style={{
-                position: "fixed",
-                width: "100%",
-                bottom: 0,
-                left: 0,
-                right: 0,
-                background: "#222222",
-                borderTopLeftRadius: 10,
-                borderTopRightRadius: 10,
-                zIndex: 9999
-            }}
-            size={{
-                width: resizableWidth,
-                height: resizableHeight
-            }}
-            maxHeight="100vh"
-            minWidth="100%"
-            enable={{ top: true, right: false, bottom: false, left: false, topRight: false, bottomRight: false, bottomLeft: false, topLeft: false }}
-            onResizeStop={(e, direction, ref, d) => {
-                setResizableWidth("100%");
-                setResizableHeight(resizableHeight + d.height);
-                if (e.screenY < 100) { // max
-                    setResizableHeight('100vh');
-                    setTableHeight(450)
-                }
-                else if (e.screenY < 150) {
-                    setTableHeight(400)
-                }
-                else if (e.screenY < 200) {
-                    setTableHeight(350)
-                }
-                else if (e.screenY < 250) {
-                    setTableHeight(300)
-                }
-                else if (e.screenY < 300) {
-                    setTableHeight(250)
-                }
-                else if (e.screenY < 400) {
-                    setTableHeight(200)
-                }
-                else if (e.screenY < 600) {
-                    setTableHeight(150) // default
-                }
-                else if (e.screenY >= 600) {
-                    setBottomTableWindow('min');
-                }
-            }}
-        >
-            <div style={{ paddingTop: 10, position: "relative", height: "100%" }}>
-                <Row className="bottommodal-header">
-                    <Col md={8}>
-                        <p className="bottommodal-title">{title}</p>
-                    </Col>
-                    <Col md={4} className="bottommodal-window-button-container">
-                        <span className="bottommodal-minimize" title="minimize"
-                            onClick={() => setBottomTableWindow("min")}
-                        >
-                            <Icon icon={removeCircleOutline} width={30} height={30} color="#FFFFFF" />
-                        </span>
-                        <span className="bottommodal-maximize" title={maximizeTitle}
-                            onClick={() => setBottomTableWindow("max")}
-                        >
-                            <Icon icon={windowMaximaze} width={30} height={30} color="#FFFFFF" />
-                        </span>
-                        <span className="bottommodal-close" title="close"
-                            onClick={closeModal}
-                        >
-                            <Icon icon={closeCircleOutline} width={30} height={30} color="#FFFFFF" />
-                        </span>
-                    </Col>
-                </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>}
-                    </CardBody>
-                </Card>
-            </div>
-        </Resizable>
+        <>
+            <NotificationContainer />
+            <Resizable
+                style={{
+                    position: "fixed",
+                    width: "100%",
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    background: "#222222",
+                    borderTopLeftRadius: 10,
+                    borderTopRightRadius: 10,
+                    zIndex: 9999
+                }}
+                size={{
+                    width: resizableWidth,
+                    height: resizableHeight
+                }}
+                maxHeight="100vh"
+                minWidth="100%"
+                enable={{ top: true, right: false, bottom: false, left: false, topRight: false, bottomRight: false, bottomLeft: false, topLeft: false }}
+                onResizeStop={(e, direction, ref, d) => {
+                    setResizableWidth("100%");
+                    setResizableHeight(resizableHeight + d.height);
+                    if (e.screenY < 100) { // max
+                        setResizableHeight('100vh');
+                        setTableHeight(450)
+                    }
+                    else if (e.screenY < 150) {
+                        setTableHeight(400)
+                    }
+                    else if (e.screenY < 200) {
+                        setTableHeight(350)
+                    }
+                    else if (e.screenY < 250) {
+                        setTableHeight(300)
+                    }
+                    else if (e.screenY < 300) {
+                        setTableHeight(250)
+                    }
+                    else if (e.screenY < 400) {
+                        setTableHeight(200)
+                    }
+                    else if (e.screenY < 600) {
+                        setTableHeight(150) // default
+                    }
+                    else if (e.screenY >= 600) {
+                        setBottomTableWindow('min');
+                    }
+                }}
+            >
+                <div style={{ paddingTop: 10, position: "relative", height: "100%" }}>
+                    <Row className="bottommodal-header">
+                        <Col md={8}>
+                            <p className="bottommodal-title">{title}</p>
+                        </Col>
+                        <Col md={4} className="bottommodal-window-button-container">
+                            <span className="bottommodal-minimize" title="minimize"
+                                onClick={() => setBottomTableWindow("min")}
+                            >
+                                <Icon icon={removeCircleOutline} width={30} height={30} color="#FFFFFF" />
+                            </span>
+                            <span className="bottommodal-maximize" title={maximizeTitle}
+                                onClick={() => setBottomTableWindow("max")}
+                            >
+                                <Icon icon={windowMaximaze} width={30} height={30} color="#FFFFFF" />
+                            </span>
+                            <span className="bottommodal-close" title="close"
+                                onClick={closeModal}
+                            >
+                                <Icon icon={closeCircleOutline} width={30} height={30} color="#FFFFFF" />
+                            </span>
+                        </Col>
+                    </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>}
+                        </CardBody>
+                    </Card>
+                </div>
+            </Resizable>
+        </>
     )
 }