From be1d987b4151b4300a8054a11df5a7658bb90d89 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 20 Mar 2023 16:04:50 +0100
Subject: [PATCH] fix table action input fields

---
 .../apps/components/buttons/AppButton.svelte  | 14 ++++++++++++--
 .../components/display/table/AppTable.svelte  | 19 ++++++++++++++++---
 .../helpers/RunnableComponent.svelte          | 10 ++++++++--
 .../components/helpers/RunnableWrapper.svelte |  2 ++
 .../lib/components/apps/editor/appUtils.ts    | 11 ++++++++++-
 .../triggerLists/ComponentTriggerList.svelte  |  2 +-
 6 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index e013680e1a..dcf4fe0e7d 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -26,11 +26,13 @@
 	export let customCss: ComponentCustomCSS<'buttoncomponent'> | undefined = undefined
 	export let render: boolean
 	export let initializing: boolean | undefined = true
+	export let extraKey: string | undefined = undefined
 
 	export let controls: { left: () => boolean; right: () => boolean | string } | undefined =
 		undefined
 
-	const { worldStore, app, componentControl } = getContext<AppViewerContext>('AppViewerContext')
+	const { worldStore, app, componentControl, selectedComponent } =
+		getContext<AppViewerContext>('AppViewerContext')
 
 	let outputs = initOutput($worldStore, id, {
 		result: undefined,
@@ -94,6 +96,8 @@
 		event?.stopPropagation()
 		event?.preventDefault()
 
+		$selectedComponent = id
+
 		if (preclickAction) {
 			await preclickAction()
 		}
@@ -115,7 +119,12 @@
 </script>
 
 {#each configurationKeys['buttoncomponent'] as key (key)}
-	<InputValue {key} {id} input={configuration[key]} bind:value={resolvedConfig[key]} />
+	<InputValue
+		key={key + extraKey}
+		{id}
+		input={configuration[key]}
+		bind:value={resolvedConfig[key]}
+	/>
 {/each}
 
 <RunnableWrapper
@@ -129,6 +138,7 @@
 	gotoNewTab={resolvedConfig.gotoNewTab}
 	{render}
 	{outputs}
+	{extraKey}
 >
 	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
 		{#if errorsMessage}
diff --git a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
index 5273062c64..b2f8c7abb5 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
@@ -52,7 +52,7 @@
 
 	let table = createSvelteTable(options)
 
-	const { app, worldStore, componentControl, selectedComponent } =
+	const { app, worldStore, componentControl, selectedComponent, hoverStore } =
 		getContext<AppViewerContext>('AppViewerContext')
 
 	let selectedRowIndex = -1
@@ -262,11 +262,22 @@
 										<div class="center-center h-full w-full flex-wrap gap-1 ">
 											{#each actionButtons as actionButton, actionIndex (actionIndex)}
 												<div
-													class={actionButton.id === $selectedComponent
+													on:mouseover|stopPropagation={() => {
+														if (actionButton.id !== $hoverStore) {
+															$hoverStore = actionButton.id
+														}
+													}}
+													on:mouseout|stopPropagation={() => {
+														if ($hoverStore !== undefined) {
+															$hoverStore = undefined
+														}
+													}}
+													class={actionButton.id === $selectedComponent ||
+													$hoverStore === actionButton.id
 														? 'outline outline-indigo-500 outline-1 outline-offset-1 relative '
 														: ''}
 												>
-													{#if actionButton.id === $selectedComponent}
+													{#if actionButton.id === $selectedComponent || $hoverStore === actionButton.id}
 														<span
 															title={`Id: ${actionButton.id}`}
 															class={classNames(
@@ -279,6 +290,7 @@
 													{/if}
 													{#if rowIndex == 0}
 														<AppButton
+															extraKey={'idx' + rowIndex}
 															{render}
 															noWFull
 															{...actionButton}
@@ -311,6 +323,7 @@
 														/>
 													{:else}
 														<AppButton
+															extraKey={'idx' + rowIndex}
 															{render}
 															noWFull
 															{...actionButton}
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index ccd7d2fa63..8a9904c626 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -35,6 +35,7 @@
 	export let recomputable: boolean = false
 	export let recomputeIds: string[] = []
 	export let outputs: { result: Output<any>; loading: Output<boolean> }
+	export let extraKey = ''
 
 	const {
 		worldStore,
@@ -282,13 +283,18 @@
 
 {#each Object.entries(fields ?? {}) as [key, v] (key)}
 	{#if v.type != 'static' && v.type != 'user'}
-		<InputValue {key} {id} input={fields[key]} bind:value={runnableInputValues[key]} />
+		<InputValue
+			key={key + extraKey}
+			{id}
+			input={fields[key]}
+			bind:value={runnableInputValues[key]}
+		/>
 	{/if}
 {/each}
 
 {#if runnable?.type == 'runnableByName' && runnable.inlineScript?.language == 'frontend'}
 	{#each runnable.inlineScript.refreshOn ?? [] as { id: tid, key } (`${tid}-${key}`)}
-		{@const fkey = `${tid}-${key}`}
+		{@const fkey = `${tid}-${key}${extraKey}`}
 		<InputValue
 			{id}
 			key={fkey}
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
index a40f986273..96a55dd6f6 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
@@ -23,6 +23,7 @@
 	export let render: boolean
 	export let recomputeIds: string[] = []
 	export let outputs: { result: Output<any>; loading: Output<boolean> }
+	export let extraKey: string | undefined = undefined
 
 	const { staticExporter, noBackend } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -46,6 +47,7 @@
 	<slot />
 {:else if componentInput.type === 'runnable' && isRunnableDefined(componentInput)}
 	<RunnableComponent
+		{extraKey}
 		{recomputeIds}
 		gotoUrl={goto}
 		{gotoNewTab}
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index 5b7b9def6b..c0fd463112 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -54,7 +54,13 @@ export function findGridItemParentGrid(app: App, id: string): string | undefined
 export function allsubIds(app: App, parentId: string): string[] {
 	let item = findGridItem(app, parentId)
 	if (!item?.data.numberOfSubgrids) {
-		return [parentId]
+		let subIds = [parentId]
+		if (item) {
+			if (item.data.type === 'tablecomponent') {
+				subIds.push(...item.data.actionButtons?.map((x) => x.id))
+			}
+		}
+		return subIds
 	}
 	return getAllSubgridsAndComponentIds(app, item?.data)[1]
 }
@@ -199,6 +205,9 @@ export function getAllSubgridsAndComponentIds(
 ): [string[], string[]] {
 	const subgrids: string[] = []
 	let components: string[] = [component.id]
+	if (component.type === 'tablecomponent') {
+		components.push(...component.actionButtons?.map((x) => x.id))
+	}
 	if (app.subgrids && component.numberOfSubgrids) {
 		for (let i = 0; i < component.numberOfSubgrids; i++) {
 			const key = `${component.id}-${i}`
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte
index 8419d77a41..1a0256911f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <TriggerBadgesList
-	inputDependencies={getDependencies(fields)}
+	inputDependencies={onClick ? [] : getDependencies(fields)}
 	bind:inlineScript={runnable.inlineScript}
 	{onLoad}
 	id={$selectedComponent}