Merge pull request #1867 from undb-io/release/v1.0.0-6

Release version v1.0.0-6
undb-io · Aug 11, 2024 · 76a542e · 76a542e
2 parents cafcbd7 + 5f6a135
commit 76a542e
Show file tree

Hide file tree

Showing 21 changed files with 155 additions and 111 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,17 @@
 # Changelog
 
 
+## v1.0.0-6
+
+
+### 🩹 Fixes
+
+- Fix rollup control display ([a922cf7](https://github.com/undb-io/undb/commit/a922cf7))
+
+### ❤️ Contributors
+
+- Nichenqin ([@nichenqin](http://github.com/nichenqin))
+
 ## v1.0.0-5
 
 

diff --git a/apps/frontend/src/lib/components/blocks/base/empty-base.svelte b/apps/frontend/src/lib/components/blocks/base/empty-base.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
+  import { SquareMousePointer } from "lucide-svelte"
   import CreateBaseButton from "./create-base-button.svelte"
 </script>
 
 <main class="flex h-full flex-col overflow-hidden">
-  <div class="flex flex-1 -translate-y-6 items-center justify-center rounded-lg border border-dashed shadow-sm">
+  <div class="flex flex-1 -translate-y-20 items-center justify-center rounded-lg border border-dashed shadow-sm">
     <div class="flex flex-col items-center gap-2 text-center">
-      <h3 class="text-2xl font-bold tracking-tight">You have no bases</h3>
+      <SquareMousePointer class="text-primary h-10 w-10" />
+      <h3 class="text-sm font-bold tracking-tight">You have no bases</h3>
       <p class="text-muted-foreground text-sm">You can start create table as soon as you add a base.</p>
       <CreateBaseButton />
     </div>

diff --git a/apps/frontend/src/lib/components/blocks/create-table/create-schema.svelte b/apps/frontend/src/lib/components/blocks/create-table/create-schema.svelte
@@ -10,7 +10,7 @@
     type ICreateSchemaDTO,
     type NoneSystemFieldType,
   } from "@undb/table"
-  import * as Collapsible from "$lib/components/ui/collapsible"
+  import * as Popover from "$lib/components/ui/popover"
   import * as Card from "$lib/components/ui/card"
   import * as Form from "$lib/components/ui/form"
   import { Input } from "$lib/components/ui/input"
@@ -181,30 +181,32 @@
 <Form.FieldErrors />
 
 <div use:clickoutside on:clickoutside={() => (open = false)}>
-  <Collapsible.Root bind:open>
-    <Collapsible.Trigger class="w-full">
+  <Popover.Root bind:open>
+    <Popover.Trigger class="w-full">
       <Button class="w-full" variant={$formData.schema.length ? "outline" : "default"}>
         <BetweenHorizonalEnd class="mr-2 h-4 w-4" />
         Add Field
       </Button>
-    </Collapsible.Trigger>
-    <Collapsible.Content class="pt-2">
+    </Popover.Trigger>
+    <Popover.Content sameWidth class="p-0">
       <Card.Root class="rounded-none p-1">
         <Card.Content class="p-0">
           <div class="grid grid-cols-4 gap-1">
             {#each fieldTypes as type}
-              <button
-                type="button"
-                on:click={() => addField(type)}
-                class="hover:bg-muted flex cursor-pointer items-center gap-2 p-2 text-sm"
-              >
-                <FieldIcon class="h-4 w-4" {type} />
-                <span>{type}</span>
-              </button>
+              {#if type !== "rollup"}
+                <button
+                  type="button"
+                  on:click={() => addField(type)}
+                  class="hover:bg-muted flex cursor-pointer items-center gap-2 p-2 text-sm"
+                >
+                  <FieldIcon class="h-4 w-4" {type} />
+                  <span>{type}</span>
+                </button>
+              {/if}
             {/each}
           </div>
         </Card.Content>
       </Card.Root>
-    </Collapsible.Content>
-  </Collapsible.Root>
+    </Popover.Content>
+  </Popover.Root>
 </div>
diff --git a/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte
@@ -6,12 +6,10 @@
   import { Calendar } from "$lib/components/ui/calendar"
   import * as Popover from "$lib/components/ui/popover"
   import { isDate, isString } from "radash"
+  import { format } from "date-fns/fp"
 
   export let readonly = false
-
-  const df = new DateFormatter("en-US", {
-    dateStyle: "long",
-  })
+  const formatter = format("yyyy-MM-dd")
 
   export let value: string | Date | undefined = undefined
   function parse(value: string) {
@@ -37,7 +35,7 @@
     >
       <CalendarIcon class="mr-2 h-4 w-4" />
       {#if value}
-        {isString(value) ? df.format(new Date(value)) : df.format(value)}
+        {formatter(value)}
       {/if}
     </Button>
   </Popover.Trigger>
@@ -54,5 +52,17 @@
       }}
       initialFocus
     />
+    <div class="border-t px-2 py-1">
+      <Button
+        class="w-full"
+        variant="outline"
+        on:click={() => {
+          if (value) {
+            value = undefined
+          }
+          open = false
+        }}>Clear</Button
+      >
+    </div>
   </Popover.Content>
 </Popover.Root>
diff --git a/apps/frontend/src/lib/components/blocks/field-control/field-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/field-control.svelte
@@ -12,8 +12,8 @@
   import AttachmentControl from "./attachment-control.svelte"
   import JsonControl from "./json-control.svelte"
   import CheckboxControl from "./checkbox-control.svelte"
-  import RollupControl from "./rollup-control.svelte"
   import UrlControl from "./url-control.svelte"
+  import RollupField from "../field-value/rollup-field.svelte"
 
   export let readonly = false
   export let field: NoneSystemField
@@ -36,7 +36,7 @@
     string: StringControl,
     number: NumberControl,
     reference: ReferenceControl,
-    rollup: RollupControl,
+    rollup: RollupField,
     select: SelectControl,
     rating: RatingControl,
     email: EmailControl,

diff --git a/apps/frontend/src/lib/components/blocks/field-control/rollup-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/rollup-control.svelte
diff --git a/apps/frontend/src/lib/components/blocks/field-options/url-field-option.svelte b/apps/frontend/src/lib/components/blocks/field-options/url-field-option.svelte
@@ -4,13 +4,13 @@
   import { Label } from "$lib/components/ui/label/index.js"
   import { Separator } from "$lib/components/ui/separator"
   import * as Alert from "$lib/components/ui/alert/index.js"
-  import { EmailFieldConstraint, type IUrlFieldConstraint } from "@undb/table"
+  import { UrlFieldConstraint, type IUrlFieldConstraint } from "@undb/table"
 
   export let constraint: IUrlFieldConstraint | undefined
   export let display: boolean | undefined
   export let defaultValue: string | undefined
 
-  $: c = constraint ? new EmailFieldConstraint(constraint) : undefined
+  $: c = constraint ? new UrlFieldConstraint(constraint) : undefined
   $: isDefaultValueValid = c && defaultValue ? c.schema.safeParse(defaultValue).success : true
 </script>
 
@@ -19,7 +19,7 @@
     <Label for="defaultValue" class="text-xs font-normal">Default value</Label>
     <Input
       id="defaultValue"
-      type="email"
+      type="url"
       class="bg-background flex-1 text-xs"
       placeholder="Default value..."
       bind:value={defaultValue}

diff --git a/apps/frontend/src/lib/components/blocks/field-picker/field-picker.svelte b/apps/frontend/src/lib/components/blocks/field-picker/field-picker.svelte
@@ -20,7 +20,7 @@
   }
 
   $: fields =
-    $table.getOrderedFields().map<IField>((f) => ({
+    $table?.getOrderedFields().map<IField>((f) => ({
       id: f.id.value,
       value: f.id.value,
       label: f.name.value,

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
@@ -2,18 +2,18 @@
   import type { RollupField } from "@undb/table"
   import { isNumber } from "radash"
 
-  export let value: string | Array<string | null> | undefined = undefined
+  export let value: string | Array<string | null>
   export let field: RollupField
 
   $: fn = field.fn
 </script>
 
 <span class={$$restProps.class}>
-  {#if value !== null}
+  {#if !!value}
     {#if fn === "lookup" && Array.isArray(value)}
       <div class="flex overflow-hidden">
         {#each value as item}
-          {#if item !== null}
+          {#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"
             >
@@ -33,5 +33,11 @@
         {value}
       </span>
     {/if}
+  {: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}
 </span>
diff --git a/apps/frontend/src/lib/components/blocks/forms/empty-forms.svelte b/apps/frontend/src/lib/components/blocks/forms/empty-forms.svelte
@@ -2,18 +2,20 @@
   import { getTable } from "$lib/store/table.store"
   import { hasPermission } from "$lib/store/space-member.store"
   import CreateFormButton from "./create-form-button.svelte"
+  import { SquareMousePointer } from "lucide-svelte"
 
   const table = getTable()
 </script>
 
 <main class="flex h-full flex-col overflow-hidden">
   <div
-    class="flex flex-1 -translate-y-6 items-center justify-center rounded-lg border border-dashed shadow-sm"
+    class="flex flex-1 -translate-y-20 items-center justify-center rounded-lg border border-dashed shadow-sm"
     data-x-chunk-name="dashboard-02-chunk-1"
     data-x-chunk-description="An empty state showing no products with a heading, description and a call to action to add a product."
   >
     <div class="flex flex-col items-center gap-1 text-center">
-      <h3 class="text-2xl font-bold tracking-tight">{$table.name.value} have no forms</h3>
+      <SquareMousePointer class="text-primary h-10 w-10" />
+      <h3 class="text-sm font-bold tracking-tight">{$table.name.value} have no forms</h3>
 
       {#if $hasPermission("table:update")}
         <p class="text-muted-foreground text-sm">You can start selling as soon as you add a form.</p>

diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte
@@ -3,11 +3,12 @@
   import { createMutation } from "@tanstack/svelte-query"
   import type { DateField } from "@undb/table"
   import { toast } from "svelte-sonner"
-  import { parseAbsolute } from "@internationalized/date"
+  import { parseDate } from "@internationalized/date"
   import { Calendar } from "$lib/components/ui/calendar"
   import * as Popover from "$lib/components/ui/popover"
   import { isString, isDate } from "radash"
   import { format } from "date-fns/fp"
+  import { Button } from "$lib/components/ui/button"
 
   const formatter = format("yyyy-MM-dd")
 
@@ -16,16 +17,13 @@
   export let value: string | Date | undefined = undefined
   function parse(value: string) {
     try {
-      return parseAbsolute(value, "UTC")
+      return parseDate(value)
     } catch {
       return undefined
     }
   }
-  $: internalDate = isString(value)
-    ? parse(value)
-    : isDate(value)
-      ? parseAbsolute(value.toISOString(), "UTC")
-      : undefined
+  $: internalDate = isString(value) ? parse(value) : isDate(value) ? parse(value.toISOString()) : undefined
+  $: console.log(internalDate)
   export let recordId: string
   export let isEditing: boolean
   export let onValueChange = (value: string | undefined) => {}
@@ -67,7 +65,8 @@
           value={internalDate}
           onValueChange={(v) => {
             if (v) {
-              value = v.toDate("UTC").toISOString()
+              value = v.toString()
+              console.log(value)
             } else {
               value = undefined
             }
@@ -79,6 +78,24 @@
             })
           }}
         />
+        <div class="border-t px-2 py-1">
+          <Button
+            class="w-full"
+            variant="outline"
+            on:click={() => {
+              if (value) {
+                value = undefined
+                onValueChange(value)
+                $updateCell.mutate({
+                  tableId,
+                  id: recordId,
+                  values: { [field.id.value]: value },
+                })
+              }
+              open = false
+            }}>Clear</Button
+          >
+        </div>
       </Popover.Content>
     </Popover.Root>
   {:else if value}

diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/url-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/url-cell.svelte
@@ -52,9 +52,11 @@
     }}
   />
 {:else}
-  <div class={$$restProps.class}>
+  <div class={cn($$restProps.class, "truncate")}>
     {#if value}
-      <a href={value} class="font-medium text-blue-600 underline hover:no-underline dark:text-blue-500"> {value} </a>
+      <a href={value} class="truncate font-medium text-blue-600 underline hover:no-underline dark:text-blue-500">
+        {value}
+      </a>
     {/if}
   </div>
 {/if}
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-empty.svelte b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-empty.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
   import { hasPermission } from "$lib/store/space-member.store"
   import { getTable } from "$lib/store/table.store"
+  import { SquareMousePointer } from "lucide-svelte"
   import CreateRecordButton from "../create-record/create-record-button.svelte"
 
   export let readonly = false
   const table = getTable()
 </script>
 
-<div class="flex max-w-full flex-1 items-center justify-center shadow-sm">
+<div class="flex max-w-full flex-1 -translate-y-20 items-center justify-center shadow-sm">
   <div class="flex flex-col items-center gap-1 space-y-2 text-center">
-    <h3 class="text-2xl font-bold tracking-tight">{$table.name.value} have no records</h3>
+    <SquareMousePointer class="text-primary h-10 w-10" />
+    <h3 class="text-sm font-bold tracking-tight">{$table.name.value} have no records</h3>
     {#if !readonly && $hasPermission("record:create")}
       <p class="text-muted-foreground text-sm">
         You can click button or use shortcut <code class="bg-muted rounded px-[0.3rem] py-[0.2rem]">Ctrl + R</code> and create