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 ?
-
} onClick={toggleWidgetColumn}>
- :
- <>
-
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
-
-
-
} onClick={toggleWidgetColumn}>
-
- }
-
-
-
@@ -254,7 +240,56 @@ const DashboardDyna = () => {
+
+
+
+
+ {widgetColSpan === 1 ?
+
} onClick={toggleWidgetColumn}>
+ :
+ <>
+
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
+
+
+
+ }
+
+
+
+
);
};