Merge pull request #2063 from undb-io/release/v1.0.0-88

undb-io · Sep 24, 2024 · 3f9a94a · 3f9a94a
2 parents 18f04b7 + b4286ea
commit 3f9a94a
Show file tree

Hide file tree

Showing 44 changed files with 1,664 additions and 223 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Changelog
 
+## v1.0.0-88
+
+
+### 🩹 Fixes
+
+- Fix kanban card ui ([129bc9b](https://github.com/undb-io/undb/commit/129bc9b))
+
+### ❤️ Contributors
+
+- Nichenqin ([@nichenqin](http://github.com/nichenqin))
+
 ## v1.0.0-87
 
 

diff --git a/apps/frontend/src/lib/components/blocks/create-record/create-record.svelte b/apps/frontend/src/lib/components/blocks/create-record/create-record.svelte
@@ -8,11 +8,12 @@
   import { zodClient } from "sveltekit-superforms/adapters"
   import { toast } from "svelte-sonner"
   import { derived, type Readable } from "svelte/store"
-  import { FormIdVO, RecordDO, RecordIdVO, TableDo } from "@undb/table"
+  import { FormIdVO, ID_TYPE, RecordDO, RecordIdVO, TableDo } from "@undb/table"
   import autoAnimate from "@formkit/auto-animate"
   import { cn } from "$lib/utils"
   import { defaultRecordValues, getRecordsStore } from "$lib/store/records.store"
   import { useMediaQuery } from "$lib/store/media-query.store"
+  import IdControl from "../field-control/id-control.svelte"
 
   // beforeNavigate(({ cancel }) => {
   //   if ($tainted) {
@@ -55,17 +56,18 @@
     })),
   )
 
