From 713e6ff8ffa28442e7a2a19e21f0810e4ac3cd8c Mon Sep 17 00:00:00 2001
From: Stephan Richter <s.richter@srsoftware.de>
Date: Fri, 11 Jul 2025 08:41:12 +0200
Subject: [PATCH] improved line editor and price editor

---
 build.gradle.kts                           |  2 +-
 frontend/src/Components/LineEditor.svelte  | 24 +++++++++++++-----
 frontend/src/Components/PriceEditor.svelte | 29 ++++++++++++++--------
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/build.gradle.kts b/build.gradle.kts
index 3978f42..58df713 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -1,5 +1,5 @@
 plugins {
-    id("com.diffplug.spotless") version "latest.release"
+    id("com.diffplug.spotless") version "7.0.4"
 }
 
 repositories {
diff --git a/frontend/src/Components/LineEditor.svelte b/frontend/src/Components/LineEditor.svelte
index 5fc8562..de10dd7 100644
--- a/frontend/src/Components/LineEditor.svelte
+++ b/frontend/src/Components/LineEditor.svelte
@@ -2,18 +2,30 @@
     let { editable = false, value = $bindable(null) } = $props();
     let editing = $state(false);
 
-    function toggleEdit(){
-        editing = !editing;
+    let editValue = value;
+
+    function applyEdit(){
+        value = editValue;
+        editing=false;
+    }
+
+    function resetEdit(){
+        editing = false;
+        editValue = value;
+    }
+
+    function startEdit(){
+        editing = editable;
     }
 
     function typed(ev){
-        if (ev.keyCode == 13) toggleEdit();
+        if (ev.keyCode == 13) applyEdit();
+        if (ev.keyCode == 27) resetEdit();
     }
 </script>
 
 {#if editable && editing}
-<input bind:value onkeyup={typed} />
+<input bind:value={editValue} onkeyup={typed} autofocus />
 {:else}
-<div onclick={toggleEdit}>{value}</div>
+<div onclick={startEdit}>{value}</div>
 {/if}
-
diff --git a/frontend/src/Components/PriceEditor.svelte b/frontend/src/Components/PriceEditor.svelte
index 589c526..8d9aa1f 100644
--- a/frontend/src/Components/PriceEditor.svelte
+++ b/frontend/src/Components/PriceEditor.svelte
@@ -2,18 +2,25 @@
     let { editable = false, currency, value = $bindable(null) } = $props();
     let editing = $state(false);
 
-    function toggleEdit(){
-        editing = !editing;
-        if (editing){
-            value /= 100;
-        }
+    let editValue = value/100;
+
+    function applyEdit(){
+        value = editValue * 100;
+        editing = false;
+    }
+
+    function resetEdit(){
+        editValue = value/100;
+        editing = false;
+    }
+
+    function startEdit(){
+        editing = editable;
     }
 
     function typed(ev){
-        if (ev.keyCode == 13) {
-            toggleEdit();
-            value *= 100;
-        }
+        if (ev.keyCode == 13) applyEdit();
+        if (ev.keyCode == 27) resetEdit();
     }
 </script>
 
@@ -22,8 +29,8 @@
 </style>
 
 {#if editable && editing}
-<input type="number" step=".01" bind:value onkeyup={typed} />&nbsp;{currency}
+<input type="number" step=".01" bind:value={editValue} onkeyup={typed} />&nbsp;{currency}
 {:else}
-<div onclick={toggleEdit}>{Number(value/100).toFixed(2)}&nbsp;{currency}</div>
+<div onclick={startEdit}>{Number(value/100).toFixed(2)}&nbsp;{currency}</div>
 {/if}