using table control with slots

packages/web/src/elements/TabControl.svelte

@@ -33,14 +33,17 @@
     {#each tabs as tab, index}
       <div class="container" class:isInline class:tabVisible={index == value}>
         <svelte:component this={tab.component} {...tab.props} />
-        {#if tab.slot == 0}<slot name="0" />{/if}
+        {#if tab.slot != null}
-        {#if tab.slot == 1}<slot name="1" />{/if}
+          {#if tab.slot == 0}<slot name="0" />
-        {#if tab.slot == 2}<slot name="2" />{/if}
+          {:else if tab.slot == 1}<slot name="1" />
-        {#if tab.slot == 3}<slot name="3" />{/if}
+          {:else if tab.slot == 2}<slot name="2" />
-        {#if tab.slot == 4}<slot name="4" />{/if}
+          {:else if tab.slot == 3}<slot name="3" />
-        {#if tab.slot == 5}<slot name="5" />{/if}
+          {:else if tab.slot == 4}<slot name="4" />
-        {#if tab.slot == 6}<slot name="6" />{/if}
+          {:else if tab.slot == 5}<slot name="5" />
-        {#if tab.slot == 7}<slot name="7" />{/if}
+          {:else if tab.slot == 6}<slot name="6" />
+          {:else if tab.slot == 7}<slot name="7" />
+          {/if}
+        {/if}
       </div>
     {/each}
   </div>

packages/web/src/elements/TableControl.svelte

@@ -10,6 +10,7 @@
     component?: any;
     getProps?: any;
     formatter?: any;
+    slot?: number;
   }
 
   export let columns: TableColumn[];
@@ -52,6 +53,16 @@
               <svelte:component this={col.component} {...col.getProps(row)} />
             {:else if col.formatter}
               {col.formatter(row)}
+            {:else if col.slot != null}
+              {#if col.slot == 0}<slot name="0" {row} {index} />
+              {:else if col.slot == 1}<slot name="1" {row} {index} />
+              {:else if col.slot == 2}<slot name="2" {row} {index} />
+              {:else if col.slot == 3}<slot name="3" {row} {index} />
+              {:else if col.slot == 4}<slot name="4" {row} {index} />
+              {:else if col.slot == 5}<slot name="5" {row} {index} />
+              {:else if col.slot == 6}<slot name="6" {row} {index} />
+              {:else if col.slot == 7}<slot name="7" {row} {index} />
+              {/if}
             {:else}
               {row[col.fieldName]}
             {/if}

packages/web/src/query/RunnerOutputFiles/RunnerOutputFiles.svelte

@@ -5,6 +5,7 @@
   import axiosInstance from '../../utility/axiosInstance';
   import formatFileSize from '../../utility/formatFileSize';
   import getElectron from '../../utility/getElectron';
+  import resolveApi from '../../utility/resolveApi';
   import socket from '../../utility/socket';
   import useEffect from '../../utility/useEffect';
   import CopyLink from './CopyLink.svelte';
@@ -52,30 +53,69 @@
       !electron && {
         fieldName: 'download',
         header: 'Download',
-        component: DownloadLink,
+        slot: 0,
-        getProps: row => ({
+        // component: DownloadLink,
-          row,
+        // getProps: row => ({
-          runnerId,
+        //   row,
-        }),
+        //   runnerId,
+        // }),
       },
       electron && {
         fieldName: 'copy',
         header: 'Copy',
-        component: CopyLink,
+        slot: 1,
-        getProps: row => ({
+        // component: CopyLink,
-          row,
+        // getProps: row => ({
-          runnerId,
+        //   row,
-        }),
+        //   runnerId,
+        // }),
       },
       electron && {
         fieldName: 'show',
         header: 'Show',
-        component: ShowLink,
+        slot: 2,
-        getProps: row => ({
+        // component: ShowLink,
-          row,
+        // getProps: row => ({
-          runnerId,
+        //   row,
-        }),
+        //   runnerId,
+        // }),
       },
     ]}
-  />
+  >
+    <a
+      slot="0"
+      let:row
+      href={`${resolveApi()}/runners/data/${runnerId}/${row.name}`}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      download
+    </a>
+
+    <a
+      slot="1"
+      let:row
+      href="#"
+      on:click={() => {
+        const file = electron.remote.dialog.showSaveDialogSync(electron.remote.getCurrentWindow(), {});
+        if (file) {
+          const fs = window.require('fs');
+          fs.copyFile(row.path, file, () => {});
+        }
+      }}
+    >
+      save
+    </a>
+
+    <a
+      slot="2"
+      let:row
+      href="#"
+      on:click={() => {
+        electron.remote.shell.showItemInFolder(row.path);
+      }}
+    >
+      show
+    </a>
+  </TableControl>
 {/if}