ROU-4182: New Image Column (#369)

* Implement image column - Added ImageColumn class - Added ImageColumnClick event - Added Column Config Image - Changed ActionColumnFactory to CellTemplateFactory * Update ColumnConfigImage * Fix code smells
OutSystems · Aug 21, 2023 · 0400e09 · 0400e09
1 parent 11923ce
commit 0400e09
Show file tree

Hide file tree

Showing 12 changed files with 140 additions and 16 deletions.
diff --git a/src/OSFramework/DataGrid/Configuration/Column/ColumnConfigAction.ts b/src/OSFramework/DataGrid/Configuration/Column/ColumnConfigAction.ts
@@ -4,7 +4,7 @@ namespace OSFramework.DataGrid.Configuration.Column {
      * Defines the configuration for Action Columns
      */
     export class ColumnConfigAction extends ColumnConfig {
-        public actionColumnElementType: DataGrid.Enum.ActionColumnElementType;
+        public actionColumnElementType: DataGrid.Enum.CellTemplateElementType;
         public extendedClass: string;
         public url: string;
 

diff --git a/src/OSFramework/DataGrid/Configuration/Column/ColumnConfigImage.ts b/src/OSFramework/DataGrid/Configuration/Column/ColumnConfigImage.ts
@@ -0,0 +1,21 @@
+/// <reference path="../../Types/index.ts" />
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+namespace OSFramework.DataGrid.Configuration.Column {
+    /**
+     * Defines the configuration for Action Columns
+     */
+    export class ColumnConfigImage extends ColumnConfig {
+        public actionColumnElementType =
+            DataGrid.Enum.CellTemplateElementType.Image;
+        public altText: string;
+
+        constructor(
+            config: DataGrid.Types.IColumnConfigs,
+            extraConfig: DataGrid.Types.IImageColumnExtraConfigs
+        ) {
+            super(config);
+            this.altText = extraConfig.altText;
+        }
+    }
+}
diff --git a/...amework/DataGrid/Enum/ActionColumnType.ts → .../DataGrid/Enum/CellTemplateElementType.ts b/...amework/DataGrid/Enum/ActionColumnType.ts → .../DataGrid/Enum/CellTemplateElementType.ts
@@ -3,8 +3,9 @@ namespace OSFramework.DataGrid.Enum {
     /**
      * Internal type definition
      */
-    export enum ActionColumnElementType {
+    export enum CellTemplateElementType {
         Button = 'Button',
+        Image = 'Image',
         Link = 'Link'
     }
 }
diff --git a/src/OSFramework/DataGrid/Enum/ColumnType.ts b/src/OSFramework/DataGrid/Enum/ColumnType.ts
@@ -13,6 +13,7 @@ namespace OSFramework.DataGrid.Enum {
         Download = 'Download',
         Dropdown = 'Dropdown',
         Group = 'Group',
+        Image = 'Image',
         Number = 'Number',
         Calculated = 'Calculated',
         Link = 'Link',

diff --git a/src/OSFramework/DataGrid/Event/Column/ColumnEventType.enum.ts b/src/OSFramework/DataGrid/Event/Column/ColumnEventType.enum.ts
@@ -8,6 +8,7 @@ namespace OSFramework.DataGrid.Event.Column {
      */
     export enum ColumnEventType {
         ActionClick = 'ActionClick',
+        ImageClick = 'ImageClick',
         OnCellValueChange = 'OnCellValueChange',
         OnColumnReorder = 'OnColumnReorder'
     }

diff --git a/src/OSFramework/DataGrid/Event/Column/ColumnEventsManager.ts b/src/OSFramework/DataGrid/Event/Column/ColumnEventsManager.ts
@@ -28,6 +28,9 @@ namespace OSFramework.DataGrid.Event.Column {
                 case ColumnEventType.ActionClick:
                     event = new ActionColumnClick();
                     break;
+                case ColumnEventType.ImageClick:
+                    event = new ImageColumnClick();
+                    break;
                 case ColumnEventType.OnCellValueChange:
                     event = new OnCellValueChange();
                     break;
@@ -58,6 +61,7 @@ namespace OSFramework.DataGrid.Event.Column {
 
                 switch (eventType) {
                     case ColumnEventType.ActionClick:
+                    case ColumnEventType.ImageClick:
                         handlerEvent.trigger(
                             this._column.grid.widgetId, // ID of Grid block that was clicked.
                             this._column.widgetId, // ID of Action Column block that was clicked.

diff --git a/src/OSFramework/DataGrid/Event/Column/ImageColumnClick.ts b/src/OSFramework/DataGrid/Event/Column/ImageColumnClick.ts
@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+namespace OSFramework.DataGrid.Event.Column {
+    export class ImageColumnClick extends AbstractColumnEvent {}
+}
diff --git a/src/OSFramework/DataGrid/Types/index.ts b/src/OSFramework/DataGrid/Types/index.ts
@@ -150,7 +150,12 @@ namespace OSFramework.DataGrid.Types {
     export interface IColumnExtraConfigs {}
 
     export interface IActionColumnExtraConfigs extends IColumnExtraConfigs {
-        actionColumnElementType: DataGrid.Enum.ActionColumnElementType;
+        actionColumnElementType: DataGrid.Enum.CellTemplateElementType;
+    }
+
+    export interface IImageColumnExtraConfigs
+        extends IActionColumnExtraConfigs {
+        altText?: string;
     }
 
     /**

diff --git a/src/Providers/DataGrid/Wijmo/Columns/ActionColumn.ts b/src/Providers/DataGrid/Wijmo/Columns/ActionColumn.ts
@@ -36,12 +36,11 @@ namespace Providers.DataGrid.Wijmo.Column {
             const config = super.getProviderConfig();
 
             // Get the cellTemplate based on the actionColumnElementType
-            config.cellTemplate =
-                Helper.ActionColumnFactory.MakeActionColumnCellTemplate(
-                    this.config.actionColumnElementType,
-                    config.binding,
-                    this.handleActionEvent.bind(this)
-                );
+            config.cellTemplate = Helper.CellTemplateFactory.MakeCellTemplate(
+                this.config.actionColumnElementType,
+                config.binding,
+                this.handleActionEvent.bind(this)
+            );
 
             return config;
         }

diff --git a/src/Providers/DataGrid/Wijmo/Columns/Factory.ts b/src/Providers/DataGrid/Wijmo/Columns/Factory.ts
@@ -60,6 +60,13 @@ namespace Providers.DataGrid.Wijmo.Column {
                         configs,
                         extraConfigs as OSFramework.DataGrid.Types.IGroupColumnExtraConfigs
                     );
+                case OSFramework.DataGrid.Enum.ColumnType.Image:
+                    return new ImageColumn(
+                        grid,
+                        columnID,
+                        configs,
+                        extraConfigs as OSFramework.DataGrid.Types.IImageColumnExtraConfigs
+                    );
                 case OSFramework.DataGrid.Enum.ColumnType.Number:
                     return new NumberColumn(
                         grid,

diff --git a/src/Providers/DataGrid/Wijmo/Columns/ImageColumn.ts b/src/Providers/DataGrid/Wijmo/Columns/ImageColumn.ts
@@ -0,0 +1,64 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+namespace Providers.DataGrid.Wijmo.Column {
+    export class ImageColumn extends AbstractProviderColumn<OSFramework.DataGrid.Configuration.Column.ColumnConfigImage> {
+        constructor(
+            grid: OSFramework.DataGrid.Grid.IGrid,
+            columnID: string,
+            configs: OSFramework.DataGrid.Types.IColumnConfigs,
+            extraConfig: OSFramework.DataGrid.Types.IImageColumnExtraConfigs
+        ) {
+            super(
+                grid,
+                columnID,
+                new OSFramework.DataGrid.Configuration.Column.ColumnConfigImage(
+                    configs,
+                    extraConfig
+                )
+            );
+            this._columnEvents =
+                new OSFramework.DataGrid.Event.Column.ColumnEventsManager(this);
+        }
+
+        /** Returns all the events associated to the column */
+        public get columnEvents(): OSFramework.DataGrid.Event.Column.ColumnEventsManager {
+            return this._columnEvents;
+        }
+
+        public get columnType(): OSFramework.DataGrid.Enum.ColumnType {
+            return OSFramework.DataGrid.Enum.ColumnType.Image;
+        }
+
+        public get providerType(): wijmo.DataType {
+            return wijmo.DataType.String;
+        }
+
+        public getProviderConfig(): OSFramework.DataGrid.Types.IColumnProviderConfigs {
+            const config = super.getProviderConfig();
+
+            // Get the cellTemplate based on the actionColumnElementType
+            config.cellTemplate = Helper.CellTemplateFactory.MakeCellTemplate(
+                this.config.actionColumnElementType,
+                config.binding,
+                this.handleActionEvent.bind(this),
+                this.config.altText
+            );
+
+            return config;
+        }
+
+        public handleActionEvent(ctx: wijmo.grid.ICellTemplateContext): void {
+            //Let's clone the line, since we will be removing the metadata info from it.
+            const clonedDataItem = _.cloneDeep(ctx.item);
+            this.grid.rowMetadata.clear(clonedDataItem);
+
+            this._columnEvents.trigger(
+                OSFramework.DataGrid.Event.Column.ColumnEventType.ImageClick,
+                JSON.stringify(
+                    this.grid.isSingleEntity
+                        ? OSFramework.DataGrid.Helper.Flatten(clonedDataItem)
+                        : clonedDataItem
+                )
+            );
+        }
+    }
+}
diff --git a/...aGrid/Wijmo/Helper/ActionColumnFactory.ts → ...aGrid/Wijmo/Helper/CellTemplateFactory.ts b/...aGrid/Wijmo/Helper/ActionColumnFactory.ts → ...aGrid/Wijmo/Helper/CellTemplateFactory.ts
@@ -1,33 +1,50 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-namespace Providers.DataGrid.Wijmo.Helper.ActionColumnFactory {
+namespace Providers.DataGrid.Wijmo.Helper.CellTemplateFactory {
     /**
      * Responsable for create the ActionColumn's cellTemplate
      * @param type ActionColumn Type
      * @param binding Column binding
      * @param callback Callback to be invoked in the click event
      */
-    export function MakeActionColumnCellTemplate(
-        type: OSFramework.DataGrid.Enum.ActionColumnElementType,
+    export function MakeCellTemplate(
+        type: OSFramework.DataGrid.Enum.CellTemplateElementType,
         binding: string,
-        callback: (item) => void
+        callback: (item) => void,
+        altText?: string
     ): wijmo.grid.ICellTemplateFunction {
         let cellTemplate: wijmo.grid.ICellTemplateFunction;
 
-        const hasFixedText = binding.charAt(0) === '$';
+        const hasFixedText = binding.startsWith('$');
         const text = hasFixedText
             ? binding.substring(1)
             : '${item.' + binding + '}';
 
+        let imgAltText = '';
+        if (altText !== undefined) {
+            const hasFixedAltText = altText.startsWith('$');
+            imgAltText = hasFixedAltText
+                ? altText.substring(1)
+                : '${item.' + altText + '}';
+        }
+
         switch (type) {
-            case OSFramework.DataGrid.Enum.ActionColumnElementType.Button:
+            case OSFramework.DataGrid.Enum.CellTemplateElementType.Button:
                 cellTemplate = wijmo.grid.cellmaker.CellMaker.makeButton({
                     text,
                     click: (e, ctx) => {
                         callback(ctx);
                     }
                 });
                 break;
-            case OSFramework.DataGrid.Enum.ActionColumnElementType.Link: {
+            case OSFramework.DataGrid.Enum.CellTemplateElementType.Image:
+                cellTemplate = wijmo.grid.cellmaker.CellMaker.makeImage({
+                    label: imgAltText,
+                    click: (e, ctx) => {
+                        callback(ctx);
+                    }
+                });
+                break;
+            case OSFramework.DataGrid.Enum.CellTemplateElementType.Link: {
                 cellTemplate = wijmo.grid.cellmaker.CellMaker.makeLink({
                     text,
                     click: (e, ctx) => {