Handle actions

ui/src/components/ActionList.svelte

@@ -0,0 +1,77 @@
+<script>
+ import { goto } from '$app/navigation';
+ import { page } from '$app/stores';
+
+ import {
+     Button,
+     Icon,
+     Spinner,
+ } from 'sveltestrap';
+
+ import { actions } from '../stores/actions';
+
+ export let flush = false;
+
+ export { className as class };
+ let className = '';
+
+ let refreshInProgress = 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}
+            <Button
+                href="routines/actions"
+                color="outline-info"
+                size="sm"
+            >
+                <Icon name="pencil" />
+            </Button>
+        {/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>