make download button configurable for table

This commit is contained in:
Ruben Fiszel
2023-06-19 02:28:09 +02:00
parent 827460764d
commit ebe6a6c325
3 changed files with 57 additions and 44 deletions
@@ -465,6 +465,7 @@
</div>
<AppTableFooter
download={resolvedConfig?.downloadButton}
pageSize={resolvedConfig?.pagination?.configuration?.auto?.pageSize ?? 20}
manualPagination={resolvedConfig?.pagination?.selected == 'manual'}
result={filteredResult}
@@ -15,6 +15,7 @@
let c = ''
export { c as class }
export let style = ''
export let download: boolean = true
function downloadResultAsJSON() {
const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(result))
@@ -27,49 +28,53 @@
}
</script>
<div
class={twMerge('px-2 py-1 text-xs gap-2 items-center justify-between', c, 'flex flex-row')}
{style}
>
{#if result.length > pageSize || manualPagination}
{#if result.length > pageSize || manualPagination || download}
<div
class={twMerge('px-2 py-1 text-xs gap-2 items-center justify-between', c, 'flex flex-row')}
{style}
>
{#if result.length > pageSize || manualPagination}
<div class="flex items-center gap-2 flex-row">
<Button
size="xs"
variant="border"
color="light"
btnClasses="!py-1 !pl-1"
on:click={() => $table.previousPage()}
disabled={!$table.getCanPreviousPage()}
>
<ChevronLeft size={14} />
Previous
</Button>
<Button
size="xs"
variant="border"
color="light"
btnClasses="!py-1 !pr-1"
on:click={() => $table.nextPage()}
disabled={!$table.getCanNextPage()}
>
Next
<ChevronRight size={14} />
</Button>
{$table.getState().pagination.pageIndex + 1} of {$table.getPageCount()}
</div>
{:else}
<div />
{/if}
<div class="flex items-center gap-2 flex-row">
<Button
size="xs"
variant="border"
color="light"
btnClasses="!py-1 !pl-1"
on:click={() => $table.previousPage()}
disabled={!$table.getCanPreviousPage()}
>
<ChevronLeft size={14} />
Previous
</Button>
<Button
size="xs"
variant="border"
color="light"
btnClasses="!py-1 !pr-1"
on:click={() => $table.nextPage()}
disabled={!$table.getCanNextPage()}
>
Next
<ChevronRight size={14} />
</Button>
{$table.getState().pagination.pageIndex + 1} of {$table.getPageCount()}
{#if download}
<Button
size="xs"
variant="border"
color="light"
btnClasses="!py-1"
on:click={downloadResultAsJSON}
startIcon={{ icon: faDownload }}
>
Download
</Button>
{/if}
</div>
{:else}
<div />
{/if}
<div class="flex items-center gap-2 flex-row">
<Button
size="xs"
variant="border"
color="light"
btnClasses="!py-1"
on:click={downloadResultAsJSON}
startIcon={{ icon: faDownload }}
>
Download
</Button>
</div>
</div>
{/if}
@@ -1078,7 +1078,14 @@ Hello \${ctx.username}
tooltip:
'Search can be configured in the following ways: Disabled: The search is disabled,By Runnable: The search is done in the backend, or by component: The search is done in the frontend.'
},
pagination: paginationOneOf
pagination: paginationOneOf,
downloadButton: {
type: 'static',
fieldType: 'boolean',
value: true,
onlyStatic: true,
tooltip: 'display a button to download the table as a csv file'
}
},
componentInput: {
type: 'static',