Merge pull request #1304 from undb-xyz/release/v0.5.17

undb-io · Jul 6, 2023 · c5aef44 · c5aef44
2 parents d1be169 + a0a073a
commit c5aef44
Show file tree

Hide file tree

Showing 257 changed files with 3,244 additions and 13,999 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,5 @@
+## v0.5.17
+
 ## v0.5.16
 
 ## v0.5.15

diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@
 - 🔧 Deploy with variant adapters
 - 🎮 Developer friendly. Provide openapi / webhooks / realtime subscriptions / sdk(soon) / erd preview and more
 - :sparkles: Multiple built-in field types and variants
-- :city_sunset: Different types of views, including grid, kanban, tree, calendar and more
+- :city_sunset: Different types of views, including grid, kanban, gantt, tree, calendar and more
 
 ## 📚 Tech Stack
 
@@ -64,7 +64,7 @@
 ### Deploy with docker
 
 ```
-docker run -d --name undb -p 4000:4000 --platform linux/x86_64 -v ~/.undb/:/var/opts/.undb ghcr.io/undb-xyz/undb:latest
+docker run -d --name undb -p 4000:4000 --platform linux/x86_64 -v ~/.undb/:/var/opt/.undb ghcr.io/undb-xyz/undb:latest
 ```
 
 > And then you can visit http://localhost:4000 and get started

diff --git a/apps/backend/src/core/table/commands/index.ts b/apps/backend/src/core/table/commands/index.ts
@@ -27,6 +27,7 @@ import { SetFieldSortCommandHandler } from './set-field-sort.command.handler.js'
 import { SetFieldVisibilityCommandHandler } from './set-field-visibility.command.handler.js'
 import { SetFieldWidthCommandHandler } from './set-field-width.command.handler.js'
 import { SetFiltersCommandHandler } from './set-filters.command.handler.js'
+import { SetGanttFieldCommandHandler } from './set-gantt-field.command.handler.js'
 import { SetKanbanFieldCommandHandler } from './set-kanban-field.command.handler.js'
 import { SetPinnedFieldsCommandHandler } from './set-pinned-fields.command.handler.js'
 import { SetRowHeightCommandHandler } from './set-row-height.command.handler.js'
@@ -86,4 +87,5 @@ export const commandHandlers = [
   DeleteWidgetCommandHandler,
   DuplicateFieldCommandHandler,
   ExportGridCommandHandler,
+  SetGanttFieldCommandHandler,
 ]
diff --git a/apps/backend/src/core/table/commands/set-gantt-field.command.handler.ts b/apps/backend/src/core/table/commands/set-gantt-field.command.handler.ts
@@ -0,0 +1,15 @@
+import type { ICommandHandler } from '@nestjs/cqrs'
+import { CommandHandler } from '@nestjs/cqrs'
+import { type ITableRepository } from '@undb/core'
+import { SetGanttFieldCommandHandler as DomainHandler, SetGanttFieldCommand } from '@undb/cqrs'
+import { InjectTableRepository } from '../adapters/index.js'
+
+@CommandHandler(SetGanttFieldCommand)
+export class SetGanttFieldCommandHandler extends DomainHandler implements ICommandHandler<SetGanttFieldCommand> {
+  constructor(
+    @InjectTableRepository()
+    protected readonly repo: ITableRepository,
+  ) {
+    super(repo)
+  }
+}
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -71,6 +71,7 @@
 		"svelte-check": "^3.4.4",
 		"svelte-copy": "^1.4.1",
 		"svelte-dnd-action": "^0.9.22",
+		"svelte-gantt": "4.0.9-beta",
 		"svelte-grid": "^5.1.1",
 		"svelte-i18next": "^2.0.0",
 		"svelte-jsoneditor": "^0.17.8",
@@ -79,7 +80,7 @@
 		"svelte-preprocess": "^5.0.4",
 		"svelte-previous": "^2.1.3",
 		"svelte-tiny-virtual-list": "^2.0.5",
-		"sveltekit-superforms": "^1.1.2",
+		"sveltekit-superforms": "^0.8.7",
 		"svelvet": "^8.0.8",
 		"tailwindcss": "^3.3.2",
 		"trpc-svelte-query": "^1.0.1",

diff --git a/apps/frontend/src/app.html b/apps/frontend/src/app.html
@@ -10,7 +10,7 @@
 		%sveltekit.head%
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/tabler-icons.min.css" />
 	</head>
