save tab

packages/web/src/commands/CommandListener.svelte

@@ -31,6 +31,7 @@
 
     if (command) {
       e.preventDefault();
+      e.stopPropagation();
       command.onClick();
     }
   }

packages/web/src/modals/SaveFileModal.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import FormStyledButton from '../elements/FormStyledButton.svelte';
+
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import FormTextField from '../forms/FormTextField.svelte';
+
+  import axiosInstance from '../utility/axiosInstance';
+  import getElectron from '../utility/getElectron';
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let data;
+  export let name;
+  export let folder;
+  export let format;
+  export let fileExtension;
+  export let filePath;
+  export let onSave = undefined;
+
+  const electron = getElectron();
+
+  const handleSubmit = async e => {
+    const { name } = e.detail;
+    await axiosInstance.post('files/save', { folder, file: name, data, format });
+    closeCurrentModal();
+    if (onSave) {
+      onSave(name, {
+        savedFile: name,
+        savedFolder: folder,
+        savedFilePath: null,
+      });
+    }
+  };
+
+  const handleSaveToDisk = async filePath => {
+    const path = window.require('path');
+    const parsed = path.parse(filePath);
+    // if (!parsed.ext) filePath += `.${fileExtension}`;
+
+    await axiosInstance.post('files/save-as', { filePath, data, format });
+    closeCurrentModal();
+
+    if (onSave) {
+      onSave(parsed.name, {
+        savedFile: null,
+        savedFolder: null,
+        savedFilePath: filePath,
+      });
+    }
+  };
+</script>
+
+<FormProvider initialValues={{ name }}>
+  <ModalBase {...$$restProps}>
+    <svelte:fragment slot="header">Save file</svelte:fragment>
+    <FormTextField label="File name" name="name" focused />
+    <svelte:fragment slot="footer">
+      <FormSubmit value="Save" on:click={handleSubmit} />
+      {#if electron}
+        <FormStyledButton
+          type="button"
+          value="Save to disk"
+          on:click={() => {
+            const file = electron.remote.dialog.showSaveDialogSync(electron.remote.getCurrentWindow(), {
+              filters: [
+                { name: `${fileExtension.toUpperCase()} files`, extensions: [fileExtension] },
+                { name: `All files`, extensions: ['*'] },
+              ],
+              defaultPath: filePath || `${name}.${fileExtension}`,
+              properties: ['showOverwriteConfirmation'],
+            });
+            if (file) {
+              handleSaveToDisk(file);
+            }
+          }}
+        />
+      {/if}
+    </svelte:fragment>
+  </ModalBase>
+</FormProvider>

packages/web/src/tabs/QueryTab.svelte

@@ -46,6 +46,14 @@
     enabledStore: derived(currentQuery, query => query != null),
     onClick: () => get(currentQuery).formatCode(),
   });
+  registerSaveCommands({
+    idPrefix: 'query',
+    category: 'Query',
+    editorStore: currentQuery,
+    folder: 'sql',
+    format: 'text',
+    fileExtension: 'sql',
+  });
 </script>
 
 <script lang="ts">
@@ -69,6 +77,7 @@
   import memberStore from '../utility/memberStore';
   import useEffect from '../utility/useEffect';
   import ResultTabs from '../query/ResultTabs.svelte';
+  import saveTabFile, { registerSaveCommands, saveTabEnabledStore } from '../utility/saveTabFile';
 
   export let tabid;
   export let conid;
@@ -161,6 +170,10 @@
     return status;
   }
 
+  export function getData() {
+    return $editorState.value || '';
+  }
+
   export function toggleComment() {
     domEditor.getEditor().execCommand('togglecomment');
   }
@@ -192,7 +205,13 @@
   });
 
   function createMenu() {
-    return [{ command: 'query.execute' }, { command: 'query.toggleComment' }, { command: 'query.formatCode' }];
+    return [
+      { command: 'query.execute' },
+      { command: 'query.toggleComment' },
+      { command: 'query.formatCode' },
+      { command: 'query.save' },
+      { command: 'query.saveAs' },
+    ];
   }
 </script>
 

packages/web/src/utility/saveTabFile.ts

@@ -0,0 +1,75 @@
+import { derived, get } from 'svelte/store';
+import { showModal } from '../modals/modalTools';
+import { openedTabs } from '../stores';
+import axiosInstance from '../utility/axiosInstance';
+import { changeTab } from './common';
+import SaveFileModal from '../modals/SaveFileModal.svelte';
+import registerCommand from '../commands/registerCommand';
+
+export function saveTabEnabledStore(editorStore) {
+  return derived(editorStore, editor => editor != null);
+}
+
+export default function saveTabFile(editorStore, saveAs, folder, format, fileExtension) {
+  const editor: any = get(editorStore);
+  const tabs = get(openedTabs);
+  const tabid = editor.getTabId();
+  const data = editor.getData();
+  const { savedFile, savedFilePath } = tabs.find(x => x.tabid == tabid).props || {};
+
+  const handleSave = async () => {
+    if (savedFile) {
+      await axiosInstance.post('files/save', { folder, file: savedFile, data, format });
+    }
+    if (savedFilePath) {
+      await axiosInstance.post('files/save-as', { filePath: savedFilePath, data, format });
+    }
+  };
+
+  const onSave = (title, newProps) => {
+    changeTab(tabid, tab => ({
+      ...tab,
+      title,
+      props: {
+        ...tab.props,
+        savedFormat: format,
+        ...newProps,
+      },
+    }));
+  };
+
+  if ((savedFile || savedFilePath) && !saveAs) {
+    handleSave();
+  } else {
+    showModal(SaveFileModal, {
+      data,
+      folder,
+      format,
+      fileExtension,
+      name: savedFile || 'newFile',
+      filePath: savedFilePath,
+      onSave,
+    });
+  }
+}
+
+export function registerSaveCommands({ idPrefix, category, editorStore, folder, format, fileExtension }) {
+  registerCommand({
+    id: idPrefix + '.save',
+    category,
+    name: 'Save',
+    keyText: 'Ctrl+S',
+    icon: 'icon save',
+    toolbar: true,
+    enabledStore: saveTabEnabledStore(editorStore),
+    onClick: () => saveTabFile(editorStore, false, folder, format, fileExtension),
+  });
+  registerCommand({
+    id: idPrefix + '.saveAs',
+    category,
+    name: 'Save As',
+    keyText: 'Ctrl+Shift+S',
+    enabledStore: saveTabEnabledStore(editorStore),
+    onClick: () => saveTabFile(editorStore, true, folder, format, fileExtension),
+  });
+}