update dynamic dashboard

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 id = templates[templateIndex].id;
-			let updatedTemplate = checkTemplate(id, [...widgets, widget]);
+			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")
-		}
 	};
 
 	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 = (
 					<Row style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
-						<Col span={24}>
+						<Col span={24} onClick={() => showModal(templateIndex, 0)}>
 							<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
-								{widgets ? widgets[0] : null}
+								{widgets ? widgets[templateIndex][0] : null}
 							</div>
 						</Col>
 					</Row>
@@ -60,21 +95,21 @@ const DashboardDyna = () => {
 			case 1:
 				component = (
 					<Row style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10, height: '25vh' }}>
-						<Col span={5}>
+						<Col span={5} onClick={() => showModal(templateIndex, 0)}>
 							<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
-								{widgets ? widgets[0] : null}
+								{widgets ? widgets[templateIndex][0] : null}
 							</div>						</Col>
-						<Col span={5}>
+						<Col span={5} onClick={() => showModal(templateIndex, 1)}>
 							<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
-								{widgets ? widgets[1] : null}
+								{widgets ? widgets[templateIndex][1] : null}
 							</div>						</Col>
-						<Col span={5}>
+						<Col span={5} onClick={() => showModal(templateIndex, 2)}>
 							<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
-								{widgets ? widgets[2] : null}
+								{widgets ? widgets[templateIndex][2] : null}
 							</div>						</Col>
-						<Col span={6}>
+						<Col span={6} onClick={() => showModal(templateIndex, 3)}>
 							<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
-								{widgets ? widgets[3] : null}
+								{widgets ? widgets[templateIndex][3] : null}
 							</div>						</Col>
 					</Row>
 				);
@@ -83,13 +118,13 @@ const DashboardDyna = () => {
 			case 2:
 				component = (
 					<Row style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10, height: '25vh' }}>
-						<Col span={5}>
+						<Col span={5} onClick={() => showModal(templateIndex, 0)}>
 							<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
-								{widgets ? widgets[0] : null}
+								{widgets ? widgets[templateIndex][0] : null}
 							</div>						</Col>
-						<Col span={18}>
+						<Col span={18} onClick={() => showModal(templateIndex, 1)}>
 							<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
-								{widgets ? widgets[1] : null}
+								{widgets ? widgets[templateIndex][1] : null}
 							</div>						</Col>
 					</Row>
 				);
@@ -98,13 +133,13 @@ const DashboardDyna = () => {
 			case 3:
 				component = (
 					<Row style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10, height: '25vh' }}>
-						<Col span={17}>
+						<Col span={17} onClick={() => showModal(templateIndex, 0)}>
 							<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
-								{widgets ? widgets[0] : null}
+								{widgets ? widgets[templateIndex][0] : null}
 							</div>						</Col>
-						<Col span={6}>
+						<Col span={6} onClick={() => showModal(templateIndex, 1)}>
 							<div style={{ backgroundColor: '#CCCCCC', padding: 10, height: '25vh' }}>
-								{widgets ? widgets[1] : null}
+								{widgets ? widgets[templateIndex][1] : null}
 							</div>						</Col>
 					</Row>
 				);
@@ -191,8 +226,22 @@ const DashboardDyna = () => {
 						</div>
 					</div>
 				</Col>
-				<Col span={widgetColSpan}>
+				<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 ?
@@ -233,28 +282,14 @@ const DashboardDyna = () => {
 											<div style={{ padding: 0 }}>Pie Chart Project By Role</div>
 										</Col>
 									</Row>
-										<Button icon={<LeftOutlined />} onClick={toggleWidgetColumn}></Button>
 								</>
 							}
 						</div>
 					</div>
 				</div>
-				</Col>
+			</Modal>
-				<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>
+
 	);
 };