feat: duration field

Author: nichenqin

apps/frontend/schema.graphql

@@ -36,6 +36,7 @@ enum FieldType {
   createdBy
   currency
   date
+  duration
   email
   id
   json

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { durationToMilliseconds, isDurationString, millisecondsToDuration } from "@undb/table"
+
+  export let value: number | undefined
+  export let onValueChange: ((value: number) => void) | undefined = undefined
+
+  let internalValue = value ? millisecondsToDuration(value) : ""
+
+  export let isValid = true
+
+  function onChange(event: Event) {
+    const valueString = (event.target as HTMLInputElement).value
+    if (!isDurationString(valueString)) {
+      isValid = false
+      return
+    }
+
+    isValid = true
+
+    internalValue = valueString
+
+    value = durationToMilliseconds(valueString)
+    onValueChange?.(value)
+  }
+</script>
+
+<input value={internalValue} on:change={onChange} {...$$restProps} />

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { cn } from "$lib/utils"
+  import DurationInput from "$lib/components/blocks/duration/duration-input.svelte"
+
+  export let readonly = false
+  export let value: number
+</script>
+
+<DurationInput
+  bind:value
+  disabled={readonly}
+  {...$$restProps}
+  class={cn(
+    "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
+    $$restProps.class,
+  )}
+/>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { NoneSystemField, NoneSystemFieldType } from "@undb/table"
+  import type { NoneSystemField, NoneSystemFieldType, RecordDO } from "@undb/table"
   import StringControl from "./string-control.svelte"
   import NumberControl from "./number-control.svelte"
   import type { ComponentType } from "svelte"
@@ -17,6 +17,7 @@
   import LongTextControl from "./long-text-control.svelte"
   import CurrencyControl from "./currency-control.svelte"
   import ButtonControl from "./button-control.svelte"
+  import DurationControl from "./duration-control.svelte"
 
   export let readonly = false
   export let field: NoneSystemField
@@ -53,6 +54,7 @@
     json: JsonControl,
     checkbox: CheckboxControl,
     user: UserControl,
+    duration: DurationControl,
   }
 </script>
 

apps/frontend/src/lib/components/blocks/field-icon/field-icon.svelte

@@ -26,6 +26,7 @@
     FolderIcon,
     DollarSignIcon,
     MousePointerClickIcon,
+    TimerIcon,
   } from "lucide-svelte"
 
   export let type: FieldType
@@ -54,6 +55,7 @@
     checkbox: SquareCheckIcon,
     user: field?.type === "user" && field.isMultiple ? UsersIcon : UserIcon,
     button: MousePointerClickIcon,
+    duration: TimerIcon,
   }
 </script>
 

