Export/dump... wip

frontend/src/components/directorychooser.svelte

@@ -0,0 +1,19 @@
+<script>
+  import { OpenDirectory } from '../../wailsjs/go/app/App';
+
+  export let value = '';
+  export let id = '';
+  export let title = 'Choose a directory';
+
+  async function selectDir() {
+    value = await OpenDirectory(title) || value;
+  }
+</script>
+
+<input type="text" on:pointerdown={selectDir} readonly {id} {value} />
+
+<style>
+  input {
+    cursor: pointer;
+  }
+</style>

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

@@ -1,12 +1,30 @@
 <script>
-  import { busy, connections } from '../../../stores';
+  import { applicationSettings, busy, connections } from '../../../stores';
   import Grid from '../../../components/grid.svelte';
   import Modal from '../../../components/modal.svelte';
-  import { OpenConnection, OpenDatabase } from '../../../../wailsjs/go/app/App';
+  import { OpenConnection, OpenDatabase, PerformExport } from '../../../../wailsjs/go/app/App';
+  import DirectoryChooser from '../../../components/directorychooser.svelte';
 
   export let info;
   export let hosts = {};
 
+  const actionLabel = {
+    export: 'Perform export',
+    dump: 'Perform dump',
+  };
+
+  $: if (info) {
+    info.outdir = info.outdir || $applicationSettings.defaultExportDirectory;
+    info.filename = info.filename || `Export ${new Date().getTime()}`;
+
+    if (info.filetype === 'bson') {
+      info.type = 'dump';
+    }
+    else {
+      info.type = 'export';
+    }
+  }
+
   async function selectHost(hostKey) {
     info.hostKey = hostKey;
     info.dbKey = undefined;
@@ -43,17 +61,35 @@
     }
   }
 
+  async function performExport() {
+    await PerformExport(JSON.stringify(info));
+  }
+
   function selectCollection(collKey) {
     info.collKeys = [ collKey ];
   }
 </script>
 
-<Modal bind:show={info} title="Dump database data">
-  <div class="info">
+<Modal bind:show={info} title={actionLabel[info?.type]}>
+  <form on:submit|preventDefault={performExport}>
     <div class="meta">
+      <!-- svelte-ignore a11y-label-has-associated-control - input is in DirectoryChooser -->
       <label class="field">
-        <span class="label">Output filename</span>
-        <input type="text">
+        <span class="label">Output directory</span>
+        <DirectoryChooser bind:value={info.outdir} />
+      </label>
+      <label class="field">
+        <span class="label">Filename</span>
+        <input type="text" bind:value={info.filename} />
+        <select bind:value={info.filetype} class="filetype">
+          <optgroup label="Dump (mongodump)">
+            <option value="bson">.bson</option>
+          </optgroup>
+          <optgroup label="Export (mongoexport)">
+            <option value="csv">.csv</option>
+            <option value="json">.json</option>
+          </optgroup>
+        </select>
       </label>
     </div>
     <div class="location">
@@ -106,11 +142,15 @@
         />
       </div>
     </div>
-  </div>
+
+    <div>
+      <button type="submit" class="btn">{actionLabel[info.type]}</button>
+    </div>
+  </form>
 </Modal>
 
 <style>
-  .info {
+  form {
     display: grid;
     grid-template: auto / 1fr;
   }
@@ -124,4 +164,15 @@
     padding: 0.3rem;
     overflow-y: auto;
   }
