136 lines
6.2 KiB
JavaScript
136 lines
6.2 KiB
JavaScript
import { useState, useEffect } from '@wordpress/element';
|
|
import {Icon, chevronDownSmall} from '@wordpress/icons';
|
|
|
|
import { Button, Modal } from '@wordpress/components';
|
|
import { __ } from '@wordpress/i18n';
|
|
import LCPDataGrid from './LCPDataGrid';
|
|
|
|
const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [activeTab, setActiveTab] = useState(0); // Track the active tab
|
|
const [datasets, setDatasets] = useState(attributes.datasets); // Use useState for datasets
|
|
|
|
// Sync state with attributes if they change outside the component
|
|
useEffect(() => {
|
|
setDatasets(attributes.datasets);
|
|
}, [attributes.datasets]);
|
|
|
|
const handleUpdateDataset = (index, newData) => {
|
|
// console.log("newData (formatted for copy-pasting):", JSON.stringify(newData, null, 2));
|
|
|
|
// Check if newData.data is an array
|
|
if (Array.isArray(newData.data)) {
|
|
// Create a new reference for the datasets array
|
|
const updatedDatasets = datasets.map((dataset, i) => {
|
|
if (i === index) {
|
|
// If this is the dataset we're updating, replace it with a new object
|
|
return {
|
|
...dataset, // Copy the existing dataset
|
|
data: [...newData.data], // Deep copy the data array
|
|
};
|
|
}
|
|
return dataset; // Leave other datasets unchanged
|
|
});
|
|
|
|
// console.log("Updated Datasets:", JSON.stringify(updatedDatasets, null, 2));
|
|
|
|
// Call setAttributes with the updated datasets
|
|
setAttributes({
|
|
...attributes, // Ensure we're not overriding other attributes accidentally
|
|
datasets: updatedDatasets, // Set the new datasets array
|
|
});
|
|
|
|
// console.log("Attributes after setAttributes:", JSON.stringify({ ...attributes, datasets: updatedDatasets }, null, 2));
|
|
} else {
|
|
// console.error("Invalid data format in newData:", newData);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => setIsOpen(true)}
|
|
style={{ marginBottom: '10px', width: '100%', }}
|
|
>
|
|
{__('Edit Dataset', 'lcp-visualize')}
|
|
</Button>
|
|
|
|
{isOpen && (
|
|
<Modal
|
|
onRequestClose={() => setIsOpen(false)}
|
|
title={__('Dataset Builder', 'lcp-visualize')}
|
|
style={{ width: '90vw', height: '90vh',
|
|
background:'#efefef',
|
|
padding:'0px',
|
|
}}
|
|
>
|
|
<div style={{ height: 'calc(90vh - 40px)', padding: '0px' }}>
|
|
{/* Tabs */}
|
|
<div style={{ display: 'flex' }}>
|
|
{datasets.map((dataset, index) => (
|
|
<button
|
|
key={index}
|
|
|
|
onClick={() => setActiveTab(index)} // Set the active tab
|
|
style={{
|
|
display: 'flex',
|
|
alignItems:'center',
|
|
justifyContent:'center',
|
|
position: 'relative',
|
|
minWidth: '100px',
|
|
height: '35px',
|
|
lineHeight: '35px',
|
|
padding: '0 10px',
|
|
margin: '0 3px',
|
|
backgroundColor: '#fff',
|
|
border: '1px solid #ccc',
|
|
borderBottomColor: activeTab === index ? '#fff' : '#ccc',
|
|
borderRadius: '3px',
|
|
color: activeTab === index ? 'white' : 'black',
|
|
border: '1px solid #ccc',
|
|
borderRadius: '5px',
|
|
cursor: 'pointer',
|
|
transition: 'background-color 0.3s ease',
|
|
}}
|
|
> <span style={{
|
|
display: 'inline-block',
|
|
marginRight: '5px',
|
|
color: activeTab === index ? '#333' : '#aaa',
|
|
fontWeight: 'bold'
|
|
}}>
|
|
{dataset.name}
|
|
</span>
|
|
<Icon icon={ chevronDownSmall } style={{position:'relative',top:'0px'}} />
|
|
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Render all the LCPDataGrid components */}
|
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
|
{datasets.map((dataset, index) => (
|
|
<div
|
|
key={index}
|
|
style={{
|
|
display: activeTab === index ? 'block' : 'none', // Show only the active tab
|
|
transition: 'display 0.3s ease',
|
|
}}
|
|
>
|
|
<LCPDataGrid
|
|
dataset={dataset.data} // Pass the specific dataset data (only the data, not the entire dataset)
|
|
index={index}
|
|
updateDataset={handleUpdateDataset} // Function defined outside of class context
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LCPDatasetBuilder;
|