-	<body data-sveltekit-preload-data="hover" class="h-full dark:bg-gray-900">
+	<body data-sveltekit-preload-data="hover" class="h-full dark:bg-gray-900 overflow-x-hidden">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/apps/frontend/src/app.postcss b/apps/frontend/src/app.postcss
@@ -2,3 +2,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.root,
+#root,
+#docs-root {
+	--primary-color: #fff;
+	--secondary-color: #000;
+}
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/field/MutateFieldComponent/Tree.svelte b/apps/frontend/src/lib/field/MutateFieldComponent/Tree.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Input, Label } from 'flowbite-svelte'
-	import { fieldProxy, type SuperForm } from 'sveltekit-superforms/client'
+	import { fieldProxy, formFieldProxy, type SuperForm } from 'sveltekit-superforms/client'
 	import type { UnwrapEffects } from 'sveltekit-superforms'
 	import DisplayFieldsPicker from '../FieldInputs/DisplayFieldsPicker.svelte'
 	import type { Writable } from 'svelte/store'

diff --git a/apps/frontend/src/lib/gantt/GanttConfig.svelte b/apps/frontend/src/lib/gantt/GanttConfig.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { getTable, getView } from '$lib/store/table'
+	import { Button, Hr, Radio } from 'flowbite-svelte'
+	import FieldIcon from '$lib/field/FieldIcon.svelte'
+	import { trpc } from '$lib/trpc/client'
+	import { writable } from 'svelte/store'
+	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()
+	$: ganttFields = $table.schema.ganttFields
+
+	const ganttField = writable($view.ganttFieldIdString)
+	const setField = trpc().table.view.gantt.setField.mutation({
+		async onSuccess(data, variables, context) {
+			await invalidate(`table:${$table.id.value}`)
+			$view.ganttFieldIdString = $ganttField
+			configViewModal.close()
+		},
+	})
+	const onChange = async () => {
+		if (ganttField) {
+			$setField.mutate({
+				tableId: $table.id.value,
+				viewId: $view.id.value,
+				field: $ganttField,
+			})
+		}
+	}
+</script>
+
+<div class="flex flex-col space-y-2">
+	{#each ganttFields as field}
+		<Radio bind:group={$ganttField} name="ganttFieldId" value={field.id.value} on:change={onChange} class="space-x-1">
+			<FieldIcon type={field.type} />
+			<span>{field.name.value}</span>
+		</Radio>
+	{/each}
+</div>
+
+{#if ganttFields.length}
+	<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">
+	<Button
+		size="xs"
+		color="light"
+		class="flex gap-2"
+		on:click={() => {
+			const id = FieldId.createId()
+			$createFieldInitial = {
+				id,
+				type: 'date-range',
+			}
+
+			createFieldModal.open(async () => {
+				$setField.mutate({
+					tableId: $table.id.value,
+					viewId: $view.id.value,
+					field: id,
+				})
+			})
+		}}
+	>
+		<i class="ti ti-plus" />
+		<span>{$t('Create New Date Range Field')}</span>
+		<FieldIcon type="select" />
+	</Button>
+</div>
diff --git a/apps/frontend/src/lib/gantt/GanttIndex.svelte b/apps/frontend/src/lib/gantt/GanttIndex.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { getTable, getView } from '$lib/store/table'
+	import { Card } from 'flowbite-svelte'
+	import type { DateRangeField } from '@undb/core'
+	import GanttConfig from './GanttConfig.svelte'
+	import GanttView from './GanttView.svelte'
+
+	const table = getTable()
+	const view = getView()
+
+	$: fieldId = $view.ganttFieldIdString
+	$: field = fieldId ? ($table.schema.getFieldById(fieldId).into() as DateRangeField | undefined) : undefined
+</script>
+
+{#if field}
+	<GanttView {field} />
+{:else}
+	<div class="flex items-center justify-center h-screen w-full bg-gray-100 dark:bg-slate-800/80">
+		<Card class="flex-1">
+			<GanttConfig />
+		</Card>
+	</div>
+{/if}
diff --git a/apps/frontend/src/lib/gantt/GanttToolbar.svelte b/apps/frontend/src/lib/gantt/GanttToolbar.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import ShareViewButton from '$lib/share/ShareViewButton.svelte'
+	import CreateRecordButton from '$lib/table/CreateRecordButton.svelte'
+	import FilterMenu from '$lib/table/FilterMenu.svelte'
+</script>
+
+<CreateRecordButton />
+<FilterMenu />
+<ShareViewButton />