From 9ca112b067ec71e1699ed5a3c244ff3fccdaa019 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 13 Jan 2024 10:57:49 +0100
Subject: [PATCH] fix: improve table behavior when searching

---
 .../apps/components/display/AppCarouselList.svelte |  6 ++----
 .../apps/components/display/table/AppTable.svelte  | 14 ++++++--------
 .../apps/components/display/table/tableOptions.ts  |  3 +++
 .../apps/components/layout/AppList.svelte          |  6 ++----
 .../apps/components/layout/ListWrapper.svelte      | 11 +++++------
 .../apps/components/layout/RowWrapper.svelte       |  9 +++++----
 6 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte b/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte
index 49b0b2b199..8ce89208dd 100644
--- a/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte
@@ -150,8 +150,7 @@
 						{#each result ?? [] as value, index}
 							<div class="overflow-auto w-full">
 								<ListWrapper
-									on:set={(e) => {
-										const { id, value } = e.detail
+									onSet={(id, value) => {
 										if (!inputs[id]) {
 											inputs[id] = { [index]: value }
 										} else {
@@ -159,8 +158,7 @@
 										}
 										outputs?.inputs.set(inputs, true)
 									}}
-									on:remove={(e) => {
-										const id = e.detail
+									onRemove={(id) => {
 										if (inputs?.[id] == undefined) {
 											return
 										}
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 bcd9c4c668..52e7fab001 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
@@ -437,26 +437,24 @@
 												<RowWrapper
 													value={row.original}
 													index={rowIndex}
-													on:set={(e) => {
-														const { id, value } = e.detail
+													onSet={(id, value) => {
 														if (!inputs[id]) {
 															inputs[id] = { [rowIndex]: value }
 														} else {
 															inputs[id] = { ...inputs[id], [rowIndex]: value }
 														}
+
 														outputs?.inputs.set(inputs, true)
 													}}
-													on:remove={(e) => {
-														const id = e.detail
+													onRemove={(id) => {
 														if (inputs?.[id] == undefined) {
 															return
 														}
-														if (rowIndex == 0) {
+														delete inputs[id][rowIndex]
+														inputs[id] = { ...inputs[id] }
+														if (Object.keys(inputs?.[id] ?? {}).length == 0) {
 															delete inputs[id]
 															inputs = { ...inputs }
-														} else {
-															delete inputs[id][rowIndex]
-															inputs[id] = { ...inputs[id] }
 														}
 														outputs?.inputs.set(inputs, true)
 													}}
diff --git a/frontend/src/lib/components/apps/components/display/table/tableOptions.ts b/frontend/src/lib/components/apps/components/display/table/tableOptions.ts
index dfc144d8bb..7514768e26 100644
--- a/frontend/src/lib/components/apps/components/display/table/tableOptions.ts
+++ b/frontend/src/lib/components/apps/components/display/table/tableOptions.ts
@@ -10,6 +10,9 @@ const tableOptions: TableOptions<Record<string, any>> = {
 		pagination: {
 			pageSize: 25
 		}
+	},
+	getRowId(originalRow, index, parent) {
+		return originalRow?.['__index'] ?? index
 	}
 }
 
diff --git a/frontend/src/lib/components/apps/components/layout/AppList.svelte b/frontend/src/lib/components/apps/components/layout/AppList.svelte
index 5f36761bd0..a0e708670c 100644
--- a/frontend/src/lib/components/apps/components/layout/AppList.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppList.svelte
@@ -172,8 +172,7 @@
 								: 'h-0 float overflow-hidden invisible absolute'}
 						>
 							<ListWrapper
-								on:set={(e) => {
-									const { id, value } = e.detail
+								onSet={(id, value) => {
 									if (!inputs[id]) {
 										inputs[id] = { [index]: value }
 									} else {
@@ -181,8 +180,7 @@
 									}
 									outputs?.inputs.set(inputs, true)
 								}}
-								on:remove={(e) => {
-									const id = e.detail
+								onRemove={(id) => {
 									if (inputs?.[id] == undefined) {
 										return
 									}
diff --git a/frontend/src/lib/components/apps/components/layout/ListWrapper.svelte b/frontend/src/lib/components/apps/components/layout/ListWrapper.svelte
index 66cf03c2cf..0b6c6328d6 100644
--- a/frontend/src/lib/components/apps/components/layout/ListWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/layout/ListWrapper.svelte
@@ -1,24 +1,23 @@
 <script lang="ts">
-	import { createEventDispatcher, setContext } from 'svelte'
+	import { setContext } from 'svelte'
 	import type { ListInputs, ListContext } from '../../types'
 	import { writable } from 'svelte/store'
 
 	export let index: number
 	export let value: any
 	export let disabled = false
-
+	export let onSet: ((id: string, value: any) => void) | undefined = undefined
+	export let onRemove: ((id: string) => void) | undefined = undefined
 	const ctx = writable({ index, value, disabled })
 
-	const dispatch = createEventDispatcher()
-
 	$: $ctx = { index, value, disabled }
 	setContext<ListContext>('ListWrapperContext', ctx)
 	setContext<ListInputs>('ListInputs', {
 		set: (id: string, value: any) => {
-			dispatch('set', { id, value })
+			onSet?.(id, value)
 		},
 		remove(id) {
-			dispatch('remove', id)
+			onRemove?.(id)
 		}
 	})
 </script>
diff --git a/frontend/src/lib/components/apps/components/layout/RowWrapper.svelte b/frontend/src/lib/components/apps/components/layout/RowWrapper.svelte
index 37574a53b5..105bce92c2 100644
--- a/frontend/src/lib/components/apps/components/layout/RowWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/layout/RowWrapper.svelte
@@ -1,24 +1,25 @@
 <script lang="ts">
-	import { createEventDispatcher, setContext } from 'svelte'
+	import { setContext } from 'svelte'
 	import type { ListInputs, ListContext } from '../../types'
 	import { writable } from 'svelte/store'
 
 	export let index: number
 	export let value: any
 	export let disabled = false
+	export let onSet: (id: string, value: any) => void
+	export let onRemove: (id: string) => void
 
 	const ctx = writable({ index, value, disabled })
 
 	$: $ctx = { index, value, disabled }
 
-	const dispatch = createEventDispatcher()
 	setContext<ListContext>('RowWrapperContext', ctx)
 	setContext<ListInputs>('RowInputs', {
 		set: (id: string, value: any) => {
-			dispatch('set', { id, value })
+			onSet(id, value)
 		},
 		remove(id) {
-			dispatch('remove', id)
+			onRemove(id)
 		}
 	})
 </script>