CERFIG/sgl
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Filtre des produits

Browse Source
This commit is contained in:
Soriba Sylla
2026-09-18 11:03:52 +00:00
parent 165894c92b
commit a8b5ac27d9
9 changed files with 162 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
static/js/gestion_produit.js
View File

@@ -84,15 +84,34 @@ document.addEventListener('DOMContentLoaded', function () {
// --------------------------- FILTRE PAR NOM DU PRODUIT -------------------------
$('searchInput').addEventListener('keyup', function() {
const filter = this.value.toLowerCase();
const cards = document.querySelectorAll('.card');
cards.forEach(card => {
const title = card.querySelector('.card-title').textContent.toLowerCase();
if (title.includes(filter)) {
card.style.display = '';
} else {
card.style.display = 'none';
}
fetch(`/gestion-produit/filtrer-par-nom-produit/?nom=${filter}`)
.then(response => response.json())
.then(data => {
const cardContainer = document.querySelector("#cardContainer");
cardContainer.innerHTML = "";
data.forEach(produit => {
cardContainer.innerHTML += `
<div class="col-3">
<div class="card p-2 mt-2" style="width: 13rem;">
<img class="card-img-top m-auto d-block" src="${produit.image.url ? produit.image : 'https://placehold.co/600x400'}" style="width: 160px; height: 120px;" alt="${produit.libelle}">
<div class="card-body">
<h5 class="card-title text-center produitModifTitre" style="cursor: pointer;" data-idproduit=${produit.id}>${produit.libelle}</h5>
<p class="categorie-produit" style="display: none;">${produit.categorie_id} </p>
${produit.appartient_logistique ? `<p class="card-text text-center">
<small>Quantite en stock: ${produit.stockActuel}</small>
</p> ` : ""}
${produit.appartient_logistique ? `<button class="btn btn-warning d-block listeCommanderButton w-100" data-id="${produit.id}">
<i class="bi bi-caret-down-square-fill"></i>Commander : ${produit.stockActuel}
</button>` : ""}
<button class="btn btn-primary d-block w-100 listeDemandeButton mt-1" data-id="${produit.id}">
<i class="bi bi-archive"></i>Demander
</button>
</div>
</div>
</div>`;
});
})
})
// Enregistrement de commande
@@ -138,21 +157,41 @@ document.addEventListener('DOMContentLoaded', function () {
// Filtre des produits par categorie
$("filterCategorie").addEventListener("change", function(){
const card = document.querySelectorAll(".card");
const filtre = this.value;
if(filtre === ""){
card.forEach(carte => {
carte.style.display = "";
});
location.reload();
}else{
card.forEach(carte => {
categorie = carte.querySelector(".categorie-produit").textContent.toLowerCase();
if(parseInt(categorie) === parseInt(filtre)){
carte.style.display = "";
}else{
carte.style.display = 'none'
}
});
fetch(`/gestion-produit/filtrer-produit-par-categorie/${filtre}/`)
.then(response => response.json())
.then(data => {
console.log(data);
const cardContainer = document.querySelector("#cardContainer");
cardContainer.innerHTML = "";
data.forEach(produit => {
cardContainer.innerHTML += `
<div class="col-3">
<div class="card p-2 mt-2" style="width: 13rem;">
<img class="card-img-top m-auto d-block" src="${produit.image.url ? produit.image : 'https://placehold.co/600x400'}" style="width: 160px; height: 120px;" alt="${produit.libelle}">
<div class="card-body">
<h5 class="card-title text-center produitModifTitre" style="cursor: pointer;" data-idproduit=${produit.id}>${produit.libelle}</h5>
<p class="categorie-produit" style="display: none;">${produit.categorie_id} </p>
<p class="card-text text-center">
<small>Quantite en stock: ${produit.stockActuel}</small>
</p>
${produit.appartient_logistique ? `<button class="btn btn-warning d-block listeCommanderButton w-100" data-id="${produit.id}">
<i class="bi bi-caret-down-square-fill"></i>Commander : ${produit.stockActuel}
</button>` : ""}
${produit.appartient_logistique ? `<button class="btn btn-warning d-block listeCommanderButton w-100" data-id="${produit.id}">
<i class="bi bi-caret-down-square-fill"></i>Commander
</button>` : ""}
<button class="btn btn-primary d-block w-100 listeDemandeButton mt-1" data-id="${produit.id}">
<i class="bi bi-archive"></i>Demander
</button>
</div>
</div>
</div>`;
});
})
}
})