From a08be53fb2fd0d85c9fa9830d4ad09a441d4723f Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 18 May 2023 09:12:05 +0200
Subject: [PATCH] add valid output to app form

---
 frontend/src/lib/components/LightweightSchemaForm.svelte   | 6 ++++++
 .../apps/components/buttons/AppSchemaForm.svelte           | 7 +++++++
 2 files changed, 13 insertions(+)

diff --git a/frontend/src/lib/components/LightweightSchemaForm.svelte b/frontend/src/lib/components/LightweightSchemaForm.svelte
index b1fac36c4b..95a6ec02a7 100644
--- a/frontend/src/lib/components/LightweightSchemaForm.svelte
+++ b/frontend/src/lib/components/LightweightSchemaForm.svelte
@@ -3,6 +3,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import LightweightArgInput from './LightweightArgInput.svelte'
 	import type { ComponentCustomCSS } from './apps/types'
+	import { allTrue } from '$lib/utils'
 
 	export let css: ComponentCustomCSS<'schemaformcomponent'> | undefined = undefined
 
@@ -10,6 +11,10 @@
 	export let args: Record<string, any> | undefined = undefined
 	export let displayType: boolean = true
 	export let largeGap: boolean = false
+	export let isValid: boolean = true
+
+	let inputCheck: { [id: string]: boolean } = {}
+	$: isValid = allTrue(inputCheck) ?? false
 
 	$: if (args === undefined) {
 		args = {}
@@ -24,6 +29,7 @@
 					label={argName}
 					description={schema.properties[argName].description}
 					bind:value={args[argName]}
+					bind:valid={inputCheck[argName]}
 					type={schema.properties[argName].type}
 					required={schema.required?.includes(argName) ?? false}
 					pattern={schema.properties[argName].pattern}
diff --git a/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte b/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte
index b73ab0dff2..6e83f13bcd 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte
@@ -24,6 +24,7 @@
 	const outputs = initOutput($worldStore, id, {
 		result: undefined,
 		loading: false,
+		valid: true,
 		values: {}
 	})
 
@@ -43,12 +44,17 @@
 	}
 
 	$: args && handleArgsChange()
+
+	$: outputs.valid.set(valid)
+
 	$: css = concatCustomCss($app.css?.schemaformcomponent, customCss)
 
 	const resolvedConfig = initConfig(
 		components['schemaformcomponent'].initialData.configuration,
 		configuration
 	)
+
+	let valid = true
 </script>
 
 {#each Object.keys(components['schemaformcomponent'].initialData.configuration) as key (key)}
@@ -70,6 +76,7 @@
 		>
 			<LightweightSchemaForm
 				schema={result}
+				bind:isValid={valid}
 				bind:args
 				displayType={Boolean(resolvedConfig.displayType)}
 				largeGap={Boolean(resolvedConfig.largeGap)}