Merge pull request #1297 from undb-xyz/fix/view-config-ui

fix: fix view config set field
undb-io · Jul 6, 2023 · d87c685 · d87c685
2 parents c05018c + cedc6ab
commit d87c685
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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" />