Skip to content

Commit

Permalink
feat: init gantt view
Browse files Browse the repository at this point in the history
  • Loading branch information
nichenqin committed Jul 5, 2023
1 parent 237942c commit fcfd4b2
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 73 deletions.
3 changes: 2 additions & 1 deletion apps/frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"@tanstack/svelte-query": "^4.29.19",
"@trpc/client": "^10.33.0",
"@trpc/server": "^10.33.0",
"@types/frappe-gantt": "^0.6.1",
"@types/js-cookie": "^3.0.3",
"@types/lodash-es": "^4.17.7",
"@types/nprogress": "^0.2.0",
Expand All @@ -50,6 +51,7 @@
"eslint-plugin-svelte": "^2.32.2",
"flowbite": "^1.6.6",
"flowbite-svelte": "^0.39.1",
"frappe-gantt": "^0.6.1",
"htm": "^3.1.1",
"i18next": "^23.0.0",
"i18next-browser-languagedetector": "^7.1.0",
Expand All @@ -71,7 +73,6 @@
"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",
Expand Down
4 changes: 2 additions & 2 deletions apps/frontend/src/lib/gantt/GanttIndex.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
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()
Expand All @@ -12,8 +13,7 @@
</script>

{#if field}
gantt!!!
<!-- <svelte:component this={map[field.type]} {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">
Expand Down
47 changes: 47 additions & 0 deletions apps/frontend/src/lib/gantt/GanttView.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<script lang="ts">
import { getTable, listRecordFn } from '$lib/store/table'
import { RecordFactory, type DateRangeField } from '@undb/core'
import { endOfMonth, startOfMonth } from 'date-fns'
import Gantt from 'frappe-gantt'
const table = getTable()
export let field: DateRangeField
export let ele: HTMLElement | undefined
let start = startOfMonth(new Date())
let end = endOfMonth(new Date())
const listRecords = $listRecordFn([
{
path: field.id.value,
type: field.type,
operator: '$between',
value: [start.toISOString(), end.toISOString()],
},
])
$: records = RecordFactory.fromQueryRecords($listRecords?.data?.records ?? [], $table.schema.toIdMap()) ?? []
$: tasks = records.map((r) => ({
id: r.id.value,
name: r.getDisplayFieldsValue($table),
start: r.valuesJSON[field.id.value]?.[0],
end: r.valuesJSON[field.id.value]?.[1],
progress: 100,
dependencies: '',
}))
let gantt: Gantt | undefined
$: if (ele && tasks.length) {
gantt = new Gantt(ele, tasks, {
view_mode: 'Day',
})
}
</script>

{#if $listRecords.isLoading}
<span>loading</span>
{:else}
<div class="h-full" bind:this={ele} />
{/if}
84 changes: 14 additions & 70 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit fcfd4b2

Please sign in to comment.