using table control with slots

This commit is contained in:
Jan Prochazka 2021-03-17 18:30:36 +01:00
parent 9c7df42948
commit eceab2dde9
3 changed files with 78 additions and 24 deletions

View File

@ -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 == 1}<slot name="1" />{/if}
{#if tab.slot == 2}<slot name="2" />{/if}
{#if tab.slot == 3}<slot name="3" />{/if}
{#if tab.slot == 4}<slot name="4" />{/if}
{#if tab.slot == 5}<slot name="5" />{/if}
{#if tab.slot == 6}<slot name="6" />{/if}
{#if tab.slot == 7}<slot name="7" />{/if}
{#if tab.slot != null}
{#if tab.slot == 0}<slot name="0" />
{:else if tab.slot == 1}<slot name="1" />
{:else if tab.slot == 2}<slot name="2" />
{:else if tab.slot == 3}<slot name="3" />
{:else if tab.slot == 4}<slot name="4" />
{:else if tab.slot == 5}<slot name="5" />
{:else if tab.slot == 6}<slot name="6" />
{:else if tab.slot == 7}<slot name="7" />
{/if}
{/if}
</div>
{/each}
</div>

View File

@ -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}

View File

@ -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,
getProps: row => ({
row,
runnerId,
}),
slot: 0,
// component: DownloadLink,
// getProps: row => ({
// row,
// runnerId,
// }),
},
electron && {
fieldName: 'copy',
header: 'Copy',
component: CopyLink,
getProps: row => ({
row,
runnerId,
}),
slot: 1,
// component: CopyLink,
// getProps: row => ({
// row,
// runnerId,
// }),
},
electron && {
fieldName: 'show',
header: 'Show',
component: ShowLink,
getProps: row => ({
row,
runnerId,
}),
slot: 2,
// component: ShowLink,
// getProps: row => ({
// 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}