save import/export jobs

packages/web/src/appobj/SavedFileAppObject.svelte

@@ -65,6 +65,14 @@
     currentConnection: true,
   };
 
+  const jobs: FileTypeHandler = {
+    icon: 'img export',
+    format: 'json',
+    tabComponent: 'ImportExportTab',
+    folder: 'jobs',
+    currentConnection: false,
+  };
+
   const perspectives: FileTypeHandler = {
     icon: 'img perspective',
     format: 'json',
@@ -82,6 +90,7 @@
     sqlite,
     diagrams,
     perspectives,
+    jobs,
   };
 
   export const extractKey = data => data.file;

packages/web/src/tabs/ImportExportTab.svelte

@@ -1,15 +1,25 @@
+<script lang="ts" context="module">
+  const getCurrentEditor = () => getActiveComponent('ImportExportTab');
+
+  registerFileCommands({
+    idPrefix: 'job',
+    category: 'Job',
+    getCurrentEditor,
+    folder: 'jobs',
+    format: 'json',
+    fileExtension: 'job',
+
+    // undoRedo: true,
+  });
+</script>
+
 <script lang="ts">
   import moment from 'moment';
   import { writable } from 'svelte/store';
   import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
-  import LargeButton from '../buttons/LargeButton.svelte';
   import LoadingInfo from '../elements/LoadingInfo.svelte';
-  import VerticalSplitter from '../elements/VerticalSplitter.svelte';
 
-  import FormProvider from '../forms/FormProvider.svelte';
   import FormTextField from '../forms/FormTextField.svelte';
-  import LargeFormButton from '../forms/LargeFormButton.svelte';
-  import FontIcon from '../icons/FontIcon.svelte';
   import createImpExpScript from '../impexp/createImpExpScript';
   import ImportExportConfigurator from '../impexp/ImportExportConfigurator.svelte';
   import PreviewDataGrid from '../impexp/PreviewDataGrid.svelte';
@@ -36,6 +46,10 @@
   import FormProviderCore from '../forms/FormProviderCore.svelte';
   import { changeTab } from '../utility/common';
   import _ from 'lodash';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
+  import { registerFileCommands } from '../commands/stdCommands';
+  import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
+  import ToolStripSaveButton from '../buttons/ToolStripSaveButton.svelte';
 
   let busy = false;
   let executeNumber = 0;
@@ -54,6 +68,8 @@
 
   let domConfigurator;
 
+  export const activator = createActivator('ImportExportTab', true);
+
   // const formValues = writable({
   //   sourceStorageType: 'database',
   //   targetStorageType: getDefaultFileFormat($extensions).storageType,
@@ -179,6 +195,10 @@
       runid: runnerId,
     });
   };
+
+  export function getData() {
+    return $editorState.value || '';
+  }
 </script>
 
 <ToolStripContainer>
@@ -218,19 +238,6 @@
         </WidgetColumnBar>
       </svelte:fragment>
     </HorizontalSplitter>
-
-    <!-- <svelte:fragment slot="footer">
-        <div class="flex m-2">
-          {#if busy}
-            <LargeButton icon="icon stop" on:click={handleCancel}>Stop</LargeButton>
-          {:else}
-            <LargeFormButton on:click={handleExecute} icon="icon run">Run</LargeFormButton>
-          {/if}
-          <LargeFormButton icon="img sql-file" on:click={handleGenerateScript}>Generate script</LargeFormButton>
-  
-          <LargeButton on:click={closeCurrentModal} icon="icon close">Close</LargeButton>
-        </div>
-      </svelte:fragment> -->
   </FormProviderCore>
   <svelte:fragment slot="toolstrip">
     {#if busy}
@@ -239,6 +246,7 @@
       <ToolStripButton on:click={handleExecute} icon="icon run">Run</ToolStripButton>
     {/if}
     <ToolStripButton icon="img sql-file" on:click={handleGenerateScript}>Generate script</ToolStripButton>
+    <ToolStripSaveButton idPrefix="job" />
   </svelte:fragment>
 </ToolStripContainer>
 

packages/web/src/widgets/SavedFilesList.svelte

@@ -20,6 +20,7 @@
   const queryFiles = useFiles({ folder: 'query' });
   const sqliteFiles = useFiles({ folder: 'sqlite' });
   const diagramFiles = useFiles({ folder: 'diagrams' });
+  const jobFiles = useFiles({ folder: 'jobs' });
   const perspectiveFiles = useFiles({ folder: 'perspectives' });
 
   $: files = [
@@ -31,11 +32,12 @@
     ...($sqliteFiles || []),
     ...($diagramFiles || []),
     ...($perspectiveFiles || []),
+    ...($jobFiles || []),
   ];
 
   function handleRefreshFiles() {
     apiCall('files/refresh', {
-      folders: ['sql', 'shell', 'markdown', 'charts', 'query', 'sqlite', 'diagrams', 'perspectives'],
+      folders: ['sql', 'shell', 'markdown', 'charts', 'query', 'sqlite', 'diagrams', 'perspectives', 'jobs'],
     });
   }
 </script>