From 231aa8dcd73a7a8c36b850d2805f9e8828502176 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Sat, 19 Feb 2022 11:30:06 +0100
Subject: [PATCH] fix(front/checkbox): change value to boolean and use
 handleInput

---
 src/assets/views/utils/Field.svelte | 34 +++++++++++++++++------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/assets/views/utils/Field.svelte b/src/assets/views/utils/Field.svelte
index 18292e7..8753433 100644
--- a/src/assets/views/utils/Field.svelte
+++ b/src/assets/views/utils/Field.svelte
@@ -8,7 +8,7 @@
 
     export let type: string;
     export let name: string;
-    type FieldValue = string | number | Record<string, FieldValue>;
+    type FieldValue = string | number | boolean | Record<string, FieldValue>;
     export let value: FieldValue | undefined = undefined;
     export let initialValue: FieldValue | undefined = undefined;
     export let placeholder: string | undefined = undefined;
@@ -58,18 +58,23 @@
     }
 
     function handleInput() {
-        // in here, you can switch on type and implement
-        // whatever behaviour you need
-        value = type.match(/^(number|range)$/)
-            ? +this.value
-            : this.value;
-
-        if (this.type === 'file') {
-            handleFileInput();
-        }
-
-        if (this.type === 'datetime-local') {
-            value = dateToIsoString(new Date(this.value));
+        switch (this.type) {
+            case 'number':
+            case 'range':
+                value = +this.value;
+                break;
+            case 'file':
+                handleFileInput();
+                break;
+            case 'datetime-local':
+                value = dateToIsoString(new Date(this.value));
+                break;
+            case 'checkbox':
+                value = !!this.checked;
+                break;
+            default:
+                value = this.value;
+                break;
         }
     }
 
@@ -423,7 +428,8 @@
                               on:focusout={() => focused = false}></textarea>
                 </div>
             {:else if type === 'checkbox'}
-                <input {type} {name} id={fieldId} checked={value === 'on'} {...$$restProps} bind:this={input}>
+                <input {type} {name} id={fieldId} checked={!!value} {...$$restProps} bind:this={input}
+                       on:change={handleInput}>
             {:else if type === 'datetime-local'}
                 <input {type} bind:this={input} on:input={handleInput} value={initialDatetimeLocalValue}>
                 <input type="hidden" {name} {value}>