export sql dump - can export to files

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -87,7 +87,10 @@
     };
 
     const handleSqlDump = () => {
-      exportSqlDump(connection, name);
+      showModal(ExportDatabaseDumpModal, {
+        connection: { ...connection, database: name },
+      });
+      // exportSqlDump(connection, name);
     };
 
     const handleSqlRestore = () => {
@@ -212,8 +215,8 @@
       { divider: true },
       isSqlOrDoc && !connection.isReadOnly && { onClick: handleImport, text: 'Import wizard' },
       isSqlOrDoc && { onClick: handleExport, text: 'Export wizard' },
-      driver?.supportsDatabaseDump && { onClick: handleSqlDump, text: 'Backup/export SQL dump' },
       driver?.databaseEngineTypes?.includes('sql') && { onClick: handleSqlRestore, text: 'Restore/import SQL dump' },
+      driver?.supportsDatabaseDump && { onClick: handleSqlDump, text: 'Backup/export SQL dump' },
       { divider: true },
       isSqlOrDoc && { onClick: handleShowDiagram, text: 'Show diagram' },
       isSqlOrDoc && { onClick: handleSqlGenerator, text: 'SQL Generator' },
@@ -282,6 +285,7 @@
   import newQuery from '../query/newQuery';
   import { exportSqlDump } from '../utility/exportFileTools';
   import ImportDatabaseDumpModal from '../modals/ImportDatabaseDumpModal.svelte';
+import ExportDatabaseDumpModal from '../modals/ExportDatabaseDumpModal.svelte';
 
   export let data;
   export let passProps;

packages/web/src/appobj/SavedFileAppObject.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" context="module">
+  import { filterName } from 'dbgate-tools';
+
   interface FileTypeHandler {
     icon: string;
     format: string;
@@ -74,6 +76,7 @@
   };
 
   export const extractKey = data => data.file;
+  export const createMatcher = ({ file }) => filter => filterName(filter, file);
 </script>
 
 <script lang="ts">

packages/web/src/buttons/FormStyledButtonLikeLabel.svelte

@@ -9,12 +9,14 @@
 <style>
   label {
     border: 1px solid var(--theme-bg-button-inv-2);
-    padding: 5px;
+    padding: 4px;
     margin: 2px;
     width: 100px;
     background-color: var(--theme-bg-button-inv);
     color: var(--theme-font-inv-1);
     border-radius: 2px;
+    position: relative;
+    top: 3px;
   }
 
   label:hover:not(.disabled) {

packages/web/src/modals/ExportDatabaseDumpModal.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import { onMount, tick } from 'svelte';
+  import { format } from 'date-fns';
+
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import UploadButton from '../buttons/UploadButton.svelte';
+
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import { exportSqlDump, importSqlDump } from '../utility/exportFileTools';
+  import getElectron from '../utility/getElectron';
+  import { setUploadListener } from '../utility/uploadFiles';
+  import ChangeDownloadUrlModal from './ChangeDownloadUrlModal.svelte';
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal, showModal } from './modalTools';
+  import InputTextModal from './InputTextModal.svelte';
+  import { apiCall } from '../utility/api';
+
+  export let connection;
+
+  let outputLabel;
+  let outputFile;
+  let pureFileName = null;
+
+  function getDefaultFileName() {
+    return `${connection.database}-${format(new Date(), 'yyyy-MM-dd-hh-mm-ss')}.sql`;
+  }
+
+  onMount(async () => {
+    const file = getDefaultFileName();
+    setFilesFolderResult(file);
+  });
+
+  const setFilesFolderResult = async file => {
+    const resp = await apiCall('files/get-file-real-path', { folder: 'sql', file });
+    if (!resp) return;
+    outputLabel = `SQL Files folder: ${file}`;
+    outputFile = resp;
+    pureFileName = null;
+  };
+
+  const handleSubmit = async values => {
+    const { value } = values;
+    closeCurrentModal();
+    exportSqlDump(outputFile, connection, connection.database, pureFileName);
+  };
+
+  const electron = getElectron();
+
+  const handleFilesFolder = () => {
+    showModal(InputTextModal, {
+      value: getDefaultFileName(),
+      label: 'New file name',
+      header: 'Backup/dump database',
+
+      onConfirm: async file => {
+        await tick();
+        setFilesFolderResult(file);
+      },
+    });
+  };
+
+  const handleBrowse = async () => {
+    const electron = getElectron();
+    const files = await electron.showSaveDialog({
+      properties: ['showOverwriteConfirmation'],
+      filters: [
+        { name: 'SQL Files', extensions: ['*.sql'] },
+        { name: 'All Files', extensions: ['*'] },
+      ],
+    });
+    if (files && files[0]) {
+      const path = window.require('path');
+      outputFile = files[0];
+      outputLabel = path.parse(outputFile).name;
+      pureFileName = null;
+    }
+  };
+
+  const handleDownload = async () => {
+    const resp = await apiCall('files/generate-uploads-file', { extension: 'sql' });
+    outputFile = resp.filePath;
+    outputLabel = 'Download';
+    pureFileName = resp.fileName;
+  };
+</script>
+
+<FormProvider>
+  <ModalBase {...$$restProps}>
+    <svelte:fragment slot="header">Export database dump</svelte:fragment>
+
+    <div class="m-3">Target: {outputLabel}</div>
+
+    <div class="flex">
+      {#if electron}
+        <FormStyledButton type="button" value="Browse" on:click={handleBrowse} />
+      {:else}
+        <FormStyledButton type="button" value="Download" on:click={handleDownload} />
+      {/if}
+      <FormStyledButton type="button" value="Files folder" on:click={handleFilesFolder} />
+    </div>
+
+    <svelte:fragment slot="footer">
+      <FormSubmit value="Run export" on:click={e => handleSubmit(e.detail)} disabled={!outputFile} />
+      <FormStyledButton type="button" value="Cancel" on:click={closeCurrentModal} />
+    </svelte:fragment>
+  </ModalBase>
+</FormProvider>

packages/web/src/modals/ImportDatabaseDumpModal.svelte

@@ -79,7 +79,7 @@
         <UploadButton />
       {/if}
 
-      <FormStyledButton value="Add web URL" on:click={handleAddUrl} />
+      <FormStyledButton value="Import from web URL" on:click={handleAddUrl} />
     </div>
 
     <svelte:fragment slot="footer">

packages/web/src/modals/RunScriptModal.svelte

@@ -12,7 +12,10 @@
   export let script;
   export let header;
 
-  let isRunning;
+  export let openResultLabel;
+  export let onOpenResult;
+
+  let isRunning = true;
   let runid;
   let isCanceled;
 
@@ -68,6 +71,16 @@
       {:else}
         <FormStyledButton value="Close" on:click={handleClose} />
       {/if}
+
+      {#if onOpenResult && !isRunning}
+        <FormStyledButton
+          value={openResultLabel || 'Open result'}
+          on:click={() => {
+            closeCurrentModal();
+            onOpenResult();
+          }}
+        />
+      {/if}
     </svelte:fragment>
   </ModalBase>
 </FormProvider>

packages/web/src/utility/exportFileTools.ts

@@ -26,6 +26,28 @@ export async function importSqlDump(inputFile, connection) {
   // });
 }
 
+export async function exportSqlDump(outputFile, connection, databaseName, pureFileName) {
+  const script = getCurrentConfig().allowShellScripting ? new ScriptWriter() : new ScriptWriterJson();
+
+  script.dumpDatabase({
+    connection,
+    databaseName,
+    outputFile,
+  });
+
+  showModal(RunScriptModal, {
+    script: script.getScript(),
+    header: 'Exporting database',
+    onOpenResult:
+      pureFileName && !getElectron()
+        ? () => {
+            window.open(`${resolveApi()}/uploads/get?file=${pureFileName}`, '_blank');
+          }
+        : null,
+    openResultLabel: 'Download SQL file',
+  });
+}
+
 async function runImportExportScript({ script, runningMessage, canceledMessage, finishedMessage, afterFinish = null }) {
   const electron = getElectron();
 
@@ -126,25 +148,25 @@ export async function exportQuickExportFile(dataName, reader, format, columnMap
   );
 }
 
-export async function exportSqlDump(connection, databaseName) {
-  await saveExportedFile(
-    [{ name: 'SQL files', extensions: ['sql'] }],
-    `${databaseName}.sql`,
-    'sql',
-    `${databaseName}-dump`,
-    filePath => {
-      const script = getCurrentConfig().allowShellScripting ? new ScriptWriter() : new ScriptWriterJson();
+// export async function exportSqlDump(connection, databaseName) {
+//   await saveExportedFile(
+//     [{ name: 'SQL files', extensions: ['sql'] }],
+//     `${databaseName}.sql`,
+//     'sql',
+//     `${databaseName}-dump`,
+//     filePath => {
+//       const script = getCurrentConfig().allowShellScripting ? new ScriptWriter() : new ScriptWriterJson();
 
-      script.dumpDatabase({
-        connection,
-        databaseName,
-        outputFile: filePath,
-      });
+//       script.dumpDatabase({
+//         connection,
+//         databaseName,
+//         outputFile: filePath,
+//       });
 
-      return script.getScript();
-    }
-  );
-}
+//       return script.getScript();
+//     }
+//   );
+// }
 
 export async function saveFileToDisk(
   filePathFunc,

packages/web/src/widgets/SavedFilesList.svelte

@@ -2,9 +2,17 @@
   import _ from 'lodash';
   import AppObjectList from '../appobj/AppObjectList.svelte';
   import * as savedFileAppObject from '../appobj/SavedFileAppObject.svelte';
+  import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
+  import InlineButton from '../buttons/InlineButton.svelte';
+  import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { apiCall } from '../utility/api';
   import { useFiles } from '../utility/metadataLoaders';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
 
+  let filter = '';
+
   const sqlFiles = useFiles({ folder: 'sql' });
   const shellFiles = useFiles({ folder: 'shell' });
   const markdownFiles = useFiles({ folder: 'markdown' });
@@ -22,8 +30,20 @@
     ...($sqliteFiles || []),
     ...($diagramFiles || []),
   ];
+
+  function handleRefreshFiles() {
+    apiCall('files/refresh', { folders: ['sql', 'shell', 'markdown', 'charts', 'query', 'sqlite', 'diagrams'] });
+  }
 </script>
 
 <WidgetsInnerContainer>
-  <AppObjectList list={files} module={savedFileAppObject} groupFunc={data => _.startCase(data.folder)} />
+  <SearchBoxWrapper>
+    <SearchInput placeholder="Search saved files" bind:value={filter} />
+    <CloseSearchButton bind:filter />
+    <InlineButton on:click={handleRefreshFiles} title="Refresh files">
+      <FontIcon icon="icon refresh" />
+    </InlineButton>
+  </SearchBoxWrapper>
+
+  <AppObjectList list={files} module={savedFileAppObject} groupFunc={data => _.startCase(data.folder)} {filter} />
 </WidgetsInnerContainer>