From ebe6a6c325bd79754f7a13804d4aef2608008d08 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 19 Jun 2023 02:28:09 +0200
Subject: [PATCH] make download button configurable for table

---
 .../components/display/table/AppTable.svelte  |  1 +
 .../display/table/AppTableFooter.svelte       | 91 ++++++++++---------
 .../apps/editor/component/components.ts       |  9 +-
 3 files changed, 57 insertions(+), 44 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
index e0e6178f1c..2f787af8fe 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
@@ -465,6 +465,7 @@
 			</div>
 
 			<AppTableFooter
+				download={resolvedConfig?.downloadButton}
 				pageSize={resolvedConfig?.pagination?.configuration?.auto?.pageSize ?? 20}
 				manualPagination={resolvedConfig?.pagination?.selected == 'manual'}
 				result={filteredResult}
diff --git a/frontend/src/lib/components/apps/components/display/table/AppTableFooter.svelte b/frontend/src/lib/components/apps/components/display/table/AppTableFooter.svelte
index 430d259f20..3cbf11358c 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppTableFooter.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppTableFooter.svelte
@@ -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}
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 162fe66024..9ce6e812f7 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -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',