save split button

packages/web/src/buttons/ToolStripSaveButton.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import getElectron from '../utility/getElectron';
+
+  import ToolStripCommandButton from './ToolStripCommandButton.svelte';
+  import ToolStripSplitDropDownButton from './ToolStripSplitDropDownButton.svelte';
+
+  export let idPrefix;
+
+  const electron = getElectron();
+</script>
+
+<ToolStripCommandButton
+  command={`${idPrefix}.save`}
+  component={ToolStripSplitDropDownButton}
+  menu={[
+    { command: `${idPrefix}.save` },
+    { command: `${idPrefix}.saveAs` },
+    electron && { command: `${idPrefix}.saveToDisk` },
+  ]}
+/>

packages/web/src/commands/stdCommands.ts

@@ -103,7 +103,7 @@ registerCommand({
   category: 'New',
   icon: 'img shell',
   name: 'JavaScript Shell',
-  menuName:' New JavaScript shell',
+  menuName: ' New JavaScript shell',
   onClick: () => {
     openNewTab({
       title: 'Shell #',
@@ -480,7 +480,7 @@ export function registerFileCommands({
       toolbar: true,
       isRelatedToTab: true,
       testEnabled: () => getCurrentEditor() != null,
-      onClick: () => saveTabFile(getCurrentEditor(), false, folder, format, fileExtension),
+      onClick: () => saveTabFile(getCurrentEditor(), 'save', folder, format, fileExtension),
     });
     registerCommand({
       id: idPrefix + '.saveAs',
@@ -488,7 +488,14 @@ export function registerFileCommands({
       category,
       name: 'Save As',
       testEnabled: () => getCurrentEditor() != null,
-      onClick: () => saveTabFile(getCurrentEditor(), true, folder, format, fileExtension),
+      onClick: () => saveTabFile(getCurrentEditor(), 'save-as', folder, format, fileExtension),
+    });
+    registerCommand({
+      id: idPrefix + '.saveToDisk',
+      category,
+      name: 'Save to disk',
+      testEnabled: () => getCurrentEditor() != null && getElectron() != null,
+      onClick: () => saveTabFile(getCurrentEditor(), 'save-to-disk', folder, format, fileExtension),
     });
   }
 

packages/web/src/tabs/DiagramTab.svelte

@@ -26,6 +26,7 @@
   import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
   import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
   import invalidateCommands from '../commands/invalidateCommands';
+  import ToolStripSaveButton from '../buttons/ToolStripSaveButton.svelte';
 
   export let tabid;
   export let conid;
@@ -102,7 +103,7 @@
   <DiagramDesigner value={$modelState.value || {}} {conid} {database} onChange={handleChange} menu={createMenu} />
   <svelte:fragment slot="toolstrip">
     <ToolStripCommandButton command="designer.arrange" />
-    <ToolStripCommandButton command="diagram.save" />
+    <ToolStripSaveButton idPrefix="diagram" />
     <ToolStripCommandButton command="diagram.export" />
     <ToolStripCommandButton command="diagram.undo" />
     <ToolStripCommandButton command="diagram.redo" />

packages/web/src/tabs/QueryDesignTab.svelte

@@ -53,6 +53,7 @@
   import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
   import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
   import ToolStripExportButton, { createQuickExportHandlerRef } from '../buttons/ToolStripExportButton.svelte';
+  import ToolStripSaveButton from '../buttons/ToolStripSaveButton.svelte';
 
   export let tabid;
   export let conid;
@@ -293,7 +294,7 @@
     <ToolStripCommandButton command="designer.execute" />
     <ToolStripCommandButton command="designer.kill" />
     <ToolStripCommandButton command="designer.openSql" />
-    <ToolStripCommandButton command="designer.save" />
+    <ToolStripSaveButton idPrefix="designer" />
     <ToolStripExportButton command="jslTableGrid.export" {quickExportHandlerRef} label="Export result" />
   </svelte:fragment>
 </ToolStripContainer>

packages/web/src/tabs/QueryTab.svelte

@@ -73,6 +73,7 @@
   import ToolStripExportButton, { createQuickExportHandlerRef } from '../buttons/ToolStripExportButton.svelte';
   import ToolStripSplitButton from '../buttons/ToolStripSplitButton.svelte';
   import ToolStripSplitDropDownButton from '../buttons/ToolStripSplitDropDownButton.svelte';
+import ToolStripSaveButton from '../buttons/ToolStripSaveButton.svelte';
 
   export let tabid;
   export let conid;
@@ -331,9 +332,8 @@
       component={ToolStripSplitDropDownButton}
       menu={[{ command: 'query.execute' }, { command: 'query.executeCurrent' }]}
     />
-    <!-- <ToolStripCommandButton command="query.execute" /> -->
     <ToolStripCommandButton command="query.kill" />
-    <ToolStripCommandButton command="query.save" />
+    <ToolStripSaveButton idPrefix="query" />
     <ToolStripCommandButton command="query.formatCode" />
     {#if resultCount == 1}
       <ToolStripExportButton command="jslTableGrid.export" {quickExportHandlerRef} label="Export result" />

packages/web/src/tabs/ShellTab.svelte

@@ -39,6 +39,7 @@
   import { getContext } from 'svelte';
 import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
 import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
+import ToolStripSaveButton from '../buttons/ToolStripSaveButton.svelte';
 
   import invalidateCommands from '../commands/invalidateCommands';
   import registerCommand from '../commands/registerCommand';
@@ -235,7 +236,7 @@ import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
   <svelte:fragment slot="toolstrip">
     <ToolStripCommandButton command="shell.execute" />
     <ToolStripCommandButton command="shell.kill" />
-    <ToolStripCommandButton command="shell.save" />
+    <ToolStripSaveButton idPrefix="shell" />
     <ToolStripCommandButton command="shell.copyNodeScript" />
   </svelte:fragment>
 </ToolStripContainer>

packages/web/src/utility/saveTabFile.ts

@@ -5,12 +5,13 @@ import { changeTab } from './common';
 import SaveFileModal from '../modals/SaveFileModal.svelte';
 import registerCommand from '../commands/registerCommand';
 import { apiCall } from './api';
+import getElectron from './getElectron';
 
 // export function saveTabEnabledStore(editorStore) {
 //   return derived(editorStore, editor => editor != null);
 // }
 
-export default function saveTabFile(editor, saveAs, folder, format, fileExtension) {
+export default async function saveTabFile(editor, saveMode, folder, format, fileExtension) {
   const tabs = get(openedTabs);
   const tabid = editor.activator.tabid;
   const data = editor.getData();
@@ -37,7 +38,29 @@ export default function saveTabFile(editor, saveAs, folder, format, fileExtensio
     }));
   };
 
-  if ((savedFile || savedFilePath) && !saveAs) {
+  if (saveMode == 'save-to-disk') {
+    const electron = getElectron();
+    const file = await electron.showSaveDialog({
+      filters: [
+        { name: `${fileExtension.toUpperCase()} files`, extensions: [fileExtension] },
+        { name: `All files`, extensions: ['*'] },
+      ],
+      defaultPath: savedFilePath || `file.${fileExtension}`,
+      properties: ['showOverwriteConfirmation'],
+    });
+    if (file) {
+      await apiCall('files/save-as', { filePath: file, data, format });
+
+      const path = window.require('path');
+      const parsed = path.parse(file);
+
+      onSave(parsed.name, {
+        savedFile: null,
+        savedFolder: null,
+        savedFilePath: file,
+      });
+    }
+  } else if ((savedFile || savedFilePath) && saveMode == 'save') {
     handleSave();
   } else {
     showModal(SaveFileModal, {