From 0400e094341de02f45c2468802952958961f6314 Mon Sep 17 00:00:00 2001
From: Giuliana Silva <108938618+OS-giulianasilva@users.noreply.github.com>
Date: Mon, 21 Aug 2023 11:48:23 +0100
Subject: [PATCH] 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
---
.../Column/ColumnConfigAction.ts | 2 +-
.../Configuration/Column/ColumnConfigImage.ts | 21 ++++++
...lumnType.ts => CellTemplateElementType.ts} | 3 +-
src/OSFramework/DataGrid/Enum/ColumnType.ts | 1 +
.../Event/Column/ColumnEventType.enum.ts | 1 +
.../Event/Column/ColumnEventsManager.ts | 4 ++
.../DataGrid/Event/Column/ImageColumnClick.ts | 4 ++
src/OSFramework/DataGrid/Types/index.ts | 7 +-
.../DataGrid/Wijmo/Columns/ActionColumn.ts | 11 ++--
.../DataGrid/Wijmo/Columns/Factory.ts | 7 ++
.../DataGrid/Wijmo/Columns/ImageColumn.ts | 64 +++++++++++++++++++
...olumnFactory.ts => CellTemplateFactory.ts} | 31 +++++++--
12 files changed, 140 insertions(+), 16 deletions(-)
create mode 100644 src/OSFramework/DataGrid/Configuration/Column/ColumnConfigImage.ts
rename src/OSFramework/DataGrid/Enum/{ActionColumnType.ts => CellTemplateElementType.ts} (75%)
create mode 100644 src/OSFramework/DataGrid/Event/Column/ImageColumnClick.ts
create mode 100644 src/Providers/DataGrid/Wijmo/Columns/ImageColumn.ts
rename src/Providers/DataGrid/Wijmo/Helper/{ActionColumnFactory.ts => CellTemplateFactory.ts} (55%)
diff --git a/src/OSFramework/DataGrid/Configuration/Column/ColumnConfigAction.ts b/src/OSFramework/DataGrid/Configuration/Column/ColumnConfigAction.ts
index c5cccf80..b81ecfde 100644
--- 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
new file mode 100644
index 00000000..740c8a5a
--- /dev/null
+++ b/src/OSFramework/DataGrid/Configuration/Column/ColumnConfigImage.ts
@@ -0,0 +1,21 @@
+///
+
+// 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/src/OSFramework/DataGrid/Enum/ActionColumnType.ts b/src/OSFramework/DataGrid/Enum/CellTemplateElementType.ts
similarity index 75%
rename from src/OSFramework/DataGrid/Enum/ActionColumnType.ts
rename to src/OSFramework/DataGrid/Enum/CellTemplateElementType.ts
index bf80fbfd..ed3dbcf2 100644
--- a/src/OSFramework/DataGrid/Enum/ActionColumnType.ts
+++ b/src/OSFramework/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
index 3862ff70..f7d81211 100644
--- 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
index 668a7e5a..a4182b9a 100644
--- 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
index 9ae84911..f9f58aa5 100644
--- 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
new file mode 100644
index 00000000..a116216f
--- /dev/null
+++ 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
index f46b5550..3bfeeb73 100644
--- 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
index ec721a5f..218907a1 100644
--- 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
index 2c8af0fd..530d5f2f 100644
--- 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
new file mode 100644
index 00000000..fc861f2c
--- /dev/null
+++ 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 {
+ 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/src/Providers/DataGrid/Wijmo/Helper/ActionColumnFactory.ts b/src/Providers/DataGrid/Wijmo/Helper/CellTemplateFactory.ts
similarity index 55%
rename from src/Providers/DataGrid/Wijmo/Helper/ActionColumnFactory.ts
rename to src/Providers/DataGrid/Wijmo/Helper/CellTemplateFactory.ts
index 31333aab..14acff22 100644
--- a/src/Providers/DataGrid/Wijmo/Helper/ActionColumnFactory.ts
+++ b/src/Providers/DataGrid/Wijmo/Helper/CellTemplateFactory.ts
@@ -1,25 +1,34 @@
// 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) => {
@@ -27,7 +36,15 @@ namespace Providers.DataGrid.Wijmo.Helper.ActionColumnFactory {
}
});
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) => {