import export tab working

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -764,31 +764,31 @@
             },
             {
               onClick: () => {
-                // openNewTab(
+                openNewTab(
-                //   {
+                  {
-                //     tabComponent: 'ImportExportTab',
+                    tabComponent: 'ImportExportTab',
-                //     title: 'Import/Export',
+                    title: 'Import/Export',
-                //     icon: 'img export',
+                    icon: 'img export',
-                //   },
+                  },
-                //   {
+                  {
-                //     editor: {
+                    editor: {
-                //       sourceStorageType: 'database',
-                //       sourceConnectionId: data.conid,
-                //       sourceDatabaseName: data.database,
-                //       sourceSchemaName: data.schemaName,
-                //       sourceList: [data.pureName],
-                //     },
-                //   }
-                // );
-                showModal(ImportExportModal, {
-                  initialValues: {
                       sourceStorageType: 'database',
                       sourceConnectionId: data.conid,
                       sourceDatabaseName: data.database,
                       sourceSchemaName: data.schemaName,
                       sourceList: [data.pureName],
                     },
-                });
+                  }
+                );
+                // showModal(ImportExportModal, {
+                //   initialValues: {
+                //     sourceStorageType: 'database',
+                //     sourceConnectionId: data.conid,
+                //     sourceDatabaseName: data.database,
+                //     sourceSchemaName: data.schemaName,
+                //     sourceList: [data.pureName],
+                //   },
+                // });
               },
             }
           );

packages/web/src/tabs/ImportExportTab.svelte

@@ -24,6 +24,9 @@
   import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
   import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
   import useEditorData from '../query/useEditorData';
+  import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
+  import ToolStripButton from '../buttons/ToolStripButton.svelte';
+  import FormProviderCore from '../forms/FormProviderCore.svelte';
 
   let busy = false;
   let executeNumber = 0;
@@ -39,10 +42,24 @@
 
   const refreshArchiveFolderRef = createRef(null);
 
+  const formValues = writable({
+    sourceStorageType: 'database',
+    targetStorageType: getDefaultFileFormat($extensions).storageType,
+    targetArchiveFolder: $currentArchive,
+    sourceArchiveFolder: $currentArchive,
+    ...detectCurrentTarget(),
+    ...initialValues,
+  });
+
   const { editorState, editorValue, setEditorData } = useEditorData({
     tabid,
+    onInitialData: value => {
+      $formValues = value;
+    },
   });
 
+  $: setEditorData($formValues);
+
   function detectCurrentTarget() {
     if (!importToCurrentTarget) return {};
 
@@ -94,7 +111,8 @@
   };
 
   const handleGenerateScript = async e => {
-    const code = await createImpExpScript($extensions, e.detail, undefined, true);
+    const values = $formValues;
+    const code = await createImpExpScript($extensions, values, undefined, true);
     openNewTab(
       {
         title: 'Shell #',
@@ -107,7 +125,7 @@
 
   const handleExecute = async e => {
     if (busy) return;
-    const values = e.detail;
+    const values = $formValues;
     busy = true;
     const script = await createImpExpScript($extensions, values);
     executeNumber += 1;
@@ -130,16 +148,8 @@
   };
 </script>
 
-<FormProvider
+<ToolStripContainer>
-  initialValues={{
+  <FormProviderCore values={formValues}>
-    sourceStorageType: 'database',
-    targetStorageType: getDefaultFileFormat($extensions).storageType,
-    targetArchiveFolder: $currentArchive,
-    sourceArchiveFolder: $currentArchive,
-    ...detectCurrentTarget(),
-    ...initialValues,
-  }}
->
     <HorizontalSplitter initialValue="70%">
       <div class="content" slot="1">
         <ImportExportConfigurator {uploadedFile} {openedFile} {previewReaderStore} />
@@ -184,7 +194,16 @@
           <LargeButton on:click={closeCurrentModal} icon="icon close">Close</LargeButton>
         </div>
       </svelte:fragment> -->
-</FormProvider>
+  </FormProviderCore>
+  <svelte:fragment slot="toolstrip">
+    {#if busy}
+      <ToolStripButton icon="icon stop" on:click={handleCancel}>Stop</ToolStripButton>
+    {:else}
+      <ToolStripButton on:click={handleExecute} icon="icon run">Run</ToolStripButton>
+    {/if}
+    <ToolStripButton icon="img sql-file" on:click={handleGenerateScript}>Generate script</ToolStripButton>
+  </svelte:fragment>
+</ToolStripContainer>
 
 <style>
   .content {
@@ -193,5 +212,6 @@
     flex-direction: column;
     overflow-y: auto;
     overflow-x: hidden;
+    background-color: var(--theme-bg-0);
   }
 </style>