fix: fix kanban lane dnd

undb-io · Nov 24, 2024 · 0526e97 · 0526e97
1 parent 04f5067
commit 0526e97
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 11 deletions.
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-cell.svelte
@@ -97,6 +97,6 @@
   )}
   onValueChange={(v) => {
     value = v
-    recordsStore.setRecordValue(recordId, field.id.value, v)
+    recordsStore.setRecordValue(recordId, field, v)
   }}
 />
diff --git a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte b/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte
@@ -6,6 +6,8 @@
   import {
     FieldIdVo,
     KanbanView,
+    RecordDO,
+    SelectFieldValue,
     Records,
     SelectEqual,
     SelectField,
@@ -122,10 +124,12 @@
 
   let laneElement: HTMLElement
 
+  const spec = Some(new SelectEqual(option?.id ?? null, new FieldIdVo(fieldId)))
+
   const updateRecord = createMutation({
     mutationFn: trpc.record.update.mutate,
-    onSuccess: (data, variables, context) => {
-      recordsStore?.invalidateRecord($table, variables.id)
+    onError: (error, variables, context) => {
+      toast.error(error.message)
     },
   })
 
@@ -170,6 +174,11 @@
       },
     })
   }
+  let records = derived(recordsStore, ($recordsStore) =>
+    [...$recordsStore.records.values()].filter((record) =>
+      spec.isSome() ? spec.unwrap().isSatisfiedBy(record) : true,
+    ),
+  )
 
   onMount(() => {
     if (!shareId && !readonly && laneElement) {
@@ -192,8 +201,14 @@
         onEnd: (evt) => {
           const recordId = evt.item.dataset.recordId
           if (!recordId) return
+          const fromOptionId = evt.from.dataset.optionId ?? null
           const optionId = evt.to.dataset.optionId ?? null
 
+          recordsStore.setRecordValue(recordId, field, optionId)
+          if (fromOptionId !== optionId) {
+            evt.item.remove()
+          }
+
           $updateRecord.mutate({
             tableId,
             id: recordId,
@@ -216,9 +231,6 @@
     recordsStore.clearRecords()
   })
 
-  let storeGetRecords = recordsStore.getRecords
-  $: recordDos = $storeGetRecords(Some(new SelectEqual(option?.id ?? null, new FieldIdVo(fieldId))))
-
   $: fields = $table.getOrderedVisibleFields($viewId) ?? []
 
   let updateOptionDialogOpen = false
@@ -330,7 +342,7 @@
       >
         {#if $hasPermission("record:create")}
           {#if $query.isFetchedAfterMount}
-            {#if recordDos.length > 0}
+            {#if $records.length > 0}
               <Button on:click={onCreateRecord} variant="outline" size="sm" class="w-full">
                 <PlusIcon class="text-muted-foreground mr-2 h-4 w-4 font-semibold" />
               </Button>
@@ -359,7 +371,7 @@
         {:else if $query.isError}
           <p>error: {$query.error.message}</p>
         {:else}
-          {#each recordDos as record (record.id.value)}
+          {#each $records as record (record.id.value)}
             <KanbanCard {readonly} {record} {fields} {color} {r} />
           {/each}
           {#if $query.hasNextPage && $query.isFetchedAfterMount}

diff --git a/apps/frontend/src/lib/store/records.store.ts b/apps/frontend/src/lib/store/records.store.ts
@@ -1,6 +1,14 @@
 import { trpc } from "$lib/trpc/client"
 import type { Option } from "@undb/domain"
-import { RecordComositeSpecification, RecordDO, TableDo, type IRecordValues, type Records } from "@undb/table"
+import {
+  Field,
+  FieldValueFactory,
+  RecordComositeSpecification,
+  RecordDO,
+  TableDo,
+  type IRecordValues,
+  type Records,
+} from "@undb/table"
 import { getContext, setContext } from "svelte"
 import { derived, writable } from "svelte/store"
 import { queryParam, ssp } from "sveltekit-search-params"
@@ -23,6 +31,7 @@ export const createRecordsStore = () => {
         const id = record.id.value
         if (store.records.has(id)) {
           store.records.set(id, record)
+          store.records = store.records
           data.update((data) => data.map((d) => (d.id === id ? record.flatten() : d)))
         } else {
           store.records.set(id, record)
@@ -41,12 +50,14 @@ export const createRecordsStore = () => {
     return store.update((store) => {
       if (store.records.has(record.id.value)) {
         store.records.set(record.id.value, record)
+        store.records = store.records
         data.update((data) => {
           return data.map((d) => (d.id === record.id.value ? record.flatten() : d))
         })
         return store
       } else {
         store.records.set(record.id.value, record)
+        store.records = store.records
         store.ids.push(record.id.value)
         data.update((data) => {
           data.push(record.flatten())
@@ -57,12 +68,20 @@ export const createRecordsStore = () => {
     })
   }
 
-  const setRecordValue = (id: string, key: string, value: any) => {
+  const setRecordValue = (id: string, field: Field, value: any) => {
+    const v = FieldValueFactory.fromJSON(field, value).into(undefined)
+    if (!v) return
+
     return store.update((store) => {
       if (store.records.has(id)) {
         data.update((data) => {
-          return data.map((d) => (d.id === id ? { ...d, [key]: value } : d))
+          const updated = data.map((d) => (d.id === id ? { ...d, [field.id.value]: v.value } : d))
+          return updated
         })
+        const record = store.records.get(id)!
+        record.values.setValue(field.id, v)
+        store.records.set(record.id.value, record)
+        store.records = store.records
       }
       return store
     })