-  const createRecord = (values: any) => {
+  const createRecord = ({ id, ...values }: any) => {
     $createRecordMutation.mutate({
       tableId: $table.id.value,
+      id,
       values,
     })
   }
 
-  $: defaultValue = $table.getDefaultValues(
-    formId ? new FormIdVO(formId) : undefined,
-    $defaultRecordValues ?? undefined,
-  )
+  $: defaultValue = {
+    ...$table.getDefaultValues(formId ? new FormIdVO(formId) : undefined, $defaultRecordValues ?? undefined),
+    [ID_TYPE]: null,
+  }
 
   const form = superForm(defaults(defaultValue, zodClient(schema)), {
     SPA: true,
@@ -98,11 +100,37 @@
     // TODO: get creatable fields
     .filter((f) => f.type !== "button")
 
+  $: idField = $table.schema.getIdField()
+
   $: tempRecord = RecordDO.fromJSON($table, { id: RecordIdVO.create().value, values: $formData })
 </script>
 
 <form method="POST" use:enhance id="createRecord" enctype="multipart/form-data" class="my-4 space-y-4">
   <ul use:autoAnimate class={cn("space-y-4", $mediaQuery ? "space-y-2" : "space-y-4")}>
+    {#if idField}
+      <Form.Field class={cn("flex gap-4 space-y-0", $mediaQuery ? "flex-col" : "")} {form} name={ID_TYPE}>
+        <Form.Control let:attrs>
+          <Form.Label class="flex h-4 w-48 items-center justify-between gap-2 pt-4">
+            <div data-field-id={ID_TYPE} class="flex items-center gap-2">
+              <FieldIcon type={ID_TYPE} class="h-4 w-4" />
+              <span>ID</span>
+            </div>
+          </Form.Label>
+          <div class="min-h-9 flex-1">
+            <IdControl
+              {...attrs}
+              bind:value={$formData[ID_TYPE]}
+              tableId={$table.id.value}
+              field={idField}
+              class={cn($errors[ID_TYPE] && "border-red-500 focus-visible:ring-0")}
+              tabIndex={-1}
+              placeholder="Leave blank to auto generate..."
+            />
+            <Form.FieldErrors class="mt-2" />
+          </div>
+        </Form.Control>
+      </Form.Field>
+    {/if}
     {#each fields as field}
       {@const shouldShow = !tableForm || tableForm.getShouldShowField(field.id.value, $table.schema, tempRecord)}
       {#if shouldShow}

diff --git a/apps/frontend/src/lib/components/blocks/field-control/button-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/button-control.svelte
@@ -32,7 +32,8 @@
     },
   })
 
-  function handleClick() {
+  function handleClick(e: Event) {
+    e.stopPropagation()
     const option = field.option.into(undefined)
     if (!option) return
     const action = option.action
@@ -49,7 +50,7 @@
 </script>
 
 <div class={$$restProps.class}>
-  <Button disabled={$updateCell.isPending} on:click={handleClick} variant="outline" class="w-full">
+  <Button disabled={$updateCell.isPending} on:click={handleClick} variant="outline" class="w-full" size="sm">
     {#if $updateCell.isPending}
       <LoaderCircleIcon className="h-5 w-5 animate-spin" />
     {:else}

diff --git a/apps/frontend/src/lib/components/blocks/field-control/reference-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/reference-control.svelte
@@ -26,18 +26,26 @@
 </script>
 
 <div class="flex gap-1 overflow-hidden">
-  <ForeignRecordsPickerDropdown {readonly} {field} {tableId} {recordId} bind:isSelected={hasValue} bind:selected>
+  <ForeignRecordsPickerDropdown
+    let:builder
+    {readonly}
+    {field}
+    {tableId}
+    {recordId}
+    bind:isSelected={hasValue}
+    bind:selected
+  >
     {#if hasValueReactive}
-      <Button size="xs" variant="link" class="px-0">
+      <Button size="xs" variant="link" class="px-0" builders={[builder]}>
         {$selected.length} Linked Records
       </Button>
     {:else}
-      <Button size="xs" variant="link" type="button" class="px-0">+ Link Records</Button>
+      <Button size="xs" variant="link" type="button" class="px-0" builders={[builder]}>+ Link Records</Button>
     {/if}
   </ForeignRecordsPickerDropdown>
   {#if hasValueReactive}
-    <ForeignRecordsPickerDropdown {field} {tableId} {recordId} bind:selected isSelected={false}>
-      <Button variant="link" class="px-2" size="xs">+ Link Records</Button>
+    <ForeignRecordsPickerDropdown {field} {tableId} {recordId} bind:selected isSelected={false} let:builder>
+      <Button variant="link" class="px-2" size="xs" builders={[builder]}>+ Link Records</Button>
     </ForeignRecordsPickerDropdown>
   {/if}
 </div>
diff --git a/apps/frontend/src/lib/components/blocks/field-value/reference-field.svelte b/apps/frontend/src/lib/components/blocks/field-value/reference-field.svelte
@@ -12,13 +12,22 @@
 </script>
 
 <div class="flex gap-1 overflow-hidden">
-  <ForeignRecordsPickerDropdown shouldUpdate {field} {tableId} {recordId} bind:isSelected={hasValue}>
+  <ForeignRecordsPickerDropdown shouldUpdate {field} {tableId} {recordId} bind:isSelected={hasValue} let:builder>
     {#if hasValue}
-      <Button size="xs" variant="link" class="px-0">
+      <Button size="xs" variant="link" class="px-0" builders={[builder]} on:click={(e) => e.stopPropagation()}>
         {value?.length} Linked Records
       </Button>
     {:else}
-      <Button size="xs" variant="link" type="button" class="px-0">+ Link Records</Button>
+      <Button
+        size="xs"
+        variant="link"
+        type="button"
+        class="px-0"
+        builders={[builder]}
+        on:click={(e) => e.stopPropagation()}
+      >
+        + Link Records
+      </Button>
     {/if}
   </ForeignRecordsPickerDropdown>
 </div>
diff --git a/apps/frontend/src/lib/components/blocks/field-value/rollup-field.svelte b/apps/frontend/src/lib/components/blocks/field-value/rollup-field.svelte
@@ -13,26 +13,40 @@
   {#if !!value}
     {#if fn === "lookup" && Array.isArray(value)}
       <div class="flex overflow-x-auto">
-        {#each value as item}
-          {#if !!item}
-            <span
-              class="me-2 rounded bg-gray-200 px-1 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
-            >
-              {item}
-            </span>
-          {:else}
-            <span
-              class="text-muted-foreground me-2 rounded bg-gray-200 px-1 py-0.5 text-xs font-medium dark:bg-gray-700 dark:text-gray-300"
-            >
-              Unamed
-            </span>
-          {/if}
-        {/each}
+        {#if !value.length}
+          <span
+            class="text-muted-foreground me-2 rounded px-1 py-0.5 text-xs font-medium dark:bg-gray-700 dark:text-gray-300"
+          >
+            -
+          </span>
+        {:else}
+          {#each value as item}
+            {#if !!item}
+              <span
+                class="me-2 rounded bg-gray-200 px-1 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
+              >
+                {item}
+              </span>
+            {:else}
+              <span
+                class="text-muted-foreground me-2 rounded bg-gray-200 px-1 py-0.5 text-xs font-medium dark:bg-gray-700 dark:text-gray-300"
+              >
+                Unamed
+              </span>
+            {/if}
+          {/each}
+        {/if}
       </div>
     {:else if isNumber(value)}
-      <span>
+      <span class="text-xs font-medium">
         {value}
       </span>
     {/if}
+  {:else}
+    <span
+      class="text-muted-foreground me-2 rounded px-1 py-0.5 text-xs font-medium dark:bg-gray-700 dark:text-gray-300"
+    >
+      -
+    </span>
   {/if}
 </div>
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/reference-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/reference-cell.svelte
@@ -40,13 +40,14 @@
         {recordId}
         bind:isSelected={hasValue}
         bind:selected
+        let:builder
       >
         {#if hasValueReactive}
-          <Button size="xs" variant="link" class="px-0">
+          <Button size="xs" variant="link" class="px-0" builders={[builder]}>
             {$selected.length} Linked Records
           </Button>
         {:else}
-          <Button size="xs" variant="link" type="button" class="px-0">+ Link Records</Button>
+          <Button size="xs" variant="link" type="button" class="px-0" builders={[builder]}>+ Link Records</Button>
         {/if}
       </ForeignRecordsPickerDropdown>
     </div>
@@ -60,8 +61,9 @@
         {recordId}
         bind:selected
         isSelected={false}
+        let:builder
       >
-        <Button variant="link" class="px-2">+</Button>
+        <Button variant="link" class="px-2" builders={[builder]}>+</Button>
       </ForeignRecordsPickerDropdown>
     {/if}
   </div>

diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/rollup-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/rollup-cell.svelte
@@ -22,13 +22,13 @@
           {#each value as item}
             {#if !!item}
               <span
-                class="me-2 rounded bg-gray-200 px-1 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
+                class="me-2 truncate rounded bg-gray-200 px-2 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
               >
                 {item}
               </span>
             {:else}
               <span
-                class="text-muted-foreground me-2 rounded bg-gray-200 px-1 py-0.5 text-xs font-medium dark:bg-gray-700 dark:text-gray-300"
+                class="text-muted-foreground me-2 rounded bg-gray-200 px-2 py-0.5 text-xs font-medium dark:bg-gray-700 dark:text-gray-300"
               >
                 Unamed
               </span>
@@ -54,13 +54,13 @@
           {#each value as item}
             {#if !!item}
               <span
-                class="me-2 rounded bg-gray-100 px-1 py-1 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
+                class="me-2 rounded bg-gray-100 px-2 py-1 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
               >
                 {item}
               </span>
             {:else}
               <span
-                class="text-muted-foreground me-2 rounded bg-gray-100 px-1 py-1 text-xs font-medium dark:bg-gray-700 dark:text-gray-300"
+                class="text-muted-foreground me-2 rounded bg-gray-100 px-2 py-1 text-xs font-medium dark:bg-gray-700 dark:text-gray-300"
               >
                 Unamed
               </span>

diff --git a/apps/frontend/src/lib/components/blocks/import-table/import-table.svelte b/apps/frontend/src/lib/components/blocks/import-table/import-table.svelte
@@ -183,7 +183,7 @@
 
     if (step === 1) {
       if (!file || !data) return
-      const baseId = $currentBase?.id
+      const baseId = $currentBase?.id ?? $baseId
       if (!baseId) return
 
       $createTable.mutate({

diff --git a/apps/frontend/src/lib/components/blocks/kanban-view/kanban-card.svelte b/apps/frontend/src/lib/components/blocks/kanban-view/kanban-card.svelte
@@ -16,8 +16,8 @@
 
   const r = queryParam("r")
 
-  let values = record.flatten()
-  let displayValues = record.displayValues?.toJSON() ?? {}
+  $: values = record.flatten()
+  $: displayValues = record.displayValues?.toJSON() ?? {}
 
   $: colorSpec = color?.getSpec($table.schema).into(undefined)
   $: isMatch = colorSpec ? record.match(colorSpec) : false
@@ -28,32 +28,31 @@
   on:click={() => ($r = record.id.value)}
   disabled={readonly}
   data-record-id={record.id.value}
-  class={cn(
-    "relative mb-2 flex w-full flex-col space-y-2 overflow-hidden rounded bg-white p-2 shadow",
-    isMatch && "pl-3",
-  )}
+  class={cn("relative mb-2 flex w-full flex-col overflow-hidden rounded bg-white p-2 shadow", isMatch && "pl-3")}
 >
+  <div class="flex w-full flex-col space-y-2 overflow-hidden">
+    {#each fields as field, idx (field.id.value)}
+      <div class="flex w-full items-center gap-2 overflow-hidden">
+        <Tooltip.Root>
+          <Tooltip.Trigger class="w-full text-left">
+            <FieldValue
+              {field}
+              tableId={$table.id.value}
+              recordId={record.id.value}
+              value={values[field.id.value]}
+              type={field.type}
+              displayValue={displayValues[field.id.value]}
+              class={cn("w-full truncate text-left", idx === 0 ? "text-md font-medium" : "")}
+            />
+          </Tooltip.Trigger>
+          <Tooltip.Content>
+            <p>{field.name.value}</p>
+          </Tooltip.Content>
+        </Tooltip.Root>
+      </div>
+    {/each}
+  </div>
   {#if isMatch}
     <div class={cn("absolute left-0 top-0 h-full w-1", condition && getBgColor(condition.option.color))}></div>
   {/if}
-  {#each fields as field}
-    <div class="flex w-full items-center gap-2">
-      <Tooltip.Root>
-        <Tooltip.Trigger class="w-full text-left">
-          <FieldValue
-            {field}
-            tableId={$table.id.value}
-            recordId={record.id.value}
-            value={values[field.id.value]}
-            type={field.type}
-            displayValue={displayValues[field.id.value]}
-            class="w-full truncate text-left"
-          />
-        </Tooltip.Trigger>
-        <Tooltip.Content>
-          <p>{field.name.value}</p>
-        </Tooltip.Content>
-      </Tooltip.Root>
-    </div>
-  {/each}
 </button>