progress indicator in exports

packages/web/src/elements/TableControl.svelte

@@ -20,7 +20,7 @@
   import { createEventDispatcher } from 'svelte';
   import FontIcon from '../icons/FontIcon.svelte';
 
-  export let columns: TableControlColumn[];
+  export let columns: (TableControlColumn | false)[];
   export let rows;
   export let focusOnCreate = false;
   export let selectable = false;

packages/web/src/icons/FontIcon.svelte

@@ -149,6 +149,7 @@
     'icon download': 'mdi mdi-download',
     'icon text': 'mdi mdi-text',
     'icon ai': 'mdi mdi-head-lightbulb',
+    'icon wait': 'mdi mdi-timer-sand',
 
     'icon run': 'mdi mdi-play',
     'icon chevron-down': 'mdi mdi-chevron-down',

packages/web/src/impexp/ImportExportConfigurator.svelte

@@ -104,6 +104,7 @@
   $: sourceList = $values.sourceList;
 
   let targetEditKey = 0;
+  export let progressHolder = null;
 
   const previewSource = writable(null);
 
@@ -231,11 +232,16 @@
             header: 'Target',
             slot: 1,
           },
-          {
+          supportsPreview && {
             fieldName: 'preview',
             header: 'Preview',
             slot: 0,
           },
+          !!progressHolder && {
+            fieldName: 'status',
+            header: 'Status',
+            slot: 3,
+          },
           {
             fieldName: 'columns',
             header: 'Columns',
@@ -296,6 +302,17 @@
             >{columnCount > 0 ? `(${columnCount} columns)` : '(copy from source)'}
           </Link>
         </svelte:fragment>
+        <svelte:fragment slot="3" let:row>
+          {#if progressHolder[row]?.status == 'running'}
+            <FontIcon icon="icon loading" /> Running
+          {:else if progressHolder[row]?.status == 'error'}
+            <FontIcon icon="img error" /> Error
+          {:else if progressHolder[row]?.status == 'done'}
+            <FontIcon icon="img ok" /> Done
+          {:else}
+            <FontIcon icon="icon wait" /> Queued
+          {/if}
+        </svelte:fragment>
       </TableControl>
     {/key}
   </div>

packages/web/src/impexp/createImpExpScript.ts

@@ -233,7 +233,7 @@ export default async function createImpExpScript(extensions, values, forceScript
       script.assignValue(colmapVar, colmap);
     }
 
-    script.copyStream(sourceVar, targetVar, colmapVar);
+    script.copyStream(sourceVar, targetVar, colmapVar, sourceName);
     script.endLine();
   }
   return script.getScript(values.schedule);

packages/web/src/tabs/ImportExportTab.svelte

@@ -65,6 +65,7 @@
   export let savedFile;
   export let savedFilePath;
 
+  let progressHolder = null;
   const refreshArchiveFolderRef = createRef(null);
 
   const formValues = writable({});
@@ -179,6 +180,7 @@
 
   const handleExecute = async e => {
     if (busy) return;
+    progressHolder = {};
     const values = $formValues as any;
     busy = true;
     const script = await createImpExpScript($extensions, values);
@@ -228,6 +230,29 @@
       title: `${getSourceTargetTitle('source', values)}->${getSourceTargetTitle('target', values)}(${values.sourceList?.length || 0})`,
     }));
   }
+
+  const handleProgress = progress => {
+    progressHolder = {
+      ...progressHolder,
+      [progress.progressName]: {
+        ...progressHolder[progress.progressName],
+        ...progress,
+      },
+    };
+  };
+
+  $: progressEffect = useEffect(() => {
+    if (runnerId) {
+      const eventName = `runner-progress-${runnerId}`;
+      apiOn(eventName, handleProgress);
+      return () => {
+        apiOff(eventName, handleProgress);
+      };
+    }
+    return () => {};
+  });
+
+  $progressEffect;
 </script>
 
 <ToolStripContainer>
@@ -237,6 +262,7 @@
         <ImportExportConfigurator
           bind:this={domConfigurator}
           {previewReaderStore}
+          {progressHolder}
           isTabActive={tabid == $activeTabId}
         />