From c41dc74a64bc52d2604b911da66d49c245e77f12 Mon Sep 17 00:00:00 2001 From: wahyu Date: Mon, 4 Mar 2024 13:30:34 +0700 Subject: [PATCH 1/2] dynamic dashboard 1st iteration --- src/routes.js | 2 + src/views/Dashboard/DashboardDyna.js | 261 +++++++++++++++++++++++++++ 2 files changed, 263 insertions(+) create mode 100644 src/views/Dashboard/DashboardDyna.js diff --git a/src/routes.js b/src/routes.js index 1ede7b1..267fa07 100644 --- a/src/routes.js +++ b/src/routes.js @@ -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')); @@ -61,6 +62,7 @@ const DemoManagement = React.lazy(() => import('./views/SimproV2/Demo')) 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 }, diff --git a/src/views/Dashboard/DashboardDyna.js b/src/views/Dashboard/DashboardDyna.js new file mode 100644 index 0000000..113729c --- /dev/null +++ b/src/views/Dashboard/DashboardDyna.js @@ -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 = ( + + +
+ {widgets ? widgets[0] : null} +
+ + + ); + widgetCount = 1; + break; + case 1: + component = ( + + +
+ {widgets ? widgets[0] : null} +
+ +
+ {widgets ? widgets[1] : null} +
+ +
+ {widgets ? widgets[2] : null} +
+ +
+ {widgets ? widgets[3] : null} +
+ + ); + widgetCount = 4; + break; + case 2: + component = ( + + +
+ {widgets ? widgets[0] : null} +
+ +
+ {widgets ? widgets[1] : null} +
+ + ); + widgetCount = 2; + break; + case 3: + component = ( + + +
+ {widgets ? widgets[0] : null} +
+ +
+ {widgets ? widgets[1] : null} +
+ + ); + 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 ( +
+ + +
+
+
+ {templateColSpan === 1 ? + + : + <> +
Template
+ + addTemplate(0)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> + +
+ + + addTemplate(1)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> + +
+ + +
+ + +
+ + +
+ + + addTemplate(2)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> + +
+ + +
+ + + addTemplate(3)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> + +
+ + +
+ + + + + } +
+
+
+ + +
+
+
+ {widgetColSpan === 1 ? + + : + <> +
Widget
+ + addWidget(0)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> + +
+ + +
Pie Chart Project By Role
+ + + addWidget(1)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> + +
+ + +
Pie Chart Project By Role
+ + + addWidget(2)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> + +
+ + +
Pie Chart Project By Role
+ + + addWidget(3)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> + +
+ + +
Pie Chart Project By Role
+ + + + + } +
+
+
+ + +
+
+
+
Dashboard
+ {templates.length > 0 ? templates.map((template) => { + return template.component; + }) : null} + +
+
+
+ + +
+ ); +}; + +export default DashboardDyna; From 8b6759640336cf3a792e457824733dfc88651295 Mon Sep 17 00:00:00 2001 From: wahyu Date: Tue, 5 Mar 2024 10:23:28 +0700 Subject: [PATCH 2/2] update dynamic dashboard --- src/views/Dashboard/DashboardDyna.js | 195 ++++++++++++++++----------- 1 file changed, 115 insertions(+), 80 deletions(-) diff --git a/src/views/Dashboard/DashboardDyna.js b/src/views/Dashboard/DashboardDyna.js index 113729c..2443392 100644 --- a/src/views/Dashboard/DashboardDyna.js +++ b/src/views/Dashboard/DashboardDyna.js @@ -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 = ( - + showModal(templateIndex, 0)}>
- {widgets ? widgets[0] : null} + {widgets ? widgets[templateIndex][0] : null}
@@ -60,21 +95,21 @@ const DashboardDyna = () => { case 1: component = ( - + showModal(templateIndex, 0)}>
- {widgets ? widgets[0] : null} + {widgets ? widgets[templateIndex][0] : null}
- + showModal(templateIndex, 1)}>
- {widgets ? widgets[1] : null} + {widgets ? widgets[templateIndex][1] : null}
- + showModal(templateIndex, 2)}>
- {widgets ? widgets[2] : null} + {widgets ? widgets[templateIndex][2] : null}
- + showModal(templateIndex, 3)}>
- {widgets ? widgets[3] : null} + {widgets ? widgets[templateIndex][3] : null}
); @@ -83,13 +118,13 @@ const DashboardDyna = () => { case 2: component = ( - + showModal(templateIndex, 0)}>
- {widgets ? widgets[0] : null} + {widgets ? widgets[templateIndex][0] : null}
- + showModal(templateIndex, 1)}>
- {widgets ? widgets[1] : null} + {widgets ? widgets[templateIndex][1] : null}
); @@ -98,13 +133,13 @@ const DashboardDyna = () => { case 3: component = ( - + showModal(templateIndex, 0)}>
- {widgets ? widgets[0] : null} + {widgets ? widgets[templateIndex][0] : null}
- + showModal(templateIndex, 1)}>
- {widgets ? widgets[1] : null} + {widgets ? widgets[templateIndex][1] : null}
); @@ -191,55 +226,6 @@ const DashboardDyna = () => {
- -
-
-
- {widgetColSpan === 1 ? - - : - <> -
Widget
- - addWidget(0)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> - -
- - -
Pie Chart Project By Role
- - - addWidget(1)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> - -
- - -
Pie Chart Project By Role
- - - addWidget(2)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> - -
- - -
Pie Chart Project By Role
- - - addWidget(3)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> - -
- - -
Pie Chart Project By Role
- - - - - } -
-
-
-
@@ -254,7 +240,56 @@ const DashboardDyna = () => {
+ +
+
+
+ {widgetColSpan === 1 ? + + : + <> +
Widget
+ + addWidget(0)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> + +
+ + +
Pie Chart Project By Role
+ + + addWidget(1)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> + +
+ + +
Pie Chart Project By Role
+ + + addWidget(2)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> + +
+ + +
Pie Chart Project By Role
+ + + addWidget(3)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}> + +
+ + +
Pie Chart Project By Role
+ + + + } +
+
+
+
+ ); };