mainDisplay.html.twig 11.7 KB
Newer Older
1 2 3
{% extends "@Asso/layout.html.twig" %}

{% block title %}
Mat's avatar
Mat committed
4
    Liste des membres
5 6
{% 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
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
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>
27 28 29

        <form id="pagination">
            <select class="custom-select custom-select-sm">
30
                <option value="-1" selected>Pagination</option>
31 32 33 34 35 36 37
                <option value="3">3</option>
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
            </select>
        </form>

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

                {{ form_row(formMembre.prenom) }}
46
                {{ form_row(formMembre.nom) }}
Mat's avatar
Mat committed
47 48 49 50
                {{ form_row(formMembre.email) }}
                {{ form_row(formMembre.association) }}
                <hr>

51 52 53 54 55 56 57
            {{ form_rest(formMembre) }}
            {{ form_end(formMembre) }}
        </div>
    </div>
</div>
{% endblock %}

58 59 60
{% block body %}
    <h2>{{ block('title') }}</h2>
    <table id="maintab" class="table membres">
61 62 63
        <thead>
            <tr>
                <th scope="col">
64
                    <a href="javascript: void(0);" id="id" class="btn-sort">#</a>
65 66
                </th>
                <th scope="col">
67
                    <a href="javascript: void(0);" id="prenom" class="btn-sort">Prénom</a>
68 69
                </th>
                <th scope="col">
70
                    <a href="javascript: void(0);" id="nom" class="btn-sort">Nom</a>
71 72
                </th>
                <th scope="col">
73
                    <a href="javascript: void(0);" id="email" class="btn-sort">Email</a>
74 75
                </th>
                <th scope="col">
76
                    <a href="javascript: void(0);" id="association" class="btn-sort">Association</a>
77 78
                </th>
                <th scope="col">
79
                    <a>Action</a>
80 81 82 83
                </th>
            </tr>
        </thead>
        <tbody>
84

85
        </tbody>
86
    </table>
87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111

    <nav id="pagenav" aria-label="page navigation membre">
    <ul class="pagination justify-content-center">
        {#
        <li class="page-item disabled">
            <span class="page-link">Précédent</span>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item active">
            <span class="page-link">2
                <span class="sr-only">(current)</span>
            </span>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">Suivant</a>
        </li>
        #}
    </ul>
    </nav>

112
{% endblock %}
113 114 115 116 117 118 119

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

    let submitURL = null;

Mat's avatar
Mat committed
120

121 122 123
    let table = document.querySelector('table#maintab.membres');
    let tbody = table.querySelector('tbody');

124
    let paginate = { 'step': 10, 'page': 1, 'column': 'id', 'order': 'DESC' };
125

Mat's avatar
Mat committed
126 127 128 129
    /*
    *   Recharge la table
    */

130
    function reloadTableMembre(paginate)
131
    {
132
        //console.log(paginate);
Mat's avatar
Mat committed
133

134
        tbody.innerHTML = null;
Mat's avatar
Mat committed
135
        let membreURL = Routing.generate('api_membre_read_paginate', paginate);
136 137 138

        AJAX('GET', membreURL, function(request)
        {
139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163
            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');
164

Mat's avatar
Mat committed
165 166 167 168
                /*
                *   Editer une rangée
                */

169 170
                let editBtn = document.createElement('button');
                editBtn.innerHTML = '<i class="fas fa-edit fa-fw"></i> Editer';
171
                editBtn.classList.add('btn', 'btn-dark', 'btn-sm');
172 173 174
                editBtn.dataset.membreId = json[i].id;
                editBtn.addEventListener('click', function(e)
                {
175 176 177 178 179 180 181 182 183 184 185 186 187
                    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');
                    });
188 189 190
                });
                td6.appendChild(editBtn);

Mat's avatar
Mat committed
191 192 193 194
                /*
                *   Supprimer une rangée
                */

195
                let deleteBtn = document.createElement('button');
196
                deleteBtn.innerHTML = '<i class="fas fa-trash fa-fw"></i>';
197 198 199 200 201
                deleteBtn.classList.add('btn', 'btn-danger', 'btn-sm');
                deleteBtn.dataset.membreId = json[i].id;
                deleteBtn.addEventListener('click', function(e)
                {
                    let membreId = this.dataset.membreId;
202 203
                    let r = confirm('Effacer le membre n°' + membreId
                        + '\nCette action n\'est pas réversible. Souhaitez-vous continuer ?\n');
Mat's avatar
Mat committed
204

205 206 207 208 209 210 211 212 213
                    if (r === true) {
                        submitURL = Routing.generate('api_membre_delete', {'id': membreId });
                        AJAX('DELETE', submitURL, function()
                        {
                            reloadTableMembre();
                        });
                    }
                });
                td6.appendChild(deleteBtn);
214

215 216 217 218
                tr.appendChild(td6);
                tbody.appendChild(tr);
            }

219
            /*
Mat's avatar
Mat committed
220
            *   Pagenav, pagination par page
221 222 223 224 225 226
            */

            let pageNav = document.querySelector('nav#pagenav ul.pagination');

            AJAX('GET', Routing.generate('api_membre_read_paginate'), function(request)
            {
Mat's avatar
Mat committed
227
                pageNav.innerHTML = null;
Mat's avatar
Mat committed
228

229 230 231 232
                let json = JSON.parse(request.responseText);
                let total = json.length;
                let perPage = paginate.step;

Mat's avatar
Mat committed
233 234
                if (total > perPage)
                {
Mat's avatar
Mat committed
235
                    let nbPages = Math.ceil(total / perPage);
Mat's avatar
Mat committed
236 237
                    currentPage = paginate.page;

Mat's avatar
Mat committed
238
                    for (let i = 1; i <= nbPages; i++)
Mat's avatar
Mat committed
239 240 241 242 243 244 245
                    {
                        let pageItem = document.createElement('li');
                        pageItem.classList.add('page-item', (i === currentPage) ? 'active' : null);

                        let pageItemChild = document.createElement((i === currentPage) ? 'span' : 'a');
                        pageItemChild.classList.add('page-link');
                        pageItemChild.textContent = i;
Mat's avatar
Mat committed
246 247 248

                        if (i !== currentPage)
                        {
Mat's avatar
Mat committed
249 250
                            pageItemChild.addEventListener('click', function(e)
                            {
Mat's avatar
Mat committed
251
                                paginate.page = i;
Mat's avatar
Mat committed
252 253 254 255 256 257
                                reloadTableMembre(paginate);
                            });
                        }
                        pageItem.appendChild(pageItemChild);
                        pageNav.appendChild(pageItem);
                    }
258
                }
259 260
            });

261 262
        });
    }
