references

front/js/svelte/records/Edit.svelte

@@ -19,9 +19,9 @@
         records: [],
         edges: []
     };
-    export let recordHistory;
+    // export let recordHistory;
     export let isCreateMode;
-    export let isWritable = false;
+    // export let isWritable = false;
     export let users;
     let originalContent;
     let activeContentTab = "";
@@ -154,6 +154,7 @@
 <div class="record-edit">
     <div class="tools-header">
         <!--    <Manager managerRecords={recordHistory} {graph}/>-->
+        <EditHeader {schema} bind:record {isCreateMode} {graph} bind:activeContentTab/>
         {#if isCreateMode}
             <button
                     class="button primary btn-spinner"
@@ -180,7 +181,7 @@
                 Save
             </button>
         {/if}
-        <EditHeader {schema} bind:record {isCreateMode} {graph} bind:activeContentTab/>
+
     </div>
     <Title {schema} {record} {isCreateMode}/>
 

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

@@ -74,7 +74,10 @@
 {#if references.length > 0}
     <Sortable sortableClass="mt-3" on:update={reorder}>
         {#each references as reference (reference.id)}
-            <PreviewFile record={reference} hasDelete={true} on:remove={removeReference}></PreviewFile>
+            <!--This div helps the sorting thing-->
+            <div>
+                <PreviewFile record={reference} hasDelete={true} on:remove={removeReference}></PreviewFile>
+            </div>
         {/each}
     </Sortable>
 {/if}

front/js/svelte/records/elements/Reference.svelte

@@ -1,11 +1,11 @@
 <script>
     import {getContext} from "svelte";
     import {insertEdges} from "./reference";
-    import PreviewCard from "../PreviewCard.svelte";
     import {getErrorMessage} from "./errorMessage";
     import {sortByField} from "../../edges/sortEdges";
     import ReferenceInlineButtons from "./ReferenceInlineButtons.svelte";
     import Sortable from "../../libs/Sortable.svelte";
+    import PreviewReference from "../previews/PreviewReference.svelte";
 
     const channel = getContext("channel");
     export let record;
@@ -61,8 +61,8 @@
 {#if references.length > 0}
     <Sortable sortableClass="row row-cols-3 mt-3" on:update={reorder}>
         {#each references as reference (reference.id)}
-            <div class="col mb-3">
-                <PreviewCard
+            <div>
+                <PreviewReference
                     classes="h-100"
                     record={reference}
                     hasDelete={true}

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

@@ -60,7 +60,7 @@
     <button
             type="button"
             class:is-first={!recordId}
-            class=" btn btn-lg btn-link text-decoration-none inline-card-button"
+            class="button"
             on:click|preventDefault={(e) => (showOptions = !showOptions)}
     >
         <Icon width={24} height={24} icon="circle-plus"/>
@@ -95,21 +95,19 @@
         </div>
     {/if}
 {:else}
-    <div class="pb-2 text-start">
-        <div class="mb-2">
+    <div style="display:flex;align-items: center;gap: 4px">
             <button
-                    class="btn btn-sm btn-primary"
+                    class="button"
                     on:click={(e) => createInlineReference(e, schemas[0].name)}
             >New
             </button>
             <button
-                    class="btn btn-sm btn-outline-primary"
+                    class="button"
                     on:click={(e) => openBrowseModal(e, schemas[0].name)}
             >
                 <Icon icon="magnifying-glass"/>
             </button
             >
-        </div>
     </div>
 {/if}
 

front/js/svelte/records/header/EditHeader.svelte

@@ -21,8 +21,8 @@
 </script>
 
 
-    <StatusSelect bind:status={record.status} {record}></StatusSelect>
 
+<div style="display: flex;align-items: center; gap:10px;">
     {#if !isCreateMode}
         <Dropdown orientation="right">
             <div slot="button">
@@ -52,3 +52,5 @@
         </Dropdown>
     {/if}
 
+<StatusSelect bind:status={record.status} {record}></StatusSelect>
+</div>

front/js/svelte/records/header/Title.svelte

@@ -11,7 +11,11 @@
 
 <div class="record-header">
 
-
+    <a
+            class="schema-name"
+            href="{channel.lucentUrl}/content/{schema.name}"
+    >{schema.label.toUpperCase()}</a
+    >
     <span class="record-title">
         {#if !isCreateMode}
             {previewTitle(channel.schemas, record)}
@@ -19,9 +23,5 @@
             New Record
         {/if}
     </span>
-    <a
-            class="schema-name"
-            href="{channel.lucentUrl}/content/{schema.name}"
-    >{schema.label.toUpperCase()}</a
-    >
+
 </div>

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

@@ -0,0 +1,56 @@
+<script>
+    import Icon from "../../common/Icon.svelte";
+
+    import { getContext, createEventDispatcher } from "svelte";
+    import { previewTitle } from "./../Preview";
+    import Status from "./../Status.svelte";
+    const dispatch = createEventDispatcher();
+    const channel = getContext("channel");
+    export let graph;
+    export let record;
+    export let hasDelete = false;
+
+    let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
+    let cardTitle = previewTitle(channel.schemas, record, graph);
+    function remove(e) {
+        e.preventDefault();
+
+        dispatch("remove", record.id);
+    }
+</script>
+
+
+<div class="preview-reference">
+    <div style="display: flex;align-items: center;gap: 10px;">
+
+        <div class="title">
+            <div>
+                <a
+                        class="record-title"
+                        href="{channel.lucentUrl}/records/{record.id}"
+                >
+                    {cardTitle}
+                </a>
+                <small class="d-block">
+                    from {schema.label}
+                    {#if record.status === "draft"}
+                        <Status status={record.status}/>
+                    {/if}
+                </small>
+
+            </div>
+
+        </div>
+    </div>
+    {#if hasDelete}
+        <div class="trash-action">
+            <button
+                    class="button"
+                    on:click={remove}
+            >
+                <Icon icon="trash-can"/>
+            </button>
+        </div>
+    {/if}
+</div>
+