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 1 year 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
Split 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 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>
</>
)
}

Write Preview
Loading…
Cancel
Save