Cleo/pub/res/js/jclients.js

//! jclients.js

let idClient;
let oldIdLn;
let oldColorLn;

window.addEventListener('DOMContentLoaded', (event) => {
  console.log('#');

  //let elLigClients = document.getElementsByClassName("ligClient");
  let elCelClients = document.getElementsByClassName("celClient");
  //let elBtnModClient = document.getElementsByClassName("btnModClient");
  let elBtnQuitModClient = document.getElementById("btnQuitModClient");
  let elBtnImport = document.getElementById("btnImport");
  let elBtnCancelImport = document.getElementById("btnCancelImport");
  let elBtnSubmitImport = document.getElementById("btnSubmitImport");
  let elBtnSearch = document.getElementById("btnSearch");

  let clickLigClient = function (e) {
    //! Event Click sur une cellule d'une ligne d'un client qui a la classe celClient
    idClient = e.getAttribute("data-rowid");
    console.log("idClient = " + idClient);
    let thisColor;

    Array.from(elCelClients).forEach(function (lngClient) {
      if (lngClient.getAttribute("data-rowid") == oldIdLn) {
        lngClient.style.backgroundColor = oldColorLn;
      } else if (lngClient.getAttribute("data-rowid") == idClient) {
        thisColor = lngClient.style.backgroundColor;
        lngClient.style.backgroundColor = "#9bbce7";
      }
    });

    oldColorLn = thisColor;
    oldIdLn = idClient;
  };

  function clickModClient(e) {
    //! Fonction appelée lors du click sur un bouton de modification du tableau des Clients
    idClient = e.getAttribute("data-rowid");
    console.log("idClient = " + idClient);
    document.getElementById("loadingDiv").style.display = "block";
    // Va chercher la 1ère cellule de la ligne pour lancer la function click() => clickLigClient
    let firstCellOfRow = this.parentNode.parentNode.cells[0];
    firstCellOfRow.click();

    let xhttp = new XMLHttpRequest();
    xhttp.open("POST", "/jxpost/load_client", true);
    xhttp.setRequestHeader("Content-Type", "application/json");
    xhttp.onreadystatechange = function () {
      if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
        // Response
        let ret = JSON.parse(this.responseText);
        if (ret.length == 1) {
          // 1 marché récupéré
          let Client = ret[0];
          document.getElementById("rowid").value = Client.rowid;
          document.getElementById("libelle").value = Client.libelle;
          document.getElementById("type_client").value = Client.type_client;
          document.getElementById("adresse1").value = Client.adresse1;
          document.getElementById("cp").value = Client.cp;
          document.getElementById("ville").value = Client.ville;

        } else {
          showNotification("Consultation", "Erreur lors de la récupération du Client", "error");
        }
        document.getElementById("loadingDiv").style.display = "none";
      }
    };
    xhttp.send(JSON.stringify({cid: idClient}));
    showModal(document.getElementById("modalModClient"));
  }

  //! Fonction appelée lors du click sur le bouton de fermeture de la fenêtre de modification d'un Client
  function clickQuitModClient() {
    hideModal(document.getElementById("modalModClient"));
  }

  //! Fonction appelée lors du click sur le bouton d'importation des produits
  function clickImport() {
    showModal(document.getElementById("modalImport"));
  }

  //! Fonction appelée lors du click sur le bouton d'annulation de l'importation des clients
  function clickCancelImport() {
    hideModal(document.getElementById("modalImport"));
  }

  //! Fonction appelée lors du click sur le bouton de soumission de l'importation des clients
  function clickSubmitImport() {
    // TODO: prévoir une progress bar
    hideModal(document.getElementById("modalImport"));

    showLoading();
    let xhttp = new XMLHttpRequest();
    xhttp.open("POST", "/jximport/upload_clients", true);
    xhttp.onreadystatechange = function () {
      if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
        let retour = JSON.parse(this.responseText);
        let msg = "";
        hideLoading();
        if (retour.ret == "ok") {
          msg = (retour.msg) ? retour.msg : "L'importation des clients a été effectuée avec succès";
          showNotification("Importation", msg, "success");
        } else {
          msg = (retour.msg) ? retour.msg : "Erreur lors de l'importation des clients";
          showNotification("Importation", msg, "error");
        }
      }
    };

    let frmData = new FormData();
    frmData.append("file1", document.getElementById("importFile").files[0]);
    xhttp.send(frmData);

    return false;
  }

  document.getElementById("schClients").addEventListener("keypress", function (event) {
    if (event.key === "Enter") {
      // Traitement de la touche "entrée"
      clickSearchClients();
    }
  });

  let clickSearchClients = function () {
    document.getElementById("loadingDiv").style.display = "block";
    let search = document.getElementById("schClients").value;

    let xhttp = new XMLHttpRequest();
    xhttp.open("POST", "/jxpost/search_clients", true);
    xhttp.setRequestHeader("Content-Type", "application/json");
    xhttp.onreadystatechange = function () {
      if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
        let retour = JSON.parse(this.responseText);
        document.getElementById("loadingDiv").style.display = "none";
        if (retour.ret) {
          showNotification("Recherche", "La recherche ne s'est pas déroulée correctement", "error");
        } else {
          let tblBody = document.getElementById("tblClients").getElementsByTagName("tbody")[0];
          // on vide le body de cette table
          tblBody.innerHTML = "";

          if (retour.length > 0) {
            // au moins un client trouvé dans cette recherche
            let nbClients = retour.length;

            for (let key in retour) {
              if (retour.hasOwnProperty(key)) {
                // Récupération des valeurs de la ligne
                let val = retour[key];

                // Insertion d'une nouvelle ligne et création de ses colonnes
                let newRow = tblBody.insertRow(0);
                newRow.className = "clickable ligClient";
                newRow.setAttribute("data-rowid", val['rowid']);

                let celEtab = newRow.insertCell(0);
                celEtab.className = "clickable celClient";
                celEtab.setAttribute("data-rowid", val['rowid']);
                celEtab.innerHTML = val['libelle'];
                let celType = newRow.insertCell(1);
                celType.className = "clickable celClient text-center";
                celType.setAttribute("data-rowid", val['rowid']);
                celType.innerHTML = val['type_client'];
                let celCP = newRow.insertCell(2);
                celCP.className = "clickable celClient text-center";
                celCP.setAttribute("data-rowid", val['rowid']);
                celCP.innerHTML = val['cp'];
                let celVille = newRow.insertCell(3);
                celVille.className = "clickable celClient";
                celVille.setAttribute("data-rowid", val['rowid']);
                celVille.innerHTML = val['ville'];
                let celAdresse = newRow.insertCell(4);
                celAdresse.className = "clickable celClient";
                celAdresse.setAttribute("data-rowid", val['rowid']);
                celAdresse.innerHTML = val['adresse1'];
                let celActions = newRow.insertCell(5);
                celActions.className = "text-center";
                celActions.innerHTML = '<button type="button" class="btn btn-primary btn-xs btnModClient" data-rowid="' + val["rowid"] + '"><i class="fa fa-edit"></i></button>';
              }
            }
            document.getElementById("pnlClientsTitre").innerHTML = '<i class="fa fa-handshake-o"></i> Liste des ' + nbClients + ' clients trouvés';
          } else {
            // Aucun produit trouvé dans cette recherche
            document.getElementById("pnlClientsTitre").innerHTML = '<i class="fa fa-handshake-o"></i> Liste des clients';
            let newRow = tblBody.insertRow(0);
            let celCode = newRow.insertCell(0);
            celCode.innerHTML = "Aucun client trouvé";
            celCode.setAttribute("colspan", "4");
            celCode.setAttribute("class", "text-center");
          }

          showNotification("Recherche", "Recherche terminée", "success");
        }
      }
    }
    let data = {search: search};
    xhttp.send(JSON.stringify(data));

    return false;
  };

  let mutationObserver = new MutationObserver(function (mutations) {

  });

  // Starts listening for changes in the root HTML element of the page.
  mutationObserver.observe(document.getElementById("tblClients"), {
    childList: true,
    subtree: true,
    attributes: true,
  });

  document.getElementById("tblClientsBody").addEventListener("click", function (event) {
    if (event.target && event.target.nodeName == "TD") {
      clickLigClient(event.target);
    } else if (event.target && event.target.nodeName == "BUTTON") {
      clickModClient(event.target);
    }
  });

  //! Sur chaque cellule du tableau des clients ayant la classe celClient, on affecte un événement click qui appelle la fonction clickLigClient()
  //Array.from(elCelClients).forEach(function (lnClient) {
  //lnClient.addEventListener('click', clickLigClient);
  //});

  //! Sur chaque bouton de modification du tableau des clients, on affecte un événement click qui appelle la fonction clickModClient()
  //Array.from(elBtnModClient).forEach(function (modClient) {
  //  modClient.addEventListener('click', clickModClient);
  //});

  elBtnImport.addEventListener('click', clickImport);
  elBtnCancelImport.addEventListener('click', clickCancelImport);
  elBtnSubmitImport.addEventListener('click', clickSubmitImport);
  elBtnQuitModClient.addEventListener('click', clickQuitModClient);
  elBtnSearch.addEventListener('click', clickSearchClients);
});