Split app.svelte

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

@@ -1,11 +1,11 @@
 <script>
-  import { PerformFind } from '../../../wailsjs/go/app/App';
-  import CodeExample from '../../components/code-example.svelte';
+  import { PerformFind } from '../../../../wailsjs/go/app/App';
+  import CodeExample from '../../../components/code-example.svelte';
   import { onMount } from 'svelte';
-  import { input } from '../../actions';
-  import ObjectGrid from '../../components/objectgrid.svelte';
-  import Icon from '../../components/icon.svelte';
-  import CodeViewer from '../../components/codeviewer.svelte';
+  import { input } from '../../../actions';
+  import ObjectGrid from '../../../components/objectgrid.svelte';
+  import Icon from '../../../components/icon.svelte';
+  import CodeViewer from '../../../components/codeviewer.svelte';
 
   export let collection;
 

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

@@ -1,7 +1,7 @@
 <script>
-  import BlankState from '../../components/blankstate.svelte';
+  import BlankState from '../../../components/blankstate.svelte';
   import { tick } from 'svelte';
-  import TabBar from '../../components/tabbar.svelte';
+  import TabBar from '../../../components/tabbar.svelte';
   import Find from './find.svelte';
   import Indexes from './indexes.svelte';
   import Insert from './insert.svelte';

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

@@ -1,7 +1,7 @@
 <script>
-  import { input } from '../../actions';
+  import { input } from '../../../actions';
   import { createEventDispatcher } from 'svelte';
-  import { PerformInsert } from '../../../wailsjs/go/app/App';
+  import { PerformInsert } from '../../../../wailsjs/go/app/App';
 
   export let collection;
 

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

@@ -1,5 +1,5 @@
 <script>
-  import CodeExample from '../../components/code-example.svelte';
+  import CodeExample from '../../../components/code-example.svelte';
 
   export let collection;
 

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

@@ -1,6 +1,6 @@
 <script>
-  import ObjectGrid from '../../components/objectgrid.svelte';
-  import CodeExample from '../../components/code-example.svelte';
+  import ObjectGrid from '../../../components/objectgrid.svelte';
+  import CodeExample from '../../../components/code-example.svelte';
 
   export let collection;
 </script>

frontend/src/organisms/connection/dblist.svelte

