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

dynamic dashboard 1st iteration

pull/1/head
wahyu 10 months ago
parent
9b1d2964ab
commit
c41dc74a64
2 changed files with 263 additions and 0 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. 2
      src/routes.js
  2. 261
      src/views/Dashboard/DashboardDyna.js

2
src/routes.js
Unescape View File

@ -50,6 +50,7 @@ const UserShift = React.lazy(() => import('./views/SimproV2/UserShift'));
const Kanban = React.lazy(() => import('./views/SimproV2/Kanban')); const Kanban = React.lazy(() => import('./views/SimproV2/Kanban'));
// const DashboardProject = React.lazy(() => import('./views/DashboardProject')); // const DashboardProject = React.lazy(() => import('./views/DashboardProject'));
const DashboardBOD = React.lazy(() => import('./views/Dashboard/DashboardBOD')); const DashboardBOD = React.lazy(() => import('./views/Dashboard/DashboardBOD'));
const DashboardDyna = React.lazy(() => import('./views/Dashboard/DashboardDyna'));
const DashboardDND = React.lazy(() => import('./components/wj/App')) const DashboardDND = React.lazy(() => import('./components/wj/App'))
const DashboardCustomer = React.lazy(() => import('./views/Dashboard/DashboardCustomer')); const DashboardCustomer = React.lazy(() => import('./views/Dashboard/DashboardCustomer'));
const DashboardProject = React.lazy(() => import('./views/Dashboard/DashboardProject')); const DashboardProject = React.lazy(() => import('./views/Dashboard/DashboardProject'));
@ -61,6 +62,7 @@ const DemoManagement = React.lazy(() => import('./views/SimproV2/Demo'))
const routes = [ const routes = [
{ path: '/', exact: true, name: 'Home' }, { path: '/', exact: true, name: 'Home' },
{ path: '/dashboard', name: 'DashboardBOD', component: DashboardBOD }, { path: '/dashboard', name: 'DashboardBOD', component: DashboardBOD },
{ path: '/dashboard-dyna', name: 'DashboardBOD', component: DashboardDyna },
{ path: '/dashboard-dnd', name: 'DashboardBOD', component: DashboardDND }, { path: '/dashboard-dnd', name: 'DashboardBOD', component: DashboardDND },
{ path: '/dashboard-customer/:PROJECT_ID/:GANTT_ID/:SCURVE', name: 'DashboardCustomer', component: DashboardCustomer }, { path: '/dashboard-customer/:PROJECT_ID/:GANTT_ID/:SCURVE', name: 'DashboardCustomer', component: DashboardCustomer },
{ path: '/dashboard-project/:PROJECT_ID/:GANTT_ID/:Header', exact: true, name: 'Dashboard Project', component: DashboardProject }, { path: '/dashboard-project/:PROJECT_ID/:GANTT_ID/:Header', exact: true, name: 'Dashboard Project', component: DashboardProject },

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

@ -0,0 +1,261 @@
import React, { useState } from 'react';
import { Row, Col, Button } 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(14);
const addWidget = (widget) => {
const lastIndex = templates.length - 1;
if (lastIndex >= 0) {
let id = templates[lastIndex].id;
let updatedTemplate = checkTemplate(id, [...widgets, widget]);
let updatedTemplates = [...templates];
updatedTemplates[lastIndex] = 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")
}
};
const clearTemplates = () => {
setTemplates([]);
clearWidgets()
};
const clearWidgets = () => {
setWidgets([]);
};
const checkTemplate = (template, widgets = null) => {
let component, widgetCount, id = template;
switch (template) {
case 0:
component = (
<Row style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
<Col span={24}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[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}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[0] : null}
</div> </Col>
<Col span={5}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[1] : null}
</div> </Col>
<Col span={5}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[2] : null}
</div> </Col>
<Col span={6}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[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}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[0] : null}
</div> </Col>
<Col span={18}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[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}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[0] : null}
</div> </Col>
<Col span={6}>
<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
{widgets ? widgets[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={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 }}>
<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>
</div>
);
};
export default DashboardDyna;
Write Preview
Loading…
Cancel
Save