From e779f963869fcb22d73f02b6a806e3fdac978959 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 12 Aug 2024 11:21:00 +0200
Subject: [PATCH] fix: improve default value handling for date & date-time in
 apps

---
 frontend/src/lib/components/DateInput.svelte  | 16 ++++++++--
 .../lib/components/LightweightArgInput.svelte | 22 ++++++++++----
 .../components/LightweightSchemaForm.svelte   |  5 +++-
 .../components/buttons/AppSchemaForm.svelte   | 29 ++++++++++---------
 4 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/frontend/src/lib/components/DateInput.svelte b/frontend/src/lib/components/DateInput.svelte
index 4481874625..ad4c17c2d7 100644
--- a/frontend/src/lib/components/DateInput.svelte
+++ b/frontend/src/lib/components/DateInput.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte'
-	import { format, isValid } from 'date-fns'
+	import { format, isValid, parse } from 'date-fns'
 
 	export let value: string | undefined = undefined
 	export let autofocus: boolean | null = false
@@ -8,10 +8,22 @@
 	export let maxDate: string | undefined = undefined
 	export let dateFormat: string | undefined = 'dd-MM-yyyy'
 
-	let date: string | undefined = undefined
+	let date: string | undefined = computeDate(value)
 
 	const dispatch = createEventDispatcher()
 
+	function computeDate(value: string | undefined) {
+		if (dateFormat === undefined) {
+			dateFormat = 'dd-MM-yyyy'
+		}
+		if (value) {
+			const res = format(parse(value, dateFormat, new Date()), 'yyyy-MM-dd')
+			return res
+		} else {
+			return undefined
+		}
+	}
+
 	function updateValue(newDate: string | undefined) {
 		if (newDate && isValid(new Date(newDate))) {
 			if (dateFormat === undefined) {
diff --git a/frontend/src/lib/components/LightweightArgInput.svelte b/frontend/src/lib/components/LightweightArgInput.svelte
index 5e709893ff..5821f5458a 100644
--- a/frontend/src/lib/components/LightweightArgInput.svelte
+++ b/frontend/src/lib/components/LightweightArgInput.svelte
@@ -181,9 +181,17 @@
 	}
 
 	let prevDefaultValue: any = undefined
+	let defaultChange = 0
+
 	async function changeDefaultValue(inputCat, defaultValue) {
-		if (value == null || value == undefined || deepEqual(value, prevDefaultValue)) {
+		if (
+			value == null ||
+			value == undefined ||
+			deepEqual(value, prevDefaultValue) ||
+			(prevDefaultValue != undefined && !deepEqual(defaultValue, prevDefaultValue))
+		) {
 			value = defaultValue
+			defaultChange += 1
 		}
 		prevDefaultValue = structuredClone(defaultValue)
 
@@ -498,11 +506,13 @@
 						{/each}
 					</select>
 				{:else if inputCat == 'date'}
-					{#if format === 'date'}
-						<DateInput bind:value dateFormat={extra['dateFormat']} />
-					{:else}
-						<DateTimeInput useDropdown bind:value />
-					{/if}
+					{#key defaultChange}
+						{#if format === 'date'}
+							<DateInput bind:value dateFormat={extra['dateFormat']} />
+						{:else}
+							<DateTimeInput useDropdown bind:value />
+						{/if}
+					{/key}
 				{:else if inputCat == 'base64'}
 					<div class="flex flex-col my-6 w-full">
 						<input
diff --git a/frontend/src/lib/components/LightweightSchemaForm.svelte b/frontend/src/lib/components/LightweightSchemaForm.svelte
index 5b1e11d654..7387c66dce 100644
--- a/frontend/src/lib/components/LightweightSchemaForm.svelte
+++ b/frontend/src/lib/components/LightweightSchemaForm.svelte
@@ -71,7 +71,10 @@
 	}
 </script>
 
-<div class={twMerge('w-full flex flex-col px-0.5 pb-2', largeGap ? 'gap-8' : 'gap-2')}>
+<div
+	class={twMerge('w-full flex flex-col px-0.5 pb-2', largeGap ? 'gap-8' : 'gap-2')}
+	on:pointerdown
+>
 	{#each keys as argName (argName)}
 		{#if typeof args == 'object' && schema?.properties[argName] && args}
 			<LightweightArgInput
diff --git a/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte b/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte
index fd496a5c0c..fcbd4e789a 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte
@@ -126,20 +126,23 @@
 		<div
 			class={twMerge('p-2 overflow-auto h-full', css?.container?.class, 'wm-schema-form')}
 			style={css?.container?.style}
-			on:pointerdown|stopPropagation={(e) =>
-				!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
 		>
-			<LightweightSchemaForm
-				defaultValues={resolvedConfig.defaultValues}
-				dynamicEnums={resolvedConfig.dynamicEnums}
-				schema={result}
-				bind:isValid={valid}
-				bind:args
-				bind:this={schemaForm}
-				displayType={Boolean(resolvedConfig.displayType)}
-				largeGap={Boolean(resolvedConfig.largeGap)}
-				{css}
-			/>
+			<div
+				on:pointerdown|stopPropagation={(e) =>
+					!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
+			>
+				<LightweightSchemaForm
+					defaultValues={resolvedConfig.defaultValues}
+					dynamicEnums={resolvedConfig.dynamicEnums}
+					schema={result}
+					bind:isValid={valid}
+					bind:args
+					bind:this={schemaForm}
+					displayType={Boolean(resolvedConfig.displayType)}
+					largeGap={Boolean(resolvedConfig.largeGap)}
+					{css}
+				/>
+			</div>
 		</div>
 	{:else}
 		<p class="m-2 italic">Empty form (no property)</p>