14 changed files with 608 additions and 42 deletions
@ -0,0 +1,296 @@
|
||||
import React, { useState } from 'react'; |
||||
import { Row, Col, Button, Modal } from 'antd'; |
||||
import { RightOutlined, LeftOutlined } from '@ant-design/icons'; |
||||
import { Widgets } from 'react-awesome-query-builder'; |
||||
|
||||
const DashboardDyna = () => { |
||||
const [templates, setTemplates] = useState([]); |
||||
const [widgets, setWidgets] = useState([]); |
||||
const [templateColSpan, setTemplateColSpan] = useState(5); |
||||
const [widgetColSpan, setWidgetColSpan] = useState(5); |
||||
const [dashboardColSpan, setDashboardColSpan] = useState(19); |
||||
const [isModalOpen, setIsModalOpen] = useState(false); |
||||
const [templateIndex, setTemplateIndex] = useState(0); |
||||
const [columnIndex, setColumnIndex] = useState(0); |
||||
|
||||
const addWidget = (widget) => { |
||||
// Make a copy of the current widgets state
|
||||
const newWidgets = [...widgets]; |
||||
if (!newWidgets[templateIndex]) { |
||||
newWidgets[templateIndex] = [] |
||||
} |
||||
|
||||
// Make sure the templateIndex and columnIndex are within bounds
|
||||
// if (templateIndex <= newWidgets.length && columnIndex <= newWidgets[templateIndex].length) {
|
||||
// Make a copy of the nested array at templateIndex
|
||||
const nestedArray = [...newWidgets[templateIndex]]; |
||||
|
||||
// Update the value at columnIndex
|
||||
nestedArray[columnIndex] = widget; |
||||
|
||||
// Update the nested array in the newWidgets array
|
||||
newWidgets[templateIndex] = nestedArray; |
||||
|
||||
// Update the state with the newWidgets array
|
||||
setWidgets(newWidgets); |
||||
// }
|
||||
const lastIndex = templates.length - 1; |
||||
if (lastIndex >= 0) { |
||||
let id = templates[templateIndex].id; |
||||
let updatedTemplate = checkTemplate(id, newWidgets, true); |
||||
let updatedTemplates = [...templates]; |
||||
updatedTemplates[templateIndex] = updatedTemplate; |
||||
setTemplates(updatedTemplates); |
||||
} |
||||
}; |
||||
|
||||
|
||||
const addTemplate = (template) => { |
||||
const lastIndex = templates.length - 1; |
||||
setTemplates([...templates, checkTemplate(template)]); |
||||
}; |
||||
|
||||
const clearTemplates = () => { |
||||
setTemplates([]); |
||||
clearWidgets() |
||||
}; |
||||
|
||||
const clearWidgets = () => { |
||||
setWidgets([]); |
||||
}; |
||||
|
||||
const showModal = (template = 0, column = 0) => { |
||||
setTemplateIndex(template); |
||||
setColumnIndex(column); |
||||
setIsModalOpen(true); |
||||
}; |
||||
|
||||
const handleOk = () => { |
||||
setIsModalOpen(false); |
||||
}; |
||||
|
||||
const handleCancel = () => { |
||||
setIsModalOpen(false); |
||||
}; |
||||
|
||||
const checkTemplate = (template, widgets = null, add_widget = false) => { |
||||
let component, widgetCount, id = template; |
||||
let templateIndex = templates.length; |
||||
if (add_widget) { |
||||
templateIndex-- |
||||
} |
||||
switch (template) { |
||||
case 0: |
||||
component = ( |
||||
<Row style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> |
||||
<Col span={24} onClick={() => showModal(templateIndex, 0)}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}> |
||||
{widgets ? widgets[templateIndex][0] : null} |
||||
</div> |
||||
</Col> |
||||
</Row> |
||||
); |
||||
widgetCount = 1; |
||||
break; |
||||
case 1: |
||||
component = ( |
||||
<Row style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10, height: '25vh' }}> |
||||
<Col span={5} onClick={() => showModal(templateIndex, 0)}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}> |
||||
{widgets ? widgets[templateIndex][0] : null} |
||||
</div> </Col> |
||||
<Col span={5} onClick={() => showModal(templateIndex, 1)}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}> |
||||
{widgets ? widgets[templateIndex][1] : null} |
||||
</div> </Col> |
||||
<Col span={5} onClick={() => showModal(templateIndex, 2)}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}> |
||||
{widgets ? widgets[templateIndex][2] : null} |
||||
</div> </Col> |
||||
<Col span={6} onClick={() => showModal(templateIndex, 3)}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}> |
||||
{widgets ? widgets[templateIndex][3] : null} |
||||
</div> </Col> |
||||
</Row> |
||||
); |
||||
widgetCount = 4; |
||||
break; |
||||
case 2: |
||||
component = ( |
||||
<Row style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10, height: '25vh' }}> |
||||
<Col span={5} onClick={() => showModal(templateIndex, 0)}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}> |
||||
{widgets ? widgets[templateIndex][0] : null} |
||||
</div> </Col> |
||||
<Col span={18} onClick={() => showModal(templateIndex, 1)}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}> |
||||
{widgets ? widgets[templateIndex][1] : null} |
||||
</div> </Col> |
||||
</Row> |
||||
); |
||||
widgetCount = 2; |
||||
break; |
||||
case 3: |
||||
component = ( |
||||
<Row style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10, height: '25vh' }}> |
||||
<Col span={17} onClick={() => showModal(templateIndex, 0)}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}> |
||||
{widgets ? widgets[templateIndex][0] : null} |
||||
</div> </Col> |
||||
<Col span={6} onClick={() => showModal(templateIndex, 1)}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}> |
||||
{widgets ? widgets[templateIndex][1] : null} |
||||
</div> </Col> |
||||
</Row> |
||||
); |
||||
widgetCount = 2; |
||||
break; |
||||
default: |
||||
break; |
||||
} |
||||
return { component, widgetCount, id }; |
||||
}; |
||||
|
||||
const toggleTemplateColumn = () => { |
||||
if (templateColSpan === 1) { |
||||
setTemplateColSpan(5); |
||||
setDashboardColSpan(dashboardColSpan - 4); |
||||
} else { |
||||
setTemplateColSpan(1); |
||||
setDashboardColSpan(dashboardColSpan + 4); |
||||
} |
||||
}; |
||||
|
||||
const toggleWidgetColumn = () => { |
||||
if (widgetColSpan === 1) { |
||||
setWidgetColSpan(5); |
||||
setDashboardColSpan(dashboardColSpan - 4); |
||||
} else { |
||||
setWidgetColSpan(1); |
||||
setDashboardColSpan(dashboardColSpan + 4); |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<div style={{ marginLeft: -25, marginRight: -25 }}> |
||||
<Row> |
||||
<Col span={templateColSpan}> |
||||
<div style={{ backgroundColor: '#F8F8F8', margin: 2, paddingLeft: 20, paddingRight: 20, paddingTop: 10, height: '90vh' }}> |
||||
<div style={{ display: 'flex', flexDirection: 'row', marginBottom: 10 }}> |
||||
<div style={{ flex: 20, display: 'flex', flexDirection: 'column' }}> |
||||
{templateColSpan === 1 ? |
||||
<Button icon={<RightOutlined />} onClick={toggleTemplateColumn}></Button> |
||||
: |
||||
<> |
||||
<div style={{ color: '#444444', fontSize: 14, fontWeight: 'bold', marginBottom: 10 }}>Template</div> |
||||
|
||||
<Row onClick={() => addTemplate(0)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> |
||||
<Col span={24}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10 }} /> |
||||
</Col> |
||||
</Row> |
||||
<Row onClick={() => addTemplate(1)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> |
||||
<Col span={5}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10 }} /> |
||||
</Col> |
||||
<Col span={5}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10 }} /> |
||||
</Col> |
||||
<Col span={5}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10 }} /> |
||||
</Col> |
||||
<Col span={6}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10 }} /> |
||||
</Col> |
||||
</Row> |
||||
<Row onClick={() => addTemplate(2)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> |
||||
<Col span={5}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10 }} /> |
||||
</Col> |
||||
<Col span={18}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10 }} /> |
||||
</Col> |
||||
</Row> |
||||
<Row onClick={() => addTemplate(3)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> |
||||
<Col span={17}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10 }} /> |
||||
</Col> |
||||
<Col span={6}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10 }} /> |
||||
</Col> |
||||
</Row> |
||||
<Button icon={<LeftOutlined />} onClick={toggleTemplateColumn}></Button> |
||||
</> |
||||
} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</Col> |
||||
<Col span={dashboardColSpan}> |
||||
<div style={{ backgroundColor: '#F8F8F8', margin: 2, paddingLeft: 20, paddingRight: 20, paddingTop: 10, height: '90vh' }}> |
||||
<div style={{ display: 'flex', flexDirection: 'row', marginBottom: 10 }}> |
||||
<div style={{ flex: 20, display: 'flex', flexDirection: 'column' }}> |
||||
<div style={{ color: '#444444', fontSize: 14, fontWeight: 'bold', marginBottom: 10 }}>Dashboard</div> |
||||
{templates.length > 0 ? templates.map((template) => { |
||||
return template.component; |
||||
}) : null} |
||||
<Button onClick={() => clearTemplates()}>Clear</Button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</Col> |
||||
</Row> |
||||
<Modal title="Widgets" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}> |
||||
<div style={{ backgroundColor: '#F8F8F8', margin: 2, paddingLeft: 20, paddingRight: 20, paddingTop: 10 }}> |
||||
<div style={{ display: 'flex', flexDirection: 'row', marginBottom: 10 }}> |
||||
<div style={{ flex: 20, display: 'flex', flexDirection: 'column' }}> |
||||
{widgetColSpan === 1 ? |
||||
<Button icon={<RightOutlined />} onClick={toggleWidgetColumn}></Button> |
||||
: |
||||
<> |
||||
<div style={{ color: '#444444', fontSize: 14, fontWeight: 'bold', marginBottom: 10 }}>Widget</div> |
||||
|
||||
<Row onClick={() => addWidget(0)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> |
||||
<Col span={5}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10 }} /> |
||||
</Col> |
||||
<Col span={18}> |
||||
<div style={{ padding: 0 }}>Pie Chart Project By Role</div> |
||||
</Col> |
||||
</Row> |
||||
<Row onClick={() => addWidget(1)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> |
||||
<Col span={5}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10 }} /> |
||||
</Col> |
||||
<Col span={18}> |
||||
<div style={{ padding: 0 }}>Pie Chart Project By Role</div> |
||||
</Col> |
||||
</Row> |
||||
<Row onClick={() => addWidget(2)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> |
||||
<Col span={5}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10 }} /> |
||||
</Col> |
||||
<Col span={18}> |
||||
<div style={{ padding: 0 }}>Pie Chart Project By Role</div> |
||||
</Col> |
||||
</Row> |
||||
<Row onClick={() => addWidget(3)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> |
||||
<Col span={5}> |
||||
<div style={{ backgroundColor: '#CCCCCC', padding: 10 }} /> |
||||
</Col> |
||||
<Col span={18}> |
||||
<div style={{ padding: 0 }}>Pie Chart Project By Role</div> |
||||
</Col> |
||||
</Row> |
||||
</> |
||||
} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</Modal> |
||||
</div> |
||||
|
||||
); |
||||
}; |
||||
|
||||
export default DashboardDyna; |
||||
Loading…
Reference in new issue