fix: fix calendar virtual list

undb-io · Nov 19, 2024 · 9c1f422 · 9c1f422
1 parent 3e7760b
commit 9c1f422
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 31 deletions.
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-records.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-records.svelte
@@ -118,6 +118,7 @@
   $: records = Records.fromJSON($t, rs)
 
   let virtualListEl: HTMLDivElement
+  let virtualItemEls: HTMLDivElement[] = []
 
   $: color = $viewId ? $t.views.getViewById($viewId)?.color.into(undefined) : undefined
 
@@ -127,6 +128,14 @@
     estimateSize: () => 60,
     overscan: 5,
   })
+
+  $: items = $virtualizer.getVirtualItems()
+
+  $: {
+    if (virtualItemEls.length) {
+      virtualItemEls.forEach((el) => $virtualizer.measureElement(el))
+    }
+  }
 </script>
 
 <div class="flex h-full flex-1 flex-col gap-2 overflow-hidden p-2">
@@ -146,21 +155,26 @@
   <div class="flex-1 overflow-auto" bind:this={virtualListEl}>
     {#if !records.isEmpty}
       <div style="position: relative; height: {$virtualizer.getTotalSize()}px; width: 100%;">
-        {#each $virtualizer.getVirtualItems() as row (row.key)}
-          <div
-            style="position: absolute; top: 0; left: 0; width: 100%; height: {row.size}px; transform: translateY({row.start}px);"
-          >
-            <CalendarViewMonthRecord
-              {r}
-              {color}
-              record={records?.records[row.index]}
-              {defaultField}
-              {field}
-              {shareId}
-              {readonly}
-            />
-          </div>
-        {/each}
+        <div
+          class="space-y-2"
+          style="position: absolute; top: 0; left: 0; width: 100%; transform: translateY({items[0]
+            ? items[0].start
+            : 0}px);"
+        >
+          {#each items as row, idx (row.key)}
+            <div bind:this={virtualItemEls[idx]}>
+              <CalendarViewMonthRecord
+                {r}
+                {color}
+                record={records?.records[row.index]}
+                {defaultField}
+                {field}
+                {shareId}
+                {readonly}
+              />
+            </div>
+          {/each}
+        </div>
       </div>
 
       {#if $getRecords.hasNextPage}

diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/select-calendar-field-form.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/select-calendar-field-form.svelte
@@ -12,6 +12,7 @@
   import { invalidate } from "$app/navigation"
   import { hasPermission } from "$lib/store/space-member.store"
   import { CircleCheckBigIcon } from "lucide-svelte"
+  import * as Form from "$lib/components/ui/form"
 
   export let readonly = false
 
@@ -21,14 +22,19 @@
 
   export let view: CalendarView
 
+  let calendar = view.calendar.unwrapOrElse(() => ({ field: undefined, timeScale: "month" }))
+
   const form = superForm(
     defaults(
       {
         tableId: $table.id.value,
         viewId: view.id.value,
         type: "calendar",
         name: view.name.value,
-        calendar: view.calendar.unwrapOrElse(() => ({ field: undefined })),
+        calendar: {
+          ...calendar,
+          timeScale: calendar.timeScale ?? "month",
+        },
       },
       zodClient(updateCalendarViewDTO),
     ),
@@ -38,15 +44,21 @@
       validators: zodClient(updateCalendarViewDTO),
       resetForm: false,
       invalidateAll: false,
+      onSubmit(event) {
+        validateForm({ update: true })
+      },
       onUpdate(event) {
-        if (!event.form.valid) return
+        if (!event.form.valid) {
+          console.log(event.form.errors, event.form.data)
+          return
+        }
 
         $updateViewMutation.mutate(event.form.data)
       },
     },
   )
 
-  const { enhance, form: formData } = form
+  const { enhance, form: formData, validateForm } = form
 
   const updateViewMutation = createMutation({
     mutationFn: trpc.table.view.update.mutate,
@@ -62,19 +74,27 @@
   <form id="select-calendar-field-form" class="space-y-2" use:enhance>
     <div class="grid w-full items-center gap-4">
       <div class="flex flex-col space-y-1.5">
-        <FieldPicker
-          disabled={readonly}
-          placeholder="Select a select type field to group calendar lanes"
-          value={$formData.calendar?.field}
-          onValueChange={(field) => {
-            if ($formData.calendar) {
-              $formData.calendar.field = field
-            } else {
-              $formData.calendar = { field }
-            }
-          }}
-          filter={(f) => fields.map((f) => f.id.value).includes(f.id)}
-        />
+        <Form.Field {form} name="calendar.field">
+          <Form.Control let:attrs>
+            <Form.Label for="calendar.field">Calendar field</Form.Label>
+            <FieldPicker
+              disabled={readonly}
+              placeholder="Select a select type field to group calendar lanes"
+              class="w-full"
+              value={$formData.calendar?.field}
+              onValueChange={(field) => {
+                if ($formData.calendar) {
+                  $formData.calendar.field = field
+                } else {
+                  $formData.calendar = { field }
+                }
+              }}
+              filter={(f) => fields.map((f) => f.id.value).includes(f.id)}
+            />
+          </Form.Control>
+          <Form.Description />
+          <Form.FieldErrors />
+        </Form.Field>
       </div>
     </div>
   </form>