spartacus-inventur-frontend/src/lib/Finish.svelte

<script lang="ts">
    import inventoryApi from "../stores/api";
    import { inventory } from "../stores/inventory";
    import Success from "./Success.svelte";

    export let finishKind = "";
    let windowIsVisible = "";
    let name = "";
    let comment = "";

    let successWindow;

    export const showWindow = () => windowIsVisible = "is-active";

    const closeWindow = () => {
        windowIsVisible = "";
    };    
</script>

<div class="modal {windowIsVisible}">
    <div class="modal-background"/>
        <div class="modal-card">

            {#if finishKind === "reset"}
                <header class="modal-card-head">
                    <p class="modal-card-title">Inventur neu beginnen ❌</p>
                    <button class="delete" aria-label="close" on:click={closeWindow}></button>
                </header>
                <section class="modal-card-body">
                    <p>Bist du dir sicher, dass du die Inventur abbrechen willst? Damit werden alle bereits eingegebenen Werte zurückgesetzt.</p>
                </section>
                <footer class="modal-card-foot">
                    <button class="button is-danger" on:click={inventoryApi.reset}>Ja, Reset!</button>
                    <button class="button" on:click={closeWindow}>Abbrechen</button>
                </footer>

            {:else if finishKind === "finish"}
                <!--Prevent saving empty inventories-->
                {#if $inventory.length > 0}
                    <header class="modal-card-head">
                        <p class="modal-card-title">Inventur abschließen ✅</p>
                        <button class="delete" aria-label="close" on:click={closeWindow}></button>
                    </header>
                    <section class="modal-card-body">
                        <p>
                            Vielen Dank, dass du eine Inventur gemacht hast! 🫶
                            <br>
                            Bitte gib noch deinen <strong>Namen</strong> ein. Außerdem hast du hier noch Platz für irgendwelche <strong>Kommentare</strong> zu deiner Inventur.
                        </p>
                        <br>
                        <div class="field">
                            <input class="input is-primary" type="text" placeholder="Name" bind:value={name} />
                        </div>
                        <div class="field">
                            <textarea class="textarea is-info" placeholder="Kommentare" bind:value={comment} />
                        </div>
                    </section>
                    <footer class="modal-card-foot">
                        {#if name.length > 0}
                            <button class="button is-primary" on:click={() => {
                                // TODO: Hier muss dann der Request an das Backend rausgehen!
                                closeWindow();
                                successWindow.showWindow();
                                setTimeout(() => inventoryApi.reset(), 2000);
                        }}>Abschließen</button>
                        {:else}
                            <button class="button" disabled>Abschließen</button>
                        {/if}
                        <button class="button" on:click={closeWindow}>Abbrechen</button>
                    </footer>
                {:else}
                <section class="modal-card-body">
                    <p>Du hast noch gar keine Daten erfasst... 🤓</p>
                </section>
                <footer class="modal-card-foot">
                    <button class="button" on:click={closeWindow}>Zurück</button>
                </footer>
                {/if}
            {/if}

        </div>
</div>

<Success bind:this={successWindow} />