Fix: Integration de la pagination dans le systeme de filtre de produit
This commit is contained in:
Binary file not shown.
Binary file not shown.
@@ -54,17 +54,22 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row mt-2">
|
<div class="row mt-2">
|
||||||
<div class="col">
|
<form class="col d-flex flex-column flex-lg-row justify-content-between" id="searchForm" method="get" action="{% url 'gestion_produit:index' %}">
|
||||||
<input type="text" placeholder="Rechercher par libellé" class="form-control" id="searchInput">
|
<div class="col">
|
||||||
</div>
|
<input type="text" id="searchInput" placeholder="Rechercher par libellé" class="form-control" name="search" value="{{ request.GET.search }}">
|
||||||
<div class="col">
|
</div>
|
||||||
<select name="" id="filterCategorie" class="form-select">
|
<div class="col">
|
||||||
<option value="">Filtre par catégorie</option>
|
<select id="filterCategorie" name="filterCategorie" class="form-select">
|
||||||
{% for categorie in liste_categorie %}
|
<option value="">Filtre par catégorie</option>
|
||||||
<option value="{{ categorie.id }}">{{ categorie.categorie }}</option>
|
{% for categorie in liste_categorie %}
|
||||||
{% endfor %}
|
<option value="{{ categorie.id }}" {% if request.GET.filterCategorie == categorie.id|stringformat:"s" %}selected{% endif %}>{{ categorie.categorie }}</option>
|
||||||
</select>
|
{% endfor %}
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="row p-2 justify-content-around" id = "cardContainer">
|
<div class="row p-2 justify-content-around" id = "cardContainer">
|
||||||
|
|||||||
@@ -81,14 +81,4 @@ urlpatterns = [
|
|||||||
views.detail_demande,
|
views.detail_demande,
|
||||||
name="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"
|
|
||||||
),
|
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
from django.shortcuts import render, redirect
|
from django.shortcuts import render, redirect
|
||||||
from django.core.paginator import Paginator
|
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 authentification.models import Profile
|
||||||
|
|
||||||
from django.contrib.auth.decorators import login_required
|
from django.contrib.auth.decorators import login_required
|
||||||
@@ -90,9 +90,25 @@ def index(request):
|
|||||||
La réponse HTTP contenant la page rendue.
|
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")
|
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 = [
|
liste_produit_finale = [
|
||||||
calcul_stock_produit(produit) for produit in liste_produit
|
calcul_stock_produit(produit) for produit in liste_produit
|
||||||
]
|
]
|
||||||
@@ -422,73 +438,6 @@ def enregistrer_categorie(request):
|
|||||||
return JsonResponse({"success": False})
|
return JsonResponse({"success": False})
|
||||||
return None
|
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
|
@login_required
|
||||||
def recuperer_fournisseur_par_categorie(_request, id_produit):
|
def recuperer_fournisseur_par_categorie(_request, id_produit):
|
||||||
"""Récupèrez les fournisseurs associés à la catégorie d'un produit donné.
|
"""Récupèrez les fournisseurs associés à la catégorie d'un produit donné.
|
||||||
|
|||||||
@@ -82,36 +82,8 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
})
|
})
|
||||||
|
|
||||||
// --------------------------- FILTRE PAR NOM DU PRODUIT -------------------------
|
// --------------------------- FILTRE PAR NOM DU PRODUIT -------------------------
|
||||||
$('searchInput').addEventListener('keyup', function() {
|
$('searchInput').addEventListener('submit', function() {
|
||||||
const filter = this.value.toLowerCase();
|
$('searchForm').submit();
|
||||||
|
|
||||||
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
|
// Enregistrement de commande
|
||||||
@@ -157,42 +129,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
|
|
||||||
// Filtre des produits par categorie
|
// Filtre des produits par categorie
|
||||||
$("filterCategorie").addEventListener("change", function(){
|
$("filterCategorie").addEventListener("change", function(){
|
||||||
const filtre = this.value;
|
$('searchForm').submit();
|
||||||
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>`;
|
|
||||||
});
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
// Enregistrement de nouveau produit
|
// Enregistrement de nouveau produit
|
||||||
|
|||||||
Reference in New Issue
Block a user