Edit hosts

frontend/src/organisms/addressbar/hostdetail.svelte

@@ -1,17 +1,24 @@
 <script>
+  import { input } from '../../actions';
   import { createEventDispatcher } from 'svelte';
-  import { AddHost } from '../../../wailsjs/go/app/App';
+  import { AddHost, UpdateHost } from '../../../wailsjs/go/app/App';
   import Modal from '../../components/modal.svelte';
 
   export let show = false;
+  export let host = undefined;
+  export let hostKey = '';
 
-  const dispatch = createEventDispatcher('reload');
-  let form = {};
+  const dispatch = createEventDispatcher();
+  let form = { ...(host || {}) };
   let error = '';
   $: valid = validate(form);
 
   $: if (show || !show) {
-    form = {};
+    init();
+  }
+
+  function init() {
+    form = { ...(host || {}) };
   }
 
   function validate(form) {
@@ -24,7 +31,12 @@
     }
 
     try {
-      await AddHost(JSON.stringify(form));
+      if (host && hostKey) {
+        await UpdateHost(hostKey, JSON.stringify(form));
+      }
+      else {
+        await AddHost(JSON.stringify(form));
+      }
       show = false;
       dispatch('reload');
     }
@@ -34,16 +46,16 @@
   }
 </script>
 
-<Modal bind:show title="Create a new host">
+<Modal bind:show title={host ? `Edit ${host.name}` : 'Create a new host'}>
   <form on:submit|preventDefault={submit}>
     <label class="field">
       <span class="label">Label</span>
-      <input type="text" placeholder="mywebsite.com MongoDB" bind:value={form.name} />
+      <input type="text" placeholder="mywebsite.com MongoDB" bind:value={form.name} use:input={{ autofocus: true }} />
     </label>
 
     <label class="field">
       <span class="label">Connection string</span>
-      <input type="text" placeholder="mongodb://..." bind:value={form.uri} spellcheck="false" />
+      <input type="text" placeholder="mongodb://..." bind:value={form.uri} spellcheck="false" use:input />
     </label>
 
     <div class="result">
@@ -52,7 +64,9 @@
           <div class="error">{error}</div>
         {/if}
       </div>
-      <button class="btn" disabled={!valid} type="submit">Create</button>
+      <button class="btn" disabled={!valid} type="submit">
+        {host ? 'Save' : 'Create'}
+      </button>
     </div>
   </form>
 </Modal>

frontend/src/organisms/addressbar/hostmodal.svelte

@@ -4,7 +4,7 @@
   import Icon from '../../components/icon.svelte';
   import { Hosts, RemoveHost } from '../../../wailsjs/go/app/App';
   import Welcome from './welcome.svelte';
-  import CreateHostModal from './createhostmodal.svelte';
+  import HostDetail from './hostdetail.svelte';
 
   export let hosts = {};
   export let activeHostKey = '';
@@ -12,7 +12,9 @@
 
   const dispatch = createEventDispatcher();
   let error = '';
-  let createHostModalOpen = false;
+  let hostDetailModalOpen = false;
+  let hostDetailModalHost;
+  let hostDetailModalKey = '';
   $: host = hosts?.[activeHostKey];
   $: hostCount = Object.keys(hosts).length;
 
@@ -35,6 +37,18 @@
     }
   }
 
+  function createHost() {
+    hostDetailModalHost = undefined;
+    hostDetailModalKey = '';
+    hostDetailModalOpen = true;
+  }
+
+  function editHost(hostKey) {
+    hostDetailModalHost = hosts[hostKey];
+    hostDetailModalKey = hostKey;
+    hostDetailModalOpen = true;
+  }
+
   async function removeHost(hostKey) {
     try {
       await RemoveHost(hostKey);
@@ -57,7 +71,7 @@
         {hostCount} host{hostCount === 1 ? '' : 's'}
       {/if}
     </p>
-    <button class="btn" on:click={() => createHostModalOpen = true}>
+    <button class="btn" on:click={createHost}>
       Create new host
     </button>
   </div>
@@ -66,10 +80,10 @@
       {#each Object.entries(hosts) as [hostKey, host]}
         <li>
           <div class="host">
-            <button class="btn secondary" on:click={() => select(hostKey)} title="Connect to {host.name}">
+            <button class="btn secondary" title="Connect to {host.name}" on:click={() => select(hostKey)}>
               {host.name}
             </button>
-            <button class="btn secondary" title="Edit {host.name}">
+            <button class="btn secondary" title="Edit {host.name}" on:click={() => editHost(hostKey)}>
               <Icon name="edit" />
             </button>
             <button class="btn secondary" title="Remove {host.name}" on:click={() => removeHost(hostKey)}>
@@ -80,11 +94,16 @@
       {/each}
     </ul>
   {:else}
-    <Welcome on:createHost={() => createHostModalOpen = true} />
+    <Welcome on:createHost={createHost} />
   {/if}
 </Modal>
 
-<CreateHostModal bind:show={createHostModalOpen} on:reload={getHosts} />
+<HostDetail
+  host={hostDetailModalHost}
+  hostKey={hostDetailModalKey}
+  on:reload={getHosts}
+  bind:show={hostDetailModalOpen}
+/>
 
 <style>
   .hosts {

internal/app/hosts.go

@@ -162,7 +162,7 @@ func (a *App) RemoveHost(key string) error {
 
 	sure, _ := runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
 		Title:         "Confirm",
-		Message:       "Are you sure you want to remove " + key + "?",
+		Message:       "Are you sure you want to remove " + hosts[key].Name + "?",
 		Buttons:       []string{"Yes", "No"},
 		DefaultButton: "Yes",
 		CancelButton:  "No",