Merge pull request #2049 from undb-io/release/v1.0.0-81

Release version v1.0.0-81

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## v1.0.0-81
+
+
+### 🩹 Fixes
+
+- Gallery color ([604a8d4](https://github.com/undb-io/undb/commit/604a8d4))
+
+### ❤️ Contributors
+
+- Nichenqin ([@nichenqin](http://github.com/nichenqin))
+
 ## v1.0.0-80
 
 

apps/frontend/src/lib/components/blocks/create-base/create-base.svelte

@@ -8,7 +8,7 @@
   import { Input } from "$lib/components/ui/input"
   import { toast } from "svelte-sonner"
   import { CREATE_BASE_MODAL, closeModal } from "$lib/store/modal.store"
-  import { goto } from "$app/navigation"
+  import { goto, invalidateAll } from "$app/navigation"
   import { LoaderCircleIcon } from "lucide-svelte"
   import { tick } from "svelte"
   import { getNextName } from "@undb/utils"
@@ -17,6 +17,10 @@
     mutationFn: trpc.base.create.mutate,
     async onSuccess(data) {
       form.reset()
+      await tick()
+      await invalidateAll()
+      await goto(`/bases/${data}`)
+      closeModal(CREATE_BASE_MODAL)
     },
     onError(error) {
       toast.error(error.message)
@@ -47,10 +51,7 @@
       async onUpdate(event) {
         if (!event.form.valid) return
 
-        const data = await $mutation.mutateAsync(event.form.data)
-        await tick()
-        await goto(`/bases/${data}`)
-        closeModal(CREATE_BASE_MODAL)
+        $mutation.mutate(event.form.data)
       },
     },
   )

apps/frontend/src/lib/components/blocks/create-record/create-record-sheet.svelte

@@ -8,6 +8,8 @@
   import { getTable } from "$lib/store/table.store"
   import { useIsMutating } from "@tanstack/svelte-query"
   import { LoaderCircleIcon } from "lucide-svelte"
+  import { useMediaQuery } from "$lib/store/media-query.store"
+  import { cn } from "$lib/utils"
 
   let disabled = false
   let dirty = false
@@ -17,6 +19,8 @@
   const isMutating = useIsMutating({
     mutationKey: [$table.id.value, "createRecord"],
   })
+
+  const match = useMediaQuery("(max-width: 768px)")
 </script>
 
 <Sheet.Root
@@ -33,7 +37,8 @@
   }}
 >
   <Sheet.Content
-    class="sm:max-w-1/2 flex w-1/2 flex-col gap-0 px-0 py-4 transition-all"
+    side={$match ? "bottom" : "right"}
+    class={cn("flex flex-col gap-0 px-0 py-4 transition-all", $match ? "h-2/3 w-full" : "sm:max-w-1/2 flex w-1/2")}
     transitionConfig={{ duration: 50 }}
   >
     <Sheet.Header class="border-b px-6 pb-2">
@@ -54,15 +59,14 @@
       </ScrollArea>
     </div>
 
-    <Sheet.Footer class="border-t px-6 pt-4">
+    <Sheet.Footer class={cn("border-t px-6 pt-4", $match ? "flex-col space-y-2" : "")}>
       <Button variant="outline" type="button" on:click={() => closeModal(CREATE_RECORD_MODAL)}>Cancel</Button>
       <Button disabled={$isMutating > 0} type="submit" form="createRecord">
         {#if $isMutating > 0}
           <LoaderCircleIcon class="mr-2 h-5 w-5 animate-spin" />
         {/if}
         Create
-        </Button
-      >
+      </Button>
     </Sheet.Footer>
   </Sheet.Content>
 </Sheet.Root>

apps/frontend/src/lib/components/blocks/create-record/create-record.svelte

@@ -12,6 +12,7 @@
   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"
 
   // beforeNavigate(({ cancel }) => {
   //   if ($tainted) {
@@ -34,6 +35,8 @@
 
   const client = useQueryClient()
 
+  const mediaQuery = useMediaQuery("(max-width: 768px)")
+
   const createRecordMutation = createMutation(
     derived([table], ([$table]) => ({
       mutationFn: trpc.record.create.mutate,
@@ -99,11 +102,11 @@
 </script>
 
 <form method="POST" use:enhance id="createRecord" enctype="multipart/form-data" class="my-4 space-y-4">
-  <ul use:autoAnimate class="space-y-4">
+  <ul use:autoAnimate class={cn("space-y-4", $mediaQuery ? "space-y-2" : "space-y-4")}>
     {#each fields as field}
       {@const shouldShow = !tableForm || tableForm.getShouldShowField(field.id.value, $table.schema, tempRecord)}
       {#if shouldShow}
-        <Form.Field class="flex gap-4 space-y-0" {form} name={field.id.value}>
+        <Form.Field class={cn("flex gap-4 space-y-0", $mediaQuery ? "flex-col" : "")} {form} name={field.id.value}>
           <Form.Control let:attrs>
             <Form.Label class="flex h-4 w-48 items-center justify-between gap-2 pt-4">
               <div data-field-id={field.id.value} class="flex items-center gap-2">

apps/frontend/src/lib/components/blocks/duration/duration-input.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Input from "$lib/components/ui/input/input.svelte"
   import { durationToMilliseconds, isDurationString, millisecondsToDuration } from "@undb/table"
 
   export let value: number | undefined
@@ -24,4 +25,4 @@
   }
 </script>
 
-<input value={internalValue} on:change={onChange} {...$$restProps} />
+<Input placeholder="hh:mm" value={internalValue} on:change={onChange} {...$$restProps} />

apps/frontend/src/lib/components/blocks/field-control/attachment-control.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Input from "$lib/components/ui/input/input.svelte"
   import { isImage, type AttachmentField, type IAttachmentFieldValue, type IPresign } from "@undb/table"
-  import { FileIcon, XIcon } from "lucide-svelte"
+  import { FileIcon, XIcon, LoaderCircleIcon } from "lucide-svelte"
   import { SortableList } from "@jhubbardsf/svelte-sortablejs"
   import { isNumber } from "radash"
   import { selectedAttachment } from "$lib/store/attachment.store"
@@ -14,6 +14,8 @@
   $: max = field.max
   $: disabled = (value?.length ?? 0) >= max
 
+  let isUploading = false
+
   async function onChange(e: Event) {
     try {
       const target = e.target as HTMLInputElement
@@ -22,6 +24,7 @@
 
       const [file] = files
 
+      isUploading = true
       const signatureResponse = await fetch("/api/signature", {
         method: "POST",
         body: JSON.stringify({ fileName: file.name, mimeType: file.type }),
@@ -52,6 +55,7 @@
       })
 
       const { signedUrl } = await uploaded.json()
+      isUploading = false
       value = [
         ...(value ?? []),
         {
@@ -66,6 +70,8 @@
       ]
     } catch (error) {
       console.error(error)
+    } finally {
+      isUploading = false
     }
   }
 
@@ -103,7 +109,7 @@
               <FileIcon class="text-muted-foreground h-5 w-5" />
             {/if}
           </div>
-          <span class="flex-1">
+          <span class="text-muted-foreground flex-1 text-sm">
             {v.name}
           </span>
           <button on:click={() => removeFile(i)} class="rounded-full p-2 transition-colors hover:bg-gray-100">
@@ -112,6 +118,12 @@
         </div>
       {/each}
     </SortableList>
+    {#if isUploading}
+      <div class="flex items-center gap-2 pb-2">
+        <LoaderCircleIcon class="text-muted-foreground size-4 animate-spin" />
+        <span class="text-muted-foreground text-sm">Uploading...</span>
+      </div>
+    {/if}
   </div>
 {/if}
-<Input {...$$restProps} type="file" on:change={onChange} disabled={readonly || disabled} />
+<Input {...$$restProps} type="file" on:change={onChange} disabled={readonly || disabled || isUploading} />

apps/frontend/src/lib/components/blocks/filters-editor/filter-input.svelte

@@ -34,7 +34,7 @@
   import IdFilterInput from "./variants/id-filter-input.svelte"
   import OptionFilterInput from "./variants/option-filter-input.svelte"
   import OptionsFilterInput from "./variants/options-filter-input.svelte"
-  import type { ComponentIcon } from "lucide-svelte"
+  import DurationInput from "$lib/components/blocks/duration/duration-input.svelte"
 
   export let field: Field | undefined
   export let recordId: string | undefined = undefined
@@ -72,10 +72,10 @@
   const currency: Record<ICurrencyFieldConditionOp, ComponentType | null> = {
     eq: NumberInput,
     neq: NumberInput,
-    // gt: NumberInput,
-    // gte: NumberInput,
-    // lt: NumberInput,
-    // lte: NumberInput,
+    gt: NumberInput,
+    gte: NumberInput,
+    lt: NumberInput,
+    lte: NumberInput,
     is_empty: null,
     is_not_empty: null,
   }
@@ -188,8 +188,12 @@
   }
 
   const duration: Record<IDurationFieldConditionOp, ComponentType | null> = {
-    eq: NumberInput,
-    neq: NumberInput,
+    eq: DurationInput,
+    neq: DurationInput,
+    gt: DurationInput,
+    gte: DurationInput,
+    lt: DurationInput,
+    lte: DurationInput,
     is_empty: null,
     is_not_empty: null,
   }

apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-card.svelte

@@ -3,10 +3,19 @@
   import * as Tooltip from "$lib/components/ui/tooltip"
   import { ImagesIcon } from "lucide-svelte"
 
-  import { FieldIdVo, type RecordDO, type AttachmentField, AttachmentFieldValue, type Field } from "@undb/table"
+  import {
+    FieldIdVo,
+    type RecordDO,
+    type AttachmentField,
+    AttachmentFieldValue,
+    type Field,
+    ViewColor,
+  } from "@undb/table"
   import { queryParam } from "sveltekit-search-params"
   import { getTable } from "$lib/store/table.store"
   import FieldValue from "../field-value/field-value.svelte"
+  import { getBgColor } from "../grid-view/grid-view.util"
+  import { cn } from "$lib/utils"
 
   const table = getTable()
   export let record: RecordDO
@@ -21,6 +30,11 @@
   let field = $table.schema.getFieldById(new FieldIdVo(fieldId)).into(undefined) as AttachmentField | undefined
   $: fieldValues = record.getValue(new FieldIdVo(fieldId)).into(undefined) as AttachmentFieldValue | undefined
   $: images = fieldValues?.getImages() ?? []
+
+  export let color: ViewColor | undefined
+  $: colorSpec = color?.getSpec($table.schema).into(undefined)
+  $: isMatch = colorSpec ? record.match(colorSpec) : false
+  $: condition = isMatch ? color?.getMatchedFieldConditions($table, record)[0] : undefined
 </script>
 
 <div class="group col-span-1 flex flex-col rounded-md border shadow-sm transition-all hover:shadow-lg">
@@ -41,7 +55,13 @@
       <ImagesIcon class="text-muted-foreground/50 h-10 w-10" />
     </div>
   {/if}
-  <button on:click={() => ($r = record.id.value)} class="flex flex-1 flex-col space-y-2 px-2 py-3">
+  <button
+    on:click={() => ($r = record.id.value)}
+    class={cn("relative flex flex-1 flex-col space-y-2 px-2 py-3", isMatch && "pl-3")}
+  >
+    {#if isMatch}
+      <div class={cn("absolute left-0 top-0 h-full w-1", condition && getBgColor(condition.option.color))}></div>
+    {/if}
     {#each fields.filter((f) => f.id.value !== fieldId) as field}
       <div class="flex w-full">
         <FieldValue

apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-cards.svelte

@@ -3,19 +3,27 @@
   import { getRecordsStore } from "$lib/store/records.store"
   import { getTable } from "$lib/store/table.store"
   import type { Readable } from "svelte/store"
+  import GalleryViewEmpty from "./gallery-view-empty.svelte"
 
   const table = getTable()
   export let viewId: Readable<string>
   export let fieldId: string
   const recordsStore = getRecordsStore()
 
+  $: view = $table.views.getViewById($viewId)
+  $: color = view.color.into(undefined)
+
   $: fields = $table.getOrderedVisibleFields($viewId) ?? []
 
   let records = recordsStore.records
 </script>
 
-<div class="grid w-full gap-4 overflow-y-auto md:grid-cols-5">
-  {#each $records as record (record.id.value)}
-    <GalleryViewCard {record} {fieldId} {fields} />
-  {/each}
-</div>
+{#if $records.length === 0}
+  <GalleryViewEmpty />
+{:else}
+  <div class="grid w-full flex-1 gap-4 overflow-y-auto sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-5">
+    {#each $records as record (record.id.value)}
+      <GalleryViewCard {record} {fieldId} {fields} {color} />
+    {/each}
+  </div>
+{/if}

apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-empty.svelte

@@ -0,0 +1,23 @@
+<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 h-full w-screen flex-1 -translate-x-10 -translate-y-20 items-center justify-center shadow-sm">
+  <div class="flex flex-col items-center gap-1 space-y-2 text-center">
+    <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
+        your first record
+      </p>
+      <CreateRecordButton variant="default" size="default" />
+    {/if}
+  </div>
+</div>

apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-field-form.svelte

@@ -55,11 +55,11 @@
 </script>
 
 <div class="space-y-2">
-  <form id="select-kanban-field-form" class="space-y-2" use:enhance>
+  <form id="select-gallery-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
-          placeholder="Select a select type field to group kanban lanes"
+          placeholder="Select a select type field to group gallery lanes"
           value={$formData.gallery?.field}
           onValueChange={(field) => {
             if ($formData.gallery) {
@@ -77,6 +77,6 @@
   <CreateFieldButton class="w-full" variant="secondary" />
 
   <div class="flex w-full justify-end">
-    <Button type="submit" form="select-kanban-field-form">Confirm</Button>
+    <Button type="submit" form="select-gallery-field-form">Confirm</Button>
   </div>
 </div>

apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-loading.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Skeleton } from "$lib/components/ui/skeleton"
+  import { getTable, viewId } from "$lib/store/table.store"
+
+  const table = getTable()
+
+  $: fields = $table.getOrderedVisibleFields($viewId) ?? []
+</script>
+
+<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-5">
+  {#each Array(20) as _}
+    <div class="flex flex-col rounded-md border shadow-sm">
+      <Skeleton class="h-[150px] w-full" />
+      <div class="flex flex-col space-y-2 px-2 py-4">
+        {#each Array(fields.length - 1) as _}
+          <Skeleton class="h-5 w-full" />
+        {/each}
+      </div>
+    </div>
+  {/each}
+</div>