Refactor main listener into modular handler files and remove jQuery global

package.json

@@ -45,7 +45,6 @@
     "eslint-webpack-plugin": "^5.0.2",
     "file-loader": "^6.2.0",
     "html2canvas": "^1.4.1",
-    "jquery": "^3.7.1",
     "jspdf": "^4.2.1",
     "less": "^4.4.2",
     "less-loader": "^12.3.0",

src/js/listener/handlers/configuration_handlers.js

@@ -0,0 +1,48 @@
+import { getFilePickerBuilder } from "@nextcloud/dialogs";
+import { configuration, updateCurrentCompany, updateDBConfiguration } from "../../modules/ajaxRequest.js";
+import { path } from "../../modules/mainFunction.js";
+
+const chooseFolderLabel = t('gestion', 'Choose work folder');
+
+export function openAboutModal() {
+    const modal = document.getElementById("modalConfig");
+    if (modal) {
+        modal.style.display = "block";
+    }
+}
+
+export function closeModal(target) {
+    const modal = target.parentElement.parentElement;
+    modal.style.display = "none";
+}
+
+export function openFolderPicker() {
+    getFilePickerBuilder(chooseFolderLabel)
+        .allowDirectories(true)
+        .setMultiSelect(false)
+        .addButton({
+            label: t('gestion', 'Choose'),
+            callback: updateSelectedFolder,
+        })
+        .build()
+        .pick()
+        .catch(error => {
+            console.error("Erreur lors de l'ouverture du sélecteur :", error);
+        });
+}
+
+export function updateCurrentCompanySelection(target) {
+    updateCurrentCompany(target.value);
+}
+
+function updateSelectedFolder(nodes) {
+    const values = nodes.map(node => node.path);
+    const theFolder = document.getElementById('theFolder');
+    const table = theFolder.getAttribute('data-table');
+    const column = theFolder.getAttribute('data-column');
+    const id = theFolder.getAttribute('data-id');
+
+    updateDBConfiguration(table, column, values[0], id);
+    configuration(path);
+    document.getElementById('theFolder').value = values[0];
+}

src/js/listener/handlers/editable_handlers.js

@@ -0,0 +1,65 @@
+import { updateEditable } from "../../modules/ajaxRequest.js";
+import { updateNumerical } from "../../modules/mainFunction.js";
+
+const EDITABLE_CLASSES = [
+    "editableNumber",
+    "editableNumeric",
+    "editableComment",
+    "editable",
+];
+
+const NON_INLINE_EDITABLE_CLASSES = [
+    "editableSelect",
+    "editableConfiguration",
+    "editableConfigurationSelect",
+];
+
+const IGNORED_SAVE_CLASSES = [
+    ...NON_INLINE_EDITABLE_CLASSES,
+    "editableComment",
+];
+
+export function isInlineEditable(element) {
+    return EDITABLE_CLASSES.some(className => element.classList.contains(className));
+}
+
+export function shouldSkipInlineEdit(element) {
+    return NON_INLINE_EDITABLE_CLASSES.some(className => element.classList.contains(className));
+}
+
+export function enableInlineEdit(element) {
+    element.setAttribute('contenteditable', 'true');
+    element.focus();
+}
+
+export function saveEditableElement(element, ignoreComment = false) {
+    const targetClass = element.className;
+
+    if (targetClass.includes("editableNumber") || targetClass.includes("editableNumeric")) {
+        const formatAsCurrency = element.dataset.column !== "quantite";
+        updateNumerical(element, formatAsCurrency);
+        return;
+    }
+
+    const ignoredClasses = ignoreComment ? IGNORED_SAVE_CLASSES : NON_INLINE_EDITABLE_CLASSES;
+
+    if (ignoredClasses.some(className => targetClass.includes(className))) {
+        return;
+    }
+
+    if (targetClass.includes("editable")) {
+        updateEditable(element);
+    }
+}
+
+export function applyMouseOverStyles(element) {
+    element.style.fontWeight = "bold";
+    element.addEventListener('mouseout', resetMouseOverStyles);
+}
+
+function resetMouseOverStyles(event) {
+    event.target.style.border = null;
+    event.target.style.padding = null;
+    event.target.style.fontWeight = null;
+    event.target.style.borderRadius = null;
+}

src/js/listener/handlers/product_handlers.js

