From 9eed1a047b0761c7a4885cff0759b0d78eb833ba Mon Sep 17 00:00:00 2001
From: Alexis Sellier <self@cloudhead.io>
Date: Fri, 7 May 2021 10:52:23 +0200
Subject: [PATCH] Setup two-way binding with form

---
 src/Form.svelte                       | 14 +++++++-------
 src/base/register/Registration.svelte |  8 +++++---
 src/utils.ts                          |  5 +++++
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/Form.svelte b/src/Form.svelte
index 0259c32b9..78fbe0a46 100644
--- a/src/Form.svelte
+++ b/src/Form.svelte
@@ -1,21 +1,21 @@
 <script context="module" lang="typescript">
   export interface Field {
-    label: string,
+    name: string,
     value: string | null,
     placeholder?: string,
-    type: string,
     editable: boolean
   }
 </script>
 
 <script lang="typescript">
   import { createEventDispatcher } from 'svelte';
+  import { capitalize } from '@app/utils';
 
   export let fields: Field[];
   export let editable = false ;
 
   const dispatch = createEventDispatcher();
-  const save = () => dispatch('save');
+  const save = () => dispatch('save', fields);
   const cancel = () => dispatch('cancel');
 </script>
 
@@ -78,12 +78,12 @@
 <div class="fields">
   {#each fields as field}
     <div class="label">
-      {field.label}
+      {capitalize(field.name)}
     </div>
     <div>
-      <input class="field" placeholder={field.placeholder}
-             disabled={!field.editable || !editable}
-             type={field.type} value={field.value} />
+      <input name={field.name} class="field" placeholder={field.placeholder}
+             disabled={!field.editable || !editable} bind:value={field.value}
+             type="text" />
     </div>
   {/each}
 </div>
diff --git a/src/base/register/Registration.svelte b/src/base/register/Registration.svelte
index ea59aef55..76087930b 100644
--- a/src/base/register/Registration.svelte
+++ b/src/base/register/Registration.svelte
@@ -19,16 +19,18 @@
     .then(registration => {
       if (registration) {
         fields = [
-          { label: "Address", type: "text", placeholder: "Not set",
+          { name: "address", placeholder: "Not set",
             value: registration.address, editable: true },
-          { label: "Owner", type: "text", placeholder: "",
+          { name: "owner", placeholder: "",
             value: registration.owner, editable: false },
         ];
       }
       return registration;
     });
 
-  const save = () => {};
+  const save = (event: { detail: Field[] }) => {
+    console.log("Save", event.detail);
+  };
 
   $: isOwner = (registration: Registration): boolean => {
     return registration.owner === ($session && $session.address);
diff --git a/src/utils.ts b/src/utils.ts
index e77162c24..6e49e4b60 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -10,3 +10,8 @@ export function formatAddress(addr: string) {
     + '...'
     + addr.substring(addr.length - 4, addr.length);
 }
+
+export function capitalize(s: string) {
+  if (s === "") return s;
+  return s[0].toUpperCase() + s.substr(1);
+}