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

update dynamic dashboard

pull/1/head
wahyu 10 months ago
parent
c41dc74a64
commit
8b67596403
1 changed files with 115 additions and 80 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. 195
      src/views/Dashboard/DashboardDyna.js

195
src/views/Dashboard/DashboardDyna.js
Unescape View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Row, Col, Button } from 'antd';
import { Row, Col, Button, Modal } from 'antd';
import { RightOutlined, LeftOutlined } from '@ant-design/icons';
import { Widgets } from 'react-awesome-query-builder';
@ -8,29 +8,46 @@ const DashboardDyna = () => {
const [widgets, setWidgets] = useState([]);
const [templateColSpan, setTemplateColSpan] = useState(5);
const [widgetColSpan, setWidgetColSpan] = useState(5);
const [dashboardColSpan, setDashboardColSpan] = useState(14);
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[lastIndex].id;
let updatedTemplate = checkTemplate(id, [...widgets, widget]);
let id = templates[templateIndex].id;
let updatedTemplate = checkTemplate(id, newWidgets, true);
let updatedTemplates = [...templates];
updatedTemplates[lastIndex] = updatedTemplate;
updatedTemplates[templateIndex] = updatedTemplate;
setTemplates(updatedTemplates);
}
setWidgets([...widgets, widget]);
};
const addTemplate = (template) => {
const lastIndex = templates.length - 1;
if (templates.length == 0 || templates[lastIndex].widgetCount <= widgets.length) {
setTemplates([...templates, checkTemplate(template)]);
setWidgets([]);
} else {
alert("Please select a template first")
}
setTemplates([...templates, checkTemplate(template)]);
};
const clearTemplates = () => {
@ -42,15 +59,33 @@ const DashboardDyna = () => {
setWidgets([]);
};
const checkTemplate = (template, widgets = null) => {
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}>
<Col span={24} onClick={() => showModal(templateIndex, 0)}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[0] : null}
{widgets ? widgets[templateIndex][0] : null}
</div>
</Col>
</Row>
@ -60,21 +95,21 @@ const DashboardDyna = () => {
case 1:
component = (
<Row style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10, height: '25vh' }}>
<Col span={5}>
<Col span={5} onClick={() => showModal(templateIndex, 0)}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[0] : null}
{widgets ? widgets[templateIndex][0] : null}
</div> </Col>
<Col span={5}>
<Col span={5} onClick={() => showModal(templateIndex, 1)}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[1] : null}
{widgets ? widgets[templateIndex][1] : null}
</div> </Col>
<Col span={5}>
<Col span={5} onClick={() => showModal(templateIndex, 2)}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[2] : null}
{widgets ? widgets[templateIndex][2] : null}
</div> </Col>
<Col span={6}>
<Col span={6} onClick={() => showModal(templateIndex, 3)}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[3] : null}
{widgets ? widgets[templateIndex][3] : null}
</div> </Col>
</Row>
);
@ -83,13 +118,13 @@ const DashboardDyna = () => {
case 2:
component = (
<Row style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10, height: '25vh' }}>
<Col span={5}>
<Col span={5} onClick={() => showModal(templateIndex, 0)}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[0] : null}
{widgets ? widgets[templateIndex][0] : null}
</div> </Col>
<Col span={18}>
<Col span={18} onClick={() => showModal(templateIndex, 1)}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[1] : null}
{widgets ? widgets[templateIndex][1] : null}
</div> </Col>
</Row>
);
@ -98,13 +133,13 @@ const DashboardDyna = () => {
case 3:
component = (
<Row style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10, height: '25vh' }}>
<Col span={17}>
<Col span={17} onClick={() => showModal(templateIndex, 0)}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[0] : null}
{widgets ? widgets[templateIndex][0] : null}
</div> </Col>
<Col span={6}>
<Col span={6} onClick={() => showModal(templateIndex, 1)}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[1] : null}
{widgets ? widgets[templateIndex][1] : null}
</div> </Col>
</Row>
);
@ -191,55 +226,6 @@ const DashboardDyna = () => {
</div>
</div>
</Col>
<Col span={widgetColSpan}>
<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' }}>
{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>
<Button icon={<LeftOutlined />} onClick={toggleWidgetColumn}></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 }}>
@ -254,7 +240,56 @@ const DashboardDyna = () => {
</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>
);
};

Write Preview
Loading…
Cancel
Save