Feat/responsivite: Reclassement des indicateurs du tableau de bord

SGL/templates/index.html

@@ -5,7 +5,7 @@
 {% block page_titre %} Tableau de bord {% endblock %}
 {% block "contenu" %}
 <div class="row p-2 d-flex justify-content-around">
-    <div class="col-5 col-lg-3 border border-3 rounded border-danger p-2 d-flex" style="cursor: pointer;" id="produit_rupture">
+    <div class="col-12 col-lg-3 border border-3 rounded border-danger p-2 d-flex" style="cursor: pointer;" id="produit_rupture">
         <img src="{% static 'images/stock-rupture.png' %}" alt="" style="width: 30%; height: 75%;">
         <div class="d-flex justify-content-center flex-column ms-1">
             <h3 class="text-center fw-bold">Rupture</h3>
@@ -13,7 +13,7 @@
         </div>
     </div>
 
-    <div class="col-5 col-lg-3 border border-3 rounded border-warning p-2 d-flex" style="cursor: pointer;" id="produit_pre_rupture">
+    <div class="col-12 col-lg-3 border border-3 rounded border-warning my-2 my-lg-0 p-2 d-flex" style="cursor: pointer;" id="produit_pre_rupture">
         <img src="{% static 'images/stock-prerupture.png' %}" alt="" style="width: 30%; height: 75%;">
         <div class="d-flex justify-content-center flex-column ms-1">
             <h3 class="text-center fw-bold">Pré-rupture</h3>
@@ -21,7 +21,7 @@
         </div>
     </div>
 
-    <div class="col-5 col-lg-3 mt-2 mt-lg-0 border border-3 rounded border-success p-2 d-flex" style="cursor: pointer;" id="produit_normal">
+    <div class="col-12 col-lg-3 border border-3 rounded border-success p-2 d-flex" style="cursor: pointer;" id="produit_normal">
         <img src="{% static 'images/stock-bon.png' %}" alt="" style="width: 30%; height: 75%;">
         <div class="d-flex justify-content-center flex-column ms-1">
             <h3 class="text-center fw-bold">Correct</h3>

SGL/templates/parts/menu_application.html

@@ -1,24 +1,80 @@
 {% load static %}
-<nav class="navbar navbar-expand-lg bg-body-tertiary">
+{% load tags_personnaliser %}
+<nav class="navbar d-none d-lg-block navbar-expand-lg bg-body-tertiary">
     <div class="container-fluid">
         <a class="navbar-brand" href="#">
             <img src="{% static 'images/cerfig.jpg' %}" alt="Logo" width="85" height="30" class="d-inline-block align-text-top">
         </a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <div class="collapse navbar-collapse">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarNav">
             <ul class="nav nav-tabs justify-content-end w-100">
                 <li class="nav-item">
-                    <a class="nav-link" href="{{ LIEN_SIRH }}">SIRH</a>
+                    <a class="nav-link" aria-current="page" href="{{ LIEN_SIRH }}">SIRH</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link active" aria-current="page" href="{{ LIEN_SGL }}">SGL</a>
+                    <a class="nav-link active" href="{{ LIEN_SGL }}">SGL</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" aria-current="page" href="#">Laboratoire</a>
+                    <a class="nav-link" href="#">Laboratoire</a>
                 </li>
             </ul>
         </div>
     </div>
 </nav>
+
+<nav class="navbar d-lg-none navbar-expand-lg bg-body-tertiary">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="#">
+            <img src="{% static 'images/cerfig.jpg' %}" alt="Logo" width="85" height="30" class="d-inline-block align-text-top">
+        </a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNavDropdown">
+            <ul class="navbar-nav">
+                {% if user|has_group:"ressource_humaine" or user|has_group:"direction" %}
+                <li class="nav-item">
+                    <a class="nav-link" aria-current="page" href="{% url 'index' %}">
+                        <i class="bi bi-file-bar-graph"></i>
+                        Tableau de bord
+                    </a>
+                </li>
+                {% endif %}
+
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url 'gestion_produit:index' %}">
+                        <i class="bi bi-backpack4"></i> Gestion des produits
+                    </a>
+                </li>
+                {% if user|has_group:"ressource_humaine" or user|has_group:"direction" or user|has_group:"logistique" %}
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url 'gestion_fournisseur:index' %}">
+                        <i class="bi bi-truck"></i> Gestion des fournisseurs
+                    </a>
+                </li>
+                {% endif %}
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url 'gestion_vehicule:index' %}">
+                        <i class="bi bi-car-front-fill"></i> Gestion des véhicules
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url 'authentification:deconnexion' %}"><i class="bi bi-box-arrow-right"></i> Déconnexion</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+
+<div class="container-fluid d-flex d-sm-none justify-content-center">
+    <ul class="nav nav-tabs">
+        <li class="nav-item">
+            <a class="nav-link" href="{{ LIEN_SIRH }}">SIRH</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link active" href="{{ LIEN_SGL }}">SGL</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Laboratoire</a>
+        </li>
+    </ul>
+</div>

SGL/templates/parts/navigation-ordinateur.html

@@ -1,6 +1,6 @@
 {% load tags_personnaliser %}
 
-<div class="col-3 bg-danger d-none d-lg-flex flex-column">
+<div class="col-3 bg-danger d-none d-lg-flex flex-column vh-100 pt-5 sticky-top">
     {% if user|has_group:"ressource_humaine" or user|has_group:"direction" %}
     <a href="{% url 'index' %}" class="btn btn-danger py-3 mt-4 fw-bold d-flex" style="font-size: 1.2em;">
         <i class="bi bi-file-bar-graph d-block" style="width: 50px;"></i>

