9eed1a0 Setup two-way binding with form — radicle-explorer

Radicle web interface

Setup two-way binding with form

Alexis Sellier committed 5 years ago

commit 9eed1a047b0761c7a4885cff0759b0d78eb833ba
parent de39348776c666eff3b67a5092c2f5dbe61246aa

3 files changed +17 -10

modified 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>

modified 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);

modified 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);
 }