server/qa/ui/src/lib/components/QANewItem.svelte

<script>
 import { createEventDispatcher } from 'svelte';

 import {
     Button,
     Spinner,
 } from 'sveltestrap';

 import { QAQuery, QAStates } from '$lib/qa';
 import { ToastsStore } from '$lib/stores/toasts';

 const dispatch = createEventDispatcher();

 export let exercice = {};

 let newQuery = new QAQuery();

 let creationInProgress = false;
 function saveQuery() {
     newQuery.id_exercice = exercice.id;
     creationInProgress = true;
     newQuery.save().then((res) => {
         dispatch("new-query");
         newQuery = new QAQuery();
         creationInProgress = false;
     }).catch((err) => {
         creationInProgress = false;
         ToastsStore.addErrorToast({
             msg: err,
         })
     })
 }
</script>

<form on:submit|preventDefault={saveQuery} class="card mb-3">
    <div class="card-header">
        Qu'avez-vous pensé de cette étape&nbsp;?
    </div>
    <div class="card-body">
        <div class="mb-3 row">
            <label for="state" class="col-2 col-form-label col-form-label-sm">État</label>
            <div class="col-10">
	        <select class="form-select form-select-sm" id="state" bind:value={newQuery.state}>
                    {#each Object.keys(QAStates) as state}
                        <option value={state}>
                            {QAStates[state]}
                        </option>
                    {/each}
                </select>
            </div>
        </div>
        <div class="mb-3 row">
            <label for="subject" class="col-2 col-form-label col-form-label-sm">Sujet</label>
            <div class="col-10">
                <input
                    type="text"
                    class="form-control form-control-sm"
                    id="subject"
                    placeholder="Le pcap ne contient pas l'IP attendue"
                    bind:value={newQuery.subject}
                >
            </div>
        </div>
        <div class="mb-3 row">
            <label for="description" class="col-2 col-form-label col-form-label-sm">Description</label>
            <div class="col-10">
                <textarea class="form-control form-control-sm" placeholder="Ajouter un commentaire" rows="2" id="description" bind:value={newQuery.content}></textarea>
            </div>
        </div>
        <Button
            type="submit"
            color="primary"
            class="float-end"
            disabled={creationInProgress}
        >
            {#if creationInProgress}
                <Spinner size="sm" />
            {/if}
            Soumettre
        </Button>
    </div>
</form>