mainDisplay.html.twig 8.3 KB
Newer Older
1 2 3 4 5 6
{% extends "@Asso/layout.html.twig" %}

{% block title %}
    Liste des membres (Ajax)
{% endblock %}

7 8 9 10 11 12
{% block menu %}
<div class="row">
    <div class="col-6" style="margin-bottom: 3em;">
        <h3>Menu</h3>
        <ul class="fa-ul">
            <li><span class="fa-li"><i class="fas fa-arrow-left"></i></span><a href="{{ path('techno_homepage') }}">Accueil</a></li>
Mat's avatar
hop  
Mat committed
13 14
            <li><span class="fa-li"><i class="fas fa-arrow-right"></i></span><a href="{{ path('asso_membre_main_display') }}">Asso Ajax</a></li>

15 16 17
            <li><span class="fa-li"><i class="fas fa-th-list"></i></span><a href="{{ path('asso_association_read') }}">Les associations</a></li>
            <li><span class="fa-li"><i class="fas fa-th-list"></i></span><a href="{{ path('asso_membre_read') }}">Les membres</a></li>
        </ul>
Mat's avatar
hop  
Mat committed
18 19 20 21 22 23 24 25 26
        <hr>
        <a href="javascript: void(0);" class="btn btn-outline-dark btn-create">
            <i class="fas fa-plus"></i>
            Ajouter un nouveau membre
        </a>
        <a href="javascript: void(0);" class="btn btn-outline-dark btn-reload">
            <i class="fas fa-sync-alt"></i>
            Rafraichir la liste
        </a>
Mat's avatar
Mat committed
27 28 29 30 31 32 33 34 35 36 37

        <form id="pagination">
            <select class="custom-select custom-select-sm">
                <option selected>Pagination</option>
                <option value="3">3</option>
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
            </select>
        </form>

38
    </div>
Mat's avatar
Mat committed
39
    <div class="col-6">
40 41 42 43 44 45 46 47 48 49 50
        <a id="form-membre"></a>
        <div class="hidden" style="margin: -3em 0;">
            {{ form_start(formMembre) }}
            {{ form_errors(formMembre) }}
            {{ form_rest(formMembre) }}
            {{ form_end(formMembre) }}
        </div>
    </div>
</div>
{% endblock %}

51 52 53
{% block body %}
    <h2>{{ block('title') }}</h2>
    <table id="maintab" class="table membres">
54 55 56
        <thead>
            <tr>
                <th scope="col">
Mat's avatar
Mat committed
57
                    <a href="javascript: void(0);" id="id" class="btn-sort">#</a>
58 59
                </th>
                <th scope="col">
Mat's avatar
Mat committed
60
                    <a href="javascript: void(0);" id="firstname" class="btn-sort">Prénom</a>
61 62
                </th>
                <th scope="col">
Mat's avatar
Mat committed
63
                    <a href="javascript: void(0);" id="lastname" class="btn-sort">Nom</a>
64 65
                </th>
                <th scope="col">
Mat's avatar
Mat committed
66
                    <a href="javascript: void(0);" id="email" class="btn-sort">Email</a>
67 68
                </th>
                <th scope="col">
Mat's avatar
Mat committed
69
                    <a href="javascript: void(0);" id="association" class="btn-sort">Association</a>
70 71
                </th>
                <th scope="col">
72
                    <a>Action</a>
73 74 75 76
                </th>
            </tr>
        </thead>
        <tbody>
77

78
        </tbody>
79 80
    </table>
{% endblock %}
81 82 83 84 85 86 87

{% block customJS %}
<script type="text/javascript" src="{{ asset('js/script.js') }}"></script>
<script type="text/javascript">

    let submitURL = null;

Mat's avatar
Mat committed
88 89 90 91 92
    let step = 10;
    let page = 1;
    let col = 'id';
    let order = 'ASC';

93 94 95
    let table = document.querySelector('table#maintab.membres');
    let tbody = table.querySelector('tbody');

