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

Merge branch 'master' of https://git.oslog.id/ibnu/generic-ospro-frontend

pull/1/head
root 9 months ago
parent
6984f8a8fc 73bf44d9d8
commit
32f79d43e4
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