fix: fix tables not updating inputs on creation

windmill-labs · Aug 23, 2023 · a419bc4 · a419bc4
1 parent 2f9177f
commit a419bc4
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 15 deletions.
diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -40,6 +40,8 @@
 		getContext<AppViewerContext>('AppViewerContext')
 	const rowContext = getContext<ListContext>('RowWrapperContext')
 	const rowInputs: ListInputs | undefined = getContext<ListInputs>('RowInputs')
+	const iterContext = getContext<ListContext>('ListWrapperContext')
+	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
 	let resolvedConfig = initConfig(
 		components['buttoncomponent'].initialData.configuration,
@@ -54,6 +56,17 @@
 		jobId: undefined
 	})
 
+	if (rowContext && rowInputs) {
+		const inputOutput = { result: outputs.result.peak(), loading: false }
+		rowInputs(id, inputOutput)
+	}
+
+	if (iterContext && listInputs) {
+		const inputOutput = { result: outputs.result.peak(), loading: false }
+		listInputs(id, inputOutput)
+	}
+
+	console.log('FOO')
 	if (controls) {
 		$componentControl[id] = controls
 	}
@@ -89,9 +102,12 @@
 		event?.preventDefault()
 
 		$selectedComponent = [id]
-
+		const inputOutput = { result: outputs.result.peak(), loading: true }
 		if (rowContext && rowInputs) {
-			rowInputs(id, { result: outputs.result.peak(), loading: true })
+			rowInputs(id, inputOutput)
+		}
+		if (iterContext && listInputs) {
+			listInputs(id, inputOutput)
 		}
 		if (preclickAction) {
 			await preclickAction()

diff --git a/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte b/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte
@@ -137,7 +137,7 @@
 						{#each result ?? [] as value, index}
 							<div class="overflow-auto w-full">
 								<ListWrapper
-									on:inputsChange={() => {
+									onInputsChange={() => {
 										outputs?.inputs.set(inputs, true)
 									}}
 									bind:inputs
@@ -164,7 +164,7 @@
 					</Carousel>
 				{/key}
 			{:else}
-				<ListWrapper disabled value={undefined} index={0}>
+				<ListWrapper onInputsChange={() => {}} disabled value={undefined} index={0}>
 					<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
 				</ListWrapper>
 				{#if !Array.isArray(result)}

diff --git a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
@@ -362,12 +362,13 @@
 										<div class="center-center h-full w-full flex-wrap gap-1.5">
 											{#each actionButtons as actionButton, actionIndex (actionButton?.id)}
 												<RowWrapper
-													on:inputsChange={() => {
-														outputs?.inputs.set(inputs, true)
-													}}
 													bind:inputs
 													value={row.original}
 													index={rowIndex}
+
+													onInputsChange={() => {
+														outputs?.inputs.set(inputs, true)
+													}}
 												>
 													<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 													<div

diff --git a/frontend/src/lib/components/apps/components/layout/AppList.svelte b/frontend/src/lib/components/apps/components/layout/AppList.svelte
@@ -139,7 +139,7 @@
 							class="overflow-auto {!isCard ? 'w-full' : 'border'}"
 						>
 							<ListWrapper
-								on:inputsChange={() => {
+								onInputsChange={() => {
 									outputs?.inputs.set(inputs, true)
 								}}
 								bind:inputs
@@ -164,7 +164,7 @@
 						</div>
 					{/each}
 				{:else}
-					<ListWrapper disabled value={undefined} index={0}>
+					<ListWrapper onInputsChange={() => {}} disabled value={undefined} index={0}>
 						<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
 					</ListWrapper>
 					{#if !Array.isArray(result)}

diff --git a/frontend/src/lib/components/apps/components/layout/ListWrapper.svelte b/frontend/src/lib/components/apps/components/layout/ListWrapper.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { createEventDispatcher, setContext } from 'svelte'
+	import { setContext } from 'svelte'
 	import type { ListInputs, ListContext } from '../../types'
 	import { writable } from 'svelte/store'
 
 	export let index: number
 	export let value: any
 	export let disabled = false
 	export let inputs: Record<string, Record<number, any>> = {}
+	export let onInputsChange: () => void
 
-	const dispatch = createEventDispatcher()
 	const ctx = writable({ index, value, disabled })
 
 	$: $ctx = { index, value, disabled }
@@ -19,7 +19,7 @@
 		} else {
 			inputs[id][index] = value
 		}
-		dispatch('inputsChange')
+		onInputsChange()
 	})
 </script>
 

diff --git a/frontend/src/lib/components/apps/components/layout/RowWrapper.svelte b/frontend/src/lib/components/apps/components/layout/RowWrapper.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { createEventDispatcher, setContext } from 'svelte'
+	import { setContext } from 'svelte'
 	import type { ListInputs, ListContext } from '../../types'
 	import { writable } from 'svelte/store'
 
 	export let index: number
 	export let value: any
 	export let disabled = false
 	export let inputs: Record<string, Record<number, any>> = {}
+	export let onInputsChange: () => void
 
-	const dispatch = createEventDispatcher()
 	const ctx = writable({ index, value, disabled })
 
 	$: $ctx = { index, value, disabled }
@@ -19,7 +19,7 @@
 		} else {
 			inputs[id][index] = value
 		}
-		dispatch('inputsChange')
+		onInputsChange()
 	})
 </script>