Mat's avatar
Mat committed
96 97 98 99 100 101 102 103
    function reloadTableMembre()
    {
        let membreURL = Routing.generate('api_membre_read_paginate', {
            'step' : step,
            'start' : page,
            'column' : col,
            'order' : order
        });
104 105 106 107

        tbody.innerHTML = null;
        AJAX('GET', membreURL, function(request)
        {
Mat's avatar
Mat committed
108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132
            let json = JSON.parse(request.responseText);
            for (var i = 0; i < json.length; i++) {
                tr = document.createElement('tr');

                td1 = document.createElement('td');
                td1.textContent = json[i].id;
                tr.appendChild(td1);

                td2 = document.createElement('td');
                td2.textContent = json[i].prenom;
                tr.appendChild(td2);

                td3 = document.createElement('td');
                td3.textContent = json[i].nom;
                tr.appendChild(td3);

                td4 = document.createElement('td');
                td4.textContent = json[i].email;
                tr.appendChild(td4);

                td5 = document.createElement('td');
                td5.textContent = json[i].association.nom;
                tr.appendChild(td5);

                td6 = document.createElement('td');
133 134 135

                let editBtn = document.createElement('button');
                editBtn.innerHTML = '<i class="fas fa-edit fa-fw"></i> Editer';
Mat's avatar
Mat committed
136
                editBtn.classList.add('btn', 'btn-dark', 'btn-sm');
137 138 139
                editBtn.dataset.membreId = json[i].id;
                editBtn.addEventListener('click', function(e)
                {
140 141 142 143 144 145 146 147 148 149 150 151 152
                    let membreId = this.dataset.membreId;
                    submitURL = Routing.generate('api_membre_update', {'id': membreId});
                    AJAX('GET', submitURL, function(request)
                    {
                        let json = JSON.parse(request.responseText);

                        form.querySelector('#membre_nom').value = json.nom;
                        form.querySelector('#membre_prenom').value = json.prenom;
                        form.querySelector('#membre_email').value = json.email;
                        form.querySelector('#membre_association').value = json.association.id;

                        form.parentNode.classList.remove('hidden');
                    });
153 154 155
                });
                td6.appendChild(editBtn);

156
                let deleteBtn = document.createElement('button');
Mat's avatar
Mat committed
157
                deleteBtn.innerHTML = '<i class="fas fa-trash fa-fw"></i>';
158 159 160 161 162
                deleteBtn.classList.add('btn', 'btn-danger', 'btn-sm');
                deleteBtn.dataset.membreId = json[i].id;
                deleteBtn.addEventListener('click', function(e)
                {
                    let membreId = this.dataset.membreId;
Mat's avatar
Mat committed
163 164
                    let r = confirm('Effacer le membre n°' + membreId
                        + '\nCette action n\'est pas réversible. Souhaitez-vous continuer ?\n');
165 166 167 168 169 170 171 172 173
                    if (r === true) {
                        submitURL = Routing.generate('api_membre_delete', {'id': membreId });
                        AJAX('DELETE', submitURL, function()
                        {
                            reloadTableMembre();
                        });
                    }
                });
                td6.appendChild(deleteBtn);
174

Mat's avatar
Mat committed
175 176 177 178
                tr.appendChild(td6);
                tbody.appendChild(tr);
            }

179 180 181 182
        });
    }
    reloadTableMembre();

183 184
    let form = document.querySelector('form[name=membre]');

185 186
    let reloadBtns = document.querySelectorAll('.btn-reload');
    reloadBtns.forEach(function(reloadBtn) {
187 188
        reloadBtn.addEventListener('dblclick', function(e)
        {
189 190 191 192
            reloadTableMembre();
        });
    });

193 194
    let createBtns = document.querySelectorAll('.btn-create');
    createBtns.forEach(function(createBtn) {
195 196 197 198 199 200 201
        createBtn.addEventListener('click', function(e)
        {
            form.querySelector('#membre_nom').value = null;
            form.querySelector('#membre_prenom').value = null;
            form.querySelector('#membre_email').value = null;
            form.querySelector('#membre_association').value = null;

202
            form.parentNode.classList.remove('hidden');
203
            submitURL = Routing.generate('api_membre_create');
204 205 206
        });
    });

207 208 209
    form.addEventListener('submit', function(e)
    {
        let form = this;
Mat's avatar
Mat committed
210
        e.preventDefault();
211 212 213 214 215 216 217 218
        AJAX('POST', submitURL, function()
        {
            reloadTableMembre();
            form.parentNode.classList.add('hidden');
        },
        form);
    });

219
    let stepform = document.querySelector('form#pagination select');
Mat's avatar
Mat committed
220
    stepform.addEventListener('change', function(e) {
221 222 223 224 225

        step = this.value;
        console.log('change step='+ step);
        console.log();

Mat's avatar
Mat committed
226
    });
227

228 229 230 231 232 233 234 235
    let columns = document.querySelectorAll('th[scope="col"] a.btn-sort');
    columns.forEach(function(column)
    {
        let col = column.getAttribute('id');
        column.addEventListener('click', function(e)
        {
            console.log('toggle id='+ col+ ' order='+ order);
            order = (order === 'ASC') ? 'DESC' : 'ASC';
Mat's avatar
Mat committed
236
        });
Mat's avatar
Mat committed
237 238 239
    });


240 241
</script>
{% endblock %}