dump/export (wip)

frontend/src/organisms/connection/export/dumpinfo.svelte

@@ -0,0 +1,129 @@
+<script>
+  import { busy, connections } from '../../../stores';
+  import Grid from '../../../components/grid.svelte';
+  import Modal from '../../../components/modal.svelte';
+  import { OpenConnection, OpenDatabase } from '../../../../wailsjs/go/app/App';
+
+  export let info;
+  export let hosts = {};
+
+  $: console.log(info);
+
+  async function selectHost(hostKey) {
+    info.hostKey = hostKey;
+    info.dbKey = undefined;
+    info.collKeys = [];
+
+    if (hostKey) {
+      busy.start();
+      const databases = await OpenConnection(hostKey);
+
+      if (databases && !$connections[hostKey]) {
+        $connections[hostKey] = { databases: {} };
+        databases.sort().forEach(dbKey => {
+          $connections[hostKey].databases[dbKey] = $connections[hostKey].databases[dbKey] || { collections: {} };
+        });
+      }
+
+      busy.end();
+    }
+  }
+
+  async function selectDatabase(dbKey) {
+    info.collKeys = [];
+    info.dbKey = dbKey;
+
+    if (dbKey) {
+      busy.start();
+      const collections = await OpenDatabase(info.hostKey, dbKey);
+
+      for (const collKey of collections?.sort() || []) {
+        $connections[info.hostKey].databases[dbKey].collections[collKey] = {};
+      }
+
+      busy.end();
+    }
+  }
+
+  function selectCollection(collKey) {
+    info.collKeys = [ collKey ];
+  }
+</script>
+
+<Modal bind:show={info} title="Dump database data">
+  <div class="info">
+    <div class="meta">
+      <label class="field">
+        <span class="label">Output filename</span>
+        <input type="text">
+      </label>
+    </div>
+    <div class="location">
+      <div class="grid">
+        <Grid
+          key="id"
+          columns={[ { title: 'Host', key: 'name' } ]}
+          activePath={info ? [ info.hostKey ] : []}
+          showHeaders
+          hideChildrenToggles
+          items={[
+            { id: undefined, name: '(localhost)' },
+            ...Object.keys(hosts).map(id => ({ id, name: hosts[id]?.name })),
+          ]}
+          on:select={e => selectHost(e.detail?.itemKey)}
+        />
+      </div>
+      <div class="grid">
+        <Grid
+          key="id"
+          columns={[ { title: 'Database', key: 'name' } ]}
+          activePath={info ? [ info.dbKey ] : []}
+          showHeaders
+          hideChildrenToggles
+          items={[
+            { id: undefined, name: '(all databases)' },
+            ...($connections[info.hostKey]?.databases
+              ? Object.keys($connections[info.hostKey].databases).map(id => ({ id, name: id }))
+              : []
+            ),
+          ]}
+          on:select={e => selectDatabase(e.detail?.itemKey)}
+        />
+      </div>
+      <div class="grid">
+        <Grid
+          key="id"
+          columns={[ { title: 'Collection', key: 'name' } ]}
+          activePath={info?.collKeys ? [ info.collKeys[0] ] : []}
+          showHeaders
+          hideChildrenToggles
+          items={[
+            { id: undefined, name: '(all collections)' },
+            ...($connections[info.hostKey]?.databases[info.dbKey]?.collections
+              ? Object.keys($connections[info.hostKey].databases[info.dbKey].collections).map(id => ({ id, name: id }))
+              : []
+            ),
+          ]}
+          on:select={e => selectCollection(e.detail?.itemKey)}
+        />
+      </div>
+    </div>
+  </div>
+</Modal>
+
+<style>
+  .info {
+    display: grid;
+    grid-template: auto / 1fr;
+  }
+  .location {
+    display: grid;
+    grid-template: 1fr / repeat(3, 1fr);
+    gap: 1rem;
+  }
+  .location .grid {
+    border: 1px solid #ccc;
+    padding: 0.3rem;
+    overflow-y: auto;
+  }
+</style>

frontend/src/organisms/connection/export/exportinfo.svelte

@@ -0,0 +1,3 @@
+<script>
+  export let info;
+</script>

frontend/src/organisms/connection/hosttree.svelte

@@ -101,6 +101,9 @@
         name: collKey,
         icon: 'list',
         menu: [
+          { label: 'Export collection (JSON/CSV, mongoexport)…', fn: () => dispatch('exportCollection', collKey) },
+          { label: 'Dump collection (BSON, mongodump)…', fn: () => dispatch('dumpCollection', collKey) },
+          { separator: true },
           { label: 'Rename collection…', fn: () => dispatch('renameCollection', collKey) },
           { label: 'Truncate collection…', fn: () => truncateCollection(dbKey, collKey) },
           { label: 'Drop collection…', fn: () => dropCollection(dbKey, collKey) },

frontend/src/organisms/connection/index.svelte

@@ -9,6 +9,8 @@
   import HostDetail from './hostdetail.svelte';
   import Icon from '../../components/icon.svelte';
   import { EventsOn } from '../../../wailsjs/runtime/runtime';
+  import ExportInfo from './export/exportinfo.svelte';
+  import DumpInfo from './export/dumpinfo.svelte';
 
   export let hosts = {};
   export let activeHostKey = '';
@@ -25,6 +27,9 @@
   let collToRename = '';
   let newCollKey = '';
 
+  let exportInfo;
+  let dumpInfo;
+
   async function getHosts() {
     hosts = await Hosts();
   }
@@ -54,7 +59,6 @@
 
   async function renameCollection() {
     busy.start();
-    console.log(newCollKey);
     const ok = await RenameCollection(activeHostKey, activeDbKey, collToRename, newCollKey);
     if (ok) {
       activeCollKey = newCollKey;
@@ -73,6 +77,22 @@
     busy.end();
   }
 
+  function exportCollection(collKey) {
+    exportInfo = {
+      hostKey: activeHostKey,
+      dbKey: activeDbKey,
+      collKeys: [ collKey ],
+    };
+  }
+
+  function dumpCollection(collKey) {
+    dumpInfo = {
+      hostKey: activeHostKey,
+      dbKey: activeDbKey,
+      collKeys: [ collKey ],
+    };
+  }
+
   EventsOn('CreateHost', createHost);
   EventsOn('CreateDatabase', () => newDb = {});
   EventsOn('CreateCollection', () => newColl = {});
@@ -91,6 +111,8 @@
     on:newCollection={() => newColl = {}}
     on:editHost={e => editHost(e.detail)}
     on:renameCollection={e => openEditCollModal(e.detail)}
+    on:exportCollection={e => exportCollection(e.detail)}
+    on:dumpCollection={e => dumpCollection(e.detail)}
   />
 </div>
 
@@ -108,6 +130,9 @@
   {hosts}
 />
 
+<ExportInfo bind:info={exportInfo} {hosts} />
+<DumpInfo bind:info={dumpInfo} {hosts} />
+
 {#if newDb}
   <Modal bind:show={newDb}>
     <p><strong>Create a database</strong></p>