records and edgs

front/js/svelte/records/previews/PreviewReference.svelte

@@ -1,9 +1,11 @@
 <script>
     import Icon from "../../common/Icon.svelte";
 
-    import { getContext, createEventDispatcher } from "svelte";
-    import { previewTitle } from "./../Preview";
+    import {createEventDispatcher, getContext} from "svelte";
+    import {previewTitle} from "./../Preview";
     import Status from "./../Status.svelte";
+    import Preview from "../../files/Preview.svelte";
+
     const dispatch = createEventDispatcher();
     const channel = getContext("channel");
     export let graph;
@@ -12,9 +14,11 @@
 
     let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
     let cardTitle = previewTitle(channel.schemas, record, graph);
+    const cardImageEdge = graph.edges.find(e => e.source === record.id  && e.field === schema.cardImage);
+    let cardImageRecord = graph.records.find(r => r.id === cardImageEdge?.target);
+
     function remove(e) {
         e.preventDefault();
-
         dispatch("remove", record.id);
     }
 </script>
@@ -23,6 +27,11 @@
 <div class="preview-reference">
     <div style="display: flex;align-items: center;gap: 10px;">
 
+        {#if cardImageRecord}
+            <div class="image">
+                <Preview record={cardImageRecord} size="small"/>
+            </div>
+        {/if}
         <div class="title">
             <div>
                 <a
@@ -43,7 +52,7 @@
         </div>
     </div>
     {#if hasDelete}
-        <div class="trash-action">
+        <div class="reference-action">
             <button
                     class="button"
                     on:click={remove}