@visns-studio/visns-components 5.13.17 → 5.13.18

package/package.json

@@ -88,7 +88,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.13.17",
+    "version": "5.13.18",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/generic/GenericEditableTable.jsx

@@ -375,6 +375,14 @@ const GenericEditableTable = ({
         setSelectedRows(new Set());
     }, [dataSets, activeDatasetIndex, hasMarginRow, rows.marginRow]);
 
+    // Initialize newEntry with default values when columns change
+    useEffect(() => {
+        const defaultValues = getDefaultRowValues();
+        if (!hasCategory) {
+            setNewEntry(defaultValues);
+        }
+    }, [columns, hasCategory]);
+
     // Helper to sort by sort_order
     const sortBySortOrder = (dataArray) =>
         [...dataArray].sort((a, b) => a.sort_order - b.sort_order);
@@ -416,6 +424,73 @@ const GenericEditableTable = ({
         return undefined;
     };
 
+    // Helper function to get default values for new row
+    const getDefaultRowValues = () => {
+        const defaultValues = {};
+        columns.forEach((column) => {
+            switch (column.type) {
+                case 'dropdown':
+                    if (column.options && column.options.length > 0) {
+                        defaultValues[column.id] = column.options[0].id;
+                    }
+                    break;
+                case 'dropdown-ajax':
+                    // Reset to empty for ajax dropdowns
+                    defaultValues[column.id] = '';
+                    break;
+                case 'currency':
+                case 'number':
+                case 'text':
+                case 'date':
+                case 'html5_date':
+                    // Reset to empty string for input fields
+                    defaultValues[column.id] = '';
+                    break;
+                case 'multi-dropdown-ajax':
+                    // Reset to empty for multi-select
+                    defaultValues[column.id] = '';
+                    break;
+                case 'total':
+                    // Don't reset total fields as they are calculated
+                    break;
+                case 'colour':
+                    // Reset colour fields
+                    defaultValues[column.id] = '';
+                    break;
+                default:
+                    // Reset any other field types to empty string
+                    defaultValues[column.id] = '';
+                    break;
+            }
+        });
+        return defaultValues;
+    };
+
+    // Helper function to get add row background color (same logic as getRowBackground)
+    const getAddRowBackground = (newRowData, groupId = null) => {
+        if (!newRowData) newRowData = {};
+
+        // Ensure default status values are applied for color calculation
+        const enrichedRowData = { ...newRowData };
+        columns.forEach((column) => {
+            if (column.type === 'dropdown' && column.options && column.options.length > 0) {
+                if (!enrichedRowData[column.id]) {
+                    enrichedRowData[column.id] = column.options[0].id;
+                }
+            }
+        });
+
+        // Check if there's a colour picked from the colours column
+        const coloursValue = enrichedRowData.colours || enrichedRowData.row_colour;
+        if (coloursValue) {
+            return `${coloursValue}40`; // Add 40% opacity
+        }
+
+        // Check for status color if no manual color is set
+        const statusColor = getStatusColor(enrichedRowData);
+        return statusColor ? `${statusColor}40` : undefined; // Add 40% opacity
+    };
+
     // Calculate total project cost (sum of all entries excluding margin row)
     const calculateTotalProjectCost = (dataEntries) => {
         const totalColIndex = columns.findIndex((c) => c.type === 'total');
@@ -674,11 +749,12 @@ const GenericEditableTable = ({
         setDataSets(updatedDataSets);
         debouncedUpdate(updatedDataSets);
 
-        // Reset new-entry state
+        // Reset new-entry state with default values
+        const defaultValues = getDefaultRowValues();
         if (hasCategory) {
-            setNewEntries((prev) => ({ ...prev, [groupId]: {} }));
+            setNewEntries((prev) => ({ ...prev, [groupId]: defaultValues }));
         } else {
-            setNewEntry({});
+            setNewEntry(defaultValues);
         }
         toast.success('Row added');
     };
@@ -1117,10 +1193,11 @@ const GenericEditableTable = ({
             case 'currency':
                 return (
                     <CurrencyInput
+                        key={`new-currency-${column.id}-${groupId || 'default'}-${value || 'empty'}`}
                         id={`new-currency-${column.id}-${groupId || 'default'}`}
                         name={column.id}
                         placeholder="$0.00"
-                        defaultValue={value || ''}
+                        value={value || ''}
                         decimalsLimit={2}
                         prefix="$"
                         decimalSeparator="."
@@ -1181,9 +1258,10 @@ const GenericEditableTable = ({
                     />
                 );
             case 'dropdown':
+                const defaultValue = value || (column.options && column.options.length > 0 ? column.options[0].id : '');
                 return (
                     <select
-                        value={value || ''}
+                        value={defaultValue}
                         onChange={(e) =>
                             handleNewFieldChange(
                                 e.target.value,
@@ -1429,7 +1507,12 @@ const GenericEditableTable = ({
     const renderNewRowForm = (groupId = null) => {
         const newRowData = hasCategory ? newEntries[groupId] || {} : newEntry;
         return (
-            <tr className={styles.newRow}>
+            <tr 
+                className={styles.newRow}
+                style={{
+                    background: getAddRowBackground(newRowData, groupId),
+                }}
+            >
                 <td className={styles.checkboxColumn}></td>
                 {columns.map((column) => (
                     <td