Merge pull request #2152 from undb-io/release/v1.0.0-124

Release version v1.0.0-124
undb-io · Nov 21, 2024 · 163301a · 163301a
2 parents e4ad83e + b897a12
commit 163301a
Show file tree

Hide file tree

Showing 18 changed files with 242 additions and 146 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 # Changelog
 
+## v1.0.0-124
+
 ## v1.0.0-123
 
 

diff --git a/apps/frontend/src/lib/components/blocks/base/base-detail.svelte b/apps/frontend/src/lib/components/blocks/base/base-detail.svelte
@@ -8,13 +8,16 @@
     SquareMousePointer,
     LayoutDashboardIcon,
     GaugeIcon,
+    CirclePlusIcon,
+    ChevronDownIcon,
   } from "lucide-svelte"
   import * as Table from "$lib/components/ui/table"
   import { goto } from "$app/navigation"
   import { hasPermission } from "$lib/store/space-member.store"
   import type { IBaseOption } from "@undb/base"
   import { baseId } from "$lib/store/base.store"
   import { Button } from "$lib/components/ui/button"
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu"
 
   export let base: {
     id: string
@@ -35,74 +38,88 @@
 </script>
 
 <main class="flex flex-1 flex-col overflow-hidden px-4 py-4">
-  <div class="flex items-center gap-4">
-    {#if $hasPermission("table:create")}
-      <button
-        type="button"
-        class="flex h-32 w-80 flex-col justify-between rounded-lg border bg-neutral-50 px-4 py-7 text-left transition-all hover:bg-neutral-100/70 hover:shadow-md"
-        on:click={() => {
-          baseId.set(base.id)
-          openModal(CREATE_TABLE_MODAL)
-        }}
-      >
-        <PlusCircleIcon class="text-blue-600" />
+  <section class="flex flex-1 flex-col overflow-hidden">
+    <h3 class="mt-2 inline-flex items-center text-xl font-semibold tracking-tight">
+      <GaugeIcon class="mr-2 size-5 text-gray-700" />
+      Dashboards
+    </h3>
 
-        Create New Table
-      </button>
-      <button
-        type="button"
-        class="flex h-32 w-80 flex-col justify-between rounded-lg border bg-neutral-50 px-4 py-7 text-left transition-all hover:bg-neutral-100/70 hover:shadow-md"
-        on:click={() => {
-          baseId.set(base.id)
-          openModal(IMPORT_TABLE_MODAL)
-        }}
-      >
-        <ImportIcon class="text-orange-600" />
-
-        Import Table
-      </button>
-    {/if}
-    {#if $hasPermission("dashboard:create")}
-      <button
-        type="button"
-        class="flex h-32 w-80 flex-col justify-between rounded-lg border bg-neutral-50 px-4 py-7 text-left transition-all hover:bg-neutral-100/70 hover:shadow-md"
-        on:click={() => {
-          baseId.set(base.id)
-          openModal(CREATE_DASHBOARD_MODAL)
-        }}
-      >
-        <LayoutDashboardIcon class="text-green-600" />
-
-        Create New Dashboard
-      </button>
-    {/if}
-  </div>
+    <div class="mt-4 flex flex-wrap gap-2 overflow-y-auto">
+      {#each base.dashboards as dashboard}
+        {#if dashboard}
+          <a
+            href={`/dashboards/${dashboard.id}`}
+            class="text-card-foreground h-[100px] w-[300px] overflow-hidden rounded-md border px-4 py-2 transition-all hover:shadow-md"
+          >
+            <span class="inline-flex items-center font-semibold">
+              <GaugeIcon class="mr-2 h-4 w-4 text-gray-700" />
+              {dashboard.name}
+            </span>
+            {#if dashboard.description}
+              <p class="text-muted-foreground truncate text-sm">{dashboard.description}</p>
+            {/if}
+          </a>
+        {/if}
+      {/each}
+      {#if $hasPermission("dashboard:create")}
+        <button
+          type="button"
+          class="item-center group flex h-[100px] w-[300px] justify-center rounded-lg border border border-dashed transition-all hover:bg-neutral-50/70 hover:shadow-md"
+          on:click={() => {
+            baseId.set(base.id)
+            openModal(CREATE_DASHBOARD_MODAL)
+          }}
+        >
+          <div class="flex h-full w-full items-center justify-center">
+            <CirclePlusIcon class="text-gray-300 transition-all group-hover:text-gray-700" />
+          </div>
+        </button>
+      {/if}
+    </div>
 
-  <section class="flex flex-1 flex-col overflow-hidden pt-3">
-    {#if base.dashboards.length > 0}
-      <h3 class="mt-2 text-xl font-semibold tracking-tight">Dashboards</h3>
+    <div class="mt-4 flex items-center gap-5">
+      <h3 class="inline-flex items-center text-xl font-semibold tracking-tight">
+        <DatabaseIcon class="mr-2 size-5 text-gray-700" />
+        Tables
+      </h3>
 
-      <div class="mt-4 flex flex-wrap gap-2 overflow-y-auto">
-        {#each base.dashboards as dashboard}
-          {#if dashboard}
-            <a
-              href={`/dashboards/${dashboard.id}`}
-              class="text-card-foreground h-[100px] w-[300px] overflow-hidden rounded-md border px-4 py-2 transition-all hover:shadow-md"
-            >
-              <span class="inline-flex items-center font-semibold">
-                <GaugeIcon class="mr-2 h-4 w-4" />
-                {dashboard.name}
-              </span>
-              {#if dashboard.description}
-                <p class="text-muted-foreground truncate text-sm">{dashboard.description}</p>
-              {/if}
-            </a>
-          {/if}
-        {/each}
-      </div>
-    {/if}
+      {#if $hasPermission("table:create")}
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger asChild let:builder>
+            <Button variant="outline" size="sm" builders={[builder]}>
+              <PlusIcon class="mr-1 size-4" />
+              Create
+              <ChevronDownIcon class="ml-1 size-4" />
+            </Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content class="w-[200px]">
+            <DropdownMenu.Group>
+              <DropdownMenu.Item
+                on:click={() => {
+                  baseId.set(base.id)
+                  openModal(CREATE_TABLE_MODAL)
+                }}
+                class="text-xs text-gray-700"
+              >
+                <PlusIcon class="mr-2 size-4" />
+                Create New Table
+              </DropdownMenu.Item>
 
-    <h3 class="mt-2 text-xl font-semibold tracking-tight">Tables</h3>
+              <DropdownMenu.Item
+                on:click={() => {
+                  baseId.set(base.id)
+                  openModal(IMPORT_TABLE_MODAL)
+                }}
+                class="text-xs text-gray-700"
+              >
+                <ImportIcon class="mr-2 size-4" />
+                Import Table
+              </DropdownMenu.Item>
+            </DropdownMenu.Group>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      {/if}
+    </div>
 
     <Table.Root class="flex w-full flex-1 flex-col overflow-y-auto">
       <Table.Header class="flex w-full">

diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-day-timeline.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-day-timeline.svelte
@@ -28,6 +28,7 @@
   import { PlusIcon } from "lucide-svelte"
   import { CREATE_RECORD_MODAL, openModal } from "$lib/store/modal.store"
   import { tick } from "svelte"
+  import { hasPermission } from "$lib/store/space-member.store"
 
   export let viewId: Readable<string | undefined>
   export let view: CalendarView
@@ -389,30 +390,32 @@
     >
       <!-- 半小时分隔线 -->
       <div class="absolute top-[30px] w-full border-t border-gray-50"></div>
-      <button
-        type="button"
-        class={cn(
-          "absolute right-2 top-1/2 z-50 hidden size-6 -translate-y-1/2 items-center justify-center rounded-sm border group-hover:flex",
-          isSelected && "flex",
-        )}
-        on:click={async (e) => {
-          e.stopPropagation()
-          const d = new Date($date)
-          d.setHours(hour)
-          d.setMinutes(0)
-          d.setSeconds(0)
-          d.setMilliseconds(0)
-          defaultRecordValues.set({
-            [field.id.value]: d.toISOString(),
-          })
-          await tick()
-          setTimeout(() => {
-            openModal(CREATE_RECORD_MODAL)
-          }, 0)
-        }}
-      >
-        <PlusIcon class="size-4 text-gray-500" />
-      </button>
+      {#if !shareId && $hasPermission("record:create")}
+        <button
+          type="button"
+          class={cn(
+            "absolute right-2 top-1/2 z-50 hidden size-6 -translate-y-1/2 items-center justify-center rounded-sm border group-hover:flex",
+            isSelected && "flex",
+          )}
+          on:click={async (e) => {
+            e.stopPropagation()
+            const d = new Date($date)
+            d.setHours(hour)
+            d.setMinutes(0)
+            d.setSeconds(0)
+            d.setMilliseconds(0)
+            defaultRecordValues.set({
+              [field.id.value]: d.toISOString(),
+            })
+            await tick()
+            setTimeout(() => {
+              openModal(CREATE_RECORD_MODAL)
+            }, 0)
+          }}
+        >
+          <PlusIcon class="size-4 text-gray-500" />
+        </button>
+      {/if}
     </div>
   {/each}
 

diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-date-record.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-date-record.svelte
@@ -62,14 +62,17 @@
 </script>
 
 <Tooltip.Root>
-  <Tooltip.Trigger>
+  <Tooltip.Trigger class="w-full">
     <button
       class={cn(
         "h-[20px] w-full overflow-hidden rounded-sm border border-gray-300 px-1 py-0.5 text-left text-[10px]  transition-all  hover:shadow-md",
         $$restProps.class,
         isMatch && getColor(condition?.option.color),
       )}
-      on:click={() => r.set(record.id.value)}
+      on:click={(e) => {
+        e.stopPropagation()
+        r.set(record.id.value)
+      }}
       use:setupDraggableDate={record}
     >
       <span class="truncate">

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
@@ -56,8 +56,8 @@
 
   const getRecords = createInfiniteQuery(
     derived(
-      [t, viewId, calendarStore, startTimestamp, endTimestamp, search, validValue],
-      ([$table, $viewId, $calendarStore, $startTimestamp, $endTimestamp, $search, $filter]) => {
+      [t, viewId, calendarStore, startTimestamp, endTimestamp, search, validValue, scope],
+      ([$table, $viewId, $calendarStore, $startTimestamp, $endTimestamp, $search, $filter, $scope]) => {
         const date = $calendarStore.selectedDate
 
         const filters = match($scope)
@@ -107,9 +107,23 @@
           .with("thisWeek", () => $startOfWeekTimestamp?.toISOString())
           .otherwise(() => undefined)
         return {
-          queryKey: ["records", $table?.id.value, $viewId, scope, dateString, $search],
-          queryFn: ({ pageParam = 1 }) =>
-            trpc.record.list.query({
+          queryKey: ["records", $table?.id.value, $viewId, $scope, dateString, $search],
+          queryFn: ({ pageParam = 1 }) => {
+            if (shareId) {
+              return trpc.shareData.records.query({
+                shareId,
+                tableId: $table?.id.value,
+                viewId: $viewId,
+                filters: merged,
+                ignoreView: true,
+                q: $search,
+                pagination: {
+                  page: pageParam,
+                  limit: 20,
+                },
+              })
+            }
+            return trpc.record.list.query({
               tableId: $table?.id.value,
               viewId: $viewId,
               filters: merged,
@@ -119,7 +133,8 @@
                 page: pageParam,
                 limit: 20,
               },
-            }),
+            })
+          },
           initialPageParam: 1,
           getNextPageParam: (lastPage, pages) => {
             const current = pages.reduce<number>((acc, cur) => acc + cur.records.length, 0)

diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-toolbar.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-toolbar.svelte
@@ -17,14 +17,17 @@
   export let viewId: Readable<string | undefined>
   export let view: CalendarView
   export let readonly = false
+  export let shareId: string | undefined
 </script>
 
 <div class="flex justify-between gap-2 border-b px-2 py-2">
   <div class="flex items-center gap-2">
     <CreateRecordButton size="xs" />
     <CalendarViewMiniMonthControl bind:view />
     <Button variant="outline" size="xs" on:click={() => calendarStore.reset()}>Today</Button>
-    <CalendarTimescalePicker size="xs" bind:view />
+    {#if !shareId}
+      <CalendarTimescalePicker size="xs" bind:view />
+    {/if}
   </div>
 
   <div>

diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view.svelte
@@ -33,7 +33,7 @@
 </script>
 
 {#key $table.id.value}
-  <CalendarViewToolbar {viewId} bind:view {readonly} />
+  <CalendarViewToolbar {viewId} bind:view {readonly} {shareId} />
   {#if view.type === "calendar"}
     {#if field}
       {#if timeScale === "month"}

diff --git a/apps/frontend/src/lib/components/blocks/field-control/date-range-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/date-range-control.svelte
@@ -58,12 +58,24 @@
       >
         {#if internalValue && internalValue.start}
           {#if internalValue.end}
-            {formatter(internalValue.start.toDate())} - {formatter(internalValue.end.toDate())}
+            <span class="flex items-center gap-1">
+              <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+                {formatter(internalValue.start.toDate())}
+              </span>
+              <span class="mx-1 text-xs text-gray-500"> - </span>
+              <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+                {formatter(internalValue.end.toDate())}
+              </span>
+            </span>
           {:else}
-            {formatter(internalValue.start.toDate())}
+            <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+              {formatter(internalValue.start.toDate())}
+            </span>
           {/if}
         {:else if value?.[0]}
-          {formatter(new Date(value[0]))}
+          <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+            {formatter(new Date(value[0]))}
+          </span>
         {/if}
       </Button>
     </Popover.Trigger>

diff --git a/apps/frontend/src/lib/components/blocks/field-value/date-range-field.svelte b/apps/frontend/src/lib/components/blocks/field-value/date-range-field.svelte
@@ -13,8 +13,18 @@
   {#if !value?.[0] && !value?.[1]}
     {placeholder}
   {:else if value?.[0] && value?.[1]}
-    {formatter(value[0])} - {formatter(value[1])}
+    <span class="flex items-center gap-1">
+      <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+        {formatter(value[0])}
+      </span>
+      <span class="mx-1 text-xs text-gray-500"> - </span>
+      <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+        {formatter(value[1])}
+      </span>
+    </span>
   {:else if value?.[0]}
-    {formatter(value[0])}
+    <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+      {formatter(value[0])}
+    </span>
   {/if}
 </div>
diff --git a/apps/frontend/src/lib/components/blocks/filters-editor/filters-editor.svelte b/apps/frontend/src/lib/components/blocks/filters-editor/filters-editor.svelte
@@ -139,7 +139,7 @@
               />
               <FieldFilterControl
                 class="col-span-8 overflow-hidden"
-                {disabled}
+                disabled={disabled || readonly}
                 {field}
                 bind:option={child.option}
                 bind:op={child.op}