feat: allow to reference field cross base

undb-io · Nov 22, 2024 · 993aab8 · 993aab8
1 parent a384b66
commit 993aab8
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 22 deletions.
diff --git a/apps/frontend/src/lib/components/blocks/field-options/create-reference-field-optioin.svelte b/apps/frontend/src/lib/components/blocks/field-options/create-reference-field-optioin.svelte
@@ -3,10 +3,8 @@
     getIsFilterableFieldType,
     parseValidViewFilter,
     TableFactory,
-    toMaybeConditionGroup,
     type ICreateReferenceFieldDTO,
     type IReferenceFieldConstraint,
-    type IUpdateReferenceFieldDTO,
     type IViewFilterOptionSchema,
     type MaybeConditionGroup,
   } from "@undb/table"

diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-table-picker.svelte b/apps/frontend/src/lib/components/blocks/reference/foreign-table-picker.svelte
@@ -9,20 +9,23 @@
   import { getTable } from "$lib/store/table.store"
   import { GetForeignTablesStore, GetForeignTableStore } from "$houdini"
   import { group } from "radash"
+  import { DatabaseIcon, ChevronRightIcon, ExternalLinkIcon } from "lucide-svelte"
 
   const table = getTable()
 
   const getForeignTablesStore = new GetForeignTablesStore()
   const getForeignTableStore = new GetForeignTableStore()
 
-  $: open && getForeignTablesStore.fetch({ variables: { baseId: $table.baseId } })
+  $: open && getForeignTablesStore.fetch()
   $: foreignTables = $getForeignTablesStore.data?.tables.filter((t) => !!t) ?? []
   $: groupTables = group(foreignTables, (t) => t.base?.id)
 
   let open = false
   export let value: string | undefined = undefined
   export let disabled: boolean = false
 
+  $: foreignBase = $getForeignTableStore.data?.table?.base
+
   $: selectedValue =
     foreignTables.filter((f) => !!f).find((f) => f.id === value)?.name ?? $getForeignTableStore.data?.table?.name ?? ""
   let fetched = false
@@ -45,22 +48,35 @@
 
 <Popover.Root bind:open let:ids portal="body">
   <Popover.Trigger asChild let:builder>
-    <Button
-      builders={[builder]}
-      variant="outline"
-      role="combobox"
-      size="sm"
-      aria-expanded={open}
-      class={cn("w-full justify-between", $$restProps.class)}
-      {disabled}
-    >
-      {#if selectedValue}
-        {selectedValue}
-      {:else}
-        <span class="text-muted-foreground"> Select a table... </span>
+    <div class="flex items-center gap-2">
+      <Button
+        builders={[builder]}
+        variant="outline"
+        role="combobox"
+        size="sm"
+        aria-expanded={open}
+        class={cn("w-full justify-between", $$restProps.class)}
+        {disabled}
+      >
+        {#if selectedValue}
+          <span class="inline-flex items-center gap-1 truncate text-xs text-gray-700">
+            {#if foreignBase}
+              {foreignBase.name}
+              <ChevronRightIcon class="size-3 shrink-0 opacity-50" />
+            {/if}
+            {selectedValue}
+          </span>
+        {:else}
+          <span class="text-muted-foreground"> Select a table... </span>
+        {/if}
+        <CaretSort class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+      </Button>
+      {#if value}
+        <a href={`/t/${value}`} class="text-muted-foreground">
+          <ExternalLinkIcon class="mr-2 h-3 w-3" />
+        </a>
       {/if}
-      <CaretSort class="ml-2 h-4 w-4 shrink-0 opacity-50" />
-    </Button>
+    </div>
   </Popover.Trigger>
   <Popover.Content class="max-h-[300px] overflow-y-auto p-0" sameWidth>
     <Command.Root
@@ -86,7 +102,8 @@
                   class="gap-2"
                 >
                   <Check class={cn("h-4 w-4", value !== t.id && "text-transparent")} />
-                  <span>
+                  <span class="inline-flex items-center gap-2 truncate text-xs text-gray-700">
+                    <DatabaseIcon class="h-4 w-4" />
                     {t.name}
                   </span>
                   {#if t.id === $table?.id.value}

diff --git a/apps/frontend/src/lib/components/blocks/table-header/table-header.svelte b/apps/frontend/src/lib/components/blocks/table-header/table-header.svelte
@@ -28,7 +28,6 @@
   import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js"
   import { getTable } from "$lib/store/table.store"
   import { tab, isFormTab, formId, developerTab, isAuthTab, isDeveloperTab } from "$lib/store/tab.store"
-  import RecordUpdating from "../record-updating/record-updating.svelte"
   import CreateFormButton from "../forms/create-form-button.svelte"
   import CreateViewButton from "../view/create-view-button.svelte"
   import { derived } from "svelte/store"
@@ -100,7 +99,7 @@
                     title={$table.name.value}
                   >
                     <DatabaseIcon class="size-3" />
-                    <span class="truncate">
+                    <span class="truncate text-xs text-gray-700">
                       {$table.name.value}
                     </span>
                     <ChevronDownIcon class="size-3" />

diff --git a/packages/table/src/table.do.ts b/packages/table/src/table.do.ts
@@ -128,7 +128,8 @@ export class TableDo extends AggregateRoot<ITableEvents> {
     const visibleFields = this.getViewFields(viewId).getVisibleFields()
 
     return visibleFields
-      .map((fieldId) => this.schema.getFieldById(new FieldIdVo(fieldId)).unwrap())
+      .map((fieldId) => this.schema.getFieldById(new FieldIdVo(fieldId)).into(undefined))
+      .filter((f) => !!f)
       .filter((field) => (view.showSystemFields ? true : !field.isSystem))
   }