From de39348776c666eff3b67a5092c2f5dbe61246aa Mon Sep 17 00:00:00 2001
From: Alexis Sellier <self@cloudhead.io>
Date: Fri, 7 May 2021 10:30:27 +0200
Subject: [PATCH] Add cancel and save buttons to form

---
 src/Form.svelte                       | 27 +++++++++++++++++++++++++++
 src/base/register/Registration.svelte |  4 +++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/Form.svelte b/src/Form.svelte
index 8f990b799..0259c32b9 100644
--- a/src/Form.svelte
+++ b/src/Form.svelte
@@ -9,8 +9,14 @@
 </script>
 
 <script lang="typescript">
+  import { createEventDispatcher } from 'svelte';
+
   export let fields: Field[];
   export let editable = false ;
+
+  const dispatch = createEventDispatcher();
+  const save = () => dispatch('save');
+  const cancel = () => dispatch('cancel');
 </script>
 
 <style>
@@ -55,6 +61,18 @@
   .label {
     border: 1px solid transparent;
   }
+
+  .actions {
+    margin-top: 2rem;
+    text-align: center;
+    visibility: hidden;
+  }
+  .actions button {
+    margin-left: 1rem;
+  }
+  .actions.editable {
+    visibility: visible;
+  }
 </style>
 
 <div class="fields">
@@ -69,3 +87,12 @@
     </div>
   {/each}
 </div>
+
+<div class="actions" class:editable>
+  <button on:click={cancel} class="small">
+    Cancel
+  </button>
+  <button on:click={save} class="small primary">
+    Save
+  </button>
+</div>
diff --git a/src/base/register/Registration.svelte b/src/base/register/Registration.svelte
index fbfa40ac7..ea59aef55 100644
--- a/src/base/register/Registration.svelte
+++ b/src/base/register/Registration.svelte
@@ -28,6 +28,8 @@
       return registration;
     });
 
+  const save = () => {};
+
   $: isOwner = (registration: Registration): boolean => {
     return registration.owner === ($session && $session.address);
   };
@@ -61,7 +63,7 @@
           Transfer
         </button>
       </header>
-      <Form {editable} {fields} />
+      <Form {editable} {fields} on:save={save} on:cancel={() => editable = false} />
     </main>
   {:else}
     <Modal subtle>