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)]);
-			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,55 +226,6 @@ const DashboardDyna = () => {
 						</div>
 					</div>
 				</Col>
-				<Col span={widgetColSpan}>
-					<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' }}>
-								{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>
-										<Button icon={<LeftOutlined />} onClick={toggleWidgetColumn}></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 }}>
@@ -254,7 +240,56 @@ const DashboardDyna = () => {
 					</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>
+
 	);
 };