MonScoDocEssai/app/templates/assiduites/widgets/tableau_actions/modifier.j2

<h1>Modifier {{type}} </h1>

<form action="" method="post" enctype="multipart/form-data">
    <input type="hidden" name="obj_id" value="{{obj_id}}">
    <input type="hidden" name="table_url" id="table_url" value="">

    {% if type == "Assiduité" %}
    <input type="hidden" name="obj_type" value="assiduite">
    <legend for="etat">État</legend>
    <select name="etat" id="etat">
        <option value="absent">Absent</option>
        <option value="retard">Retard</option>
        <option value="present">Présent</option>
    </select>

    <legend for="moduleimpl_select">Module</legend>
    {{moduleimpl | safe}}

    <legend for="description">Description</legend>
    <textarea name="description" id="description" cols="50" rows="5">{{objet.description}}</textarea>

    {% else %}
    <input type="hidden" name="obj_type" value="justificatif">

    <legend for="date_debut">Date de début</legend>
    <scodoc-datetime name="date_debut" id="date_debut" value="{{objet.real_date_debut}}"></scodoc-datetime>
    <legend for="date_fin">Date de fin</legend>
    <scodoc-datetime name="date_fin" id="date_fin" value="{{objet.real_date_fin}}"></scodoc-datetime>

    <legend for="etat">État</legend>
    <select name="etat" id="etat">
        <option value="valide">Valide</option>
        <option value="non_valide">Non Valide</option>
        <option value="attente">En Attente</option>
        <option value="modifie">Modifié</option>
    </select>

    <legend for="raison">Raison</legend>
    <textarea name="raison" id="raison" cols="50" rows="5">{{objet.raison}}</textarea>

    <legend>Fichiers</legend>

    <div class="info-row">
        <label class="info-label">Fichiers enregistrés: </label>
        {% if objet.justification.fichiers.total != 0 %}
        <div>Total : {{objet.justification.fichiers.total}} </div>
        <ul>
            {% for filename in objet.justification.fichiers.filenames %}
            <li data-id="{{filename}}">
                <a data-file="{{filename}}">❌</a>
                <a data-link=""
                    href="{{url_for('api.justif_export',justif_id=objet.justif_id,filename=filename, scodoc_dept=g.scodoc_dept)}}"><span
                        data-file="{{filename}}">{{filename}}</span></a>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <span class="text">Aucun</span>
        {% endif %}
    </div>
    <br>
    <label for="justi_fich">Ajouter des fichiers:</label>
    <input type="file" name="justi_fich" id="justi_fich" multiple>


    {% endif %}
    <br>
    <br>
    <input type="submit" value="Valider">
</form>

<script>
    function removeFile(element) {
        const link = document.querySelector(`*[data-id="${element.getAttribute('data-file')}"] a[data-link] span`);
        link?.toggleAttribute("data-remove")
    }

    function deleteFiles(justif_id) {

        const filenames = Array.from(document.querySelectorAll("*[data-remove]")).map((el) => el.getAttribute("data-file"))
        obj = {
            "remove": "list",
            "filenames": filenames
        }
        //faire un POST à l'api justificatifs
    }

    window.addEventListener('load', () => {
        document.getElementById('etat').value = "{{objet.real_etat}}";
        document.getElementById('table_url').value = document.referrer;
        document.querySelectorAll("a[data-file]").forEach((e) => {
            e.addEventListener('click', () => {
                removeFile(e);
            })
        })
    })
</script>
<style>
    [data-remove] {
        text-decoration: line-through;
    }

    [data-file] {
        cursor: pointer;
        user-select: none;
    }
</style>