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 9 months 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
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