From cedc6ab653b90209b423315de093458ef20ce3f8 Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Thu, 6 Jul 2023 09:21:29 +0800
Subject: [PATCH] fix: fix view config set field

---
 .../src/lib/calendar/CalendarConfig.svelte    | 30 +++++++++++++++----
 apps/frontend/src/lib/tree/TreeConfig.svelte  | 19 +++++++++---
 .../frontend/src/lib/view/KanbanConfig.svelte | 29 ++++++++++++++----
 3 files changed, 64 insertions(+), 14 deletions(-)

diff --git a/apps/frontend/src/lib/calendar/CalendarConfig.svelte b/apps/frontend/src/lib/calendar/CalendarConfig.svelte
index 8ef7048b1..afa953f65 100644
--- a/apps/frontend/src/lib/calendar/CalendarConfig.svelte
+++ b/apps/frontend/src/lib/calendar/CalendarConfig.svelte
@@ -7,6 +7,7 @@
 	import { configViewModal, createFieldInitial, createFieldModal } from '$lib/store/modal'
 	import { t } from '$lib/i18n'
 	import { invalidate } from '$app/navigation'
+	import { FieldId } from '@undb/core'
 
 	const table = getTable()
 	const view = getView()
@@ -47,9 +48,11 @@
 </div>
 
 {#if calendarFields.length}
-	<Hr class="my-6">
-		<span class="text-gray-400 text-sm font-normal">{$t('or', { ns: 'common' })}</span></Hr
-	>
+	<div class="my-4">
+		<Hr>
+			<span class="text-gray-400 text-sm font-normal">{$t('or', { ns: 'common' })}</span>
+		</Hr>
+	</div>
 {/if}
 
 <div class="flex flex-col justify-center gap-2">
@@ -58,10 +61,18 @@
 		color="light"
 		class="flex gap-2"
 		on:click={() => {
+			const id = FieldId.createId()
 			$createFieldInitial = {
+				id,
 				type: 'date',
 			}
-			createFieldModal.open()
+			createFieldModal.open(async () => {
+				$setField.mutate({
+					tableId: $table.id.value,
+					viewId: $view.id.value,
+					field: id,
+				})
+			})
 		}}
 	>
 		<i class="ti ti-plus" />
@@ -74,10 +85,19 @@
 		color="light"
 		class="flex gap-2"
 		on:click={() => {
+			const id = FieldId.createId()
 			$createFieldInitial = {
+				id,
 				type: 'date-range',
 			}
-			createFieldModal.open()
+
+			createFieldModal.open(async () => {
+				$setField.mutate({
+					tableId: $table.id.value,
+					viewId: $view.id.value,
+					field: id,
+				})
+			})
 		}}
 	>
 		<i class="ti ti-plus" />
diff --git a/apps/frontend/src/lib/tree/TreeConfig.svelte b/apps/frontend/src/lib/tree/TreeConfig.svelte
index 6b1311d2a..1ca12743b 100644
--- a/apps/frontend/src/lib/tree/TreeConfig.svelte
+++ b/apps/frontend/src/lib/tree/TreeConfig.svelte
@@ -7,6 +7,7 @@
 	import { configViewModal, createFieldInitial, createFieldModal } from '$lib/store/modal'
 	import { t } from '$lib/i18n'
 	import { invalidate } from '$app/navigation'
+	import { FieldId } from '@undb/core'
 
 	const table = getTable()
 	const view = getView()
@@ -42,9 +43,11 @@
 </div>
 
 {#if treeFields.length}
-	<Hr class="my-6">
-		<span class="text-gray-400 text-sm font-normal">{$t('or', { ns: 'common' })}</span></Hr
-	>
+	<div class="my-4">
+		<Hr>
+			<span class="text-gray-400 text-sm font-normal">{$t('or', { ns: 'common' })}</span>
+		</Hr>
+	</div>
 {/if}
 
 <div class="flex flex-col justify-center gap-2">
@@ -53,10 +56,18 @@
 		color="light"
 		class="flex gap-2"
 		on:click={() => {
+			const id = FieldId.createId()
 			$createFieldInitial = {
+				id,
 				type: 'tree',
 			}
-			createFieldModal.open()
+			createFieldModal.open(async () => {
+				$setField.mutate({
+					tableId: $table.id.value,
+					viewId: $view.id.value,
+					field: id,
+				})
+			})
 		}}
 	>
 		<i class="ti ti-plus" />
diff --git a/apps/frontend/src/lib/view/KanbanConfig.svelte b/apps/frontend/src/lib/view/KanbanConfig.svelte
index 130b068cd..788364ee6 100644
--- a/apps/frontend/src/lib/view/KanbanConfig.svelte
+++ b/apps/frontend/src/lib/view/KanbanConfig.svelte
@@ -7,6 +7,7 @@
 	import { configViewModal, createFieldInitial, createFieldModal } from '$lib/store/modal'
 	import { t } from '$lib/i18n'
 	import { invalidate } from '$app/navigation'
+	import { FieldId } from '@undb/core'
 
 	const table = getTable()
 	const view = getView()
@@ -41,9 +42,11 @@
 </div>
 
 {#if kanbanFields.length}
-	<Hr class="my-6">
-		<span class="text-gray-400 text-sm font-normal">{$t('or', { ns: 'common' })}</span></Hr
-	>
+	<div class="my-4">
+		<Hr>
+			<span class="text-gray-400 text-sm font-normal">{$t('or', { ns: 'common' })}</span>
+		</Hr>
+	</div>
 {/if}
 
 <div class="flex flex-col justify-center gap-2">
@@ -52,10 +55,18 @@
 		color="light"
 		class="flex gap-2"
 		on:click={() => {
+			const id = FieldId.createId()
 			$createFieldInitial = {
+				id,
 				type: 'select',
 			}
-			createFieldModal.open()
+			createFieldModal.open(async () => {
+				$setField.mutate({
+					tableId: $table.id.value,
+					viewId: $view.id.value,
+					field: id,
+				})
+			})
 		}}
 	>
 		<i class="ti ti-plus" />
@@ -68,10 +79,18 @@
 		color="light"
 		class="flex gap-2"
 		on:click={() => {
+			const id = FieldId.createId()
 			$createFieldInitial = {
+				id,
 				type: 'date',
 			}
-			createFieldModal.open()
+			createFieldModal.open(async () => {
+				$setField.mutate({
+					tableId: $table.id.value,
+					viewId: $view.id.value,
+					field: id,
+				})
+			})
 		}}
 	>
 		<i class="ti ti-plus" />