refactor edit and edges

front/js/svelte/newPreview/Preview.svelte

@@ -1,61 +1,65 @@
 <script>
-    import { getContext, createEventDispatcher } from "svelte";
-    import PreviewEdge from "./preview/PreviewEdge.svelte";
-    import PreviewRecord from "./preview/PreviewRecord.svelte";
-    import Icon from "../common/Icon.svelte";
-    const dispatch = createEventDispatcher();
+    import File from "./includes/File.svelte";
+    import {previewTitle} from "../records/Preview.js";
+    import {getContext} from "svelte";
+    import Status from "../records/Status.svelte";
+
     const channel = getContext("channel");
-    export let classes = "";
-    export let hasDelete = false;
-    export let record
-    export let edge
-    export let graph
-    export let field
-    let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
+    export let record;
 
-    function remove(e) {
-        e.preventDefault();
-        dispatch("remove", record.id);
+    export let edge = null;
+    let schema = channel.schemas.find(s => s.name === record.schema);
+    let types = ["inline", "card"];
+    export let type = "inline";
+    if (!types.includes(type)) {
+        console.error("unknown preview type")
     }
+    export let editable = false;
+
 </script>
-
-
-<!-- Preview Edge-->
-<div
-
-        class="card mb-2 bg-light  {classes}"
-        style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
->
-    <div class="card-body d-flex flex-md-column">
-        {#if field.data}
-            <PreviewEdge {record} {edge} {graph} {field} {classes}/>
-        {:else}
-            <PreviewRecord {record} {graph} {classes} />
-        {/if}
-
-    </div>
-
-    {#if hasDelete}
-        <div class="position-absolute end-0" style="top:5px">
-            <button
-                    class="trash-button  text-dark btn btn-sm btn-link"
-                    on:click={remove}
-            >
-                <Icon icon="trash-can"/>
-            </button>
-        </div>
+<div class="preview-card">
+    {#if edge?.data}
+        <div class="preview-card-edge">Edge Data</div>
     {/if}
+    <div class="d-flex column-gap-3">
+        {#if record._file}
+            <div>
+                <File {record}/>
+            </div>
+        {/if}
+        <div class="d-flex flex-md-column " style="line-height: 22px">
+            <span class="">{previewTitle(record)}</span>
+            <span class="d-flex gap-1 text-muted">
+                {#if record.status === "draft"}
+                    <Status status={record.status}/>
+                {/if}
+                {schema.label}
+            </span>
+        </div>
+    </div>
 </div>
 
-
 <style>
-
-    .card .trash-button {
-        display: none;
+    .preview-card {
+        position: relative
     }
 
-    .card:hover .trash-button {
-        display: block;
+    .preview-card-edge {
+        position: absolute;
+        top: -28px;
+        background: #fff;
+        padding: 0px 5px;
+        border: 1px solid #ccc;
+        border-radius: 7px;
+        font-size: 14px;
     }
-
-</style>
+</style>
+<!--{#if record._file && type === "inline"}-->
+<!--&lt;!&ndash;    <FilePreviewInline {record} {edge} {editable}/>&ndash;&gt;-->
+<!--{:else if record._file && type === "card"}-->
+<!--    <FilePreviewCard {record} {edge} {editable}/>-->
+<!--{:else if type === "inline"}-->
+<!--&lt;!&ndash;    <DocPreviewCard {record} {edge} {editable}/>&ndash;&gt;-->
+<!--{:else if type === "card"}-->
+<!--&lt;!&ndash;    <DocPreviewCard {record} {edge} {editable}/>&ndash;&gt;-->
+<!--{/if}-->