refactor fields

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

@@ -5,6 +5,7 @@
     import PreviewCard from "../PreviewCard.svelte";
     import Sortable from "../../libs/Sortable.svelte";
     import BrowseModal from "./BrowseModal.svelte";
+    import Preview from "../../newPreview/Preview.svelte";
 
     const channel = getContext("channel");
     export let field;
@@ -16,8 +17,11 @@
     $: 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)) ?? [];
+            return {
+                record:  graph.records.find((increc) => increc.id === edge.target && record.id === edge.source),
+                edge: edge,
+            }
+        }).filter((recordEdge) => (!!recordEdge.record?.id)) ?? [];
 
     let collections = channel.schemas.filter((aschema) =>
         field.collections.includes(aschema.name)
@@ -101,14 +105,22 @@
 </div>
 {#if references.length > 0}
     <Sortable sortableClass="row row-cols-3 mt-3" on:update={reorder}>
-        {#each references as reference (reference.id)}
+        {#each references as reference (reference.record.id)}
             <div class="col mb-3">
                 <PreviewCard
                     classes="h-100"
-                    record={reference}
+                    record={reference.record}
                     hasDelete={true}
                     on:remove={removeReference}
                 />
+<!--                <Preview-->
+<!--                        classes="h-100"-->
+<!--                        record={reference.record}-->
+<!--                        edge={reference.edge}-->
+<!--                        hasDelete={true}-->
+<!--                        {field}-->
+<!--                        on:remove={removeReference}-->
+<!--                />-->
             </div>
         {/each}
     </Sortable>