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

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

Reviewed-on: ibnu/generic-ospro-frontend#32
pull/1/head
farhantock 1 year ago
parent
9fb80250c5 a31b1247a2
commit
a14f2cc2d5
1 changed files with 112 additions and 91 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. 203
      src/components/BottomModal/BottomModal.js

203
src/components/BottomModal/BottomModal.js
Unescape View File

@ -6,8 +6,9 @@ import Icon from '@iconify/react'
import closeCircleOutline from '@iconify/icons-ion/close-circle-outline'; import closeCircleOutline from '@iconify/icons-ion/close-circle-outline';
import removeCircleOutline from '@iconify/icons-ion/remove-circle-outline'; import removeCircleOutline from '@iconify/icons-ion/remove-circle-outline';
import windowMaximaze from '@iconify/icons-mdi/window-maximize'; 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 [tableHeight, setTableHeight] = useState(150)
const [resizableWidth, setResizableWidth] = useState("100%") const [resizableWidth, setResizableWidth] = useState("100%")
const [resizableHeight, setResizableHeight] = useState(300) const [resizableHeight, setResizableHeight] = useState(300)
@ -39,25 +40,42 @@ const BottomModal = ({title, tableHeader, tableData, closeModal, isReady}) => {
const renderTableRow = (item) => { const renderTableRow = (item) => {
let row = []; let row = [];
// looping through its object keys (item is an object) // looping through its object keys (item is an object)
Object.keys(item).map(key => { Object.keys(item).map(key => {
if (key === 'project_name') { if (key === 'project_name') {
let URL = `/#/dashboard-project/${item['id']}/${item['last_gantt_id']}`; let URL = `/#/dashboard-project/${item['id']}/${item['last_gantt_id']}`;
row.push(<td><a href={URL}>{item[key]}</a></td>) row.push(
} else if(key === 'last_gantt_id') { <td>
} else if(key === 'id') { <a
} else { href={URL}
row.push(<td>{item[key]}</td>) 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; return row;
} };
const RenderTable = useMemo(() => { const RenderTable = useMemo(() => {
if (tableData && tableData.length > 0) { if (tableData && tableData.length > 0) {
return ( return (
<Table size='sm'> <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'}> <tr key={'thead'}>
{tableHeader && tableHeader.length > 0 && {tableHeader && tableHeader.length > 0 &&
tableHeader.map((item, idx) => ( tableHeader.map((item, idx) => (
@ -66,8 +84,8 @@ const BottomModal = ({title, tableHeader, tableData, closeModal, isReady}) => {
} }
</tr> </tr>
</thead> </thead>
<tbody style={{backgroundColor: '#EEEEEE'}}> <tbody style={{ backgroundColor: '#EEEEEE' }}>
{tableData && tableData.length > 0 && {tableData && tableData.length > 0 &&
tableData.map((item, index) => { tableData.map((item, index) => {
return (<tr key={index}> return (<tr key={index}>
{renderTableRow(item, tableHeader)} {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> // <td style={{ fontWeight: "bold" }} colSpan="4" align="center">No Data Available</td>
// </tr> // </tr>
// </Table> // </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 No Data Available
</div> </div>
) )
}, [tableData, isReady]) }, [tableData, isReady])
return ( return (
<Resizable <>
style={{ <NotificationContainer />
position: "fixed", <Resizable
width: "100%", style={{
bottom: 0, position: "fixed",
left: 0, width: "100%",
right: 0, bottom: 0,
background: "#222222", left: 0,
borderTopLeftRadius: 10, right: 0,
borderTopRightRadius: 10, background: "#222222",
zIndex: 9999 borderTopLeftRadius: 10,
}} borderTopRightRadius: 10,
size={{ zIndex: 9999
width: resizableWidth, }}
height: resizableHeight size={{
}} width: resizableWidth,
maxHeight="100vh" height: resizableHeight
minWidth="100%" }}
enable={{ top: true, right: false, bottom: false, left: false, topRight: false, bottomRight: false, bottomLeft: false, topLeft: false }} maxHeight="100vh"
onResizeStop={(e, direction, ref, d) => { minWidth="100%"
setResizableWidth("100%"); enable={{ top: true, right: false, bottom: false, left: false, topRight: false, bottomRight: false, bottomLeft: false, topLeft: false }}
setResizableHeight(resizableHeight + d.height); onResizeStop={(e, direction, ref, d) => {
if (e.screenY < 100) { // max setResizableWidth("100%");
setResizableHeight('100vh'); setResizableHeight(resizableHeight + d.height);
setTableHeight(450) if (e.screenY < 100) { // max
} setResizableHeight('100vh');
else if (e.screenY < 150) { setTableHeight(450)
setTableHeight(400) }
} else if (e.screenY < 150) {
else if (e.screenY < 200) { setTableHeight(400)
setTableHeight(350) }
} else if (e.screenY < 200) {
else if (e.screenY < 250) { setTableHeight(350)
setTableHeight(300) }
} else if (e.screenY < 250) {
else if (e.screenY < 300) { setTableHeight(300)
setTableHeight(250) }
} else if (e.screenY < 300) {
else if (e.screenY < 400) { setTableHeight(250)
setTableHeight(200) }
} else if (e.screenY < 400) {
else if (e.screenY < 600) { setTableHeight(200)
setTableHeight(150) // default }
} else if (e.screenY < 600) {
else if (e.screenY >= 600) { setTableHeight(150) // default
setBottomTableWindow('min'); }
} else if (e.screenY >= 600) {
}} setBottomTableWindow('min');
> }
<div style={{ paddingTop: 10, position: "relative", height: "100%" }}> }}
<Row className="bottommodal-header"> >
<Col md={8}> <div style={{ paddingTop: 10, position: "relative", height: "100%" }}>
<p className="bottommodal-title">{title}</p> <Row className="bottommodal-header">
</Col> <Col md={8}>
<Col md={4} className="bottommodal-window-button-container"> <p className="bottommodal-title">{title}</p>
<span className="bottommodal-minimize" title="minimize" </Col>
onClick={() => setBottomTableWindow("min")} <Col md={4} className="bottommodal-window-button-container">
> <span className="bottommodal-minimize" title="minimize"
<Icon icon={removeCircleOutline} width={30} height={30} color="#FFFFFF" /> onClick={() => setBottomTableWindow("min")}
</span> >
<span className="bottommodal-maximize" title={maximizeTitle} <Icon icon={removeCircleOutline} width={30} height={30} color="#FFFFFF" />
onClick={() => setBottomTableWindow("max")} </span>
> <span className="bottommodal-maximize" title={maximizeTitle}
<Icon icon={windowMaximaze} width={30} height={30} color="#FFFFFF" /> onClick={() => setBottomTableWindow("max")}
</span> >
<span className="bottommodal-close" title="close" <Icon icon={windowMaximaze} width={30} height={30} color="#FFFFFF" />
onClick={closeModal} </span>
> <span className="bottommodal-close" title="close"
<Icon icon={closeCircleOutline} width={30} height={30} color="#FFFFFF" /> onClick={closeModal}
</span> >
</Col> <Icon icon={closeCircleOutline} width={30} height={30} color="#FFFFFF" />
</Row> </span>
<Card style={{ margin: 10 }}> </Col>
<CardBody style={{ margin: 0, padding: 0, borderRadius: 5, backgroundColor: '#EEEEEE', overflowY: 'auto', height: resizableHeight === 300 ? 240 : 540 }}> </Row>
{isReady ? RenderTable : <div style={{flex: 1, textAlign: 'center', marginTop: 50}}>Loading data...</div>} <Card style={{ margin: 10 }}>
</CardBody> <CardBody style={{ margin: 0, padding: 0, borderRadius: 5, backgroundColor: '#EEEEEE', overflowY: 'auto', height: resizableHeight === 300 ? 240 : 540 }}>
</Card> {isReady ? RenderTable : <div style={{ flex: 1, textAlign: 'center', marginTop: 50 }}>Loading data...</div>}
</div> </CardBody>
</Resizable> </Card>
</div>
</Resizable>
</>
) )
} }

Write Preview
Loading…
Cancel
Save