From 8114c95084df2f35f28920d8bc4e250d2ca87a95 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 15 Aug 2024 12:07:18 +0200
Subject: [PATCH] improve row update of aggrid table actions

---
 .../display/table/AppAggridTable.svelte       | 11 +++++-
 .../table/AppAggridTableActions.svelte        |  8 ++++
 .../apps/components/display/table/utils.ts    | 39 +++++++++++++------
 3 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
index aa0ce773f7..991cc87249 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
@@ -202,7 +202,7 @@
 			['ContextPanel', contextPanel]
 		])
 
-		new AppAggridTableActions({
+		let ta = new AppAggridTableActions({
 			target: c.eGui,
 			props: {
 				id: id,
@@ -239,6 +239,15 @@
 			},
 			context: componentContext
 		})
+
+		return {
+			destroy: () => {
+				ta.$destroy()
+			},
+			refresh(params) {
+				ta.$set({ rowIndex: params.node.rowIndex ?? 0, row: params.data })
+			}
+		}
 	})
 
 	function mountGrid() {
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte
index 0c60b3efc4..cde6f73b46 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte
@@ -39,6 +39,14 @@
 			const parent = rowDiv.parentElement?.parentElement?.parentElement
 			if (parent) {
 				parent.classList.add('w-full')
+			} else {
+				//sometimes the parent is not available immediately
+				setTimeout(() => {
+					const parent = rowDiv?.parentElement?.parentElement?.parentElement
+					if (parent) {
+						parent.classList.add('w-full')
+					}
+				}, 10)
 			}
 		}
 	})
diff --git a/frontend/src/lib/components/apps/components/display/table/utils.ts b/frontend/src/lib/components/apps/components/display/table/utils.ts
index 2d97bf5975..038a2c5480 100644
--- a/frontend/src/lib/components/apps/components/display/table/utils.ts
+++ b/frontend/src/lib/components/apps/components/display/table/utils.ts
@@ -11,18 +11,21 @@ import type { ICellRendererComp, ICellRendererParams } from 'ag-grid-community'
  */
 export abstract class AbstractCellRenderer implements ICellRendererComp {
 	eGui: any
-	protected value: any
-	protected params: any
+	protected component:
+		| {
+				refresh: (params: ICellRendererParams) => void
+				destroy: () => void
+		  }
+		| undefined
 	constructor(parentElement = 'span') {
 		// create empty span (or other element) to place svelte component in
+		this.component = undefined
 		this.eGui = document.createElement(parentElement)
 	}
 
 	init(params: ICellRendererParams & { onClick?: (data: any) => void }) {
-		this.value = params.value
-		this.createComponent(params)
+		this.component = this.createComponent(params)
 		this.eGui.addEventListener('click', () => params.onClick?.(params.data))
-		this.params = params
 	}
 
 	getGui() {
@@ -30,11 +33,13 @@ export abstract class AbstractCellRenderer implements ICellRendererComp {
 	}
 
 	refresh(params: ICellRendererParams) {
-		this.value = params.value
-
+		this.component?.refresh?.(params)
 		return true
 	}
 
+	destroy(): void {
+		this.component?.destroy?.()
+	}
 	/**
 	 * Define and create the svelte component to use in the cell
 	 * @example
@@ -48,7 +53,10 @@ export abstract class AbstractCellRenderer implements ICellRendererComp {
 	 * }
 	 * @param params params for rendering the call, including the value for the cell
 	 */
-	abstract createComponent(params: ICellRendererParams): void
+	abstract createComponent(params: ICellRendererParams): {
+		refresh: (params: ICellRendererParams) => void
+		destroy: () => void
+	}
 }
 
 /**
@@ -58,11 +66,20 @@ export abstract class AbstractCellRenderer implements ICellRendererComp {
  * @returns
  */
 export function cellRendererFactory(
-	svelteComponent: (cell: AbstractCellRenderer, params: ICellRendererParams) => void
+	svelteComponent: (
+		cell: AbstractCellRenderer,
+		params: ICellRendererParams
+	) => {
+		refresh: (params: ICellRendererParams) => void
+		destroy: () => void
+	}
 ) {
 	class Renderer extends AbstractCellRenderer {
-		createComponent(params: ICellRendererParams<any, any>): void {
-			svelteComponent(this, params)
+		createComponent(params: ICellRendererParams<any, any>): {
+			refresh: (params: ICellRendererParams) => void
+			destroy: () => void
+		} {
+			return svelteComponent(this, params)
 		}
 	}
 	return Renderer