From c99835a9051d1a1bc79a090ebf9a8fcc38bb7220 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 29 Jun 2023 23:56:37 +0200
Subject: [PATCH] fix toggle and list reactivity for apps

---
 .../apps/components/inputs/AppCheckbox.svelte |  31 ++---
 .../apps/components/layout/AppList.svelte     | 118 +++++++++---------
 2 files changed, 66 insertions(+), 83 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
index 6ccba8ac49..eb31fc29df 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { getContext } from 'svelte'
-	import { initConfig, initOutput } from '../../editor/appUtils'
+	import { initOutput } from '../../editor/appUtils'
 	import type {
 		AppViewerContext,
 		ComponentCustomCSS,
@@ -12,8 +12,7 @@
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InitializeComponent from '../helpers/InitializeComponent.svelte'
-	import ResolveConfig from '../helpers/ResolveConfig.svelte'
-	import { components } from '../../editor/component'
+	import { InputValue } from '../helpers'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -33,13 +32,10 @@
 	const iterContext = getContext<ListContext>('ListWrapperContext')
 	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
-	let resolvedConfig = initConfig(
-		components['checkboxcomponent'].initialData.configuration,
-		configuration
-	)
-
-	let value: boolean = (resolvedConfig.defaultValue as boolean | undefined) ?? false
+	let value: boolean = false
 
+	let defaultValue: boolean | undefined = undefined
+	let label: string = ''
 	$componentControl[id] = {
 		setValue(nvalue: boolean) {
 			value = nvalue
@@ -68,33 +64,26 @@
 	}
 
 	function handleDefault() {
-		value = resolvedConfig.defaultValue ?? false
+		value = defaultValue ?? false
 		handleInput()
 	}
 
 	$: value != undefined && handleInput()
 
-	$: resolvedConfig.defaultValue != undefined && handleDefault()
+	$: defaultValue != undefined && handleDefault()
 
 	$: css = concatCustomCss($app.css?.checkboxcomponent, customCss)
 </script>
 
-{#each Object.keys(components['checkboxcomponent'].initialData.configuration) as key (key)}
-	<ResolveConfig
-		{id}
-		{extraKey}
-		{key}
-		bind:resolvedConfig={resolvedConfig[key]}
-		configuration={configuration[key]}
-	/>
-{/each}
+<InputValue {id} key={extraKey} input={configuration.label} bind:value={label} />
+<InputValue {id} key={extraKey} input={configuration.defaultValue} bind:value={defaultValue} />
 
 <InitializeComponent {id} />
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
 	<Toggle
 		size="sm"
 		bind:checked={value}
-		options={{ right: resolvedConfig.label }}
+		options={{ right: label }}
 		textClass={css?.text?.class ?? ''}
 		textStyle={css?.text?.style ?? ''}
 		on:change={(e) => {
diff --git a/frontend/src/lib/components/apps/components/layout/AppList.svelte b/frontend/src/lib/components/apps/components/layout/AppList.svelte
index 21d59e6c72..36b7b8d477 100644
--- a/frontend/src/lib/components/apps/components/layout/AppList.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppList.svelte
@@ -58,70 +58,64 @@
 
 <InitializeComponent {id} />
 
-{#if render}
-	<RunnableWrapper
-		{outputs}
-		{render}
-		autoRefresh
-		{componentInput}
-		{id}
-		bind:initializing
-		bind:result
-	>
-		<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
+<RunnableWrapper
+	render={true}
+	{outputs}
+	autoRefresh
+	{componentInput}
+	{id}
+	bind:initializing
+	bind:result
+>
+	<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
 
-		<div
-			class="w-full flex flex-wrap overflow-auto {isCard ? 'h-full gap-2' : 'divide-y max-h-full'}"
-		>
-			{#if $app.subgrids?.[`${id}-0`]}
-				{#if Array.isArray(result) && result.length > 0}
-					{#each result ?? [] as value, index}
-						<div
-							style={`${
-								isCard
-									? `min-width: ${resolvedConfig.width?.configuration?.card?.minWidthPx}px; `
-									: ''
-							} max-height: ${resolvedConfig.heightPx}px;`}
-							class="overflow-auto {!isCard ? 'w-full' : 'border'}"
+	<div
+		class="w-full flex flex-wrap overflow-auto {isCard ? 'h-full gap-2' : 'divide-y max-h-full'}"
+	>
+		{#if $app.subgrids?.[`${id}-0`]}
+			{#if Array.isArray(result) && result.length > 0}
+				{#each result ?? [] as value, index}
+					<div
+						style={`${
+							isCard
+								? `min-width: ${resolvedConfig.width?.configuration?.card?.minWidthPx}px; `
+								: ''
+						} max-height: ${resolvedConfig.heightPx}px;`}
+						class="overflow-auto {!isCard ? 'w-full' : 'border'}"
+					>
+						<ListWrapper
+							on:inputsChange={() => {
+								outputs?.inputs.set(inputs, true)
+							}}
+							bind:inputs
+							{value}
+							{index}
 						>
-							<ListWrapper
-								on:inputsChange={() => {
-									outputs?.inputs.set(inputs, true)
+							<SubGridEditor
+								visible={render}
+								{id}
+								class={css?.container?.class}
+								style={css?.container?.style}
+								subGridId={`${id}-0`}
+								containerHeight={resolvedConfig.heightPx}
+								on:focus={() => {
+									if (!$connectingInput.opened) {
+										$selectedComponent = [id]
+									}
+									onFocus()
 								}}
-								bind:inputs
-								{value}
-								{index}
-							>
-								<SubGridEditor
-									visible={render}
-									{id}
-									class={css?.container?.class}
-									style={css?.container?.style}
-									subGridId={`${id}-0`}
-									containerHeight={resolvedConfig.heightPx}
-									on:focus={() => {
-										if (!$connectingInput.opened) {
-											$selectedComponent = [id]
-										}
-										onFocus()
-									}}
-								/>
-							</ListWrapper>
-						</div>
-					{/each}
-				{:else}
-					<ListWrapper disabled value={undefined} index={0}>
-						<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
-					</ListWrapper>
-					{#if !Array.isArray(result)}
-						<div class="text-center text-gray-500">Input data is not an array</div>
-					{/if}
+							/>
+						</ListWrapper>
+					</div>
+				{/each}
+			{:else}
+				<ListWrapper disabled value={undefined} index={0}>
+					<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
+				</ListWrapper>
+				{#if !Array.isArray(result)}
+					<div class="text-center text-gray-500">Input data is not an array</div>
 				{/if}
 			{/if}
-		</div>
-	</RunnableWrapper>
-{:else}
-	<ListWrapper disabled value={undefined} index={0}>
-		<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
-	</ListWrapper>
-{/if}
+		{/if}
+	</div>
+</RunnableWrapper>