singleton and embed records

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

@@ -4,7 +4,13 @@
     import PreviewFile from "../previews/PreviewFile.svelte";
     import Dropdown from "../../common/Dropdown.svelte";
     import Dialog from "../../dialog/Dialog.svelte";
-    import {insertEdges} from "./reference.js";
+    import {
+        fullDeleteRecord,
+        graphToReferences,
+        insertEdges,
+        removeReferenceFromGraph,
+        restoreReferenceToGraph
+    } from "./reference.js";
     import {getContext} from "svelte";
 
     const channel = getContext("channel");
@@ -12,11 +18,7 @@
     export let record;
     export let graph
     let browseModal;
-    $: references = graph?.edges
-        .filter((edge) => edge.field === field.name)
-        .map((edge) => {
-            return graph.records.find((increc) => increc.id === edge.target && record.id === edge.source);
-        }).filter((rec) => (rec?.id ? true : false)) ?? [];
+    $: references = graphToReferences(graph, record, field)
 
     let collections = channel.schemas.filter((aschema) =>
         field.collections.includes(aschema.name)
@@ -24,9 +26,17 @@
 
     function removeReference(e) {
         e.preventDefault();
-        graph.edges = graph.edges.filter(
-            (edge) => !(edge.target === e.detail && edge.field === field.name)
-        );
+        graph.edges = removeReferenceFromGraph(graph, field, e.detail)
+    }
+
+    function restoreReference(e) {
+        e.preventDefault();
+        graph.edges = restoreReferenceToGraph(graph, field, e.detail)
+    }
+
+    function fullDelete(e) {
+        e.preventDefault();
+        graph.edges = fullDeleteRecord(channel,graph, field, e.detail)
     }
 
     function openBrowseModal(e, schema) {
@@ -73,10 +83,17 @@
 </div>
 {#if references.length > 0}
     <Sortable sortableClass="mt-3" on:update={reorder}>
-        {#each references as reference (reference.id)}
+        {#each references as reference (reference.record.id)}
             <!--This div helps the sorting thing-->
             <div>
-                <PreviewFile record={reference} hasDelete={true} on:remove={removeReference}></PreviewFile>
+                <PreviewFile
+                        record={reference.record}
+                        edge={reference.edge}
+                        hasDelete={true}
+                        on:remove={removeReference}
+                        on:restore={restoreReference}
+                        on:fulldelete={fullDelete}
+                ></PreviewFile>
             </div>
         {/each}
     </Sortable>