Forms!

frontend/src/organisms/connection/collection/index.svelte

@@ -9,6 +9,7 @@
   import Stats from './stats.svelte';
   import Update from './update.svelte';
   import { EventsOn } from '../../../../wailsjs/runtime/runtime';
+  import ViewConfig from './components/viewconfig.svelte';
 
   export let collection;
   export let hostKey;
@@ -17,6 +18,8 @@
 
   let tab = 'find';
   let find;
+  let viewConfigModalOpen = false;
+  let firstItem;
 
   $: if (collection) {
     collection.hostKey = hostKey;
@@ -31,6 +34,11 @@
     await tick();
     find.performQuery(event.detail);
   }
+
+  function openViewConfig(event) {
+    firstItem = event.detail?.firstItem;
+    viewConfigModalOpen = true;
+  }
 </script>
 
 <div class="collection" class:empty={!collection}>
@@ -47,8 +55,8 @@
 
       <div class="container">
         {#if tab === 'stats'} <Stats {collection} />
-        {:else if tab === 'find'} <Find {collection} bind:this={find} />
-        {:else if tab === 'insert'} <Insert {collection} on:performFind={catchQuery} />
+        {:else if tab === 'find'} <Find {collection} bind:this={find} on:openViewConfig={openViewConfig} />
+        {:else if tab === 'insert'} <Insert {collection} on:performFind={catchQuery} on:openViewConfig={openViewConfig} />
         {:else if tab === 'update'} <Update {collection} on:performFind={catchQuery} />
         {:else if tab === 'remove'} <Remove {collection} />
         {:else if tab === 'indexes'} <Indexes {collection} />
@@ -60,6 +68,15 @@
   {/if}
 </div>
 
+{#if collection}
+  <ViewConfig
+    bind:show={viewConfigModalOpen}
+    bind:activeViewKey={collection.viewKey}
+    {firstItem}
+    {collection}
+  />
+{/if}
+
 <style>
   .collection {
     height: 100%;