ROU-3748: Add client action to apply conditional format to the aggregate row

src/OSFramework/DataGrid/Enum/ErrorCodes.ts

@@ -82,6 +82,7 @@ namespace OSFramework.DataGrid.Enum {
         API_FailedAddColumnToGroupPanel = 'GRID-API-10007',
         API_FailedSetColumnWordWrap = 'GRID-API-10008',
         API_FailedSetColumnHeader = 'GRID-API-10009',
+        API_FailedSetNumberAggregateConditionalFormatting = 'GRID-API-10010',
         //EXPORT
         API_FailedCustomizeExportingMessage = 'GRID-API-11001',
         //COLUMNPICKER

src/OSFramework/DataGrid/Feature/IColumnAggregate.ts

@@ -1,5 +1,29 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 namespace OSFramework.DataGrid.Feature {
     export interface IColumnAggregate
-        extends Interface.IProviderConfig<boolean> {}
+        extends Interface.IProviderConfig<boolean> {
+        /**
+         * Function to add  the aggregate cell class
+         *
+         * @param columnBinding {string} => The column binding of the aggregate to add the class
+         * @param className {string} => Classname to be added
+         */
+        addClass(columnBinding: string, className: string): void;
+
+        /**
+         * Function to remove the aggregate cell class
+         *
+         * @param columnBinding {string} => The column binding of the aggregate to add the class
+         * @param className {string} => Classname to be added
+         */
+        removeClass(columnBinding: string, className: string): void;
+
+        /**
+         * Function that will set the conditional format to the aggregate rows
+         *
+         * @param columnID {string} => The columnID of the aggregate to add the new conditional format rules
+         * @param conditionalFormat {string} => String containing the conditional format rules
+         */
+        setConditionalFormat(columnID: string, conditionalFormat: string);
+    }
 }

src/OSFramework/DataGrid/Feature/IConditionalFormat.ts

@@ -1,8 +1,23 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 namespace OSFramework.DataGrid.Feature {
     export interface IConditionalFormat {
+        /**
+         * Adds new conditional format rules to the desired binding from the aggregate rows
+         *
+         * @param binding {string} => The column binding to add the new conditional format rules
+         * @param rules {Array<OSFramework.DataGrid.OSStructure.ConditionalFormat>} => Array containing the conditional format rules
+         */
+        addAggregateRules(
+            binding: string,
+            rules: Array<OSFramework.DataGrid.OSStructure.ConditionalFormat>
+        ): void;
+
         /**
          * Adds new conditional format rules to the desired binding.
+         *
+         * @param binding {string} => The column binding to add the new conditional format rules
+         * @param rules {Array<OSFramework.DataGrid.OSStructure.ConditionalFormat>} => Array containing the conditional format rules
+         * @param refresh (optional) => True if it should clear the classes previously added
          */
         addRules(
             binding: string,
@@ -12,6 +27,8 @@ namespace OSFramework.DataGrid.Feature {
 
         /**
          * Removes rules of desired binding.
+         *
+         * @param binding {string} => The column binding to remove the conditional format rules
          */
         removeRules(binding: string);
     }

src/OutSystems/GridAPI/ConditionalFormat.ts

@@ -31,6 +31,49 @@ namespace OutSystems.GridAPI.ConditionalFormat {
         );
     }
 
+    /**
+     * Adds new conditional format rules to the desired aggregate binding.
+     *
+     * @export
+     * @param {string} gridID
+     * @param {string} binding Column binding
+     * @param {string} rules Rules for conditional formatting.
+     */
+    export function SetNumberAggregateConditionalFormatting(
+        gridID: string,
+        columnID: string,
+        conditionalFormat: string
+    ): string {
+        Performance.SetMark(
+            'ColumnManager.SetNumberAggregateConditionalFormatting'
+        );
+        const result = Auxiliary.CreateApiResponse({
+            gridID,
+            errorCode:
+                OSFramework.DataGrid.Enum.ErrorCodes
+                    .API_FailedSetNumberAggregateConditionalFormatting,
+            callback: () => {
+                const grid = GridManager.GetGridById(gridID);
+
+                grid.features.columnAggregate.setConditionalFormat(
+                    columnID,
+                    conditionalFormat
+                );
+            }
+        });
+
+        Performance.SetMark(
+            'ColumnManager.SetNumberAggregateConditionalFormatting-end'
+        );
+        Performance.GetMeasure(
+            '@datagrid-ColumnManager.SetNumberAggregateConditionalFormatting',
+            'ColumnManager.SetNumberAggregateConditionalFormatting',
+            'ColumnManager.SetNumberAggregateConditionalFormatting-end'
+        );
+
+        return result;
+    }
+
     /**
      * Removes rules of desired binding.
      *

src/Providers/DataGrid/Wijmo/Features/ColumnAggregate.ts

@@ -4,18 +4,114 @@
     export class ColumnAggregate
         implements
             OSFramework.DataGrid.Feature.IColumnAggregate,
-            OSFramework.DataGrid.Interface.IBuilder
+            OSFramework.DataGrid.Interface.IBuilder,
+            OSFramework.DataGrid.Interface.IDisposable
     {
         private _aggregateRow: wijmo.grid.GroupRow;
+        private _cellClasses: Map<string, Array<string>>;
         private _grid: Grid.IGridWijmo;
         private _showAggregateValue: boolean;
 
         constructor(grid: Grid.IGridWijmo, showAggregateValue: boolean) {
             this._grid = grid;
             this._showAggregateValue = showAggregateValue;
+            this._cellClasses = new Map<string, Array<string>>();
         }
+
+        private _formatItem(
+            s: wijmo.grid.FlexGrid,
+            e: wijmo.grid.FormatItemEventArgs
+        ) {
+            if (e.panel.cellType === wijmo.grid.CellType.ColumnFooter) {
+                const binding = this._grid.provider.columns[e.col].binding;
+                const classesToAdd = this._cellClasses.get(binding);
+                classesToAdd?.forEach((className) =>
+                    wijmo.addClass(e.cell, className)
+                );
+            }
+        }
+
+        /**
+         * Function to add the aggregate cell class
+         *
+         * @param columnBinding {string} => The column binding of the aggregate to add the class
+         * @param className {string} => Classname to be added
+         */
+        public addClass(columnBinding: string, className: string): void {
+            let cellClassArray = [];
+
+            // Get the array associated with the column binding, if it exists.
+            if (this._cellClasses.has(columnBinding))
+                cellClassArray = this._cellClasses.get(columnBinding);
+
+            // If the className does not exists in the cellClassArray yet, we should add it
+            const shouldAdd =
+                cellClassArray.findIndex(
+                    (cellClassName) => cellClassName === className
+                ) === -1;
+
+            // If shouldAdd is true and the className does not exist in the array yet, let's add it.
+            if (shouldAdd) {
+                cellClassArray = [...cellClassArray, className]; // append new className to the cellClassArray array
+                this._cellClasses.set(columnBinding, cellClassArray); // update the cellClassArray associated with the biding
+            }
+        }
+
         public build(): void {
             this.setState(this._showAggregateValue);
+            this._grid.provider.formatItem.addHandler(
+                this._formatItem.bind(this)
+            );
+        }
+
+        public dispose(): void {
+            this._grid.provider.formatItem.removeHandler(
+                this._formatItem.bind(this)
+            );
+        }
+
+        /**
+         * Function that will set the conditional format to the aggregate rows
+         *
+         * @param columnID {string} => The columnID of the aggregate to add the new conditional format rules
+         * @param conditionalFormat {string} => String containing the conditional format rules
+         */
+        public setConditionalFormat(
+            columnID: string,
+            conditionalFormat: string
+        ): void {
+            const column = this._grid.getColumn(columnID);
+
+            if (!column) {
+                throw new Error(
+                    OSFramework.DataGrid.Enum.ErrorMessages.InvalidColumnIdentifier
+                );
+            }
+
+            if (column.provider.aggregate === wijmo.Aggregate.None) {
+                throw new Error(
+                    OSFramework.DataGrid.Enum.ErrorMessages.Aggregate_NotFound
+                );
+            }
+
+            if (
+                !(
+                    column.columnType ===
+                        OSFramework.DataGrid.Enum.ColumnType.Number ||
+                    column.columnType ===
+                        OSFramework.DataGrid.Enum.ColumnType.Currency
+                )
+            )
+                throw new Error(
+                    `It seems you are trying to add the conditional format to a ${column.columnType}Column's aggregate. This is not allowed, try to use Number and Currency column instead.`
+                );
+
+            this._grid.features.conditionalFormat.addAggregateRules(
+                column.config.binding,
+                JSON.parse(conditionalFormat)
+            );
+
+            this._grid.provider.collectionView.refresh();
         }
 
         /**
@@ -40,5 +136,36 @@
                     this._grid.provider.columnFooters.rows.remove(aggregateRow);
             }
         }
+
+        /**
+         * Function to remove the aggregate cell class
+         *
+         * @param columnBinding {string} => The column binding of the aggregate to add the class
+         * @param className {string} => Classname to be added
+         */
+        public removeClass(columnBinding: string, className: string): void {
+            // If the columnBinding does not in the _cellClasses, no action is required
+            if (!this._cellClasses.has(columnBinding)) return;
+
+            // Get the array associated with the column binding
+            const cellClassArray = this._cellClasses.get(columnBinding);
+
+            // Get the className index in the array.
+            const classIndex = cellClassArray.findIndex(
+                (cellClassName) => cellClassName === className
+            );
+
+            // If the className exists in the array, let's remove it.
+            if (classIndex > -1) {
+                // Remove the desired className
+                cellClassArray.splice(classIndex, 1);
+
+                // If the array is not empty, update it.
+                // Otherwise, delete the binding element from the Map
+                if (cellClassArray.length > 0)
+                    this._cellClasses.set(columnBinding, cellClassArray);
+                else this._cellClasses.delete(columnBinding);
+            }
+        }
     }
 }