preview data grid, fix multiple D & D to electron

packages/web/src/impexp/ImportExportConfigurator.svelte

@@ -43,31 +43,49 @@
   import { onMount } from 'svelte';
   import { writable } from 'svelte/store';
   import TableControl from '../elements/TableControl.svelte';
+  import CheckboxField from '../forms/CheckboxField.svelte';
   import { getFormContext } from '../forms/FormProviderCore.svelte';
+  import TextField from '../forms/TextField.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import { findFileFormat } from '../plugins/fileformats';
   import { extensions } from '../stores';
   import getAsArray from '../utility/getAsArray';
   import { useConnectionInfo, useDatabaseInfo } from '../utility/metadataLoaders';
   import { setUploadListener } from '../utility/uploadFiles';
-  import PreviewCheckBox from './PreviewCheckBox.svelte';
+  import { createPreviewReader, getTargetName } from './createImpExpScript';
   import SourceAction from './SourceAction.svelte';
   import SourceName from './SourceName.svelte';
 
   import SourceTargetConfig from './SourceTargetConfig.svelte';
-  import TargetName from './TargetName.svelte';
 
   export let uploadedFile = undefined;
   export let openedFile = undefined;
+  export let previewReaderStore;
 
-  const { values } = getFormContext();
+  const { values, setFieldValue } = getFormContext();
 
   $: targetDbinfo = useDatabaseInfo({ conid: $values.targetConnectionId, database: $values.targetDatabaseName });
   $: sourceConnectionInfo = useConnectionInfo({ conid: $values.sourceConnectionId });
+  $: sourceEngine = $sourceConnectionInfo?.engine;
   $: sourceList = $values.sourceList;
 
   const previewSource = writable(null);
 
+  $: supportsPreview =
+    !!findFileFormat($extensions, $values.sourceStorageType) || $values.sourceStorageType == 'archive';
+
+  $: handleChangePreviewSource($previewSource);
+
+  const handleChangePreviewSource = async source => {
+    console.log('SOURCE', source);
+    if (source && supportsPreview) {
+      const reader = await createPreviewReader($extensions, $values, source);
+      if (previewReaderStore) previewReaderStore.set(reader);
+    } else {
+      if (previewReaderStore) previewReaderStore.set(null);
+    }
+  };
+
   const handleUpload = file => {
     addFilesToSourceList(
       $extensions,
@@ -125,6 +143,7 @@
       archiveFolderField="sourceArchiveFolder"
       schemaNameField="sourceSchemaName"
       tablesField="sourceList"
+      engine={sourceEngine}
       setPreviewSource={previewSource.set}
     />
     <div class="arrow">
@@ -161,17 +180,39 @@
         {
           fieldName: 'target',
           header: 'Target',
-          component: TargetName,
-          getProps: row => ({ name: row }),
+          slot: 1,
         },
         {
           fieldName: 'preview',
           header: 'Preview',
-          component: PreviewCheckBox,
-          getProps: row => ({ name: row, previewSource }),
+          slot: 0,
         },
       ]}
-    />
+    >
+      <svelte:fragment slot="0" let:row>
+        {#if supportsPreview}
+          <CheckboxField
+            checked={$previewSource == row}
+            on:change={e => {
+              // @ts-ignore
+              if (e.target.checked) $previewSource = row;
+              else $previewSource = null;
+            }}
+          />
+        {/if}
+      </svelte:fragment>
+      <svelte:fragment slot="1" let:row>
+        <TextField
+          value={getTargetName($extensions, row, $values)}
+          on:input={e =>
+            setFieldValue(
+              `targetName_${row}`,
+              // @ts-ignore
+              e.target.value
+            )}
+        />
+      </svelte:fragment>
+    </TableControl>
   </div>
 </div>
 

packages/web/src/impexp/PreviewCheckBox.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-  import CheckboxField from '../forms/CheckboxField.svelte';
-
-  import { getFormContext } from '../forms/FormProviderCore.svelte';
-
-  import { findFileFormat } from '../plugins/fileformats';
-  import { extensions } from '../stores';
-
-  const { values } = getFormContext();
-
-  export let name;
-  export let previewSource;
-
-  $: supportsPreview =
-    !!findFileFormat($extensions, $values.sourceStorageType) || $values.sourceStorageType == 'archive';
-</script>
-
-{#if supportsPreview}
-  <CheckboxField
-    checked={$previewSource == name}
-    onChange={e => {
-      if (e.target.checked) $previewSource = name;
-      else $previewSource = null;
-    }}
-  />
-{/if}

packages/web/src/impexp/PreviewDataGrid.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { createGridCache, createGridConfig, FreeTableGridDisplay } from 'dbgate-datalib';
+  import { writable } from 'svelte/store';
+
+  import DataGridCore from '../datagrid/DataGridCore.svelte';
+  import RowsArrayGrider from '../datagrid/RowsArrayGrider';
+  import ErrorInfo from '../elements/ErrorInfo.svelte';
+  import LoadingInfo from '../elements/LoadingInfo.svelte';
+  import axiosInstance from '../utility/axiosInstance';
+
+  export let reader;
+
+  let isLoading = false;
+  let model = null;
+  let grider = null;
+  let errorMessage = null;
+
+  const config = writable(createGridConfig());
+  const cache = writable(createGridCache());
+
+  const handleLoadInitialData = async sourceReader => {
+    try {
+      if (!sourceReader) {
+        model = null;
+        grider = null;
+        return;
+      }
+      errorMessage = null;
+      isLoading = true;
+      const resp = await axiosInstance.post('runners/load-reader', sourceReader);
+      // @ts-ignore
+      model = resp.data;
+      grider = new RowsArrayGrider(resp.data.rows);
+      isLoading = false;
+    } catch (err) {
+      isLoading = false;
+      errorMessage = (err && err.response && err.response.data && err.response.data.error) || 'Loading failed';
+      console.error(err.response);
+    }
+  };
+
+  $: handleLoadInitialData(reader);
+
+  $: display = new FreeTableGridDisplay(model, $config, config.update, $cache, cache.update);
+</script>
+
+{#if isLoading}
+  <LoadingInfo wrapper message="Loading data" />
+{:else if errorMessage}
+  <ErrorInfo message={errorMessage} />
+{:else if grider}
+  <DataGridCore {...$$props} {grider} {display} />
+{/if}

packages/web/src/impexp/TargetName.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import { getFormContext } from '../forms/FormProviderCore.svelte';
-
-  import TextField from '../forms/TextField.svelte';
-  import { extensions } from '../stores';
-  import { getTargetName } from './createImpExpScript';
-
-  const { values, setFieldValue } = getFormContext();
-
-  export let name;
-</script>
-
-<TextField
-  value={getTargetName($extensions, name, $values)}
-  onChange={e => setFieldValue(`targetName_${name}`, e.target.value)}
-/>