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

Merge pull request 'dev-wahyu' (#66) from dev-wahyu into staging 

Reviewed-on: ibnu/generic-ospro-frontend#66
pull/1/head
farhantock 8 months ago
parent
3add312f03 8b67596403
commit
bebb7e6720
2 changed files with 298 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/routes.js
  2. 296
      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 DashboardProject = React.lazy(() => import('./views/DashboardProject'));
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 DashboardCustomer = React.lazy(() => import('./views/Dashboard/DashboardCustomer'));
const DashboardProject = React.lazy(() => import('./views/Dashboard/DashboardProject'));
@ -63,6 +64,7 @@ const SalesContact = React.lazy(() => import('./views/SimproV2/SalesContact'))
const routes = [
{ path: '/', exact: true, name: 'Home' },
{ path: '/dashboard', name: 'DashboardBOD', component: DashboardBOD },
{ path: '/dashboard-dyna', name: 'DashboardBOD', component: DashboardDyna },
{ path: '/dashboard-dnd', name: 'DashboardBOD', component: DashboardDND },
{ 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 },

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

@ -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;
Write Preview
Loading…
Cancel
Save