From 7437dc00aac1babd787d3bdafb1b7975c5b2168e Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 4 Jan 2023 18:37:42 +0100
Subject: [PATCH] apps improvements

---
 frontend/src/lib/components/ArgInput.svelte   |  4 +-
 .../src/lib/components/ResourcePicker.svelte  |  1 +
 .../components/selectInputs/AppSelect.svelte  |  2 +
 .../apps/components/table/AppTable.svelte     |  3 +-
 .../components/table/AppTableFooter.svelte    |  3 +-
 .../components/textInputs/AppTextInput.svelte |  1 -
 .../components/apps/editor/GridEditor.svelte  |  2 +-
 .../componentsPanel/ComponentList.svelte      | 47 ++++++++-----------
 .../apps/editor/componentsPanel/data.ts       | 39 +++++++++------
 .../mainInput/RunnableSelector.svelte         |  2 +-
 .../src/lib/components/apps/editorUtils.ts    |  8 ++++
 11 files changed, 62 insertions(+), 50 deletions(-)

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 79360ff3eb..c37daf932f 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -327,17 +327,17 @@
 			{:else if inputCat == 'date'}
 				<input {autofocus} class="inline-block" type="datetime-local" bind:value />
 			{:else if inputCat == 'sql' || inputCat == 'yaml'}
-				<div class="border mb-4 w-full border-gray-400">
+				<div class="border my-1 mb-4 w-full border-gray-400">
 					<SimpleEditor
 						on:focus={() => dispatch('focus')}
 						on:blur={() => dispatch('blur')}
 						bind:this={editor}
 						lang={inputCat}
 						bind:code={value}
-						class="few-lines-editor"
 						on:change={async () => {
 							dispatch('input', { rawValue: value, isRaw: false })
 						}}
+						autoHeight
 					/>
 				</div>
 			{:else if inputCat == 'base64'}
diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
index e81fc9d71d..214188e458 100644
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/frontend/src/lib/components/ResourcePicker.svelte
@@ -49,6 +49,7 @@
 
 <div class="flex flex-row gap-x-1 w-full">
 	<Select
+		--height="34px"
 		value={collection.find((x) => x.value == value)}
 		bind:justValue={value}
 		items={collection}
diff --git a/frontend/src/lib/components/apps/components/selectInputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/selectInputs/AppSelect.svelte
index f9d2394582..0091f5f0b2 100644
--- a/frontend/src/lib/components/apps/components/selectInputs/AppSelect.svelte
+++ b/frontend/src/lib/components/apps/components/selectInputs/AppSelect.svelte
@@ -36,6 +36,8 @@
 
 <AlignWrapper {horizontalAlignment} {verticalAlignment}>
 	<Select
+		--height="34px"
+		class="select"
 		on:clear={onChange}
 		on:change={onChange}
 		{items}
diff --git a/frontend/src/lib/components/apps/components/table/AppTable.svelte b/frontend/src/lib/components/apps/components/table/AppTable.svelte
index 384e23aa59..acf8782c93 100644
--- a/frontend/src/lib/components/apps/components/table/AppTable.svelte
+++ b/frontend/src/lib/components/apps/components/table/AppTable.svelte
@@ -28,7 +28,7 @@
 	let search: 'By Runnable' | 'By Component' | 'Disabled' | undefined = undefined
 	let searchValue = ''
 
-	let pagination: boolean | undefined = undefined
+	let pagination: boolean | undefined = true
 
 	$: setSearch(searchValue)
 
@@ -117,7 +117,6 @@
 </script>
 
 <InputValue {id} input={configuration.search} bind:value={search} />
-<InputValue {id} input={configuration.pagination} bind:value={pagination} />
 
 <RunnableWrapper bind:componentInput {id} bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
diff --git a/frontend/src/lib/components/apps/components/table/AppTableFooter.svelte b/frontend/src/lib/components/apps/components/table/AppTableFooter.svelte
index 65e460beb7..0e177b7850 100644
--- a/frontend/src/lib/components/apps/components/table/AppTableFooter.svelte
+++ b/frontend/src/lib/components/apps/components/table/AppTableFooter.svelte
@@ -3,6 +3,7 @@
 	import { faDownload } from '@fortawesome/free-solid-svg-icons'
 	import type { Table } from '@tanstack/svelte-table'
 	import type { Readable } from 'svelte/store'
