From be8c70f94de17fb1839bf75e28f9809cbc0e14f6 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 27 Feb 2023 14:37:32 +0100
Subject: [PATCH] apps improvements

---
 .../display/table/AppAggridTable.svelte        | 18 +++++++++++++-----
 .../apps/components/inputs/AppSelect.svelte    |  4 ++--
 .../apps/editor/component/components.ts        | 12 ++++++++++++
 3 files changed, 27 insertions(+), 7 deletions(-)

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 11b6d0b201..5a08850a23 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
@@ -65,6 +65,8 @@
 	let columnDefs: any = undefined
 
 	let allEditable: boolean | undefined = undefined
+	let pagination: boolean | undefined = undefined
+	let pageSize: number | undefined = 10
 
 	function onCellValueChanged(event) {
 		if (result) {
@@ -79,6 +81,8 @@
 
 <InputValue {id} input={configuration.columnDefs} bind:value={columnDefs} />
 <InputValue {id} input={configuration.allEditable} bind:value={allEditable} />
+<InputValue {id} input={configuration.pagination} bind:value={pagination} />
+<InputValue {id} input={configuration.pageSize} bind:value={pageSize} />
 
 <RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
@@ -95,11 +99,15 @@
 				style:width="{clientWidth}px"
 				class="ag-theme-alpine"
 			>
-				<AgGridSvelte
-					bind:rowData={result}
-					{columnDefs}
-					defaultColDef={{ flex: 1, editable: allEditable, onCellValueChanged }}
-				/>
+				{#key pagination}
+					<AgGridSvelte
+						bind:rowData={result}
+						{columnDefs}
+						{pagination}
+						paginationPageSize={pageSize}
+						defaultColDef={{ flex: 1, editable: allEditable, onCellValueChanged }}
+					/>
+				{/key}
 			</div>
 		</div>
 	{:else if result != undefined}
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
index d40c72f90a..e967087f28 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
@@ -47,12 +47,12 @@
 		const valuePeak = outputs?.result.peak()
 		if (!valuePeak) {
 			const value0 = items?.[0]?.['value']
-			if (value0 != value && !items.includes(value0)) {
+			if (value0 != value) {
 				value = JSON.stringify(value0)
 				outputs?.result.set(value0)
 			}
 		} else {
-			value = valuePeak
+			value = JSON.stringify(valuePeak)
 		}
 	}
 
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 06398bcdd4..c51fe005d5 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -715,6 +715,18 @@ Hello \${ctx.username}
 					fieldType: 'boolean',
 					value: false,
 					onlyStatic: true
+				},
+				pagination: {
+					type: 'static',
+					fieldType: 'boolean',
+					value: false,
+					onlyStatic: true
+				},
+				pageSize: {
+					type: 'static',
+					fieldType: 'number',
+					value: 10,
+					onlyStatic: true
 				}
 			},
 			componentInput: {