263
    reloadTableMembre(paginate);
264

265 266
    let form = document.querySelector('form[name=membre]');

Mat's avatar
Mat committed
267 268 269 270
    /*
    *   Recharger la page
    */

271 272
    let reloadBtns = document.querySelectorAll('.btn-reload');
    reloadBtns.forEach(function(reloadBtn) {
273 274
        reloadBtn.addEventListener('dblclick', function(e)
        {
275
            reloadTableMembre(paginate);
276 277 278
        });
    });

Mat's avatar
Mat committed
279 280 281 282
    /*
    *   Ajouter une nouveau membre
    */

283 284
    let createBtns = document.querySelectorAll('.btn-create');
    createBtns.forEach(function(createBtn) {
285 286 287 288 289 290 291
        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;

292
            form.parentNode.classList.remove('hidden');
293
            submitURL = Routing.generate('api_membre_create');
294 295 296
        });
    });

Mat's avatar
Mat committed
297 298 299 300
    /*
    *   Soumission du formulaire
    */

301 302 303
    form.addEventListener('submit', function(e)
    {
        let form = this;
Mat's avatar
Mat committed
304
        e.preventDefault();
305 306
        AJAX('POST', submitURL, function()
        {
307
            reloadTableMembre(paginate);
308 309 310 311 312
            form.parentNode.classList.add('hidden');
        },
        form);
    });

Mat's avatar
Mat committed
313 314 315
    /*
    *   Définir le pas de la pagination
    */
316

Mat's avatar
Mat committed
317 318 319
    let stepform = document.querySelector('form#pagination select');
    stepform.addEventListener('change', function(e)
    {
320
        step = (this.value === '-1') ? 10 : this.value;
Mat's avatar
Mat committed
321 322
        paginate.step = parseInt(step);
        paginate.page = 1;
323
        reloadTableMembre(paginate);
Mat's avatar
Mat committed
324
    });
325

Mat's avatar
Mat committed
326 327 328 329
    /*
    *   Tri par colonne, toggle
    */

330 331 332 333
    let columns = document.querySelectorAll('th[scope="col"] a.btn-sort');
    columns.forEach(function(column)
    {
        let col = column.getAttribute('id');
334

335 336
        column.addEventListener('click', function(e)
        {
337 338 339 340 341 342 343
            columns.forEach(function(column) {
                let oldCaret  = column.parentNode.querySelector('i.fas');
                if (oldCaret !== null) {
                    oldCaret.remove();
                }
            });

344
            paginate.column = col;
345 346 347 348 349 350 351
            paginate.order = (paginate.order === 'ASC') ? 'DESC' : 'ASC';
            reloadTableMembre(paginate);

            let th = this.parentNode;
            let newCaret = document.createElement('i');
            newCaret.classList.add('fas', (paginate.order === 'DESC') ? 'fa-caret-down' : 'fa-caret-up');
            th.appendChild(newCaret);
Mat's avatar
Mat committed
352

Mat's avatar
Mat committed
353
        });
354 355
    });

356 357
</script>
{% endblock %}