@visns-studio/visns-components 5.13.4 → 5.13.6

package/package.json

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

package/src/components/DataGrid.jsx

@@ -114,6 +114,7 @@ import {
     renderDateRangeColumn,
     renderStageCounterColumn,
     renderGalleryColumn,
+    renderTotalColumn,
 } from './columns/ColumnRenderers.jsx';
 import _ from 'lodash';
 
@@ -2720,6 +2721,11 @@ const DataGrid = forwardRef(
                                     setLocalInputValues,
                                     handleInputUpdate,
                                 });
+                            case 'total':
+                                return renderTotalColumn()({
+                                    column,
+                                    commonProps,
+                                });
                             default:
                                 columnId = Array.isArray(column.id)
                                     ? column.id.join('-')

package/src/components/columns/ColumnRenderers.jsx

@@ -2472,3 +2472,52 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate, onUpda
         },
     };
 };
+
+// Calculate total for columns of type 'total'
+const calculateTotal = (entry, keys) => {
+    let total = 0;
+    if (Array.isArray(keys)) {
+        total = keys.reduce(
+            (sum, key) => sum + (parseFloat(entry[key]) || 0),
+            0
+        );
+    } else if (
+        keys &&
+        typeof keys === 'object' &&
+        keys.price &&
+        keys.unit
+    ) {
+        const { price: priceKeys, unit: unitKeys } = keys;
+        if (unitKeys.length === 1) {
+            const unitValue = parseFloat(entry[unitKeys[0]]) || 0;
+            total = priceKeys.reduce(
+                (sum, key) =>
+                    sum + (parseFloat(entry[key]) || 0) * unitValue,
+                0
+            );
+        } else if (priceKeys.length === unitKeys.length) {
+            total = priceKeys.reduce(
+                (sum, key, index) =>
+                    sum +
+                    (parseFloat(entry[key]) || 0) *
+                        (parseFloat(entry[unitKeys[index]]) || 0),
+                0
+            );
+        }
+    }
+    return total;
+};
+
+
+export const renderTotalColumn = () => {
+    return {
+        render: ({ data: rowData, column }) => {
+            // For individual rows, calculate the total for that specific row
+            const subtotal = calculateTotal(rowData, column.keys);
+            return new Intl.NumberFormat('en-AU', {
+                style: 'currency',
+                currency: 'AUD',
+            }).format(subtotal);
+        },
+    };
+};

package/src/components/generic/GenericEditableTable.jsx

@@ -419,6 +419,18 @@ const GenericEditableTable = ({
         return totalProjectCost * (percentage / 100);
     };
 
+    // Check if row matches where conditions
+    const matchesWhereConditions = (row, whereConditions) => {
+        if (!whereConditions || !Array.isArray(whereConditions)) {
+            return true;
+        }
+        
+        return whereConditions.every(condition => {
+            const { id, value } = condition;
+            return row[id] === value;
+        });
+    };
+
     // Calculate total for columns of type 'total'
     const calculateTotal = (entry, keys) => {
         let total = 0;
@@ -454,6 +466,19 @@ const GenericEditableTable = ({
         return total;
     };
 
+    // Calculate total across all data with where clause filtering
+    const calculateTotalFromData = (data, keys, whereConditions) => {
+        if (!data || !Array.isArray(data)) {
+            return 0;
+        }
+        
+        const filteredData = data.filter(row => matchesWhereConditions(row, whereConditions));
+        
+        return filteredData.reduce((sum, entry) => {
+            return sum + calculateTotal(entry, keys);
+        }, 0);
+    };
+
     // Debounced update to save entire dataSets array
     const debouncedUpdate = useMemo(
         () =>
@@ -1594,18 +1619,19 @@ const GenericEditableTable = ({
                                                     );
                                                 }
                                                 if (index === totalColIndex) {
+                                                    const totalColumn = columns[totalColIndex];
                                                     const groupTotal =
-                                                        group.entries.reduce(
-                                                            (sum, entry) =>
-                                                                sum +
-                                                                calculateTotal(
-                                                                    entry,
-                                                                    columns[
-                                                                        totalColIndex
-                                                                    ].keys
-                                                                ),
-                                                            0
-                                                        );
+                                                        group.entries
+                                                            .filter(entry => matchesWhereConditions(entry, totalColumn.where))
+                                                            .reduce(
+                                                                (sum, entry) =>
+                                                                    sum +
+                                                                    calculateTotal(
+                                                                        entry,
+                                                                        totalColumn.keys
+                                                                    ),
+                                                                0
+                                                            );
                                                     return (
                                                         <td key={col.id}>
                                                             {groupTotal.toLocaleString(
@@ -1749,17 +1775,18 @@ const GenericEditableTable = ({
                                             );
                                         }
                                         if (index === totalColIndex) {
+                                            const totalColumn = columns[totalColIndex];
                                             const overallTotal =
                                                 sortBySortOrder(
                                                     localData
-                                                ).reduce(
+                                                )
+                                                .filter(entry => matchesWhereConditions(entry, totalColumn.where))
+                                                .reduce(
                                                     (sum, entry) =>
                                                         sum +
                                                         calculateTotal(
                                                             entry,
-                                                            columns[
-                                                                totalColIndex
-                                                            ].keys
+                                                            totalColumn.keys
                                                         ),
                                                     0
                                                 );

package/src/components/styles/global-datagrid.css

@@ -62,9 +62,9 @@ div[role="tooltip"],
     text-overflow: unset !important; /* Disable text truncation */
     overflow: visible !important; /* Show wrapped content */
     height: auto !important; /* Allow cell to expand vertically */
-    min-height: 40px !important; /* Increased minimum height for better spacing */
+    min-height: 20px !important; /* Minimal height for maximum compactness */
     line-height: 1.4 !important; /* Better line spacing for readability */
-    padding: 10px 8px !important; /* Increased vertical padding for multi-line content */
+    padding: 1px 2px !important; /* Very light padding for minimal spacing */
     vertical-align: top !important; /* Align content to top for multi-line cells */
     display: flex !important; /* Use flexbox for better content alignment */
     align-items: flex-start !important; /* Align content to top */