@@ -0,0 +1,127 @@
+<script>
+  import { busy, contextMenu, connections } from '../../stores';
+  import { createEventDispatcher } from 'svelte';
+  import { DropCollection, DropDatabase, OpenCollection, OpenConnection, OpenDatabase } from '../../../wailsjs/go/app/App';
+  import Grid from '../../components/grid.svelte';
+
+  export let hosts = {};
+  export let activeHostKey = '';
+  export let activeDbKey = '';
+  export let activeCollKey = '';
+
+  const dispatch = createEventDispatcher();
+  $: host = hosts[activeHostKey];
+  $: connection = $connections[activeHostKey];
+  $: database = connection?.databases[activeDbKey];
+  $: collection = database?.collections?.[activeCollKey];
+
+  export async function reload() {
+    activeHostKey && await openConnection(activeHostKey);
+    activeDbKey && await openDatabase(activeDbKey);
+    activeCollKey && await openCollection(activeCollKey);
+  }
+
+  async function openConnection(hostKey) {
+    busy.start();
+    const databases = await OpenConnection(hostKey);
+
+    if (databases) {
+      $connections[hostKey] = { databases: {} };
+      databases.forEach(dbKey => {
+        $connections[hostKey].databases[dbKey] = { collections: {} };
+      });
+      activeHostKey = hostKey;
+      dispatch('connected', hostKey);
+      window.runtime.WindowSetTitle(`${hosts[activeHostKey].name} - Mongodup`);
+    }
+
+    busy.end();
+  }
+
+  async function openDatabase(dbKey) {
+    busy.start();
+    const collections = await OpenDatabase(activeHostKey, dbKey);
+
+    for (const collKey of collections || []) {
+      $connections[activeHostKey].databases[dbKey].collections[collKey] = {};
+    }
+
+    busy.end();
+  }
+
+  async function dropDatabase(dbKey) {
+    busy.start();
+    await DropDatabase(activeHostKey, dbKey);
+    await reload();
+    busy.end();
+  }
+
+  async function openCollection(collKey) {
+    busy.start();
+    const stats = await OpenCollection(activeHostKey, activeDbKey, collKey);
+    $connections[activeHostKey].databases[activeDbKey].collections[collKey].stats = stats;
+    busy.end();
+  }
+
+  async function dropCollection(dbKey, collKey) {
+    busy.start();
+    await DropCollection(activeHostKey, dbKey, collKey);
+    await reload();
+    busy.end();
+  }
+</script>
+
+{#if host && connection}
+  <Grid
+    columns={[ { key: 'id' }, { key: 'collCount', right: true } ]}
+    items={Object.keys(connection.databases).map(dbKey => ({
+      id: dbKey,
+      collCount: Object.keys(connection.databases[dbKey].collections || {}).length || '',
+      children: Object.keys(connection.databases[dbKey].collections).map(collKey => ({
+        id: collKey,
+        menu: [
+          { label: `Drop ${collKey}`, fn: () => dropCollection(dbKey, collKey) },
+          { label: `Drop ${dbKey}`, fn: () => dropDatabase(dbKey) },
+          { separator: true },
+          { label: 'New database', fn: () => dispatch('newDatabase') },
+          { label: 'New collection', fn: () => dispatch('newCollection') },
+        ],
+      })).sort((a, b) => a.id.localeCompare(b)) || [],
+      menu: [
+        { label: `Drop ${dbKey}`, fn: () => dropDatabase(dbKey) },
+        { separator: true },
+        { label: 'New database', fn: () => dispatch('newDatabase') },
+        { label: 'New collection', fn: () => dispatch('newCollection') },
+      ],
+    }))}
+    actions={[
+      { icon: 'reload', fn: reload },
+      { icon: '+', fn: evt => {
+        if (activeDbKey) {
+          contextMenu.show(evt, [
+            { label: 'New database', fn: () => dispatch('newDatabase') },
+            { label: 'New collection', fn: () => dispatch('newCollection') },
+          ]);
+        }
+        else {
+          dispatch('newDatabase');
+        }
+      } },
+      { icon: '-', fn: evt => {
+        if (activeCollKey) {
+          contextMenu.show(evt, [
+            { label: 'Drop database', fn: () => dropDatabase(activeDbKey) },
+            { label: 'Drop collection', fn: () => dropCollection(activeDbKey, activeCollKey) },
+          ]);
+        }
+        else {
+          dropDatabase(activeDbKey);
+        }
+      }, disabled: !activeDbKey },
+    ]}
+    bind:activeKey={activeDbKey}
+    bind:activeChildKey={activeCollKey}
+    on:select={e => openDatabase(e.detail)}
+    on:selectChild={e => openCollection(e.detail)}
+  />
+{/if}

frontend/src/organisms/connection/index.svelte

@@ -0,0 +1,92 @@
+<script>
+  import { onMount, tick } from 'svelte';
+  import { Hosts } from '../../../wailsjs/go/app/App';
+  import { input } from '../../actions';
+  import Modal from '../../components/modal.svelte';
+  import DatabaseList from './dblist.svelte';
+  import { busy, connections } from '../../stores';
+  import CollectionDetail from './collection/index.svelte';
+
+  export let hosts = {};
+  export let activeHostKey = '';
+  export let activeDbKey = '';
+  export let activeCollKey = '';
+
+  let environment;
+  let addressBarModalOpen = true;
+  let dbList;
+
+  let newDb;
+  let newDbInput;
+  let newColl;
+  let newCollInput;
+
+  $: if (newDb) {
+    tick().then(() => newDbInput.focus());
+  }
+
+  async function createDatabase() {
+    busy.start();
+    $connections[activeHostKey].databases[newDb.name] = { collections: {} };
+    newDb = undefined;
+    await dbList.reload();
+    busy.end();
+  }
+
+  async function createCollection() {
+    busy.start();
+    $connections[activeHostKey].databases[activeDbKey].collections[newColl.name] = {};
+    newColl = undefined;
+    await dbList.reload();
+    busy.end();
+  }
+
+  onMount(() => {
+    window.runtime.Environment().then(e => environment = e);
+    Hosts().then(h => hosts = h);
+  });
+</script>
+
+<DatabaseList
+  {hosts}
+  bind:activeHostKey
+  bind:activeCollKey
+  bind:activeDbKey
+  bind:this={dbList}
+  on:connected={() => addressBarModalOpen = false}
+  on:newDatabase={() => newDb = {}}
+  on:newCollection={() => newColl = {}}
+/>
+
+<CollectionDetail
+  collection={$connections[activeHostKey]?.databases[activeDbKey]?.collections?.[activeCollKey]}
+  hostKey={activeHostKey}
+  dbKey={activeDbKey}
+  collectionKey={activeCollKey}
+/>
+
+{#if newDb}
+  <Modal bind:show={newDb}>
+    <p><strong>Create a database</strong></p>
+    <p>Note: databases in MongoDB do not exist until they have a collection and an item. Your new database will not persist on the server; fill it to have it created.</p>
+    <form on:submit|preventDefault={createDatabase}>
+      <label class="field">
+        <input type="text" spellcheck="false" bind:value={newDb.name} use:input placeholder="New collection name" bind:this={newDbInput} />
+      </label>
+      <button class="btn create" type="submit">Create database</button>
+    </form>
+  </Modal>
+{/if}
+
+{#if newColl}
+  <Modal bind:show={newColl}>
+    <p><strong>Create a collections</strong></p>
+    <p>Note: collections in MongoDB do not exist until they have at least one item. Your new collection will not persist on the server; fill it to have it created.</p>
+    <form on:submit|preventDefault={createCollection}>
+      <label class="field">
+        <input type="text" spellcheck="false" bind:value={newColl.name} use:input placeholder="New collection name" bind:this={newCollInput} />
+      </label>
+      <button class="btn create" type="submit">Create collection</button>
+    </form>
+  </Modal>
+{/if}