jrangel/lcp-visualizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes to datagrid

Browse Source
This commit is contained in:
Jeremy Rangel
2025-02-01 22:16:55 -08:00
parent 05664f161a
commit 6dd4e7e1e2
7 changed files with 73 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
blocks/components/LCPDataGrid.js
View File

@ -77,11 +77,7 @@ function lcpCellRenderer(params) {
console.log('Grid is not ready yet');
}
};
// let gridData = [
// { Department2: 'Sheriffs Office 2', Budget: '150000', MeetAt: '12/12/2025', PreferredColor: '#e0e0e0', PostContent: '<div> </div>' },
// { Department2: 'Treasurer2', Budget: '10000', MeetAt: '12-05', PreferredColor: '#232323', PostContent: '<p> </p>' },
// { Department2: 'Assessor2', Budget: '40000', MeetAt: 1737718512, PreferredColor: 'red', PostContent: '<h1> </h1>' },
// ];
const gridData = dataset;
// Helper function to detect the data type of a value
@ -224,6 +220,15 @@ const isValidCSSColor = (value) => {
return dataTypes;
};
// Use useEffect to update dataTypes whenever data changes
useEffect(() => {
if (data && data.length > 0) {
const detectedDataTypes = detectDataTypes(data);
setAttributes({ dataTypes: detectedDataTypes });
}
}, [data, setAttributes]);
// Assuming gridData is already populated
const gridDataTypes = detectDataTypes(gridData); // This will detect the types of each field
@ -315,11 +320,13 @@ const isValidCSSColor = (value) => {
const columns = keys.map((key, index) => {
return {
colId: getColumnLabel(index), // 'A', 'B', 'C', ...
headerName: getColumnLabel(index), // 'A', 'B', 'C', ...
field: key, // Field will match the key (Department2, Budget, etc.)
valueParser: lcpDataTypeParser,
cellRenderer: lcpCellRenderer, // Reference the custom cell renderer
headerComponent: LCPDataGridHeader
headerComponent: LCPDataGridHeader,
lcpDataType: 'myCustomDataType' // Add your custom parameter here
};
});
@ -427,21 +434,21 @@ const isValidCSSColor = (value) => {
/>
</div>
{/* Button outside the grid */}
<div>
{/* Input to add multiple rows */}
<div>
<input
type="number"
value={rowsToAdd}
onChange={(e) => setRowsToAdd(Math.max(1, parseInt(e.target.value, 10)))}
min="1"
/>
<button onClick={addRows}>Add Row(s)</button>
</div>
<div>
<span>{currentRowCount} Rows</span>
</div>
{/* Grid Footer */}
<div style={{padding:'15px 0px',display:'flex', flexDirection:'row', justifyContent:'space-between', background:'white'}}>
{/* Input to add multiple rows */}
<div style={{display:'flex', flexDirection:'row'}}>
<input
type="number"
value={rowsToAdd}
onChange={(e) => setRowsToAdd(Math.max(1, parseInt(e.target.value, 10)))}
min="1"
/>
<button onClick={addRows}>Add Row(s)</button>
</div>
<div>
<span>{currentRowCount} Rows</span>
</div>
</div>
</div>
);

4
blocks/components/LCPDataGridHeader.js
View File

@ -4,6 +4,7 @@ import {Icon, calendar } from '@wordpress/icons'; // Make sure to use the correc
const LCPDataGridHeader = (props) => {
const { displayName, column, updateData, sort, menu } = props;
const colId = column.colId;
const lcpDataType = column.getColDef().customDataType; // Retrieve custom data type
// Sorting function
const handleSort = () => {
@ -20,6 +21,7 @@ const LCPDataGridHeader = (props) => {
{/* Calendar Icon */}
<span style={{ marginRight: '8px', display: 'inline-block' }}>
<Icon icon={ calendar } />
{lcpDataType}
</span>
@ -28,7 +30,7 @@ const LCPDataGridHeader = (props) => {
style={{ fontWeight: 'bold', fontSize: '16px' }}
onClick={handleSort} // Click header for sorting
>
{displayName}
{colId}
</span>
{/* Sorting Indicators */}

42
blocks/components/LCPDatasetBuilder.js
View File

@ -1,4 +1,6 @@
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';
@ -49,7 +51,7 @@ const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
<Button
variant="secondary"
onClick={() => setIsOpen(true)}
style={{ marginBottom: '10px', width: '100%' }}
style={{ marginBottom: '10px', width: '100%', }}
>
{__('Edit Dataset', 'lcp-visualize')}
</Button>
@ -58,27 +60,49 @@ const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
<Modal
onRequestClose={() => setIsOpen(false)}
title={__('Dataset Builder', 'lcp-visualize')}
style={{ width: '90vw', height: '90vh' }}
style={{ width: '90vw', height: '90vh',
background:'#efefef',
padding:'0px',
}}
>
<div style={{ height: 'calc(90vh - 40px)', padding: '20px' }}>
<div style={{ height: 'calc(90vh - 40px)', padding: '0px' }}>
{/* Tabs */}
<div style={{ display: 'flex', marginBottom: '20px' }}>
<div style={{ display: 'flex' }}>
{datasets.map((dataset, index) => (
<button
key={index}
onClick={() => setActiveTab(index)} // Set the active tab
style={{
padding: '10px 20px',
margin: '0 5px',
backgroundColor: activeTab === index ? '#007cba' : '#f1f1f1',
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',
}}
>
{dataset.name}
> <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>