sgl/static/js/gestion_produit.js

const $ = (id) => document.getElementById(id);

document.addEventListener('DOMContentLoaded', function () {
  const voirBtns = document.querySelectorAll('.voir-demande');
  const modal = new bootstrap.Modal($('enregistrerDetailDemande'));

  voirBtns.forEach(btn => {
    btn.addEventListener('click', function () {
      const produitId = this.dataset.id;

      fetch(`/gestion-produit/detailDemande/${produitId}/`)
        .then(response => response.json())
        .then(data => {
          $('detailNom').value = data.detailNom;
          $('detailCategorie').value = data.detailCategorie;
          $('detailmotif').textContent = data.detailmotif;
          $('detailDateDemande').value = data.detailDeMiseADispo;
          $('detailARendre').checked = data.detailARendre ? true : false;

          if(data.chef_departement){
            $('confirmerBtn').dataset.id = produitId;
            $('refuserBtn').dataset.id = produitId;
          }

          modal.show();
        });
    });
  });

  function updateStatut(demandeId, action) {
    const csrf = document.querySelector("[name=csrfmiddlewaretoken]").value;
    fetch('/gestion-produit/update-demande', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'X-CSRFToken': csrf
      },
      body: `id=${demandeId}&action=${action}&emetteur=chef`
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        alert(data.message);
        location.reload();
      } else {
        alert(data.message);
      }
    })
    .catch(error => console.error('Erreur :', error));
  }

  try{
    $('confirmerBtn').addEventListener('click', function (e) {
      e.preventDefault();
      updateStatut(this.dataset.id, '1');
    });

    $('refuserBtn').addEventListener('click', function (e) {
      e.preventDefault();
      updateStatut(this.dataset.id, '0');
    });
  }catch (error) {
    
  }

  const tabulator = new Tabulator("#listeDemandeTable", {
    columns: [
      { title: "Nom Produit", field: "produit", sorter: "string" },
      { title: "Motif", field: "motifs", sorter: "string" },
      { title: "Date de mise à disposition souhaitée", field: "dateDeMiseADispoSouhaite", sorter: "date" },
      { title: "À Rendre", field: "a_rendre", sorter: "boolean", formatter: "tickCross" },
      { title: "Validé par le supérieur", field: "valider_par_chef", sorter: "boolean", formatter: "tickCross", formatterParams: {
            allowEmpty: true
        } 
      },
      { title: "Valider par la logistique", field: "valider_par_logisticien", sorter: "boolean", formatter: "tickCross", formatterParams: {
            allowEmpty: true
      }},
      { title: "Motif de refus", field: "motifs_refus"},
    ],
    ajaxURL: `${$("listeDemandeTable").dataset.url}`,
  })

  // --------------------------- 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>`;
      });
    })
  })

  // Enregistrement de commande
  const listeCommanderButton = document.querySelectorAll(".listeCommanderButton");
  const modalCommander = new bootstrap.Modal($("commanderModal"));

  listeCommanderButton.forEach(commanderButton => {
    commanderButton.addEventListener("click", function (e) {
      const idProduit = this.dataset.id;
      const champs_produit = $("id_produit");
      const champs_fournisseur = $("id_fournisseur");
      champs_produit.value = idProduit;

      fetch(`/gestion-produit/recuperer-fournisseur-categorie/${idProduit}`)
      .then(response => response.json())
      .then(data => {
        champs_fournisseur.innerHTML = "";
        data.forEach(fournisseur => {
          const option = document.createElement("option");
          option.value = fournisseur.id;
          option.text = fournisseur.nom_fournisseur;
          champs_fournisseur.appendChild(option);
        });
      })

      modalCommander.show();
    })
  });

  // Fenetre modal pour emettre une demande de nouveau produit
  const listeDemandeButton = document.querySelectorAll(".listeDemandeButton");
  const demanderModal = new bootstrap.Modal($("demanderModal"));

  listeDemandeButton.forEach(demanderButton => {
    demanderButton.addEventListener("click", function() {
      const produitCommanderId = this.dataset.id;
      const champs_produit = document.querySelector("#demanderModal #id_produit");
      champs_produit.value = produitCommanderId;

      demanderModal.show();
    })
  });

  // 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>`;
        });
      })
    }
  })

  // Enregistrement de nouveau produit
  $("enregistrement-produit-form").addEventListener("submit", function (e) {
    e.preventDefault();
    const form = this;
    const url = this.dataset.url;
    const csrf = document.querySelector('[name=csrfmiddlewaretoken]').value;
    fetch(
      url,
      {
        method: "POST",
        headers: {
          "X-Requested-With": "XMLHttpRequest",
          "X-CSRFToken": csrf
        },
        body: new FormData(form)
      }
    )
    .then(response => response.json())
    .then(data => {
      const messageZone = $("messageZone");
      if(data.success){
        messageZone.innerHTML = `
          <div class="alert alert-success">
            ${data.message}
          </div>
        `;
        form.reset();
      }else{
        messageZone.innerHTML = `
          <div class="alert alert-danger">
            ${data.message}
          </div>
        `;
      }
    })
  })

  $('enregistrerProduit').addEventListener("hidden.bs.modal", function () {
    location.reload()
  })

  // --------------------------- Modification produit --------------------------
  const produitModifTitles = document.querySelectorAll(".produitModifTitre");
  const modalModifProduit = new bootstrap.Modal($("modifierProduitModal"));
  produitModifTitles.forEach(title => {
    title.addEventListener("click", function () {
      const idProduit = this.dataset.idproduit;
      fetch(`/gestion-produit/detailProduit/${idProduit}/`)
      .then(response => response.json())
      .then(data => {
        $("modifIdProduit").value = data.detailId;
        $("modifLibelle").value = data.detailLibelle;
        $("modifQuantiteStock").value = data.detailQuantiteStock;
        $("modifSeuilPreRupture").value = data.detailSeuilPreRupture;

        $("modifCondi").value = data.detailConditionnement;

        $("modifCategorie").innerHTML = "";
        data.listeCategorie.forEach(categorie => {
          const option = document.createElement("option");
          option.value = categorie.id;
          option.text = categorie.categorie;
          if(categorie.id === data.detailCategorie){
            option.selected = true;
          }
          $("modifCategorie").appendChild(option);
        });

        modalModifProduit.show();
      });
    });
  });

  $("modification-produit").addEventListener("submit", function (e) {
    e.preventDefault();
    const form = this;
    const url = this.dataset.url;
    const csrf = document.querySelector('[name=csrfmiddlewaretoken]').value;
    fetch(url, {
      method: "POST",
      headers:{
        "X-Requested-With": "XMLHttpResponse",
        "X-CSRFToken": csrf
      },
      body: new FormData(form)
    })
    .then(response => response.json())
    .then(data => {
      if(data.success){
        const messageBox = $("messageZone");
        messageBox.innerHTML = `
          <div class="alert alert-success">
            Produit modifié avec succès
          </div>
        `;
        modalModifProduit.hide();

        location.reload();
      }
    })
  })

  // --------------------------- Gestion des categories -------------------------
  const url_liste_categorie = $("listecategorie").dataset.url;
  const tableau_categorie = new Tabulator("#listecategorie", {
    columns: [
      {title: "Nom de la catégorie", field: "categorie"}
    ],
    ajaxURL: url_liste_categorie
  })

  $("enregistrer-categorie").addEventListener("submit", function (e) {
    e.preventDefault();
    const form = this;
    const url = this.dataset.url;
    const csrf = document.querySelector('[name=csrfmiddlewaretoken]').value;

    fetch(url, {
      method: "POST",
      headers:{
        "X-Requested-With": "XMLHttpResponse",
        "X-CSRFToken": csrf
      },
      body: new FormData(form)
    })
    .then(response => response.json())
    .then(data => {
      if(data.success){
        const messageBox = $("message-creation-categorie");
        messageBox.innerHTML = `
          <div class="alert alert-success">
            Categorie crée avec succès
          </div>
        `;
        tableau_categorie.setData(url_liste_categorie);
      }
    })
  })

  $("enregistrerCategorie").addEventListener("hidden.bs.modal", function () {
    location.reload();
  })
});