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

Fix: Integration de la pagination dans le systeme de filtre de produit

Browse Source
This commit is contained in:
Soriba Sylla
2026-09-18 13:02:40 +00:00
parent a8b5ac27d9 5813909eff
commit a7af6d674b
6 changed files with 37 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
gestion_produit/__pycache__/urls.cpython-310.pyc
View File

Binary file not shown.

BIN
gestion_produit/__pycache__/views.cpython-310.pyc
View File

Binary file not shown.

11
gestion_produit/templates/gestion_produit/index.html
View File

@@ -54,17 +54,22 @@
</div>
<div class="row mt-2">
<form class="col d-flex flex-column flex-lg-row justify-content-between" id="searchForm" method="get" action="{% url 'gestion_produit:index' %}">
<div class="col">
<input type="text" placeholder="Rechercher par libellé" class="form-control" id="searchInput">
<input type="text" id="searchInput" placeholder="Rechercher par libellé" class="form-control" name="search" value="{{ request.GET.search }}">
</div>
<div class="col">
<select name="" id="filterCategorie" class="form-select">
<select id="filterCategorie" name="filterCategorie" class="form-select">
<option value="">Filtre par catégorie</option>
{% for categorie in liste_categorie %}
<option value="{{ categorie.id }}">{{ categorie.categorie }}</option>
<option value="{{ categorie.id }}" {% if request.GET.filterCategorie == categorie.id|stringformat:"s" %}selected{% endif %}>{{ categorie.categorie }}</option>
{% endfor %}
</select>
</div>
<div class="col mt-2 mt-lg-0">
<button type="submit" class="btn btn-primary"><i class="bi bi-search"></i> Rechercher</button>
</div>
</form>
</div>
<div class="row p-2 justify-content-around" id = "cardContainer">

10
gestion_produit/urls.py
View File

@@ -81,14 +81,4 @@ urlpatterns = [
views.detail_demande,
name="detail_demande"
),
path(
"filtrer-produit-par-categorie/<int:id_categorie>/",
views.filtrer_produit_par_categorie,
name="filtrer_produit_par_categorie"
),
path(
"filtrer-par-nom-produit/",
views.filtre_par_nom_produit,
name="filtrer_par_nom_produit"
),
]

87
gestion_produit/views.py
View File

@@ -2,7 +2,7 @@
from django.shortcuts import render, redirect
from django.core.paginator import Paginator
from django.db.models import Sum
from django.db.models import Sum, Q
from authentification.models import Profile
from django.contrib.auth.decorators import login_required
@@ -90,9 +90,25 @@ def index(request):
La réponse HTTP contenant la page rendue.
"""
liste_produit = Produit.objects.all().order_by("-id")
product_name = request.GET.get("search", "")
categorie_name = request.GET.get("filterCategorie", "")
liste_categorie = Categorie.objects.all().order_by("categorie")
if product_name == "" and categorie_name == "":
liste_produit = Produit.objects.all().order_by("-id")
elif product_name != "" and categorie_name == "":
liste_produit = Produit.objects.filter(
Q(libelle__icontains=product_name)
).order_by("-id")
elif product_name == "" and categorie_name != "":
liste_produit = Produit.objects.filter(
Q(categorie=categorie_name)
).order_by("-id")
else:
liste_produit = Produit.objects.filter(
Q(categorie=categorie_name) & Q(libelle__icontains=product_name)
).order_by("-id")
liste_produit_finale = [
calcul_stock_produit(produit) for produit in liste_produit
]
@@ -422,73 +438,6 @@ def enregistrer_categorie(request):
return JsonResponse({"success": False})
return None
def filtrer_produit_par_categorie(request, id_categorie):
"""Filtrez les produits par catégorie et renvoyez-les au format JSON.
Parameters
----------
request : HttpRequest
La requête HTTP entrante.
id_categorie : int
L'ID de la catégorie pour laquelle filtrer les produits.
Returns
-------
JsonResponse
Réponse JSON contenant la liste des produits filtrés par catégorie.
"""
produits = Produit.objects.filter(categorie_id=id_categorie)
produits_filtres = [
{
"id": produit.id,
"libelle": produit.libelle,
"conditionnement": produit.conditionnement,
"quantite_stock": produit.quantite_stock,
"seuil_pre_rupture": produit.seuil_pre_rupture,
"image": produit.image.url if produit.image else "",
"appartient_logistique": request.user.groups.filter(name="Logistique").exists(),
}
for produit in produits
]
return JsonResponse(produits_filtres, safe=False)
def filtre_par_nom_produit(request):
"""Filtrez les produits par nom et renvoyez-les au format JSON.
Parameters
----------
request : HttpRequest
La requête HTTP entrante.
nom_produit : str
Le nom du produit pour lequel filtrer les produits.
Returns
-------
JsonResponse
Réponse JSON contenant la liste des produits filtrés par nom.
"""
nom_produit = request.GET.get("nom", "")
if nom_produit == "":
produits = Produit.objects.all()
else:
produits = Produit.objects.filter(libelle__icontains=nom_produit)
produits_filtres = [
{
"id": produit.id,
"libelle": produit.libelle,
"conditionnement": produit.conditionnement,
"quantite_stock": produit.quantite_stock,
"seuil_pre_rupture": produit.seuil_pre_rupture,
"image": produit.image.url if produit.image else "",
"appartient_logistique": request.user.groups.filter(name="Logistique").exists(),
}
for produit in produits
]
return JsonResponse(produits_filtres, safe=False)
@login_required
def recuperer_fournisseur_par_categorie(_request, id_produit):
"""Récupèrez les fournisseurs associés à la catégorie d'un produit donné.

69
static/js/gestion_produit.js
View File

@@ -82,36 +82,8 @@ document.addEventListener('DOMContentLoaded', function () {
})
// --------------------------- FILTRE PAR NOM DU PRODUIT -------------------------
$('searchInput').addEventListener('keyup', function() {
const filter = this.value.toLowerCase();
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>`;
});
})
$('searchInput').addEventListener('submit', function() {
$('searchForm').submit();
})
// Enregistrement de commande
@@ -157,42 +129,7 @@ document.addEventListener('DOMContentLoaded', function () {
// Filtre des produits par categorie
$("filterCategorie").addEventListener("change", function(){
const filtre = this.value;
if(filtre === ""){
location.reload();
}else{
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>`;
});
})
}
$('searchForm').submit();
})
// Enregistrement de nouveau produit