Legume/ajaxDisplay, optimisation du script, découpage en fonctions

src/PotageBundle/Resources/views/Legume/ajaxDisplay.html.twig

@@ -110,197 +110,22 @@
 <script type="text/javascript" src="{{ asset('js/ajax_functions.js') }}"></script>
 <script type="text/javascript">
 
-    let submitURL = null;
-
-    let table = document.querySelector('table#maintab.legumes');
-    let tbody = table.querySelector('tbody');
-
-    let total = parseInt(document.querySelector('#t_rows').textContent);
-    let tpage = document.querySelector('#t_pages');
-
-    let form = document.querySelector('form[name=legume]');
-    let titleForm = document.querySelector('#form-legume');
-
 
     /*
     *   Recharge la table
     */
-    let paginate = { 'step': 10, 'page': 1, 'column': 'id', 'order': 'ASC' };
     function reloadTableLegume(paginate)
     {
         //console.log(paginate);
-
-        tbody.innerHTML = null;
         let legumeURL = Routing.generate('api_legume_read', paginate);
 
-        getTableLegume(legumeURL);
         displayPagination(paginate);
-
+        refreshTableBodyLegume(legumeURL);
     }
-    reloadTableLegume(paginate);
 
-    /*
-    *   Recharge la table avec la fonction de recherche
-    */
-    function reloadTableSearchLegume(qString)
-    {
-        tbody.innerHTML = null;
-        let searchURL = Routing.generate('api_legume_search', {'q': qString });
-
-        getTableLegume(searchURL);
-        removePagination();
-        refreshSearchStats(searchURL);
-
-    }
 
     /*
-    *   Construit l'affichage de la table
-    */
-    function getTableLegume(legumeURL) {
-        AJAX('GET', legumeURL, function(request)
-        {
-            let json = JSON.parse(request.responseText);
-            //console.log(json);
-
-            for (let i = 0; i < json.length; i++)
-            {
-                let tr = document.createElement('tr');
-
-                let td1 = document.createElement('td');
-                td1.textContent = formatNumber(json[i].id, 3);
-                tr.appendChild(td1);
-
-                let td8 = document.createElement('td');
-                td8.innerHTML = (json[i].fruit === true) ? '<span class="badge badge-pill badge-info">F</span>' : 'L';
-                tr.appendChild(td8);
-
-                let td9 = document.createElement('td');
-                td9.innerHTML = (json[i].revente === true) ? '<span class="badge badge-pill badge-dark">R</span>' : null;
-                tr.appendChild(td9);
-
-                let td2 = document.createElement('td');
-                td2.textContent = json[i].nom;
-                tr.appendChild(td2);
-
-                let td3 = document.createElement('td');
-                td3.innerHTML = json[i].image ?
-                    '<div class="logo-sm"><div class="crop"><img src="/web/uploads/images/legumes/'
-                    + json[i].image + '" /></div></div>': null;
-                tr.appendChild(td3);
-
-                let td4 = document.createElement('td');
-                td4.innerHTML =
-                      (json[i].description ? json[i].description + '<br>' : '')
-                    + (json[i].origine ? '<span class="details">Origine: ' + json[i].origine + '</span><br>' : '')
-                    + '<span class="details">'
-                    + (json[i].quantite_min ? ' Min:' + json[i].quantite_min  : '')
-                    + (json[i].quantite_max ? ' | Max:' + json[i].quantite_max  : '')
-                    + (json[i].quantite_step ? ' | Step:' + json[i].quantite_step  : '')
-                    + '</span>';
-                tr.appendChild(td4);
-
-                let td5 = document.createElement('td');
-                td5.textContent = json[i].prix_unitaire + ' €';
-                tr.appendChild(td5);
-
-                let td6 = document.createElement('td');
-                td6.textContent = json[i].unite;
-                tr.appendChild(td6);
-
-                let td7 = document.createElement('td');
-
-                /*
-                *   Editer une rangée
-                */
-                let editBtn = document.createElement('button');
-                editBtn.innerHTML = '<i class="fas fa-edit fa-fw"></i> Editer';
-                editBtn.classList.add('btn', 'btn-dark', 'btn-sm', 'mb-1', 'mr-1');
-                editBtn.dataset.legumeId = json[i].id;
-                editBtn.dataset.toggle = "modal";
-                editBtn.dataset.target = ".form-legume-modal";
-                editBtn.addEventListener('click', function()
-                {
-                    let legumeId = this.dataset.legumeId;
-                    submitURL = Routing.generate('api_legume_update', {'id': legumeId});
-                    AJAX('GET', submitURL, function(request)
-                    {
-                        let json = JSON.parse(request.responseText);
-                        titleForm.textContent = 'Légume # ' + json.id;
-
-                        form.querySelector('#legume_nom').value = json.nom;
-                        let legumeFruit = form.querySelector('#legume_fruit');
-                        for(let i, j = 0; i = legumeFruit.options[j]; j++) {
-                            if(i.value === json.fruit) {
-                                legumeFruit.selectedIndex = j;
-                                break;
-                            }
-                        }
-                        form.querySelector('#legume_revente').value = json.revente;
-                        form.querySelector('#legume_revente').checked = json.revente;
-                        form.querySelector('#legume_description').value = json.description;
-                        form.querySelector('#legume_origine').value = json.origine ? json.origine : null;
-                        form.querySelector('#legume_quantiteMin').value = json.quantite_min ? json.quantite_min : null;
-                        form.querySelector('#legume_quantiteMax').value = json.quantite_max ? json.quantite_max : null;
-                        form.querySelector('#legume_quantiteStep').value = json.quantite_step ? json.quantite_step : null;
-                        form.querySelector('#legume_unite').value = json.unite;
-                        form.querySelector('#legume_prixUnitaire').value = json.prix_unitaire;
-                    });
-                });
-                td7.appendChild(editBtn);
-
-                /*
-                *   Dupliquer une rangée
-                */
-                let copyBtn = document.createElement('button');
-                copyBtn.setAttribute('title', 'Dupliquer');
-                copyBtn.innerHTML = '<i class="fas fa-clone fa-fw"></i>';
-                copyBtn.classList.add('btn', 'btn-secondary', 'btn-sm', 'mb-1', 'mr-1');
-                copyBtn.dataset.legumeId = json[i].id;
-                copyBtn.addEventListener('click', function()
-                {
-                    let legumeId = this.dataset.legumeId;
-                    let r = confirm('Dupliquer la rangée n°' + legumeId
-                        + '\nSouhaitez-vous continuer ?\n');
-                    if (r === true) {
-                        submitURL = Routing.generate('api_legume_duplicate', {'id': legumeId });
-                        AJAX('GET', submitURL, function()
-                        {
-                            reloadTableLegume();
-                        });
-                    }
-                });
-                td7.appendChild(copyBtn);
-
-                /*
-                *   Supprimer une rangée
-                */
-                let deleteBtn = document.createElement('button');
-                deleteBtn.setAttribute('title', 'Supprimer');
-                deleteBtn.innerHTML = '<i class="fas fa-trash fa-fw"></i>';
-                deleteBtn.classList.add('btn', 'btn-danger', 'btn-sm', 'mb-1', 'mr-1');
-                deleteBtn.dataset.legumeId = json[i].id;
-                deleteBtn.addEventListener('click', function()
-                {
-                    let legumeId = this.dataset.legumeId;
-                    let r = confirm('Effacer le légume n°' + legumeId
-                        + '\nCette action n\'est pas réversible. Souhaitez-vous continuer ?\n');
-                    if (r === true) {
-                        submitURL = Routing.generate('api_legume_delete', {'id': legumeId });
-                        AJAX('DELETE', submitURL, function()
-                        {
-                            reloadTableLegume();
-                        });
-                    }
-                });
-                td7.appendChild(deleteBtn);
-                tr.appendChild(td7);
-                tbody.appendChild(tr);
-            }
-        });
-    }
-
-    /*
-     *   Pagenav, pagination par page
+     *   Affiche le bloc de pagination
      */
     function displayPagination(paginate)
     {
@@ -336,12 +161,35 @@
             }
         });
     }