gestion_fournisseur/templates/gestion_fournisseur/index.html

@@ -7,7 +7,7 @@
 {% block "contenu" %}
 
 <div class="row p-2">
-    <div class="col d-flex justify-content-between">
+    <div class="col d-flex flex-column flex-lg-row justify-content-between">
         <h3>LISTE DES FOURNISSEURS </h3>
         {% if user|has_group:"logistique" %}
         <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#enregistrerFournisseur">
@@ -19,10 +19,10 @@
 </div>
 
 <div class="row p-2">
-  <div class="col">
+  <div class="col-12 col-lg-6">
     <input type="text" class="form-control" placeholder="Rechercher par nom du fournisseur" id="searchFournisseur">
   </div>
-  <div class="col">
+  <div class="col-12 col-lg-6 mt-2 mt-lg-0">
     <select name="" id="filterCategorie" class="form-select">
       <option value="">Toutes les catégories de produit</option>
       {% for categorie in listeCategorie %}

gestion_fournisseur/views.py

@@ -1,5 +1,6 @@
 """Vuews pour la gestion des fournisseurs."""
 
+from django.contrib import messages
 from django.shortcuts import render, redirect
 from gestion_produit.models import Fournisseur, Categorie, Commander
 from django.http import JsonResponse

gestion_produit/templates/gestion_produit/index.html

@@ -6,8 +6,8 @@
 
 {% block "contenu" %}
 <div class="row p-2">
-    <div class="col d-flex justify-content-between">
+    <div class="col d-flex flex-column flex-lg-row justify-content-between">
-        <h3>MES DEMANDES</h3>
+        <h3 class="text-center text-lg-left">MES DEMANDES</h3>
         <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#listeDemandesModal">
           <i class="bi bi-eye"></i>
           Toutes mes demandes ...
@@ -43,10 +43,10 @@
 <div class="row d-flex mt-3">
   <div class="col d-flex flex-column flex-lg-row justify-content-between">
       <h3>LISTE DES PRODUITS</h3>
-      <div>
+      <div class='d-flex flex-lg-row flex-column'>
           {% if user|has_group:"logistique" %}
           <a href="{% url 'gestion_produit:mouvement-de-stock' %}" class="btn btn-primary"><i class="bi bi-file-earmark-diff"></i> Rapport de mouvement de stock</a>
-          <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#enregistrerProduit"><i class="bi bi-plus-circle"></i> Produit</button>
+          <button class="btn btn-primary mt-2 mt-lg-0 mx-0 mx-lg-2" data-bs-toggle="modal" data-bs-target="#enregistrerProduit"><i class="bi bi-plus-circle"></i> Produit</button>
           <button class="btn btn-primary mt-2 mt-lg-0" data-bs-toggle="modal" data-bs-target="#enregistrerCategorie"><i class="bi bi-plus-circle"></i> Catégorie</button>
           {% endif %}
       </div>
@@ -54,20 +54,25 @@
 </div>
 
 <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 mx-0 mx-lg-2">
-            <option value="">Filtre par catégorie</option>
+            <select id="filterCategorie" name="filterCategorie" class="form-select mt-2 mt-lg-0">
-            {% 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="w-100  btn btn-primary"><i class="bi bi-search"></i> Rechercher</button>
+        </div>
+    </form>
 </div>
 
-<div class="row p-2 justify-content-around" id = "cardContainer">
+<div class="row flex-column flex-lg-row p-2 justify-content-around" id = "cardContainer">
     {% for produit in page_obj %}
     <div class="col-3">
         <div class="card p-2 mt-2" style="width: 13rem;">

gestion_produit/urls.py

@@ -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"
-    ),
 ]

gestion_produit/views.py

@@ -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é.

gestion_vehicule/templates/gestion_vehicule/index.html

@@ -6,8 +6,8 @@
 
 {% block "contenu" %}
 <div class="row p-2">
-    <div class="col d-flex justify-content-between">
+    <div class="col d-flex flex-column flex-lg-row justify-content-between">
-        <h3>PARC AUTOMOBILE</h3>
+        <h3 class='text-center text-lg-left'>PARC AUTOMOBILE</h3>
         {% if user|has_group:"logistique" %}
         <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#enregistrerVehiculeModal">Ajouter un véhicule</button>
         {% endif %}
@@ -36,20 +36,13 @@
 </div>
 
 <div class="row d-flex mt-3">
-  <div class="col d-flex justify-content-between">
+  <div class="col d-flex flex-column flex-lg-row justify-content-between">
-        <h4>LISTE DES DEMANDES</h4>
+        <h4 class='text-center text-lg-left'>LISTE DES DEMANDES</h4>
-        {% comment %} {% if user|has_group:"Employe" %} {% endcomment %}
         <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#enregistrerDemandeModal">Faire une demande</button>
-        {% comment %} {% endif %} {% endcomment %}
     </div>
 </div>
 
-{% comment %} {% if user|has_group:"Employe" %} {% endcomment %}
 <div class="row d-flex mt-2 mb-2">
-  <!-- <div class="col">
-      <label>Filtrer par date et heure de depart</label>
-      <input type="datetime-local" class="form-control">
-  </div> -->
   <div class="col">
       <label>Statut de la demande :</label>
       <select name="filtreStatutDemande" id="filtreStatutDemande" class="form-select">

static/js/gestion_produit.js

@@ -82,36 +82,8 @@ document.addEventListener('DOMContentLoaded', function () {
   })
 
   // --------------------------- 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
@@ -157,42 +129,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
   // Filtre des produits par categorie
   $("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