apps/frontend/src/lib/components/blocks/field-options/duration-field-option.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { Checkbox } from "$lib/components/ui/checkbox"
+  import NumberInput from "$lib/components/ui/input/number-input.svelte"
+  import { Label } from "$lib/components/ui/label/index.js"
+  import { Separator } from "$lib/components/ui/separator"
+  import { DurationFieldConstraint, type IDurationFieldConstraint } from "@undb/table"
+  import * as Alert from "$lib/components/ui/alert/index.js"
+
+  export let constraint: IDurationFieldConstraint | undefined
+  export let display: boolean | undefined
+  export let defaultValue: number | undefined
+  export let disabled = false
+
+  $: c = constraint ? new DurationFieldConstraint(constraint) : undefined
+  $: isDefaultValueValid = c && defaultValue ? c.schema.safeParse(defaultValue).success : true
+</script>
+
+<div class="space-y-2">
+  <div class="space-y-1">
+    <Label for="defaultValue" class="text-xs font-normal">Default value</Label>
+    <NumberInput
+      {disabled}
+      id="defaultValue"
+      class="bg-background flex-1 text-xs"
+      placeholder="Default value..."
+      bind:value={defaultValue}
+    />
+  </div>
+
+  {#if !isDefaultValueValid}
+    <Alert.Root class="border-yellow-500 bg-yellow-50">
+      <Alert.Title>Invalid default value</Alert.Title>
+      <Alert.Description>Your default value is invalid. Default value will not be saved.</Alert.Description>
+    </Alert.Root>
+  {/if}
+  {#if constraint}
+    <div class="grid grid-cols-2 gap-2">
+      <div class="space-y-1">
+        <Label for="min" class="text-xs font-normal">Min</Label>
+        <NumberInput
+          {disabled}
+          id="min"
+          min={0}
+          max={constraint.max}
+          step={1}
+          bind:value={constraint.min}
+          placeholder="Min value..."
+          class="bg-background text-xs"
+        />
+      </div>
+      <div class="space-y-1">
+        <Label for="max" class="text-xs font-normal">Max</Label>
+        <NumberInput
+          {disabled}
+          id="max"
+          min={constraint.min || 0}
+          step={1}
+          bind:value={constraint.max}
+          placeholder="Max value..."
+          class="bg-background text-xs"
+        />
+      </div>
+    </div>
+
+    <div class="pt-2">
+      <Separator />
+    </div>
+    <div class="flex items-center space-x-2">
+      <Checkbox id="required" {disabled} bind:checked={constraint.required} />
+      <Label for="required" class="text-xs font-normal">Mark as required field.</Label>
+    </div>
+
+    <div class="flex items-center space-x-2">
+      <Checkbox id="display" {disabled} bind:checked={display} />
+      <Label for="display" class="text-xs font-normal">Mark as display field.</Label>
+    </div>
+  {/if}
+</div>

apps/frontend/src/lib/components/blocks/field-options/field-options.svelte

@@ -17,6 +17,7 @@
   import LongTextFieldOption from "./long-text-field-option.svelte"
   import CurrencyFieldOption from "./currency-field-option.svelte"
   import ButtonFieldOption from "./button-field-option.svelte"
+  import DurationFieldOption from "./duration-field-option.svelte"
 
   export let constraint: IFieldConstraint | undefined
   export let option: any | undefined
@@ -43,6 +44,7 @@
     checkbox: CheckboxFieldOption,
     json: JsonFieldOption,
     date: DateFieldOption,
+    duration: DurationFieldOption,
   }
 
   export let type: NoneSystemFieldType

apps/frontend/src/lib/components/blocks/field-value/duration-field.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { millisecondsToDuration } from "@undb/table"
+
+  export let value: number | undefined = undefined
+</script>
+
+<span class={$$restProps.class}>{value ? millisecondsToDuration(value) : ""}</span>

apps/frontend/src/lib/components/blocks/field-value/field-value.svelte

@@ -16,6 +16,7 @@
   import UrlField from "./url-field.svelte"
   import LongTextField from "./long-text-field.svelte"
   import CurrencyField from "./currency-field.svelte"
+  import DurationField from "./duration-field.svelte"
 
   export let type: FieldType
   export let value: any
@@ -47,6 +48,7 @@
     json: JsonField,
     checkbox: CheckboxField,
     user: UserField,
+    duration: DurationField,
   }
 </script>
 

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

@@ -8,6 +8,7 @@
     type ICreatedByFieldConditionOp,
     type ICurrencyFieldConditionOp,
     type IDateFieldConditionOp,
+    type IDurationFieldConditionOp,
     type IEmailFieldConditionOp,
     type IIdFieldConditionOp,
     type IJsonFieldConditionOp,
@@ -185,6 +186,13 @@
     lte: NumberInput,
   }
 
+  const duration: Record<IDurationFieldConditionOp, ComponentType | null> = {
+    eq: NumberInput,
+    neq: NumberInput,
+    is_empty: null,
+    is_not_empty: null,
+  }
+
   const id: Record<IIdFieldConditionOp, ComponentType | null> = {
     eq: IdFilterInput,
     neq: IdFilterInput,
@@ -268,6 +276,7 @@
     json,
     url,
     longText,
+    duration,
   }
 </script>