+
+
+    /*
+    *   Recharge la table avec la fonction de recherche
+    */
+    function reloadTableSearchLegume(qString)
+    {
+        let searchURL = Routing.generate('api_legume_search', qString);
+
+        removePagination();
+        refreshSearchStats(searchURL);
+        refreshTableBodyLegume(searchURL);
+    }
+
+
+    /*
+    *   Enlève le bloc de pagination
+    */
     function removePagination()
     {
         let pageNav = document.querySelector('nav#pagenav ul.pagination');
         tpage.innerHTML = null;
         pageNav.innerHTML = null;
     }
+
+
+    /*
+    *   Rafraîchit les stats de la page
+    */
     function refreshSearchStats(searchURL)
     {
         AJAX('GET', searchURL, function(request) {
@@ -350,8 +198,208 @@
         });
     }
 
+
+    /*
+    *   Rafraîchit l'affichage de la table légume
+    */
+    function refreshTableBodyLegume(URL)
+    {
+        tbody.innerHTML = null;
+        AJAX('GET', URL, function(request)
+        {
+            let json = JSON.parse(request.responseText);
+
+            for (let i = 0; i < json.length; i++)
+            {
+                let tr = buildRowLegume(json[i]);
+                tbody.appendChild(tr);
+            }
+        });
+    }
+
+
+    /*
+    *   Construit une rangée du tableau des Légumes
+    *   @param json object jsonRow
+    */
+    function buildRowLegume(jsonRow)
+    {
+        //console.log(jsonRow);
+
+        let tr = document.createElement('tr');
+
+        let td1 = document.createElement('td');
+        td1.textContent = formatNumber(jsonRow.id, 3);
+        tr.appendChild(td1);
+
+        let td8 = document.createElement('td');
+        td8.innerHTML = (jsonRow.fruit === true) ? '<span class="badge badge-pill badge-info">F</span>' : 'L';
+        tr.appendChild(td8);
+
+        let td9 = document.createElement('td');
+        td9.innerHTML = (jsonRow.revente === true) ? '<span class="badge badge-pill badge-dark">R</span>' : null;
+        tr.appendChild(td9);
+
+        let td2 = document.createElement('td');
+        td2.textContent = jsonRow.nom;
+        tr.appendChild(td2);
+
+        let td3 = document.createElement('td');
+        td3.innerHTML = jsonRow.image ?
+            '<div class="logo-sm"><div class="crop"><img src="/web/uploads/images/legumes/'
+            + jsonRow.image + '" /></div></div>': null;
+        tr.appendChild(td3);
+
+        let td4 = document.createElement('td');
+        td4.innerHTML =
+            (jsonRow.description ? jsonRow.description + '<br>' : '')
+            + (jsonRow.origine ? '<span class="details">Origine: ' + jsonRow.origine + '</span><br>' : '')
+            + '<span class="details">'
+            + (jsonRow.quantite_min ? ' Min:' + jsonRow.quantite_min  : '')
+            + (jsonRow.quantite_max ? ' | Max:' + jsonRow.quantite_max  : '')
+            + (jsonRow.quantite_step ? ' | Step:' + jsonRow.quantite_step  : '')
+            + '</span>';
+        tr.appendChild(td4);
+
+        let td5 = document.createElement('td');
+        td5.textContent = jsonRow.prix_unitaire + ' €';
+        tr.appendChild(td5);
+
+        let td6 = document.createElement('td');
+        td6.textContent = jsonRow.unite;
+        tr.appendChild(td6);
+
+        let td7 = document.createElement('td');
+        td7.appendChild(displayEditLegume(jsonRow));
+        td7.appendChild(displayDuplicateLegume(jsonRow));
+        td7.appendChild(displayDeleteLegume(jsonRow));
+        tr.appendChild(td7);
+
+        return tr;
+    }
+
+
+    /*
+    *   Affiche un bouton pour éditer une rangée
+    *   @param json object jsonRow
+    */
+    function displayEditLegume(jsonRow)
+    {
+        let editBtn = document.createElement('button');
+        editBtn.innerHTML = '<i class="fas fa-edit fa-fw"></i> Editer';
+        editBtn.classList.add('btn', 'btn-dark', 'btn-sm', 'mb-1', 'mr-1');
+        editBtn.dataset.legumeId = jsonRow.id;
+        editBtn.dataset.toggle = "modal";
+        editBtn.dataset.target = ".form-legume-modal";
+        editBtn.addEventListener('click', function()
+        {
+            let legumeId = this.dataset.legumeId;
+            submitURL = Routing.generate('api_legume_update', {'id': legumeId});
+            AJAX('GET', submitURL, function(request)
+            {
+                let json = JSON.parse(request.responseText);
+                titleForm.textContent = 'Légume # ' + json.id;
+
+                form.querySelector('#legume_nom').value = json.nom;
+                let legumeFruit = form.querySelector('#legume_fruit');
+                for(let i, j = 0; i = legumeFruit.options[j]; j++) {
+                    if(i.value === json.fruit) {
+                        legumeFruit.selectedIndex = j;
+                        break;
+                    }
+                }
+                form.querySelector('#legume_revente').value = json.revente;
+                form.querySelector('#legume_revente').checked = json.revente;
+                form.querySelector('#legume_description').value = json.description;
+                form.querySelector('#legume_origine').value = json.origine ? json.origine : null;
+                form.querySelector('#legume_quantiteMin').value = json.quantite_min ? json.quantite_min : null;
+                form.querySelector('#legume_quantiteMax').value = json.quantite_max ? json.quantite_max : null;
+                form.querySelector('#legume_quantiteStep').value = json.quantite_step ? json.quantite_step : null;
+                form.querySelector('#legume_unite').value = json.unite;
+                form.querySelector('#legume_prixUnitaire').value = json.prix_unitaire;
+            });
+        });
+        return editBtn;
+    }
+
+
+    /*
+    *   Affiche un bouton pour dupliquer une rangée
+    *   @param json object jsonRow
+    */
+    function displayDuplicateLegume(jsonRow)
+    {
+        let copyBtn = document.createElement('button');
+        copyBtn.setAttribute('title', 'Dupliquer');
+        copyBtn.innerHTML = '<i class="fas fa-clone fa-fw"></i>';
+        copyBtn.classList.add('btn', 'btn-secondary', 'btn-sm', 'mb-1', 'mr-1');
+        copyBtn.dataset.legumeId = jsonRow.id;
+        copyBtn.addEventListener('click', function()
+        {
+            let legumeId = this.dataset.legumeId;
+            let r = confirm('Dupliquer la rangée n°' + legumeId
+                + '\nSouhaitez-vous continuer ?\n');
+            if (r === true) {
+                submitURL = Routing.generate('api_legume_duplicate', {'id': legumeId });
+                AJAX('GET', submitURL, function()
+                {
+                    reloadTableLegume();
+                });
+            }
+        });
+        return copyBtn;
+    }
+
+
     /*
-    *   Recharger la page
+    *   Affiche un bouton pour supprimer une rangée
+    *   @param json object jsonRow
+    */
+    function displayDeleteLegume(jsonRow)
+    {
+        let deleteBtn = document.createElement('button');
+        deleteBtn.setAttribute('title', 'Supprimer');
+        deleteBtn.innerHTML = '<i class="fas fa-trash fa-fw"></i>';
+        deleteBtn.classList.add('btn', 'btn-danger', 'btn-sm', 'mb-1', 'mr-1');
+        deleteBtn.dataset.legumeId = jsonRow.id;
+        deleteBtn.addEventListener('click', function () {
+            let legumeId = this.dataset.legumeId;
+            let r = confirm('Effacer le légume n°' + legumeId
+                + '\nCette action n\'est pas réversible. Souhaitez-vous continuer ?\n');
+            if (r === true) {
+                submitURL = Routing.generate('api_legume_delete', {'id': legumeId});
+                AJAX('DELETE', submitURL, function () {
+                    reloadTableLegume();
+                });
+            }
+        });
+        return deleteBtn;
+    }
+
+
+    /*
+    *
+    *   Initialise l'affichage de la page
+    */
+
+    let submitURL = null;
+
+    let table = document.querySelector('table#maintab.legumes');
+    let tbody = table.querySelector('tbody');
+
+    let total = parseInt(document.querySelector('#t_rows').textContent);
+    let tpage = document.querySelector('#t_pages');
+
+    let form = document.querySelector('form[name=legume]');
+    let titleForm = document.querySelector('#form-legume');
+
+    let paginate = { 'step': 10, 'page': 1, 'column': 'id', 'order': 'ASC' };
+
+    reloadTableLegume(paginate);
+
+
+    /*
+    *   Bouton pour recharger la page
     */
     let reloadBtns = document.querySelectorAll('.btn-reload');
     reloadBtns.forEach(function(reloadBtn) {
@@ -362,8 +410,9 @@
         });
     });
 
+
     /*
-    *   Ajouter une nouveau légume
+    *   Bouton pour ajouter une nouveau légume
     */
     let createBtns = document.querySelectorAll('.btn-create');
     createBtns.forEach(function(createBtn) {
@@ -399,6 +448,7 @@
         form);
     });
 
+
     /*
     *   Définir le pas de la pagination
     */
@@ -411,6 +461,7 @@
         reloadTableLegume(paginate);
     });
 
+
     /*
     *   Tri par colonne, toggle
     */
@@ -436,6 +487,7 @@
         });
     });
 
+
     /*
     *   Recherche Live Ajax
     */
@@ -443,25 +495,25 @@
     let qString = null;
     searchField.addEventListener('input', function()
     {
-
         qString = this.value;
         if (qString.length >= 3) {
             // setTimeout(function(){ }, 500);
-            reloadTableSearchLegume(qString);
+            reloadTableSearchLegume({'q': qString });
         }
         if (qString.length === 0) {
             reloadTableLegume(paginate);
         }
+    });
 
-
-    }); /*
+    /*
     searchField.addEventListener('blur', function()
     {
         this.value = null;
         decompte(3, function() {
             reloadTableLegume(paginate);
         });
-    }); */
+    });
+    */
 
 
 </script>