static

front/js/svelte/records/StatusSelect.svelte

@@ -1,8 +1,11 @@
 <script>
+    import {getContext} from "svelte";
     import Status from "./Status.svelte";
     import {getStatus, getStatusList} from "./StatusText";
 
+    const channel = getContext("channel");
     export let status = "draft";
+    export let record;
     export let schema;
     let dropdown;
     $: currentStatus = getStatus(status);
@@ -16,31 +19,40 @@
 </script>
 
 <!-- Example split danger button -->
-<div class="btn-group dropup">
-    <button type="button" class="btn btn-{currentStatus.bg}"
-    >{currentStatus.text}</button
-    >
-    <button
-        bind:this={dropdown}
-        type="button"
-        class="btn btn-{currentStatus.bg} dropdown-toggle dropdown-toggle-split"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-    >
-        <span class="visually-hidden">Toggle Dropdown</span>
-    </button>
-    <div class="dropdown-menu">
-        <div class="dropdown-header">Change status to</div>
-        {#each statusList as astatus}
-            {#if astatus.value !== status}
-                <button
-                    type="button"
-                    class="dropdown-item my-2 rounded w-100 bg-{astatus.bg} text-{astatus.color}"
-                    on:click={(e) => updateStatus(e, astatus.value)}
-                >
-                    {astatus.text}
-                </button>
-            {/if}
-        {/each}
+<div class="d-flex justify-content-between">
+    <div class="btn-group dropup">
+        <button type="button" class="btn btn-{currentStatus.bg}"
+        >{currentStatus.text}</button
+        >
+        <button
+                bind:this={dropdown}
+                type="button"
+                class="btn btn-{currentStatus.bg} dropdown-toggle dropdown-toggle-split"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+        >
+            <span class="visually-hidden">Toggle Dropdown</span>
+        </button>
+        <div class="dropdown-menu">
+            <div class="dropdown-header">Change status to</div>
+            {#each statusList as astatus}
+                {#if astatus.value !== status}
+                    <button
+                            type="button"
+                            class="dropdown-item my-2 rounded w-100 bg-{astatus.bg} text-{astatus.color}"
+                            on:click={(e) => updateStatus(e, astatus.value)}
+                    >
+                        {astatus.text}
+                    </button>
+                {/if}
+            {/each}
+        </div>
+
+
     </div>
+    {#if channel.previewTarget}
+        <a href="{channel.previewTarget}?schema={schema.name}&id={record.id}" target="_blank" class="btn btn-outline-info ms-3">
+            Preview
+        </a>
+    {/if}
 </div>