+	import { tableOptions } from './tableOptions'
 
 	type T = Record<string, any>
 
@@ -22,7 +23,7 @@
 </script>
 
 <div class="px-4 py-2 text-xs flex flex-row gap-2 items-center justify-between">
-	{#if paginationEnabled}
+	{#if paginationEnabled && result.length > (tableOptions.initialState?.pagination?.pageSize ?? 25)}
 		<div class="flex items-center gap-2 flex-row">
 			<Button
 				size="xs"
diff --git a/frontend/src/lib/components/apps/components/textInputs/AppTextInput.svelte b/frontend/src/lib/components/apps/components/textInputs/AppTextInput.svelte
index 08cc988b21..e94b170d6a 100644
--- a/frontend/src/lib/components/apps/components/textInputs/AppTextInput.svelte
+++ b/frontend/src/lib/components/apps/components/textInputs/AppTextInput.svelte
@@ -38,6 +38,5 @@
 		bind:this={input}
 		on:input={handleInput}
 		{placeholder}
-		class="h-full"
 	/>
 </AlignWrapper>
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index 59dae733c9..5a89e47154 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -124,7 +124,7 @@
 		<Grid
 			bind:items={$app.grid}
 			let:dataItem
-			rowHeight={30}
+			rowHeight={36}
 			cols={columnConfiguration}
 			fastStart={true}
 			on:pointerup={({ detail }) => selectComponent(detail.id)}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
index e49f7af63f..7c35cb8dd5 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -16,14 +16,16 @@
 
 	const { app, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
 
-	function getMinDimensionsByComponent(componentType: AppComponent['type'], column: number): Size {
+	function getRecommendedDimensionsByComponent(
+		componentType: AppComponent['type'],
+		column: number
+	): Size {
 		// Dimensions key formula: <mobile width>:<mobile height>-<desktop width>:<desktop height>
 		const dimensions: Record<`${number}:${number}-${number}:${number}`, AppComponent['type'][]> = {
-			'4:1-4:1': ['textcomponent'],
-			'2:1-2:1': ['buttoncomponent'],
-			'2:2-2:2': ['htmlcomponent'],
-			'4:2-4:2': [
-				'checkboxcomponent',
+			'1:1-3:1': ['textcomponent'],
+			'1:1-1:1': ['buttoncomponent', 'checkboxcomponent'],
+			'1:2-1:2': ['htmlcomponent'],
+			'2:1-3:1': [
 				'textinputcomponent',
 				'numberinputcomponent',
 				'selectcomponent',
@@ -31,14 +33,14 @@
 				'dateinputcomponent'
 			],
 			'3:5-6:5': ['formcomponent'],
-			'4:12-4:12': [
+			'2:8-6:8': [
 				'timeseriescomponent',
 				'barchartcomponent',
 				'piechartcomponent',
 				'displaycomponent',
 				'scatterchartcomponent'
 			],
-			'3:10-6:12': ['tablecomponent']
+			'3:10-6:10': ['tablecomponent']
 		}
 		// Finds the key that is associated with the component type and extracts the dimensions from it
 		const [dimension] = Object.entries(dimensions).find(([_, value]) =>
@@ -49,22 +51,6 @@
 		return { w: +size[0], h: +size[1] }
 	}
 
-	function getMaxDimensionsByComponent(componentType: AppComponent['type'], column: number): Size {
-		if (
-			[
-				'textinputcomponent',
-				'numberinputcomponent',
-				'selectcomponent',
-				'dateinputcomponent',
-				'passwordinputcomponent',
-				'buttoncomponent'
-			].includes(componentType)
-		) {
-			return { w: column, h: 2 }
-		}
-		return { w: column, h: 80 }
-	}
-
 	function addComponent(appComponent: AppComponent) {
 		$dirtyStore = true
 		const grid = $app.grid ?? []
@@ -90,12 +76,17 @@
 		}
 
 		gridColumns.forEach((column) => {
-			const min = getMinDimensionsByComponent(appComponent.type, column)
-			const max = getMaxDimensionsByComponent(appComponent.type, column)
+			const rec = getRecommendedDimensionsByComponent(appComponent.type, column)
 
-			newItem[column] = { ...newComponent, min, max, w: min.w, h: min.h }
+			newItem[column] = {
+				...newComponent,
+				min: { w: 1, h: 1 },
+				max: { w: column, h: 100 },
+				w: rec.w,
+				h: rec.h
+			}
 			const position = gridHelp.findSpace(newItem, grid, column) as { x: number; y: number }
-			newItem[column] = { ...newItem[column], ...position, min, max }
+			newItem[column] = { ...newItem[column], ...position }
 		})
 
 		$app.grid = [...grid, newItem]
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/data.ts b/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
index 101f15a29f..04e961f50b 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
@@ -5,6 +5,7 @@ const inputs: ComponentSet = {
 	title: 'Inputs',
 	components: [
 		{
+			softWrap: true,
 			verticalAlignment: 'center',
 			id: 'textinputcomponent',
 			type: 'textinputcomponent',
@@ -20,22 +21,39 @@ const inputs: ComponentSet = {
 			card: false
 		},
 		{
+			softWrap: true,
 			verticalAlignment: 'center',
 			id: 'passwordinputcomponent',
 			type: 'passwordinputcomponent',
 			componentInput: undefined,
-			configuration: {},
+			configuration: {
+				placeholder: {
+					type: 'static',
+					value: 'Password',
+					fieldType: 'text',
+					onlyStatic: true,
+				},
+			},
 			card: false
 		},
 		{
+			softWrap: true,
 			verticalAlignment: 'center',
 			id: 'numberinputcomponent',
 			type: 'numberinputcomponent',
 			componentInput: undefined,
-			configuration: {},
+			configuration: {
+				placeholder: {
+					type: 'static',
+					value: 'Type...',
+					fieldType: 'text',
+					onlyStatic: true,
+				},
+			},
 			card: false
 		},
 		{
+			softWrap: true,
 			verticalAlignment: 'center',
 			id: 'dateinputcomponent',
 			type: 'dateinputcomponent',
@@ -53,10 +71,10 @@ const inputs: ComponentSet = {
 				}
 			},
 			card: false,
-			softWrap: true
 		},
 		{
 			...defaultAlignement,
+			softWrap: true,
 			id: 'checkboxcomponent',
 			type: 'checkboxcomponent',
 			componentInput: undefined,
@@ -115,9 +133,8 @@ const buttons: ComponentSet = {
 			configuration: {
 				label: {
 					type: 'static',
-
 					fieldType: 'text',
-					value: 'Lorem ipsum'
+					value: 'Press me'
 				},
 				color: {
 					fieldType: 'select',
@@ -238,12 +255,6 @@ const display: ComponentSet = {
 					onlyStatic: true,
 					optionValuesKey: 'tableSearchOptions',
 					value: 'Disabled'
-				},
-				pagination: {
-					type: 'static',
-					onlyStatic: true,
-					fieldType: 'boolean',
-					value: true
 				}
 			},
 			componentInput: {
@@ -253,13 +264,13 @@ const display: ComponentSet = {
 				value: [
 					{
 						id: 1,
-						name: 'Lorem ipsum',
+						name: 'A cell with a long name',
 						age: 42
 					},
 					{
 						id: 2,
-						name: 'Lorem ipsum',
-						age: 42
+						name: 'A briefer cell',
+						age: 84
 					}
 				],
 
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
index 5b068932e5..56e62a9fed 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
@@ -103,7 +103,7 @@
 				acc.push(componentInput.runnable.name)
 			}
 
-			if (componentInput.type === 'tablecomponent') {
+			if (componentInput?.type === 'tablecomponent') {
 				componentInput.actionButtons.forEach((actionButton) => {
 					if (actionButton.componentInput?.type === 'runnable') {
 						if (actionButton.componentInput.runnable?.type === 'runnableByName') {
diff --git a/frontend/src/lib/components/apps/editorUtils.ts b/frontend/src/lib/components/apps/editorUtils.ts
index e1be0d2fc9..d91ef56636 100644
--- a/frontend/src/lib/components/apps/editorUtils.ts
+++ b/frontend/src/lib/components/apps/editorUtils.ts
@@ -1,3 +1,11 @@
 export function defaultCode(component: string, language: string): string | undefined {
+    if (component === 'tablecomponent' && language === 'deno') {
+        return `export async function main(x: string) {
+  return [
+    { foo: x, bar: 42 },
+    { foo: "static", bar: 84 }]
+}
+`
+    }
     return undefined
 }
\ No newline at end of file