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/collection/dialogs/export.svelte

@@ -0,0 +1,65 @@
+<script>
+  import Icon from '$components/icon.svelte';
+  import Modal from '$components/modal.svelte';
+  import views from '$lib/stores/views';
+  import { createEventDispatcher } from 'svelte';
+
+  export let collection;
+  export let query = undefined;
+
+  const dispatch = createEventDispatcher();
+  const exportInfo = { ...query, viewKey: collection.viewKey };
+
+  function submit() {
+    exportInfo.view = $views[exportInfo.viewKey];
+    dispatch('export', { exportInfo });
+  }
+</script>
+
+<Modal title="Export results" width="450px" on:close>
+  <form on:submit|preventDefault={submit}>
+    <label class="field">
+      <span class="label">Export</span>
+      <select bind:value={exportInfo.contents}>
+        <option value="all">all records</option>
+        <option value="query" disabled={!query}>all records matching query</option>
+        <option value="querylimitskip" disabled={!query}>all records matching query, considering limit and skip</option>
+      </select>
+    </label>
+
+    <label class="field">
+      <span class="label">Format</span>
+      <select bind:value={exportInfo.format}>
+        <option value="jsonarray">JSON array</option>
+        <option value="ndjson">Newline delimited JSON</option>
+        <option value="csv">CSV</option>
+      </select>
+    </label>
+
+    <label class="field">
+      <span class="label">View to use</span>
+      <select bind:value={exportInfo.viewKey}>
+        {#each Object.entries(views.forCollection(collection.hostKey, collection.dbKey, collection.key)) as [ key, { name } ]}
+          <option value={key}>{name}</option>
+        {/each}
+      </select>
+      <button class="btn" type="button" on:click={() => dispatch('openViewConfig')} title="Edit view">
+        <Icon name="cog" />
+      </button>
+    </label>
+  </form>
+
+  <svelte:fragment slot="footer">
+    <button class="btn" on:click={submit}>
+      <Icon name="play" /> Start export
+    </button>
+  </svelte:fragment>
+</Modal>
+
+<style>
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+</style>