From 41f6bcdaa154bd2d21a65b26455802cdbafe5dc1 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 26 Apr 2024 18:25:26 +0200
Subject: [PATCH] fix: make configurable footer for aggrid in apps

---
 .../table/AppAggridExplorerTable.svelte       |  42 ++---
 .../display/table/AppAggridTable.svelte       | 163 +++++++++---------
 .../apps/editor/component/components.ts       |  12 ++
 3 files changed, 117 insertions(+), 100 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
index 4f5ca04b0d..30eecfe98e 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
@@ -424,27 +424,29 @@
 		>
 			<div bind:this={eGui} style:height="100%" />
 		</div>
-		<div class="flex gap-1 w-full justify-between items-center text-xs text-primary p-2">
-			<div>
-				<Popover>
-					<svelte:fragment slot="text">Download</svelte:fragment>
-					<Button
-						startIcon={{ icon: Download }}
-						color="light"
-						size="xs2"
-						on:click={() => {
-							api?.exportDataAsCsv()
-						}}
-						iconOnly
-					/>
-				</Popover>
+		{#if resolvedConfig && 'footer' in resolvedConfig && resolvedConfig.footer}
+			<div class="flex gap-1 w-full justify-between items-center text-xs text-primary p-2">
+				<div>
+					<Popover>
+						<svelte:fragment slot="text">Download</svelte:fragment>
+						<Button
+							startIcon={{ icon: Download }}
+							color="light"
+							size="xs2"
+							on:click={() => {
+								api?.exportDataAsCsv()
+							}}
+							iconOnly
+						/>
+					</Popover>
+				</div>
+				{#if datasource?.rowCount}
+					{firstRow}{'->'}{lastRow + 1} of {datasource?.rowCount} rows
+				{:else}
+					{firstRow}{'->'}{lastRow + 1}
+				{/if}
 			</div>
-			{#if datasource?.rowCount}
-				{firstRow}{'->'}{lastRow + 1} of {datasource?.rowCount} rows
-			{:else}
-				{firstRow}{'->'}{lastRow + 1}
-			{/if}
-		</div>
+		{/if}
 	</div>
 {:else if resolvedConfig.columnDefs != undefined}
 	<Alert title="Parsing issues" type="error" size="xs">
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
index 2b1ad9ee2d..b3667d1dac 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
@@ -478,88 +478,91 @@
 						{/if}
 					{/key}
 				</div>
-				<div class="flex gap-1 w-full justify-between items-center text-sm text-secondary/80 p-2">
-					<div>
-						<Popover>
-							<svelte:fragment slot="text">Download</svelte:fragment>
-							<Button
-								startIcon={{ icon: Download }}
-								color="light"
-								size="xs2"
-								on:click={() => {
-									api?.exportDataAsCsv()
-								}}
-								iconOnly
-							/>
-						</Popover>
-					</div>
-					<div class="flex flex-row gap-1 items-center">
-						{#if resolvedConfig?.pagination}
-							{#key refreshCount}
-								<div class="text-xs mx-2 text-primary">
-									{(api?.paginationGetPageSize() ?? 0) * (api?.paginationGetCurrentPage() ?? 0) + 1}
-									to {Math.min(
-										api?.paginationGetRowCount() ?? 0,
-										((api?.paginationGetCurrentPage() ?? 0) + 1) *
-											(api?.paginationGetPageSize() ?? 0)
-									)}
-									of {api?.paginationGetRowCount()}
-								</div>
+				{#if resolvedConfig.footer}
+					<div class="flex gap-1 w-full justify-between items-center text-sm text-secondary/80 p-2">
+						<div>
+							<Popover>
+								<svelte:fragment slot="text">Download</svelte:fragment>
+								<Button
+									startIcon={{ icon: Download }}
+									color="light"
+									size="xs2"
+									on:click={() => {
+										api?.exportDataAsCsv()
+									}}
+									iconOnly
+								/>
+							</Popover>
+						</div>
+						<div class="flex flex-row gap-1 items-center">
+							{#if resolvedConfig?.pagination}
+								{#key refreshCount}
+									<div class="text-xs mx-2 text-primary">
+										{(api?.paginationGetPageSize() ?? 0) * (api?.paginationGetCurrentPage() ?? 0) +
+											1}
+										to {Math.min(
+											api?.paginationGetRowCount() ?? 0,
+											((api?.paginationGetCurrentPage() ?? 0) + 1) *
+												(api?.paginationGetPageSize() ?? 0)
+										)}
+										of {api?.paginationGetRowCount()}
+									</div>
 
-								<Button
-									iconOnly
-									startIcon={{ icon: SkipBack }}
-									color="light"
-									size="xs2"
-									disabled={api?.paginationGetCurrentPage() == 0}
-									on:click={() => {
-										api?.paginationGoToFirstPage()
-										refreshCount++
-									}}
-								/>
-								<Button
-									iconOnly
-									startIcon={{ icon: ChevronLeft }}
-									color="light"
-									size="xs2"
-									disabled={api?.paginationGetCurrentPage() == 0}
-									on:click={() => {
-										api?.paginationGoToPreviousPage()
-										refreshCount++
-									}}
-								/>
-								<div class="text-xs mx-2 text-primary">
-									Page {(api?.paginationGetCurrentPage() ?? 0) + 1} of {api?.paginationGetTotalPages() ??
-										0}
-								</div>
-								<Button
-									iconOnly
-									startIcon={{ icon: ChevronRight }}
-									color="light"
-									size="xs2"
-									disabled={(api?.paginationGetCurrentPage() ?? 0) + 1 ==
-										api?.paginationGetTotalPages()}
-									on:click={() => {
-										api?.paginationGoToNextPage()
-										refreshCount++
-									}}
-								/>
-								<Button
-									iconOnly
-									startIcon={{ icon: SkipForward }}
-									color="light"
-									size="xs2"
-									disabled={(api?.paginationGetCurrentPage() ?? 0) + 1 ==
-										api?.paginationGetTotalPages()}
-									on:click={() => {
-										api?.paginationGoToLastPage()
-										refreshCount++
-									}}
-								/>
-							{/key}
-						{/if}
+									<Button
+										iconOnly
+										startIcon={{ icon: SkipBack }}
+										color="light"
+										size="xs2"
+										disabled={api?.paginationGetCurrentPage() == 0}
+										on:click={() => {
+											api?.paginationGoToFirstPage()
+											refreshCount++
+										}}
+									/>
+									<Button
+										iconOnly
+										startIcon={{ icon: ChevronLeft }}
+										color="light"
+										size="xs2"
+										disabled={api?.paginationGetCurrentPage() == 0}
+										on:click={() => {
+											api?.paginationGoToPreviousPage()
+											refreshCount++
+										}}
+									/>
+									<div class="text-xs mx-2 text-primary">
+										Page {(api?.paginationGetCurrentPage() ?? 0) + 1} of {api?.paginationGetTotalPages() ??
+											0}
+									</div>
+									<Button
+										iconOnly
+										startIcon={{ icon: ChevronRight }}
+										color="light"
+										size="xs2"
+										disabled={(api?.paginationGetCurrentPage() ?? 0) + 1 ==
+											api?.paginationGetTotalPages()}
+										on:click={() => {
+											api?.paginationGoToNextPage()
+											refreshCount++
+										}}
+									/>
+									<Button
+										iconOnly
+										startIcon={{ icon: SkipForward }}
+										color="light"
+										size="xs2"
+										disabled={(api?.paginationGetCurrentPage() ?? 0) + 1 ==
+											api?.paginationGetTotalPages()}
+										on:click={() => {
+											api?.paginationGoToLastPage()
+											refreshCount++
+										}}
+									/>
+								{/key}
+							{/if}
+						</div>
 					</div>
-				</div>
+				{/if}
 			</div>
 		{:else if resolvedConfig.columnDefs != undefined}
 			<Alert title="Parsing issues" type="error" size="xs">
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 8e1dffe5ae..94232d16f4 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -702,6 +702,12 @@ const aggridcomponentconst = {
 				value: false,
 				tooltip:
 					'When true, actions will wrap to the next line. Otherwise, the column will grow to fit the actions.'
+			},
+			footer: {
+				type: 'static',
+				fieldType: 'boolean',
+				value: true,
+				tooltip: 'Allow visible footer for pagination and download'
 			}
 		},
 		componentInput: {
@@ -803,6 +809,12 @@ const aggridinfinitecomponentconst = {
 				fieldType: 'boolean',
 				value: false,
 				tooltip: 'Enable search in the table'
+			},
+			footer: {
+				type: 'static',
+				fieldType: 'boolean',
+				value: true,
+				tooltip: 'Allow visible footer for pagination and download'
 			}
 		},
 		componentInput: {