Skip to content

GitLab

Commit b1431779 authored by Mat's avatar Mat
Browse files

ajaxDisplay, factorise au maximum les fonctions réutilisables

parent d7d6493d
Hide whitespace changes
Inline Side-by-side
src/PotageBundle/Resources/views/Legume/ajaxDisplay.html.twig
View file @ b1431779
......@@ -112,74 +112,24 @@
<script type="text/javascript">
/*
* Compte les rangées de la table légume
*/
function getTotalRows()
{
AJAX('GET', Routing.generate('api_legume_count'), function(request)
{
let json = JSON.parse(request.responseText);
totalRows.dataset.total = json;
totalRows.textContent = json + (json > 1 ? ' légumes' : ' légume');
});
}
/*
* Recharge la table
*/
function reloadTableLegume(paginate)
{
tbody.innerHTML = null;
//console.log(paginate);
let legumeURL = Routing.generate('api_legume_read', paginate);
getTotalRows();
displayPagination(paginate);
getTableBodyLegume(legumeURL);
}
tbody.innerHTML = null;
refreshTotalRowsStats(countURL);
/*
* Affiche le bloc de pagination
*/
function displayPagination(paginate)
{
let pageNav = document.querySelector('nav#pagenav ul.pagination');
AJAX('GET', Routing.generate('api_legume_read', paginate), function()
let legumeURL = Routing.generate('api_legume_read', paginate);
displayPagination(legumeURL, paginate, function()
{
totalPage.innerHTML = null;
pageNav.innerHTML = null;
let perPage = paginate.step;
if (totalRows.dataset.total > perPage)
{
let nbPages = Math.ceil(totalRows.dataset.total / perPage);
let currentPage = paginate.page;
for (let i = 1; i <= nbPages; i++)
{
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.toString();
if (i !== currentPage)
{
pageItemChild.addEventListener('click', function()
{
paginate.page = i;
reloadTableLegume(paginate);
});
}
pageItem.appendChild(pageItemChild);
pageNav.appendChild(pageItem);
}
totalPage.innerHTML = '— page '+ currentPage + ' sur '+ nbPages;
}
reloadTableLegume(paginate);
});
getTableBodyLegume(legumeURL);
}
......@@ -188,9 +138,9 @@
*/
function reloadTableSearchLegume(qString)
{
let searchURL = Routing.generate('api_legume_search', qString);
removePagination();
let searchURL = Routing.generate('api_legume_search', qString);
refreshSearchStats(searchURL);
tbody.innerHTML = null;
......@@ -201,29 +151,6 @@
}
/*
* Enlève le bloc de pagination
*/
function removePagination()
{
let pageNav = document.querySelector('nav#pagenav ul.pagination');
totalPage.innerHTML = null;
pageNav.innerHTML = null;
}
/*
* Rafraîchit les stats de la page
*/
function refreshSearchStats(searchURL)
{
AJAX('GET', searchURL, function(request) {
let json = JSON.parse(request.responseText);
totalPage.innerHTML = '— '+ json.length +' résultats';
});
}
/*
* Rafraîchit l'affichage de la table légume
*/
......@@ -310,12 +237,9 @@
*/
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";
let editBtn = buildEditBtn();
editBtn.dataset.target = ".form-legume-modal";
editBtn.dataset.legumeId = jsonRow.id;
editBtn.addEventListener('click', function()
{
let legumeId = this.dataset.legumeId;
......@@ -357,10 +281,7 @@
*/
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');
let copyBtn = buildCloneBtn();
copyBtn.dataset.legumeId = jsonRow.id;
copyBtn.addEventListener('click', function()
{
......@@ -385,10 +306,7 @@
*/
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');
let deleteBtn = buildDeleteBtn();
deleteBtn.dataset.legumeId = jsonRow.id;
deleteBtn.addEventListener('click', function()
{
......@@ -413,13 +331,10 @@
*/
function displayInsertLegume(jsonRow)
{
let insertBtn = document.createElement('button');
let insertBtn = buildInsertBtn();
insertBtn.setAttribute('title', 'Insérer dans une offre');
insertBtn.innerHTML = '<i class="fas fa-clipboard-check fa-fw"></i> Insérer <i class="fas fa-chevron-right fa-fw"></i>';
insertBtn.classList.add('btn', 'btn-info', 'btn-sm', 'mb-1', 'mr-1');
insertBtn.dataset.legumeId = jsonRow.id;
insertBtn.dataset.toggle = "modal";
insertBtn.dataset.target = ".form-offre-legume-insert-modal";
insertBtn.dataset.legumeId = jsonRow.id;
insertBtn.addEventListener('click', function()
{
let legumeId = this.dataset.legumeId;
......@@ -452,10 +367,10 @@
}
/*
*
* =================================
* Initialise l'affichage de la page
* =================================
*/
let submitURL = null;
......@@ -463,55 +378,46 @@
let table = document.querySelector('table#maintab.legumes');
let tbody = table.querySelector('tbody');
let totalRows = document.querySelector('#totalRows');
let totalPage = document.querySelector('#totalPages');
let paginate = { 'step': 10, 'page': 1, 'column': 'id', 'order': 'ASC' };
let form = document.querySelector('form[name=legume]');
let formInsert = document.querySelector('form[name=offre_legumes_insert]');
let paginate = { 'step': 10, 'page': 1, 'column': 'id', 'order': 'ASC' };
let countURL = Routing.generate('api_legume_count');
refreshTotalRowsStats(countURL);
getTotalRows();
reloadTableLegume(paginate);
selectPaginateStep(paginate, function() {
searchField.value = null;
reloadTableLegume(paginate);
});
/*
* Bouton pour recharger la page
*/
let reloadBtns = document.querySelectorAll('.btn-reload');
reloadBtns.forEach(function(reloadBtn) {
reloadBtn.addEventListener('click', function()
{
getTotalRows();
reloadTableLegume(paginate);
searchField.value = null;
});
sortToggleByColumn(paginate, function () {
reloadTableLegume(paginate);
});
reloadButton(function() {
searchField.value = null;
refreshTotalRowsStats(countURL);
reloadTableLegume(paginate);
});
/*
* Bouton pour ajouter une nouveau légume
*/
let titleForm = document.querySelector('#form-legume');
let createBtns = document.querySelectorAll('.btn-create');
createBtns.forEach(function(createBtn) {
createBtn.addEventListener('click', function()
{
titleForm.textContent = 'Nouveau légume';
form.querySelector('#legume_nom').value = null;
form.querySelector('#legume_fruit').selectedIndex = true;
form.querySelector('#legume_revente').value = false;
form.querySelector('#legume_revente').checked = false;
form.querySelector('#legume_description').value = null;
form.querySelector('#legume_origine').value = null;
form.querySelector('#legume_quantiteMin').value = null;
form.querySelector('#legume_quantiteMax').value = null;
form.querySelector('#legume_quantiteStep').value = null;
form.querySelector('#legume_unite').value = 'kg';
form.querySelector('#legume_prixUnitaire').value = null;
submitURL = Routing.generate('api_legume_create');
});
createButton(function() {
titleForm.textContent = 'Nouveau légume';
form.querySelector('#legume_nom').value = null;
form.querySelector('#legume_fruit').selectedIndex = true;
form.querySelector('#legume_revente').value = false;
form.querySelector('#legume_revente').checked = false;
form.querySelector('#legume_description').value = null;
form.querySelector('#legume_origine').value = null;
form.querySelector('#legume_quantiteMin').value = null;
form.querySelector('#legume_quantiteMax').value = null;
form.querySelector('#legume_quantiteStep').value = null;
form.querySelector('#legume_unite').value = 'kg';
form.querySelector('#legume_prixUnitaire').value = null;
submitURL = Routing.generate('api_legume_create');
});
......@@ -524,7 +430,7 @@
e.preventDefault();
AJAX('POST', submitURL, function()
{
getTotalRows();
refreshTotalRowsStats(countURL);
reloadTableLegume(paginate);
$('.form-legume-modal').modal('hide'); // en jquery
},
......@@ -544,47 +450,6 @@
});
/*
* Définir le pas de la pagination
*/
let stepform = document.querySelector('form#pagination select');
stepform.addEventListener('change', function()
{
let step = (this.value === '-1') ? 10 : this.value;
paginate.step = parseInt(step);
paginate.page = 1;
searchField.value = null;
reloadTableLegume(paginate);
});
/*
* Tri par colonne, toggle
*/
let columns = document.querySelectorAll('th[scope="col"] a.btn-sort');
columns.forEach(function(column)
{
let col = column.getAttribute('id');
column.addEventListener('click', function()
{
columns.forEach(function(column) {
let oldCaret = column.parentNode.querySelector('i.fas');
if (oldCaret !== null) {
oldCaret.remove();
}
});
paginate.column = col;
paginate.order = (paginate.order === 'ASC') ? 'DESC' : 'ASC';
reloadTableLegume(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);
});
});
/*
* Recherche Live Ajax
*/
......
src/PotageBundle/Resources/views/Offre/ajaxDisplay.html.twig
View file @ b1431779
......@@ -247,7 +247,7 @@
let href = Routing.generate('potage_offre_legumes_ajax_display', {'id': jsonRow.id });
referenceBtn.setAttribute('href', href);
referenceBtn.setAttribute('title', 'Éditer');
referenceBtn.classList.add('btn', 'btn-outline-dark', 'btn-sm', 'mb-2', 'mr-2');
referenceBtn.classList.add('btn', 'btn-outline-dark', 'btn-sm', 'mb-1', 'mr-1');
referenceBtn.textContent = jsonRow.reference;
td6.appendChild(referenceBtn);
if (jsonRow.status === 'draft')
......@@ -349,10 +349,7 @@
*/
function displayDeleteOffre(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-2', 'btn-delete');
let deleteBtn = buildDeleteBtn();
deleteBtn.dataset.offreId = jsonRow.id;
deleteBtn.addEventListener('click', function()
{
......@@ -396,30 +393,13 @@
reloadTables();
/*
* Bouton pour recharger la page
*/
let reloadBtns = document.querySelectorAll('.btn-reload');
reloadBtns.forEach(function(reloadBtn) {
reloadBtn.addEventListener('click', function()
{
reloadTables();
});
reloadButton(function(){
reloadTables();
});
/*
* Ajouter une nouvelle offre
*/
let createBtns = document.querySelectorAll('.btn-create');
createBtns.forEach(function(createBtn) {
createBtn.addEventListener('click', function()
{
titleForm.textContent = 'Nouvelle offre';
submitURL = Routing.generate('api_offre_create');
});
createButton(function(){
titleForm.textContent = 'Nouvelle offre';
submitURL = Routing.generate('api_offre_create');
});
......
src/PotageBundle/Resources/views/OffreLegumes/ajaxDisplay.html.twig
View file @ b1431779
......@@ -34,11 +34,11 @@
<div class="col right hd-1">
<div style="margin-top: 0.65em;">
{#
<a href="javascript: void(0);" class="btn btn-outline-dark mb-2 btn-reload">
<i class="fas fa-sync-alt"></i>
Rafraîchir la liste
</a>
{#
<a href="javascript: void(0);" class="btn btn-dark mb-2 btn-create"
data-toggle="modal" data-target=".form-offre-modal">
<i class="fas fa-plus"></i>
......@@ -209,19 +209,10 @@
reloadGridLegumes();
/*
* Bouton pour recharger la page
*/
let reloadBtns = document.querySelectorAll('.btn-reload');
reloadBtns.forEach(function(reloadBtn) {
reloadBtn.addEventListener('click', function()
{
reloadGridLegumes();
});
reloadButton(function(){
reloadGridLegumes();
});
/*
* Un form 'sorted' affiche en console
* un tableau avec l'ordre souhaité
......@@ -235,7 +226,6 @@
{
list[i] = items[i].dataset.legumeId;
}
//console.log(list);
let input = document.querySelector('input#offre_sorted_sorted');
input.value = list;
......
web/js/ajax_functions.js
View file @ b1431779
/*
* Bouton pour recharger la page
*/
function reloadButton(callback)
{
let reloadBtns = document.querySelectorAll('.btn-reload');
reloadBtns.forEach(function(reloadBtn) {
reloadBtn.addEventListener('click', function()
{
callback();
});
});
}
/*
* Bouton pour ajouter un nouvel objet
*/
function createButton(callback)
{
let createBtns = document.querySelectorAll('.btn-create');
createBtns.forEach(function(createBtn) {
createBtn.addEventListener('click', function()
{
callback();
});
});
}
/*
* Construit les boutons
*/
function buildEditBtn()
{
let btn = document.createElement('button');
btn.innerHTML = '<i class="fas fa-edit fa-fw"></i> Editer';
btn.classList.add('btn', 'btn-dark', 'btn-sm', 'mb-1', 'mr-1');
btn.dataset.toggle = "modal";
return btn;
}
function buildCloneBtn()
{
let btn = document.createElement('button');
btn.setAttribute('title', 'Dupliquer');
btn.innerHTML = '<i class="fas fa-clone fa-fw"></i>';
btn.classList.add('btn', 'btn-secondary', 'btn-sm', 'mb-1', 'mr-1');
return btn;
}
function buildDeleteBtn()
{
let btn = document.createElement('button');
btn.setAttribute('title', 'Supprimer');
btn.innerHTML = '<i class="fas fa-trash fa-fw"></i>';
btn.classList.add('btn', 'btn-danger', 'btn-sm', 'mb-1', 'mr-1', 'btn-delete');
return btn;
}
function buildInsertBtn()
{
let btn = document.createElement('button');
btn.innerHTML = '<i class="fas fa-clipboard-check fa-fw"></i> Insérer <i class="fas fa-chevron-right fa-fw"></i>';
btn.classList.add('btn', 'btn-info', 'btn-sm', 'mb-1', 'mr-1');
btn.dataset.toggle = "modal";
return btn;
}
/*
* Compte les rangées de la table
*/
let totalRows = document.querySelector('#totalRows');
function refreshTotalRowsStats(countURL)
{
AJAX('GET', countURL, function(request)
{
let json = JSON.parse(request.responseText);
totalRows.dataset.total = json;
totalRows.textContent = json + (json > 1 ? ' légumes' : ' légume');
});
}
/*
* Compte les résultats de la recherche
*/
let totalPages = document.querySelector('#totalPages');
function refreshSearchStats(searchURL)
{
AJAX('GET', searchURL, function(request)
{
let json = JSON.parse(request.responseText);
totalPages.innerHTML = '— '+ json.length +' résultats';
});
}
/*
* Définit le pas de la pagination
*/
let stepform = document.querySelector('form#pagination select');
function selectPaginateStep(paginate, callback)
{
stepform.addEventListener('change', function()
{
let step = (this.value === '-1') ? 10 : this.value;
paginate.step = parseInt(step);
paginate.page = 1;
callback();
});
}
/*
* Affiche le bloc de pagination
*/
let pagiNav = document.querySelector('nav#pagenav ul.pagination');
function displayPagination(URL, paginate, callback)
{
AJAX('GET', URL, function()
{
totalPages.innerHTML = null;
pagiNav.innerHTML = null;
let perPage = paginate.step;
if (totalRows.dataset.total > perPage)
{
let nbPages = Math.ceil(totalRows.dataset.total / perPage);
let currentPage = paginate.page;
for (let i = 1; i <= nbPages; i++)
{
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.toString();
if (i !== currentPage)
{
pageItemChild.addEventListener('click', function()
{
paginate.page = i;
callback();
});
}
pageItem.appendChild(pageItemChild);
pagiNav.appendChild(pageItem);
}
totalPages.innerHTML = '— page '+ currentPage + ' sur '+ nbPages;
}
});
}
/*
* Enlève le bloc de pagination
*/
function removePagination()
{
totalPages.innerHTML = null;
pagiNav.innerHTML = null;
}
/*
* Interrupteur de tri par colonne
*/
function sortToggleByColumn(paginate, callback)
{