47 lines
1.4 KiB
Svelte
47 lines
1.4 KiB
Svelte
|
<script>
|
||
|
|
import Status from "./Status.svelte";
|
||
|
|
import {getStatus, getStatusList} from "./StatusText";
|
||
|
|
|
||
|
|
export let status;
|
||
|
|
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="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>
|