From 622f3264c9ac4e486cd1c783ea68f280c1758809 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Wed, 24 Jan 2024 11:10:10 +0100
Subject: [PATCH] feat(frontend): Ag Grid compactness (#3052)

* feat(frontend): add support for compactness

* feat(frontend): add support for compactness

* feat(frontend): cleanup

* feat(frontend): rowHeight onMount

* feat(frontend): move rowHeights definition
---
 .../components/display/table/AppAggridTable.svelte  | 13 +++++++++++++
 .../components/apps/editor/component/components.ts  |  7 +++++++
 2 files changed, 20 insertions(+)

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 d4f18039ac..bf35c8a295 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
@@ -30,6 +30,12 @@
 	const { app, worldStore, selectedComponent, componentControl, darkMode } =
 		getContext<AppViewerContext>('AppViewerContext')
 
+	const rowHeights = {
+		normal: 40,
+		compact: 30,
+		comfortable: 50
+	}
+
 	let css = initCss($app.css?.aggridcomponent, customCss)
 
 	let result: any[] | undefined = undefined
@@ -154,6 +160,9 @@
 							editable: resolvedConfig?.allEditable,
 							onCellValueChanged
 						},
+						rowHeight: resolvedConfig.compactness
+							? rowHeights[resolvedConfig.compactness]
+							: rowHeights['normal'],
 						rowSelection: resolvedConfig?.multipleSelectable ? 'multiple' : 'single',
 						rowMultiSelectWithClick: resolvedConfig?.multipleSelectable
 							? resolvedConfig.rowMultiselectWithClick
@@ -229,6 +238,7 @@
 			onSelectionChanged(api)
 		}
 	}
+
 	function updateOptions() {
 		try {
 			api?.updateGridOptions({
@@ -248,6 +258,9 @@
 				rowMultiSelectWithClick: resolvedConfig?.multipleSelectable
 					? resolvedConfig.rowMultiselectWithClick
 					: undefined,
+				rowHeight: resolvedConfig.compactness
+					? rowHeights[resolvedConfig.compactness]
+					: rowHeights['normal'],
 				...(resolvedConfig?.extraConfig ?? {})
 			})
 		} catch (e) {
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 040594317a..f0baa3429e 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -639,6 +639,13 @@ const aggridcomponentconst = {
 				fieldType: 'object',
 				value: {},
 				tooltip: 'any configuration that can be passed to ag-grid top level'
+			},
+			compactness: {
+				type: 'static',
+				fieldType: 'select',
+				value: 'normal',
+				selectOptions: ['normal', 'compact', 'comfortable'],
+				tooltip: 'Change the row height'
 			}
 		},
 		componentInput: {