From c41dc74a64bc52d2604b911da66d49c245e77f12 Mon Sep 17 00:00:00 2001 From: wahyu Date: Mon, 4 Mar 2024 13:30:34 +0700 Subject: [PATCH] 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;