@@ -0,0 +1,57 @@
+import { showError } from "@nextcloud/dialogs";
+import { baseUrl } from "../../modules/mainFunction.js";
+import { getProduitsById, listProduit, updateDB } from "../../modules/ajaxRequest.js";
+
+export function addProductToDevis() {
+    const devisId = document.getElementById('devisid').dataset.id;
+    const produitDevis = { id: devisId };
+
+    fetch(baseUrl + '/insertProduitDevis', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(produitDevis)
+    })
+        .then(function(response) {
+            if (response.ok) {
+                return response.json();
+            }
+            throw new Error('Network response was not ok.');
+        })
+        .then(function() {
+            getProduitsById();
+        })
+        .catch(function() {
+            showError(t('gestion', "Please create a new product"));
+        });
+}
+
+export function showProductSelect(target) {
+    const id = target.dataset.id;
+    const produitid = target.dataset.val;
+    target.textContent = "";
+    target.innerHTML = '<select id="listProduit">';
+    listProduit(document.getElementById('listProduit'), id, produitid);
+}
+
+export async function updateSelectedProduct(event) {
+    const option = event.target.options[event.target.selectedIndex];
+    const id = option.dataset.id;
+    const val = option.dataset.val;
+    const column = option.dataset.column;
+    const table = option.dataset.table;
+
+    await updateDB(table, column, val, id);
+
+    if (event.target.parentNode.className === 'selectableClient_devis') {
+        getClientByIdDevis(id);
+    }
+
+    if (event.target.id === 'listProduit') {
+        getProduitsById();
+    }
+
+    event.target.parentNode.textContent = event.target.value;
+    event.target.parentNode.dataset.val = id;
+}

src/js/listener/handlers/select_handlers.js

@@ -0,0 +1,24 @@
+import { updateDB } from "../../modules/ajaxRequest.js";
+
+export function updateLinkedListSelection(target) {
+    const myDiv = target.closest("div");
+    const id = myDiv.dataset.id;
+    const val = target.value;
+    const column = myDiv.dataset.column;
+    const table = myDiv.dataset.table;
+    target.setAttribute('data-current', target.value);
+    updateDB(table, column, val, id);
+}
+
+export function updateDateInput(target) {
+    updateDB(target.dataset.table, target.dataset.column, target.value, target.dataset.id);
+}
+
+export function updateEditableSelect(target) {
+    const table = target.getAttribute('data-table');
+    const column = target.getAttribute('data-column');
+    const value = target.value;
+    const id = target.getAttribute('data-id');
+
+    updateDB(table, column, value, id);
+}

src/js/listener/handlers/table_handlers.js

@@ -0,0 +1,53 @@
+import DataTable from 'datatables.net';
+import { duplicateDB, deleteDB, getProduitsById, drop } from "../../modules/ajaxRequest.js";
+import { Client } from '../../objects/client.js';
+import { Devis } from '../../objects/devis.js';
+import { Facture } from '../../objects/facture.js';
+import { Produit } from '../../objects/produit.js';
+
+const NEW_ITEM_HANDLERS = {
+    newClient: Client.newClient,
+    newDevis: Devis.newDevis,
+    newInvoice: Facture.newFacture,
+    newProduit: Produit.newProduct,
+};
+
+const RELOAD_HANDLERS = {
+    getProduitsById: () => getProduitsById(),
+    client: dt => Client.loadClientDT(dt),
+    devis: dt => Devis.loadDevisDT(dt),
+    facture: dt => Facture.loadFactureDT(dt),
+    produit: dt => Produit.loadProduitDT(dt),
+};
+
+export function handleNewItemClick(target) {
+    const handler = NEW_ITEM_HANDLERS[target.id];
+
+    if (!handler) {
+        return false;
+    }
+
+    handler(new DataTable('.tabledt'));
+    return true;
+}
+
+export function duplicateItem(target) {
+    duplicateDB(target.dataset.table, target.dataset.id, reloadDataTable, target.dataset.modifier);
+}
+
+export function deleteItem(target) {
+    deleteDB(target.dataset.table, target.dataset.id, reloadDataTable, target.dataset.modifier);
+}
+
+export function dropItem(target, direction) {
+    drop(target.dataset.id, reloadDataTable, target.dataset.modifier, direction);
+}
+
+function reloadDataTable(modifier) {
+    const dt = new DataTable('.tabledt');
+    const handler = RELOAD_HANDLERS[modifier];
+
+    if (handler) {
+        handler(dt);
+    }
+}