58 lines
1.8 KiB
Svelte
58 lines
1.8 KiB
Svelte
<script>
|
|
import {getContext} from "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);
|
|
const statusList = Object.values(getStatusList());
|
|
|
|
function updateStatus(e, statusValue) {
|
|
// e.preventDefault();
|
|
status = statusValue;
|
|
dropdown.click();
|
|
}
|
|
</script>
|
|
|
|
<!-- Example split danger button -->
|
|
<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.previewTargetUrl}?schema={schema.name}&id={record.id}" target="_blank" class="btn btn-info ms-3">
|
|
Preview
|
|
</a>
|
|
{/if}
|
|
</div>
|