feat: set gantt field

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,
 ]

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)
+  }
+}

apps/frontend/src/lib/gantt/GanttConfig.svelte

@@ -0,0 +1,67 @@
+<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'
+
+	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={() => {
+			$createFieldInitial = {
+				type: 'date-range',
+			}
+			createFieldModal.open()
+		}}
+	>
+		<i class="ti ti-plus" />
+		<span>{$t('Create New Date Range Field')}</span>
+		<FieldIcon type="select" />
+	</Button>
+</div>

apps/frontend/src/lib/gantt/GanttIndex.svelte

@@ -1 +1,23 @@
-<div>gantt</div>
+<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'
+
+	const table = getTable()
+	const view = getView()
+
+	$: fieldId = $view.ganttFieldIdString
+	$: field = fieldId ? ($table.schema.getFieldById(fieldId).into() as DateRangeField | undefined) : undefined
+</script>
+
+{#if field}
+	gantt!!!
+	<!-- <svelte:component this={map[field.type]} {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}

apps/frontend/src/lib/view/ViewIcon.svelte

@@ -17,7 +17,7 @@
 		tree: 'text-green-500',
 		grid: 'text-sky-500',
 		kanban: 'text-orange-500',
-		gantt: 'text--500',
+		gantt: 'text-fuchsia-500',
 		calendar: 'text-green-500',
 		dashboard: 'text-cyan-500',
 	}