+
+  .meta {
+    display: grid;
+    grid-template: 1fr / 1fr 1fr;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  select.filetype {
+    flex: 0 1;
+  }
 </style>

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

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

frontend/src/organisms/connection/index.svelte

@@ -9,8 +9,7 @@
   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';
+  import Export from './export/export.svelte';
   import Hint from '../../components/hint.svelte';
 
   export let hosts = {};
@@ -29,7 +28,6 @@
   let newCollKey = '';
 
   let exportInfo;
-  let dumpInfo;
 
   async function getHosts() {
     hosts = await Hosts();
@@ -74,6 +72,8 @@
 
   function exportCollection(collKey) {
     exportInfo = {
+      type: 'export',
+      filetype: 'json',
       hostKey: activeHostKey,
       dbKey: activeDbKey,
       collKeys: [ collKey ],
@@ -81,7 +81,9 @@
   }
 
   function dumpCollection(collKey) {
-    dumpInfo = {
+    exportInfo = {
+      type: 'dump',
+      filetype: 'bson',
       hostKey: activeHostKey,
       dbKey: activeDbKey,
       collKeys: [ collKey ],
@@ -125,8 +127,7 @@
   {hosts}
 />
 
-<ExportInfo bind:info={exportInfo} {hosts} />
-<DumpInfo bind:info={dumpInfo} {hosts} />
+<Export bind:info={exportInfo} {hosts} />
 
 {#if newDb}
   <Modal bind:show={newDb}>

frontend/src/organisms/settings/index.svelte

@@ -1,4 +1,5 @@
 <script>
+  import DirectoryChooser from '../../components/directorychooser.svelte';
   import { input } from '../../actions';
   import Modal from '../../components/modal.svelte';
   import { applicationSettings as settings } from '../../stores';
@@ -24,6 +25,12 @@
       <input type="checkbox" id="autosubmitQuery" bind:checked={$settings.autosubmitQuery} />
       <label for="autosubmitQuery">Query items automatically after opening a collection</label>
     </span>
+
+    <label for="defaultExportDirectory">Default export directory</label>
+    <!-- svelte-ignore a11y-label-has-associated-control - input is in DirectoryChooser -->
+    <label class="field">
+      <DirectoryChooser id="defaultExportDirectory" bind:value={$settings.defaultExportDirectory} />
+    </label>
   </div>
 </Modal>
 

frontend/wailsjs/go/app/App.d.ts

@@ -33,6 +33,10 @@ export function OpenConnection(arg1:string):Promise<Array<string>>;
 
 export function OpenDatabase(arg1:string,arg2:string):Promise<Array<string>>;
 
+export function OpenDirectory(arg1:string,arg2:string):Promise<string>;
+
+export function PerformExport(arg1:string):Promise<boolean>;
+
 export function RemoveHost(arg1:string):Promise<void>;
 
 export function RemoveItemById(arg1:string,arg2:string,arg3:string,arg4:string):Promise<boolean>;

frontend/wailsjs/go/app/App.js

@@ -58,6 +58,14 @@ export function OpenDatabase(arg1, arg2) {
   return window['go']['app']['App']['OpenDatabase'](arg1, arg2);
 }
 
+export function OpenDirectory(arg1, arg2) {
+  return window['go']['app']['App']['OpenDirectory'](arg1, arg2);
+}
+
+export function PerformExport(arg1) {
+  return window['go']['app']['App']['PerformExport'](arg1);
+}
+
 export function RemoveHost(arg1) {
   return window['go']['app']['App']['RemoveHost'](arg1);
 }

frontend/wailsjs/go/models.ts

@@ -6,6 +6,8 @@ export namespace app {
 	    platform: string;
 	    hasMongoExport: boolean;
 	    hasMongoDump: boolean;
+	    homeDirectory: string;
+	    dataDirectory: string;
 	
 	    static createFrom(source: any = {}) {
 	        return new EnvironmentInfo(source);
@@ -18,12 +20,15 @@ export namespace app {
 	        this.platform = source["platform"];
 	        this.hasMongoExport = source["hasMongoExport"];
 	        this.hasMongoDump = source["hasMongoDump"];
+	        this.homeDirectory = source["homeDirectory"];
+	        this.dataDirectory = source["dataDirectory"];
 	    }
 	}
 	export class Settings {
 	    defaultLimit: number;
 	    defaultSort: string;
 	    autosubmitQuery: boolean;
+	    defaultExportDirectory: string;
 	
 	    static createFrom(source: any = {}) {
 	        return new Settings(source);
@@ -34,6 +39,7 @@ export namespace app {
 	        this.defaultLimit = source["defaultLimit"];
 	        this.defaultSort = source["defaultSort"];
 	        this.autosubmitQuery = source["autosubmitQuery"];
+	        this.defaultExportDirectory = source["defaultExportDirectory"];
 	    }
 	}
 	export class findResult {