reveil/ui/src/lib/components/ActionList.svelte
Pierre-Olivier Mercier 1378636a98
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/tag Build is passing
migration to Svelte 5
2025-01-04 15:53:07 +01:00

72 lines
2 KiB
Svelte

<script>
import { page } from '$app/stores';
import {
Button,
Icon,
Spinner,
} from '@sveltestrap/sveltestrap';
import { actions } from '$lib/stores/actions';
let { flush = false, class: className = '' } = $props();
let refreshInProgress = $state(false);
function refresh_actions() {
refreshInProgress = true;
actions.refresh().then(() => {
refreshInProgress = false;
});
}
</script>
<div class="d-flex justify-content-between align-items-center" class:px-2={flush}>
<h2>
Actions
</h2>
<div>
{#if !flush}
<a
href="routines/actions"
class="btn btn-sm btn-outline-info"
>
<Icon name="pencil" />
</a>
{/if}
<Button
color="outline-dark"
size="sm"
title="Rafraîchir la liste des actions"
on:click={refresh_actions}
disabled={refreshInProgress}
>
{#if !refreshInProgress}
<Icon name="arrow-clockwise" />
{:else}
<Spinner color="dark" size="sm" />
{/if}
</Button>
</div>
</div>
<div class="list-group {className}" class:list-group-flush={flush}>
{#if $actions.list}
{#each $actions.list as action (action.id)}
<a
href="routines/actions/{action.id}"
class="list-group-item list-group-item-action"
class:active={$page.url.pathname.indexOf('/actions/') !== -1 && $page.params.aid == action.id}
aria-current="true"
>
<span class:fw-bold={action.enabled}>{action.name}</span>
</a>
{/each}
{:else}
{#await actions.refresh()}
<div class="d-flex justify-content-center align-items-center gap-2">
<Spinner color="primary" /> Chargement en cours&hellip;
</div>
{:then}
test
{/await}
{/if}
</div>