updated dependencies

front/js/svelte/records/elements/File.svelte

@@ -1,17 +1,16 @@
 <script>
-    import {createEventDispatcher, getContext} from "svelte";
-    import {uniqBy} from "lodash";
     import {sortByField} from "../../edges/sortEdges";
     import Sortable from "../../libs/Sortable.svelte";
     import PreviewFile from "../previews/PreviewFile.svelte";
     import Dropdown from "../../common/Dropdown.svelte";
     import Dialog from "../../dialog/Dialog.svelte";
+    import {insertEdges} from "./reference.js";
+    import {getContext} from "svelte";
 
     const channel = getContext("channel");
     export let field;
     export let record;
     export let graph
-    const dispatch = createEventDispatcher();
     let browseModal;
     $: references = graph?.edges
         .filter((edge) => edge.field === field.name)
@@ -33,7 +32,6 @@
     function openBrowseModal(e, schema) {
         e.preventDefault();
         browseModal.open(schema);
-
     }
 
     async function reorder(e) {
@@ -45,26 +43,7 @@
     function insert(e) {
         e.preventDefault();
         browseModal.close();
-        const recordsToInsert = e.detail.records;
-        const action = e.detail.action;
-        let newEdges = recordsToInsert.map((r) => {
-            return {
-                target: r.id,
-                source: record.id,
-                sourceSchema: record.schema,
-                targetSchema: r.schema,
-                field: field.name,
-                rank: ""
-            };
-        });
-
-        let replacedEdges = graph.edges ?? [];
-        if (action === "replace") {
-            replacedEdges = replacedEdges.filter((e) => e.field !== field.name);
-        }
-
-        graph.records = uniqBy([...graph.records, ...recordsToInsert], (r) => r.id);
-        graph.edges = uniqBy([...replacedEdges, ...newEdges], (e) => e.target + e.field);
+        graph = insertEdges(graph, record, e.detail.records, field.name, e.detail.action);
     }
 </script>
 
@@ -85,8 +64,7 @@
                 <!-- {`${channelurl}/content/${collection.name}?parent=${record.id}&parentfield=${field.name}`} -->
                 <a
                         class="dropdown-item"
-                        on:click={(e) =>
-                                openBrowseModal(e, collection.name)}
+                        on:click={(e) => openBrowseModal(e, collection.name)}
                         href="/">{collection.label}</a
                 >
             {/each}
@@ -94,14 +72,10 @@
     {/if}
 </div>
 {#if references.length > 0}
-    <Sortable sortableClass="row row-cols-3 mt-3" on:update={reorder}>
+    <Sortable sortableClass="mt-3" on:update={reorder}>
         {#each references as reference (reference.id)}
-            <div class="col mb-3">
-                <PreviewFile record={reference} hasDelete={true} on:remove={removeReference}></PreviewFile>
-
-            </div>
+            <PreviewFile record={reference} hasDelete={true} on:remove={removeReference}></PreviewFile>
         {/each}
     </Sortable>
 {/if}
 <Dialog bind:this={browseModal} on:insert={insert}></Dialog>
-<!--<BrowseModal bind:this={browseModal} on:insert={insert}/>-->

front/js/svelte/records/elements/ReferenceInlineButtons.svelte

@@ -3,6 +3,7 @@
     import Icon from "../../common/Icon.svelte";
     import InlineEdit from "../InlineEdit.svelte";
     import BrowseModal from "./BrowseModal.svelte";
+    import Dialog from "../../dialog/Dialog.svelte";
 
     const dispatch = createEventDispatcher();
     // export let field;
@@ -120,7 +121,7 @@
     />
 {/if}
 
-<BrowseModal bind:this={browseModal} on:insert={insert}/>
+<Dialog bind:this={browseModal} on:insert={insert}/>
 
 <style>
     :global(.inline-card-wrapper) {