@lobb-js/studio 0.19.1 → 0.21.0

package/dist/components/detailView/utils.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import Mustache from "mustache";
-import { getFieldRelation } from "../../utils";
+import { isRelationField } from "../../relations";
 import { getField } from "../dataTable/utils";
 export function getDefaultEntry(ctx, fieldNames, collectionName, values) {
     return Object.fromEntries(fieldNames.map(function (fieldName) {
@@ -33,92 +33,62 @@ export function getDefaultEntry(ctx, fieldNames, collectionName, values) {
         return [fieldName, value];
     }));
 }
-export function serializeEntry(ctx, collectionName, entry, rollback) {
-    if (rollback === void 0) { rollback = false; }
-    // deep clone the object
+export function serializeEntry(ctx, collectionName, entry) {
     entry = __assign({}, entry);
-    // serialize the foreign key field's value
+    // extract FK object fields → ID
     for (var _i = 0, _a = Object.entries(entry); _i < _a.length; _i++) {
         var _b = _a[_i], fieldName = _b[0], fieldValue = _b[1];
-        var isRefrenceField = Boolean(getFieldRelation(ctx, collectionName, fieldName));
+        var isRefrenceField = isRelationField(ctx, collectionName, fieldName);
         if (isRefrenceField && fieldValue !== null && fieldValue.id !== undefined) {
             entry[fieldName] = fieldValue.id;
         }
     }
-    // check for related collections properties and serialize them too
-    if (!rollback) {
-        var childrenRelations = ctx.meta.relations.filter(function (relation) { return relation.to.collection === collectionName; });
-        var childrenCollectionNames = childrenRelations.map(function (relation) { return relation.from.collection; });
-        for (var index = 0; index < childrenCollectionNames.length; index++) {
-            var childrenCollectionName = childrenCollectionNames[index];
-            var childrenEntries = entry[childrenCollectionName];
-            if (childrenEntries) {
-                for (var index_1 = 0; index_1 < childrenEntries.length; index_1++) {
-                    childrenEntries[index_1] = serializeEntry(ctx, childrenCollectionName, childrenEntries[index_1]);
-                }
-            }
+    // extract polymorphic id_field objects → ID
+    for (var _c = 0, _d = ctx.meta.relations; _c < _d.length; _c++) {
+        var relation = _d[_c];
+        if (relation.type !== "polymorphic")
+            continue;
+        if (relation.from.collection !== collectionName)
+            continue;
+        var idField = relation.from.id_field;
+        var fieldValue = entry[idField];
+        if (fieldValue !== null && typeof fieldValue === "object" && fieldValue.id !== undefined) {
+            entry[idField] = fieldValue.id;
         }
     }
     return entry;
 }
-export function generateTransactionBody(ctx, collectionName, entry) {
-    entry = __assign({}, entry);
-    function handleEntryRecursive(transactionBody, collectionName, entry, parentTransactionIndex) {
-        var _a;
-        var _b;
-        var parentCollectionName = parentTransactionIndex !== undefined ? transactionBody[parentTransactionIndex].props.collectionName : null;
-        var foreignKeyFieldName = (_b = ctx.meta.relations.find(function (relation) { return relation.from.collection === collectionName && relation.to.collection === parentCollectionName; })) === null || _b === void 0 ? void 0 : _b.from.field;
-        var collectionFieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
-        var payload = {};
-        for (var index = 0; index < collectionFieldNames.length; index++) {
-            var fieldName = collectionFieldNames[index];
-            var isForeignKeyField = fieldName === foreignKeyFieldName;
-            if (isForeignKeyField) {
-                payload[fieldName] = "{{ responses[".concat(parentTransactionIndex, "].data.id }}");
-                continue;
-            }
-            payload[fieldName] = entry[fieldName];
-        }
-        var localTransactionIndex = transactionBody.length;
-        if (payload.id) {
-            var localPayload = (_a = {},
-                _a[foreignKeyFieldName] = payload[foreignKeyFieldName],
-                _a);
-            transactionBody.push({
-                method: "updateMany",
-                props: {
-                    collectionName: collectionName,
-                    data: localPayload,
-                    filter: { id: payload.id },
-                },
-            });
-        }
-        else {
-            transactionBody.push({
-                method: "createOne",
-                props: { collectionName: collectionName, data: payload },
-            });
-        }
-        var childrenRelations = ctx.meta.relations.filter(function (relation) { return relation.to.collection === collectionName; });
-        var childrenCollectionNames = childrenRelations.map(function (relation) { return relation.from.collection; });
-        for (var index = 0; index < childrenCollectionNames.length; index++) {
-            var childrenCollectionName = childrenCollectionNames[index];
-            var childrenEntries = entry[childrenCollectionName];
-            if (childrenEntries) {
-                for (var index_2 = 0; index_2 < childrenEntries.length; index_2++) {
-                    var childrenEntry = childrenEntries[index_2];
-                    handleEntryRecursive(transactionBody, childrenCollectionName, childrenEntry, localTransactionIndex);
-                }
-            }
+export function buildChildren(ctx, collectionName, entry) {
+    var childrenRelations = ctx.meta.relations.filter(function (relation) { return relation.type !== "polymorphic" && relation.to.collection === collectionName; });
+    var children = {};
+    var _loop_1 = function (relation) {
+        var childCollection = relation.from.collection;
+        var childEntries = entry[childCollection];
+        if (!(childEntries === null || childEntries === void 0 ? void 0 : childEntries.length))
+            return "continue";
+        var toCreate = childEntries
+            .filter(function (e) { return !e.id; })
+            .map(function (e) { return serializeEntry(ctx, childCollection, e); });
+        var toLink = childEntries
+            .filter(function (e) { return e.id; })
+            .map(function (e) { return e.id; });
+        if (toCreate.length || toLink.length) {
+            children[childCollection] = {};
+            if (toCreate.length)
+                children[childCollection].create = toCreate;
+            if (toLink.length)
+                children[childCollection].link = toLink;
         }
+    };
+    for (var _i = 0, childrenRelations_1 = childrenRelations; _i < childrenRelations_1.length; _i++) {
+        var relation = childrenRelations_1[_i];
+        _loop_1(relation);
     }
-    var transactionBody = [];
-    handleEntryRecursive(transactionBody, collectionName, entry);
-    return transactionBody;
+    return Object.keys(children).length ? children : undefined;
 }
 export function parseDetailViewValues(ctx, collectionName, values) {
     var forignFieldNames = ctx.meta.relations
-        .filter(function (relation) { return relation.from.collection === collectionName; })
+        .filter(function (relation) { return relation.type !== "polymorphic" && relation.from.collection === collectionName; })
         .map(function (relation) { return relation.from.field; });
     var childCollectionNames = ctx.meta.relations
         .filter(function (relation) { return relation.to.collection === collectionName; })
@@ -138,6 +108,18 @@ export function parseDetailViewValues(ctx, collectionName, values) {
             }
         }
     }
+    // wrap polymorphic id_field scalar values into { id: value }
+    for (var _c = 0, _d = ctx.meta.relations; _c < _d.length; _c++) {
+        var relation = _d[_c];
+        if (relation.type !== "polymorphic")
+            continue;
+        if (relation.from.collection !== collectionName)
+            continue;
+        var idField = relation.from.id_field;
+        if (idField in values && typeof values[idField] === 'number') {
+            values[idField] = { id: values[idField] };
+        }
+    }
 }
 export function getCollectionFields(ctx, collectionName) {
     var returnedData = [];

package/dist/components/drawer.svelte

@@ -1,30 +1,46 @@
 <script lang="ts">
     import { calculateDrawerWidth } from "../utils";
     import type { Snippet } from "svelte";
-    import { fade, fly } from "svelte/transition";
+    import { fade } from "svelte/transition";
+    import { cubicOut } from "svelte/easing";
     import Portal from "svelte-portal";
 
     interface Props {
         children?: Snippet<[]>;
         onHide?: () => Promise<void>;
+        position?: "side" | "bottom";
     }
 
-    let { onHide, children }: Props = $props();
+    let { onHide, children, position = "side" }: Props = $props();
+
+    function slide(_node: Element, { duration = 250, axis }: { duration?: number; axis: "x" | "y" }) {
+        return {
+            duration,
+            easing: cubicOut,
+            css: (t: number) => {
+                const offset = (1 - t) * 100;
+                return axis === "y"
+                    ? `transform: translateY(${offset}%)`
+                    : `transform: translateX(${offset}%)`;
+            },
+        };
+    }
 </script>
 
 <Portal target="body">
     <button
-        transition:fade={{ duration: 250 }}
+        transition:fade={{ duration: 200 }}
         onclick={() => onHide?.()}
-        class="backgroundDrawerButton fixed left-0 top-0 z-40 h-screen w-screen bg-background opacity-50 cursor-default"
+        class="backgroundDrawerButton fixed left-0 top-0 z-40 h-screen w-screen bg-black/50 cursor-default"
         aria-label="background used to hide the background"
     ></button>
 
-    <!-- the drawer -->
     <div
-        transition:fly={{ x: "100%", duration: 250 }}
-        class="fixed right-0 top-0 z-40 flex h-full w-full flex-col border-l bg-background"
-        style="max-width: {calculateDrawerWidth()}px;"
+        transition:slide={{ axis: position === "bottom" ? "y" : "x" }}
+        class={position === "bottom"
+            ? "fixed bottom-0 left-0 z-40 flex h-[60vh] w-full flex-col border-t bg-background"
+            : "fixed right-0 top-0 z-40 flex h-full w-full flex-col border-l bg-background"}
+        style={position === "side" ? `max-width: ${calculateDrawerWidth()}px;` : ""}
     >
         {@render children?.()}
     </div>

package/dist/components/drawer.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from "svelte";
 interface Props {
     children?: Snippet<[]>;
     onHide?: () => Promise<void>;
+    position?: "side" | "bottom";
 }
 declare const Drawer: import("svelte").Component<Props, {}, "">;
 type Drawer = ReturnType<typeof Drawer>;

package/dist/components/polymorphicInput.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+    import Button from "./ui/button/button.svelte";
+    import DataTable from "./dataTable/dataTable.svelte";
+    import Drawer from "./drawer.svelte";
+    import * as Popover from "./ui/popover/index";
+    import { getCollectionPrimaryField } from "./dataTable/utils";
+    import { getStudioContext } from "../context";
+    import { ArrowLeft, Link, ChevronDown } from "lucide-svelte";
+
+    const { ctx } = getStudioContext();
+
+    interface Props {
+        collectionField: string;
+        idField: string;
+        targetCollections: string[];
+        entry: Record<string, any>;
+        destructive?: boolean;
+    }
+
+    let {
+        collectionField,
+        idField,
+        targetCollections,
+        entry = $bindable(),
+        destructive,
+    }: Props = $props();
+
+    const selectedCollection = $derived(entry[collectionField] ?? null);
+    const selectedId = $derived(entry[idField]?.id ?? entry[idField] ?? null);
+    const primaryField = $derived(entry[idField] ? Object.values(entry[idField])[1] : null);
+
+    let collectionPopoverOpen = $state(false);
+    let recordDrawerOpen = $state(false);
+
+    function onCollectionChange(col: string) {
+        collectionPopoverOpen = false;
+        if (entry[collectionField] !== col) {
+            entry = { ...entry, [collectionField]: col, [idField]: null };
+        }
+    }
+
+    function onIdChange(e: Event) {
+        const raw = (e.target as HTMLInputElement).value;
+        const id = raw === "" ? null : Number(raw);
+        entry = { ...entry, [idField]: id === null ? null : { id } };
+    }
+
+    function onRecordSelect(record: any) {
+        const primaryFieldName = getCollectionPrimaryField(ctx, selectedCollection!);
+        const value: any = { id: record.id };
+        if (primaryFieldName) value[primaryFieldName] = record[primaryFieldName];
+        entry = { ...entry, [idField]: value };
+        recordDrawerOpen = false;
+    }
+</script>
+
+<div class="flex h-9 w-full items-center gap-1.5 rounded-md border pl-1.5 pr-9 text-xs bg-muted/30 {destructive ? 'border-destructive bg-destructive/10' : ''}">
+    <!-- Collection picker -->
+    <Popover.Root bind:open={collectionPopoverOpen}>
+        <Popover.Trigger>
+            {#snippet child({ props })}
+                <button
+                    {...props}
+                    class="flex shrink-0 items-center gap-1 h-6 px-2 rounded-sm border bg-muted text-xs text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                >
+                    {selectedCollection ?? "NULL"}
+                    <ChevronDown size="11" />
+                </button>
+            {/snippet}
+        </Popover.Trigger>
+        <Popover.Content class="w-48 p-2">
+            <div class="flex flex-col gap-1">
+                {#each targetCollections as col}
+                    <Button
+                        variant={selectedCollection === col ? "default" : "ghost"}
+                        class="justify-start text-xs font-normal h-7 px-2"
+                        onclick={() => onCollectionChange(col)}
+                    >
+                        {col}
+                    </Button>
+                {/each}
+            </div>
+        </Popover.Content>
+    </Popover.Root>
+
+    <!-- Transparent id input -->
+    <input
+        placeholder="NULL"
+        type="number"
+        class="min-w-0 flex-1 bg-transparent outline-none text-xs placeholder:text-muted-foreground"
+        value={selectedId ?? ""}
+        oninput={onIdChange}
+    />
+
+    <!-- Primary field badge -->
+    {#if primaryField}
+        <div class="flex shrink-0 items-center bg-background rounded-full border h-6 px-3 shadow-sm">
+            {primaryField}
+        </div>
+    {/if}
+
+    <!-- Select record button -->
+    {#if selectedCollection}
+        <Button
+            class="h-6 shrink-0 px-2 font-normal text-xs"
+            variant="outline"
+            onclick={() => (recordDrawerOpen = true)}
+        >
+            <Link size="13" />
+            Select Record
+        </Button>
+    {/if}
+</div>
+
+{#if recordDrawerOpen}
+    <Drawer onHide={async () => { recordDrawerOpen = false }}>
+        <div class="flex h-12 items-center gap-4 border-b px-4">
+            <Button
+                variant="outline"
+                onclick={() => (recordDrawerOpen = false)}
+                class="h-8 w-8 rounded-full text-xs font-normal"
+                Icon={ArrowLeft}
+            />
+            <div class="flex items-center gap-2">
+                <div class="text-sm">Select record from</div>
+                <span class="rounded-md border bg-muted px-2 py-0.5 text-sm">
+                    {selectedCollection}
+                </span>
+            </div>
+        </div>
+        <div class="flex-1 overflow-y-auto bg-muted">
+            <DataTable
+                collectionName={selectedCollection!}
+                tableProps={{
+                    showCheckboxes: false,
+                    select: { onSelect: onRecordSelect },
+                }}
+            />
+        </div>
+    </Drawer>
+{/if}

package/dist/components/polymorphicInput.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    collectionField: string;
+    idField: string;
+    targetCollections: string[];
+    entry: Record<string, any>;
+    destructive?: boolean;
+}
+declare const PolymorphicInput: import("svelte").Component<Props, {}, "entry">;
+type PolymorphicInput = ReturnType<typeof PolymorphicInput>;
+export default PolymorphicInput;

package/dist/extensions/extension.types.d.ts

@@ -59,7 +59,9 @@ export interface ExtensionUtils {
         title?: string;
         showHeader?: boolean;
         showFooter?: boolean;
+        position?: "side" | "bottom";
     }) => void;
+    emitEvent: (eventName: string, input: Record<string, any>) => Promise<Record<string, any>>;
     components: Components;
     mediaQueries: typeof mediaQueries;
     intlDate: typeof intlDate;

package/dist/extensions/extensionUtils.js

@@ -45,6 +45,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { toast } from "svelte-sonner";
 import { showDialog, openDataTableDrawer } from "../actions";
+import { emitEvent } from "../eventSystem";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Separator } from "../components/ui/separator";
@@ -100,6 +101,7 @@ export function getExtensionUtils(lobb, ctx) {
         toast: toast,
         showDialog: showDialog,
         openDataTableDrawer: function (props) { return openDataTableDrawer({ lobb: lobb, ctx: ctx }, props); },
+        emitEvent: function (eventName, input) { return emitEvent({ lobb: lobb, ctx: ctx }, eventName, input); },
         components: getComponents(),
         mediaQueries: mediaQueries,
         intlDate: intlDate,

package/dist/relations.d.ts

@@ -0,0 +1,14 @@
+import type { CTX } from "./store.types";
+export declare function isRelationField(ctx: CTX, collectionName: string, fieldName: string): boolean;
+export declare function getFieldRelationTarget(ctx: CTX, collectionName: string, fieldName: string): string | null;
+export declare function getPolymorphicRelation(ctx: CTX, collectionName: string, fieldName: string): {
+    type: "polymorphic";
+    from: {
+        collection: string;
+        virtual_field: string;
+        collection_field: string;
+        id_field: string;
+    };
+    to: string[];
+};
+export declare function recordHasChildrean(ctx: CTX, collectionName: string): boolean;

package/dist/relations.js

@@ -0,0 +1,47 @@
+function getFieldRelation(ctx, collectionName, fieldName) {
+    var relations = ctx.meta.relations;
+    for (var index = 0; index < relations.length; index++) {
+        var relation = relations[index];
+        if (relation.type === "polymorphic")
+            continue;
+        if (relation.from.collection === collectionName && relation.from.field === fieldName) {
+            return relation;
+        }
+    }
+    return null;
+}
+;
+export function isRelationField(ctx, collectionName, fieldName) {
+    return Boolean(getFieldRelation(ctx, collectionName, fieldName));
+}
+;
+export function getFieldRelationTarget(ctx, collectionName, fieldName) {
+    var _a, _b;
+    return (_b = (_a = getFieldRelation(ctx, collectionName, fieldName)) === null || _a === void 0 ? void 0 : _a.to.collection) !== null && _b !== void 0 ? _b : null;
+}
+;
+export function getPolymorphicRelation(ctx, collectionName, fieldName) {
+    var relations = ctx.meta.relations;
+    for (var index = 0; index < relations.length; index++) {
+        var relation = relations[index];
+        if (relation.type === "polymorphic" &&
+            relation.from.collection === collectionName &&
+            relation.from.virtual_field === fieldName) {
+            return relation;
+        }
+    }
+    return null;
+}
+;
+export function recordHasChildrean(ctx, collectionName) {
+    for (var index = 0; index < ctx.meta.relations.length; index++) {
+        var relation = ctx.meta.relations[index];
+        if (relation.type === "polymorphic")
+            continue;
+        if (relation.to.collection === collectionName) {
+            return true;
+        }
+    }
+    return false;
+}
+;

package/dist/store.types.d.ts

@@ -12,6 +12,7 @@ interface Collection {
     singleton: boolean;
     virtual?: boolean;
     ui?: {
+        icon?: string;
         tabs?: CollectionTab[];
     };
 }

package/dist/utils.d.ts

@@ -1,6 +1,5 @@
 import { type ClassValue } from "clsx";
 import { MediaQuery } from 'svelte/reactivity';
-import type { CTX } from "./store.types";
 export declare function cn(...inputs: ClassValue[]): string;
 export type WithoutChild<T> = T extends {
     child?: any;
@@ -19,8 +18,6 @@ export declare const mediaQueries: {
     xl: MediaQuery;
     '2xl': MediaQuery;
 };
-export declare function getFieldRelation(ctx: CTX, collectionName: string, fieldName: string): any;
-export declare function recordHasChildrean(ctx: CTX, collectionName: string): boolean;
 export declare function calculateDrawerWidth(): number;
 export declare function getChangedProperties(oldObj: Record<string, any>, newObj: Record<string, any>): Record<string, any>;
 export declare function parseFunction(functionString: string): any;

package/dist/utils.js

@@ -15,27 +15,6 @@ export var mediaQueries = {
     xl: new MediaQuery('min-width: 1280px'),
     '2xl': new MediaQuery('min-width: 1536px'),
 };
-export function getFieldRelation(ctx, collectionName, fieldName) {
-    var relations = ctx.meta.relations;
-    for (var index = 0; index < relations.length; index++) {
-        var relation = relations[index];
-        if (relation.from.collection === collectionName && relation.from.field === fieldName) {
-            return relation;
-        }
-    }
-    return null;
-}
-;
-export function recordHasChildrean(ctx, collectionName) {
-    for (var index = 0; index < ctx.meta.relations.length; index++) {
-        var relation = ctx.meta.relations[index];
-        if (relation.to.collection === collectionName) {
-            return true;
-        }
-    }
-    return false;
-}
-;
 export function calculateDrawerWidth() {
     var backgroundDrawerButtons = document.querySelectorAll(".backgroundDrawerButton");
     var drawersCount = Array.from(backgroundDrawerButtons).length;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.19.1",
+  "version": "0.21.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.23.0",
+    "@lobb-js/core": "^0.25.0",
     "@chromatic-com/storybook": "^4.1.2",
     "@storybook/addon-a11y": "^10.0.1",
     "@storybook/addon-docs": "^10.0.1",

package/src/lib/actions.ts

@@ -15,6 +15,7 @@ export interface OpenDataTableDrawerProps {
     title?: string;
     showHeader?: boolean;
     showFooter?: boolean;
+    position?: "side" | "bottom";
 }
 
 export function showDialog(title: string, description: string): Promise<boolean> {

package/src/lib/components/dataTable/fieldCell.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { getFieldRelation } from "../../utils";
+    import { getFieldRelationTarget, getPolymorphicRelation, isRelationField } from "../../relations";
     import { ExternalLink } from "lucide-svelte";
     import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
     import { getField } from "./utils";
     import EnumBadge from "./enumBadge.svelte";
-    import _ from "lodash";
+    import PolymorphicFieldCell from "./polymorphicFieldCell.svelte";
     import { getStudioContext } from "../../context";
 
     const { ctx } = getStudioContext();
@@ -26,49 +26,50 @@
     }: Props = $props();
 
     const field = getField(ctx, fieldName, collectionName);
-    const relation = getFieldRelation(ctx, collectionName, fieldName);
-    const isRefrenceField = Boolean(
-        getFieldRelation(ctx, collectionName, fieldName),
-    );
+    const relationTarget = getFieldRelationTarget(ctx, collectionName, fieldName);
+    const polymorphicRelation = getPolymorphicRelation(ctx, collectionName, fieldName);
+    const isRefrenceField = isRelationField(ctx, collectionName, fieldName);
     const isPasswordField = ctx.meta.collections[collectionName].fields[fieldName]?.ui?.input?.type === "password";
 </script>
 
-{#if isPasswordField}
+{#if polymorphicRelation}
+    <PolymorphicFieldCell
+        collectionField={polymorphicRelation.from.collection_field}
+        idField={polymorphicRelation.from.id_field}
+        {entry}
+        bind:tableParams
+    />
+{:else if isRefrenceField}
+    {#if value?.id && value.id !== 0}
+        <div class="flex items-center gap-2">
+            <div>{value.id}</div>
+            {#if Object.values(value)[1]}
+                <div class="border bg-muted px-3 py-1 rounded-full">
+                    {Object.values(value)[1]}
+                </div>
+            {/if}
+            <UpdateDetailViewButton
+                collectionName={relationTarget!}
+                recordId={value.id}
+                variant="ghost"
+                class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
+                Icon={ExternalLink}
+                onSuccessfullSave={async () => {
+                    tableParams = { ...tableParams };
+                }}
+            />
+        </div>
+    {:else if value?.id === 0}
+        <div class="text-muted-foreground">PARENT ID</div>
+    {:else}
+        <div class="text-muted-foreground">NULL</div>
+    {/if}
+{:else if isPasswordField}
     <div class="text-muted-foreground tracking-widest">••••••</div>
 {:else if value === ""}
     <div class="text-muted-foreground">EMPTY STRING</div>
 {:else if value === null || value === undefined}
     <div class="text-muted-foreground">NULL</div>
-{:else if isRefrenceField}
-    {#if typeof value !== "object"}
-        <div>{value}</div>
-    {:else if value.id !== 0}
-        {@const primaryField = Object.values(value)[1]}
-        {#if value.id}
-            <div class="flex items-center gap-2">
-                <div>{value.id}</div>
-                {#if primaryField}
-                    <div class="border bg-muted px-3 py-1 rounded-full">
-                        {primaryField}
-                    </div>
-                {/if}
-                <UpdateDetailViewButton
-                    collectionName={relation.to.collection}
-                    recordId={value.id}
-                    variant="ghost"
-                    class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                    Icon={ExternalLink}
-                    onSuccessfullSave={async () => {
-                        tableParams = { ...tableParams };
-                    }}
-                ></UpdateDetailViewButton>
-            </div>
-        {:else}
-            <div class="text-muted-foreground">NULL</div>
-        {/if}
-    {:else}
-        <div class="text-muted-foreground">PARENT ID</div>
-    {/if}
 {:else if field?.enum}
     <EnumBadge {value} enum={field.enum} />
 {:else if field.type === "datetime"}