atsebay.t/ui/src/lib/components/WorkAdmin.svelte

<script>
 import { createEventDispatcher } from 'svelte';
 import { goto } from '$app/navigation';

 import { getCategories } from '$lib/categories';
 import DateTimeInput from './DateTimeInput.svelte';
 import { ToastsStore } from '$lib/stores/toasts';

 const dispatch = createEventDispatcher();
 export let work = null;

 function saveWork() {
     work.save().then((response) => {
         dispatch('saved', response);
     }, (error) => {
         ToastsStore.addErrorToast({
             msg: error,
         });
     })
 }

 function deleteWork() {
     work.delete().then((response) => {
         goto(`works`);
     }, (error) => {
         ToastsStore.addErrorToast({
             msg: error,
         });
     })
 }

 function duplicateWork() {
     work.duplicate().then((response) => {
         goto(`works/${response.id}`);
     }).catch((error) => {
         ToastsStore.addErrorToast({
             msg: error,
         });
     })
 }

</script>

<form on:submit|preventDefault={saveWork}>

    {#if work.id}
        <div class="row">
            <div class="col-sm-3 text-sm-end">
                <label for="title" class="col-form-label col-form-label-sm">Identifiant du travail</label>
            </div>
            <div class="col-sm-8">
                <input type="text" class="form-control-plaintext form-control-sm" id="title" value={work.id}>
            </div>
        </div>
    {/if}

    <div class="row">
        <div class="col-sm-3 text-sm-end">
            <label for="title" class="col-form-label col-form-label-sm">Titre du travail</label>
        </div>
        <div class="col-sm-8">
            <input type="text" class="form-control form-control-sm" id="title" bind:value={work.title}>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-3 text-sm-end">
            <label for="category" class="col-form-label col-form-label-sm">Catégorie</label>
        </div>
        <div class="col-sm-8 col-md-4 col-lg-2">
            {#await getCategories() then categories}
                <select id="category" class="form-select form-select-sm" bind:value={work.id_category}>
                    {#each categories as category (category.id)}
                        <option value={category.id}>{category.label} {category.promo}</option>
                    {/each}
                </select>
            {/await}
        </div>
    </div>

    <div class="row">
        <div class="col-sm-3 text-sm-end">
            <label for="promo" class="col-form-label col-form-label-sm">Promo</label>
        </div>
        <div class="col-sm-8 col-md-4 col-lg-2">
            <input type="number" step="1" min="0" max="2068" class="form-control form-control-sm" id="promo" bind:value={work.promo}>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-3 text-sm-end">
            <label for="group" class="col-form-label col-form-label-sm">Restreindre au groupe</label>
        </div>
        <div class="col-sm-8 col-md-4 col-lg-2">
            <input class="form-control form-control-sm" id="group" bind:value={work.group}>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-3 text-sm-end">
            <label for="tagprefix" class="col-form-label col-form-label-sm">Préfixe des tag à regarder</label>
        </div>
        <div class="col-sm-8 col-md-4 col-lg-2">
            <input class="form-control form-control-sm" id="tagprefix" bind:value={work.tag}>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-3 text-sm-end">
            <label for="submissionurl" class="col-form-label col-form-label-sm">URL validation la soumission</label>
        </div>
        <div class="col-sm-8 col-md-4 col-lg-2">
            <input class="form-control form-control-sm" id="submissionurl" bind:value={work.submission_url}>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-3 text-sm-end">
            <label for="start_availability" class="col-form-label col-form-label-sm">Date de début</label>
        </div>
        <div class="col-sm-8">
            <DateTimeInput class="form-control form-control-sm" id="start_availability" bind:date={work.start_availability} />
        </div>
    </div>

    <div class="row">
        <div class="col-sm-3 text-sm-end">
            <label for="end_availability" class="col-form-label col-form-label-sm">Date de fin</label>
        </div>
        <div class="col-8">
            <DateTimeInput class="form-control form-control-sm" id="end_availability" bind:date={work.end_availability} />
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-sm-3 text-sm-end">
            <label for="work_description" class="col-form-label col-form-label-sm">Description</label>
        </div>
        <div class="col-8">
            <textarea class="form-control" id="work_description" bind:value={work.descr_raw}></textarea>
        </div>
    </div>

    <div class="row row-cols-3 mx-1 my-2">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="shown" bind:checked={work.shown}>
            <label class="form-check-label" for="shown">
                Afficher le travail
            </label>
        </div>

        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="corrected" bind:checked={work.corrected}>
            <label class="form-check-label" for="corrected">
                Marqué comme corrigé
            </label>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-sm-10">
            <button type="submit" class="btn btn-primary">Enregistrer</button>
            {#if work.id}
                <button type="button" class="btn btn-danger" on:click={deleteWork}>Supprimer</button>
                <button type="button" class="btn btn-secondary" on:click={duplicateWork}>Dupliquer avec ces nouveaux paramètres</button>
            {/if}
        </div>
    </div>

</form>