Unfinished support for updating attributes

blocks/components/LCPDataGrid.js

@@ -3,24 +3,55 @@ import { AgGridReact } from 'ag-grid-react';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 
+import LCPDataGridHeader from './LCPDataGridHeader';
 import LCPGridColorRender from './LCPGridColorRender';
 
-const LCPDataGrid = ({dataset}) => {
+const LCPDataGrid = ({ dataset, index, updateDataset }) => {
+
+
+    const onCellValueChanged = (event) => {
+       // console.log('Cell value changed. Grid index:', index);
+        
+        // Access the grid API
+        const gridApi = gridRef.current.api;
+
+        // Fetch all the data in the grid after the change
+        const allRowData = [];
+        gridApi.forEachNode(node => allRowData.push(node.data));
+
+        // Log the entire row data
+        //console.log('All Grid Data:', allRowData);
+
+        // Optionally, log the updated row data (just the changed row)
+      //  console.log('Updated Row Data:', event.data);
+
+        // Optionally, log the updated cell value
+      //  console.log('Updated Cell Value:', event.newValue);
+
+        // Create a fresh copy of the dataset and update its data
+        const updatedDataset = { data: allRowData };
+        console.log(updatedDataset.data);
+
+        // Send the updated data back to the parent (LCPDatasetBuilder) through updateDataset
+        updateDataset(index, updatedDataset);  // Call the parent function to update the dataset
+    
+    };
+
 
 // lcpCellRenderer to dynamically assign the right cellRenderer
 function lcpCellRenderer(params) {
     const value = params.value;
-    
+
     // First, check if the value is a Date object
     if (value instanceof Date) {
         return value.toLocaleString(); // Return a formatted string (you can format it however you want)
     }
-    
+
     // Check if the value is a valid CSS color (this works for string values like '#232323' or 'red')
     if (isValidCSSColor(value)) {
         return <LCPGridColorRender value={value} />; // Use the color renderer
     }
-    
+
     // Default rendering for other types of data (like text, number, etc.)
     return value;
 }
@@ -66,6 +97,10 @@ function lcpCellRenderer(params) {
 const isValidCSSColor = (value) => {
     // Ensure the value is a string before trimming
     value = String(value).trim();  // Convert to string if it's not already
+    // If the value is a Date object, it should not be processed as a CSS color
+    if (value instanceof Date) {
+        return false;  // Return false if it's a Date object
+    }
 
     // Regex to match valid CSS color formats (hex, rgb, rgba, hsl, hsla, named colors)
     const cssColorRegex = /^(#([0-9a-fA-F]{3}){1,2}|[a-zA-Z]+|rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)|rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(0(\.\d+)?|1(\.0+)?)\)|hsl\((\d{1,3}),\s*(\d{1,3})%,\s*(\d{1,3})%\)|hsla\((\d{1,3}),\s*(\d{1,3})%,\s*(\d{1,3})%,\s*(0(\.\d+)?|1(\.0+)?)\))$/i;
@@ -215,14 +250,22 @@ const isValidCSSColor = (value) => {
             // If it's the pinned top row, return the value as-is
             return params.newValue;
         } else {
+            // Check if the value is a Date object first
+            let value = params.newValue;
+    
+            if (value instanceof Date) {
+                // If it's a Date object, return the string representation (this could be customized if needed)
+                return value.toLocaleString(); // or use `toISOString()` if you prefer
+            }
+    
             // Process based on the detected data type
             switch (dataType) {
                 case 'number':
                     // If it's a number, return the number or NaN
-                    return Number(params.newValue);
+                    return Number(value);
                 case 'date':
-                    const dateStr = params.newValue;
-                    
+                    const dateStr = value;
+    
                     // Check if the value is an empty string or undefined
                     if (!dateStr || dateStr.trim() === '') {
                         return null; // If empty, return null or any default value you prefer
@@ -245,19 +288,20 @@ const isValidCSSColor = (value) => {
                     return !isNaN(parsedDate.getTime()) ? parsedDate : dateStr;
                 case 'color':
                     // If it's a color, return the value as-is
-                    return params.newValue;
+                    return value;
                 case 'html':
                     // If it's HTML, we can either sanitize or leave the value as is (for now, leaving it as is)
-                    return params.newValue;
+                    return value;
                 default:
                     // If it's text (or any other type), return the value as-is
-                    return params.newValue;
+                    return value;
             }
         }
     }
     
     
     
+    
 
     // Create columnDefs dynamically
     const [columnDefs, setColumnDefs] = useState([]);
@@ -275,7 +319,7 @@ const isValidCSSColor = (value) => {
                     field: key, // Field will match the key (Department2, Budget, etc.)
                     valueParser: lcpDataTypeParser,
                     cellRenderer: lcpCellRenderer, // Reference the custom cell renderer
-
+                    headerComponent: LCPDataGridHeader
                     
                 };
             });
@@ -378,6 +422,8 @@ const isValidCSSColor = (value) => {
                     onSortChanged={onSortChanged}
                     onFilterChanged={onFilterChanged}
                     onGridReady={onGridReady}
+                    onCellValueChanged={onCellValueChanged}
+
                 />
             </div>