Implement OOP hosttree (#32)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

frontend/src/organisms/connection/host/dialogs/hostdetail.svelte

@@ -0,0 +1,85 @@
+<script>
+  import Modal from '$components/modal.svelte';
+  import input from '$lib/actions/input';
+  import hostTree from '$lib/stores/hosttree';
+  import { AddHost, UpdateHost } from '$wails/go/app/App';
+  import { createEventDispatcher, onMount } from 'svelte';
+
+  export let hostKey = '';
+
+  const dispatch = createEventDispatcher();
+  let form = {};
+  let error = '';
+  $: valid = validate(form);
+  $: host = $hostTree[hostKey];
+
+  function validate(form) {
+    return form.name && form.uri && true;
+  }
+
+  async function submit() {
+    if (!valid) {
+      return;
+    }
+
+    try {
+      if (host && hostKey) {
+        await UpdateHost(hostKey, JSON.stringify(form));
+      }
+      else {
+        const newHostKey = await AddHost(JSON.stringify(form));
+        if (newHostKey) {
+          hostKey = newHostKey;
+        }
+      }
+      dispatch('updated', form);
+      dispatch('close');
+    }
+    catch (e) {
+      error = e;
+    }
+  }
+
+  onMount(() => {
+    form = { ...(host || {}) };
+  });
+</script>
+
+<Modal title={host ? `Edit ${host.name}` : 'Create a new host'} on:close>
+  <form on:submit|preventDefault={submit}>
+    <label class="field">
+      <span class="label">Label</span>
+      <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" use:input />
+    </label>
+  </form>
+
+  <div class="result" slot="footer">
+    <div>
+      {#if error}
+        <div class="error">{error}</div>
+      {/if}
+    </div>
+    <button class="btn" disabled={!valid} on:click={submit}>
+      {host ? 'Save' : 'Create'}
+    </button>
+  </div>
+</Modal>
+
+<style>
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .result {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>