ROU-4904: Fix ContextMenu to allow item changes when clicking on a co…

…lumn (#419)

This PR is for fixing the misbehavior of the ContextMenu, when options
are added/removed/made disabled, on the on the event of the
`OnMenuToggle` of the `ContextMenu` block.

### What was happening
* The changes made by the developer on a given column for the context
menu:
  * Adding a new Item
  * Removing an item
  * Making an item enabled
  * Making an item disabled
* Evidence of the problem: 
  

### What was done
* Made the event onToggle synchronous when the menu **is opening**
* This will allow the changes made by the developer on the callback to
be reflected on the items
* This will cause the ChangeParameters to run before the method
`_canRaiseClickEvent` is invoked
* Made sure that when a context menu is opening, and an item is added or
removed, that the itemSource is refreshed;




### Test Steps
1. Open the test page
2. Right click on the column:
  <table>
<tr><th> </th><th> Description </th><th> Price </th><th>Name </th></tr>
<tr><td rowspan="9">Menu options </td><td>Copy </td><td>Copy
</td><td>Copy </td></tr>
<tr><td>Copy with headers </td><td>This is the Price column
</td><td>Copy with headers </td></tr>
<tr><td>(separator) </td><td>Copy with headers </td><td>(separator)
</td></tr>
<tr><td>Export > </td><td>(separator) </td><td>Export >
(disabled)</td></tr>
<tr><td>(separator) </td><td>(separator) </td><td>(separator) </td></tr>
<tr><td>Freeze column(s) </td><td>Export > </td><td>Freeze column(s)
</td></tr>
<tr><td>Unfreeze column(s) </td><td>(separator) </td><td>Unfreeze
column(s) </td></tr>
<tr><td> </td><td>Freeze column(s) </td><td> </td></tr>
<tr><td> </td><td>Unfreeze column(s) </td><td> </td></tr>
</table>

### Screenshots
| Before| After |
|:-------------:|:-------------:|
|
![IssueContextMenuOnMenuToggle](https://github.com/OutSystems/outsystems-datagrid/assets/10534623/22ddd57a-42b4-4627-b177-676388560980)
|
![context-menu-toggle](https://github.com/OutSystems/outsystems-datagrid/assets/10534623/80a55c60-e41b-474f-bfea-b4d70ea666d7)
|


### Checklist
* [x] tested locally
* [x] documented the code
* [x] clean all warnings and errors of eslint
* [x] requires changes in OutSystems - description of the OnToggle event
* [ ] requires new sample page in OutSystems (if so, provide a module
with changes)

src/OSFramework/DataGrid/Event/Feature/ContextMenuEventManager.ts

@@ -20,6 +20,9 @@ namespace OSFramework.DataGrid.Event.Feature {
 			let event: Event.IEvent<string>;
 
 			switch (eventType) {
+				case ContextMenuEventType.Opening:
+					event = new OpeningContextMenu();
+					break;
 				case ContextMenuEventType.Toggle:
 					event = new ToggleContextMenu();
 					break;
@@ -34,7 +37,7 @@ namespace OSFramework.DataGrid.Event.Feature {
 			if (this.events.has(event)) {
 				this.events
 					.get(event)
-					.trigger(this._contextMenu.grid.widgetId, this._contextMenu.isOpening, this._contextMenu.columnId);
+					.trigger(this._contextMenu.grid.widgetId, this._contextMenu.columnId, this._contextMenu.isOpening);
 			}
 		}
 	}

src/OSFramework/DataGrid/Event/Feature/ContextMenuEventType.enum.ts

@@ -7,6 +7,13 @@ namespace OSFramework.DataGrid.Event.Feature {
 	 * @enum {number}
 	 */
 	export enum ContextMenuEventType {
+		/**
+		 * When the menu is opening, but not yet visible/open.
+		 */
+		Opening = 'Opening',
+		/**
+		 * When the menu was opened or closed.
+		 */
 		Toggle = 'Toggle',
 	}
 }

src/OSFramework/DataGrid/Event/Feature/ContextMenuEvents.ts

@@ -7,8 +7,23 @@ namespace OSFramework.DataGrid.Event.Feature {
 	 * @extends {OSFramework.DataGrid.Event.AbstractEvent<string>}
 	 */
 	export class ToggleContextMenu extends Event.AbstractEvent<string> {
-		public trigger(gridID: string, isOpening: boolean, columnId: string): void {
+		public trigger(gridID: string, columnId: string, isOpening: boolean): void {
 			this.handlers.slice(0).forEach((h) => Helper.AsyncInvocation(h, gridID, isOpening, columnId));
 		}
 	}
+
+	/**
+	 * Class that encapsulate the basic logic of triggering the event of opening the context menu.
+	 * This event is synchronous to allow the developer to change the Context Menu items before the
+	 * menu is visibel. The event be fired before the context menu is opened.
+	 *
+	 * @export
+	 * @class OpeningContextMenu
+	 * @extends {Event.AbstractEvent<string>}
+	 */
+	export class OpeningContextMenu extends Event.AbstractEvent<string> {
+		public trigger(gridID: string, columnId: string): void {
+			this.handlers.slice(0).forEach((h) => h(gridID, columnId));
+		}
+	}
 }

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

@@ -60,6 +60,10 @@ namespace Providers.DataGrid.Wijmo.Feature {
 
 			//Sort menu by order - Usefull when the developer inserts a IF statement hiding/showing elements
 			this._sortMenuItems(this._rootMenuItems);
+			//If the menu is opening, let's refresh the itemsSource
+			if (this._isOpening) {
+				this._provider.itemsSource.refresh();
+			}
 		}
 
 		/**
@@ -89,6 +93,7 @@ namespace Providers.DataGrid.Wijmo.Feature {
 					if (e.isDroppedDown) {
 						// It is easier to understand if it will open instead of analysing if the menu is dropped down.
 						this._isOpening = false;
+						//Trigger the event menu was closed.
 						this._contextMenuEvents.trigger(OSFramework.DataGrid.Event.Feature.ContextMenuEventType.Toggle);
 					}
 				},
@@ -226,8 +231,9 @@ namespace Providers.DataGrid.Wijmo.Feature {
 					}
 				}
 			}
-
-			this._contextMenuEvents.trigger(OSFramework.DataGrid.Event.Feature.ContextMenuEventType.Toggle);
+			//Trigger the event Opening. It is synchronous to allow the developer to change the
+			//Context Menu items before the menu is visible.
+			this._contextMenuEvents.trigger(OSFramework.DataGrid.Event.Feature.ContextMenuEventType.Opening);
 
 			//Filtering menuItem based on the clicked area =D
 			this._provider.collectionView.filter = this._filterMenuItem.bind(this, e);
@@ -239,6 +245,9 @@ namespace Providers.DataGrid.Wijmo.Feature {
 
 				// cancel the browser's default menu
 				e.preventDefault();
+
+				//Trigger the event menu was opened.
+				this._contextMenuEvents.trigger(OSFramework.DataGrid.Event.Feature.ContextMenuEventType.Toggle);
 			}
 		}
 
@@ -381,6 +390,11 @@ namespace Providers.DataGrid.Wijmo.Feature {
 
 			//Remove it from the Map
 			this._menuItems.delete(menuItemId);
+
+			//If the menu is opening, let's refresh the itemsSource
+			if (this._isOpening) {
+				this._provider.itemsSource.refresh();
+			}
 		}
 	}
 }