fixed for matrici

public/userarea/import_edit2.php

@@ -80,6 +80,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
     <?php include('cssinclude.php'); ?>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2Lw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
     <style>
         .cell-changed {
             background-color: #fff3b0 !important;
@@ -725,6 +726,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
     <script src="photos.js"></script>
     <script src="parts.js"></script>
     <script src="tracking.js"></script>

public/userarea/modal_parts.php

@@ -1,4 +1,4 @@
-<!-- Modal modificato con pulsante per riconoscimento vocale e download -->
+<!-- Modal modificato con pulsante per riconoscimento vocale, download e selezione matrici -->
 <div class="modal fade" id="partsModal" tabindex="-1" aria-labelledby="partsModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-xl" style="max-width: 80% !important; width: 80% !important;">
         <div class="modal-content">
@@ -9,10 +9,12 @@
             <div class="modal-body">
                 <div class="row">
                     <div class="col-md-6">
-                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; min-width: 0;">
                             <h6 style="margin: 0; white-space: nowrap;">Elenco Parti</h6>
-                            <div style="display: flex; align-items: center;">
+                            <div style="display: flex; align-items: center; min-width: 0;">
-                                <input type="checkbox" id="showMixParts" name="showMixParts" style="margin-right: 5px;">
+                                <select id="global-matrice" class="ms-2" style="width: 250px !important; min-width: 250px !important;">
+                                </select>
+                                <input type="checkbox" id="showMixParts" name="showMixParts" style="margin-right: 5px; margin-left: 10px;">
                                 <label for="showMixParts" style="font-size: 0.9rem; margin-right: 10px;">Mix</label>
                                 <button type="button" class="btn btn-info btn-sm" id="renumberPartsBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Rinumera Parti</button>
                                 <button type="button" class="btn btn-secondary btn-sm ms-2" id="toggleVoiceBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;"><i class="fas fa-microphone"></i> Voce</button>
@@ -51,7 +53,8 @@
                         <div style="position: relative; width: 100%; min-height: 400px;">
                             <img id="samplePhoto" src="" alt="Foto del campione" style="max-width: 100%; max-height: 100%; object-fit: contain; position: absolute; top: 0; left: 0;">
                             <canvas id="photoCanvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></canvas>
-                            <canvas id="overlayCanvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;"></canvas> <!-- Nuovo canvas per Fabric.js -->
+                            <canvas id="overlayCanvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;"></canvas>
+                            <div id="descriptionList" class="draggable-description" style="display: none;"></div>
                             <div id="markerContainer"></div>
                         </div>
                     </div>
@@ -249,4 +252,59 @@
         border: 2px solid #000;
         margin: 2px;
     }
+
+    /* Stili per Select2 in #partsList e #global-matrice */
+    #partsList .select2-container,
+    .select2-container--default #global-matrice {
+        width: 250px !important;
+        min-width: 250px !important;
+        margin-left: 10px;
+    }
+
+    #partsList .select2-selection--single,
+    .select2-container--default #global-matrice .select2-selection--single {
+        height: 26px !important;
+        padding: 0.2rem 0.5rem !important;
+        font-size: 0.9rem !important;
+        border: 1px solid #ced4da !important;
+        background-color: #fff !important;
+    }
+
+    #partsList .select2-selection__rendered,
+    .select2-container--default #global-matrice .select2-selection__rendered {
+        line-height: 24px !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+    }
+
+    #partsList .select2-selection__arrow,
+    .select2-container--default #global-matrice .select2-selection__arrow {
+        height: 26px !important;
+    }
+
+    #partsList .save-status,
+    #partsList .save-loading {
+        margin-left: 5px;
+    }
+
+    .select2-container--open .select2-dropdown {
+        z-index: 1051 !important;
+        border: 1px solid #aaa !important;
+        border-radius: 4px !important;
+        background: white !important;
+        overflow-y: auto !important;
+        max-height: 200px !important;
+    }
+
+    .select2-container--default .select2-search--dropdown .select2-search__field {
+        width: 100% !important;
+        padding: 0.2rem !important;
+    }
+
+    .select2-container--default .part-matrice,
+    .select2-container--default #global-matrice {
+        width: 250px !important;
+        min-width: 250px !important;
+    }
 </style>

public/userarea/parts.js

@@ -12,11 +12,13 @@ $(document).ready(function () {
 
     let photoAnnotations = {};
     let partColors = {};
+    let partMatrice = {};
     let selectedPartNumber = null;
     let unsavedChanges = false;
     let fabricCanvas = null;
     let descriptionTextbox = null;
     let markerObjects = {};
+    let matrici = [];
 
     // ===================
     // VOICE RECOGNITION SETUP
@@ -137,8 +139,35 @@ $(document).ready(function () {
             .data("iddatadb", iddatadb)
             .data("idquotations", idquotations);
 
+        // Precarica le matrici se iddatadb (assumendo matrici solo per iddatadb)
+        if (iddatadb) {
+            if (matrici.length === 0) {
+                $.ajax({
+                    url: "get_matrice.php",
+                    method: "GET",
+                    dataType: "json",
+                    success: function (data) {
+                        matrici = data.value || [];
+                        initializeGlobalSelect2();
                         loadPhoto(iddatadb, idquotations);
                         loadExistingParts(iddatadb, idquotations);
+                    },
+                    error: function (xhr, status, error) {
+                        matrici = [];
+                        initializeGlobalSelect2();
+                        loadPhoto(iddatadb, idquotations);
+                        loadExistingParts(iddatadb, idquotations);
+                    },
+                });
+            } else {
+                initializeGlobalSelect2();
+                loadPhoto(iddatadb, idquotations);
+                loadExistingParts(iddatadb, idquotations);
+            }
+        } else {
+            loadPhoto(iddatadb, idquotations);
+            loadExistingParts(iddatadb, idquotations);
+        }
 
         const modal = new bootstrap.Modal(
             document.getElementById("partsModal"),
@@ -175,6 +204,7 @@ $(document).ready(function () {
         };
         photoAnnotations = {};
         partColors = {};
+        partMatrice = {};
         selectedPartNumber = null;
         unsavedChanges = false;
         if (fabricCanvas) {
@@ -184,10 +214,12 @@ $(document).ready(function () {
         }
         descriptionTextbox = null;
         markerObjects = {};
+        matrici = [];
         // Clear UI elements
         $("#photoSelectorContainer").empty().hide();
         $("#samplePhoto").attr("src", "");
         $("#partsTableBody").empty();
+        $("#global-matrice").empty(); // Pulisci select globale se presente
         // Remove any temporary messages
         $(".temp-alert").remove();
     });
@@ -535,6 +567,7 @@ $(document).ready(function () {
                     if (response.success) {
                         $row.remove();
                         delete partColors[partNumber];
+                        delete partMatrice[partNumber];
                         if (markerObjects[partNumber]) {
                             fabricCanvas.remove(markerObjects[partNumber]);
                             delete markerObjects[partNumber];
@@ -576,6 +609,7 @@ $(document).ready(function () {
         } else {
             $row.remove();
             delete partColors[partNumber];
+            delete partMatrice[partNumber];
             if (markerObjects[partNumber]) {
                 fabricCanvas.remove(markerObjects[partNumber]);
                 delete markerObjects[partNumber];
@@ -717,6 +751,9 @@ $(document).ready(function () {
                             </tr>`;
                         $("#partsTableBody").append(newRow);
                         partColors[part.part_number] = defaultColor;
+                        if (part.idmatrice) {
+                            partMatrice[part.part_number] = part.idmatrice;
+                        }
                     });
                 } else {
                     addNewRow(1);
@@ -743,6 +780,163 @@ $(document).ready(function () {
         });
     }
 
+    // Funzione per inizializzare Select2 sulle tendine delle matrici
+    function initializeSelect2($select, partNumber, partId, idmatrice) {
+        if (typeof $.fn.select2 === "undefined") {
+            $select.replaceWith(
+                '<input type="text" class="form-control form-control-sm" placeholder="Select2 non disponibile" disabled>',
+            );
+            return;
+        }
+
+        const options = matrici.map(function (matrice) {
+            return {
+                id: matrice.IdMatrice,
+                text: matrice.NomeMatriceTraduzione,
+            };
+        });
+
+        $select.select2({
+            placeholder: "Seleziona matrice",
+            allowClear: true,
+            data: options,
+            dropdownParent: $("#partsModal"),
+            matcher: function (params, data) {
+                if (!params.term || params.term.length < 3) {
+                    return data;
+                }
+                const term = params.term.toUpperCase();
+                if (data.text.toUpperCase().indexOf(term) >= 0) {
+                    return data;
+                }
+                return null;
+            },
+        });
+
+        if (partId && partId !== "new" && idmatrice) {
+            const matrice = matrici.find((m) => m.IdMatrice == idmatrice);
+            if (matrice) {
+                const option = new Option(
+                    matrice.NomeMatriceTraduzione,
+                    matrice.IdMatrice,
+                    true,
+                    true,
+                );
+                $select.append(option).trigger("change");
+                partMatrice[partNumber] = matrice.IdMatrice;
+            }
+        }
+
+        $select.on("change", function () {
+            const idmatrice = $(this).val();
+            const $listItem = $(this).closest("li");
+            const $saveStatus = $listItem.find(".save-status");
+            const $saveLoading = $listItem.find(".save-loading");
+
+            partMatrice[partNumber] = idmatrice || null;
+
+            if (partId && partId !== "new") {
+                $saveLoading.show();
+                $saveStatus.hide();
+
+                const iddatadb = $("#partsModal").data("iddatadb");
+                const idquotations = $("#partsModal").data("idquotations");
+                const endpoint = idquotations
+                    ? "save_matrice_quotation.php"
+                    : "save_matrice.php"; // Assumendo esista per quotations, altrimenti adatta
+                const data = idquotations
+                    ? { idquotations: idquotations }
+                    : { iddatadb: iddatadb };
+
+                $.ajax({
+                    url: endpoint,
+                    method: "POST",
+                    data: JSON.stringify({
+                        ...data,
+                        parts: [
+                            {
+                                id: partId,
+                                idmatrice: idmatrice || null,
+                            },
+                        ],
+                    }),
+                    contentType: "application/json",
+                    success: function (response) {
+                        if (response.success) {
+                            $saveLoading.hide();
+                            $saveStatus.show();
+                            setTimeout(() => $saveStatus.hide(), 2000);
+                        } else {
+                            const errorMsg = $(
+                                '<div class="alert alert-danger temp-alert" role="alert">Errore nel salvataggio della matrice: ' +
+                                    response.message +
+                                    "</div>",
+                            );
+                            $("#partsModal .modal-body").prepend(errorMsg);
+                            setTimeout(function () {
+                                errorMsg.fadeOut(500, function () {
+                                    $(this).remove();
+                                });
+                            }, 5000);
+                            $saveLoading.hide();
+                        }
+                    },
+                    error: function (xhr, status, error) {
+                        const errorMsg = $(
+                            '<div class="alert alert-danger temp-alert" role="alert">Errore nel salvataggio della matrice: ' +
+                                error +
+                                " (" +
+                                xhr.status +
+                                ")</div>",
+                        );
+                        $("#partsModal .modal-body").prepend(errorMsg);
+                        setTimeout(function () {
+                            errorMsg.fadeOut(500, function () {
+                                $(this).remove();
+                            });
+                        }, 5000);
+                        $saveLoading.hide();
+                    },
+                });
+            }
+        });
+    }
+
+    // Funzione per inizializzare Select2 sul dropdown globale
+    function initializeGlobalSelect2() {
+        const $select = $("#global-matrice");
+        if (typeof $.fn.select2 === "undefined") {
+            $select.replaceWith(
+                '<input type="text" class="form-control form-control-sm" placeholder="Select2 non disponibile" disabled>',
+            );
+            return;
+        }
+
+        const options = matrici.map(function (matrice) {
+            return {
+                id: matrice.IdMatrice,
+                text: matrice.NomeMatriceTraduzione,
+            };
+        });
+
+        $select.select2({
+            placeholder: "Seleziona matrice globale",
+            allowClear: true,
+            data: options,
+            dropdownParent: $("#partsModal"),
+            matcher: function (params, data) {
+                if (!params.term || params.term.length < 3) {
+                    return data;
+                }
+                const term = params.term.toUpperCase();
+                if (data.text.toUpperCase().indexOf(term) >= 0) {
+                    return data;
+                }
+                return null;
+            },
+        });
+    }
+
     // ===================
     // PARTS LIST
     // ===================
@@ -763,6 +957,7 @@ $(document).ready(function () {
         $("#partsTableBody tr").each(function () {
             const partNumber = $(this).find(".part-number").val();
             const partDescription = $(this).find(".part-description").val();
+            const partId = $(this).data("part-id");
             const partColor =
                 partColors[partNumber] ||
                 (partDescription.startsWith("Mix") ? "#0000ff" : "#ff0000");
@@ -778,17 +973,30 @@ $(document).ready(function () {
                     )
                     .join("");
                 const listItem = `
-                    <li class="list-group-item" data-part-number="${partNumber}">
+                    <li class="list-group-item" data-part-number="${partNumber}" data-part-id="${partId}">
                         ${partNumber} - ${partDescription}
                         <div style="display: flex; align-items: center;">
+                            <button type="button" class="btn btn-primary btn-sm propagate-matrice-btn" style="padding: 0.1rem 0.3rem; font-size: 0.8rem; margin-right: 3px;"><i class="fas fa-arrow-right fa-xs"></i></button>
+                            <select class="part-matrice" style="width: 250px !important; margin-right: 10px;"></select>
                             <button type="button" class="btn btn-success btn-sm add-to-mix-btn" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;"><i class="fas fa-plus fa-xs"></i></button>
                             <div class="color-picker-container">
                                 <div class="color-option selected-color" style="background-color: ${partColor}; margin-left: 5px;"></div>
                                 <div class="color-picker">${colorOptions}</div>
                             </div>
+                            <span class="save-status text-success" style="display: none; margin-left: 5px;"><i class="fas fa-check fa-xs"></i></span>
+                            <span class="save-loading text-warning" style="display: none; margin-left: 5px;"><i class="fas fa-spinner fa-spin fa-xs"></i></span>
                         </div>
                     </li>`;
                 $("#partsList").append(listItem);
+                const $select = $("#partsList").find(
+                    `li[data-part-number="${partNumber}"] .part-matrice`,
+                );
+                initializeSelect2(
+                    $select,
+                    partNumber,
+                    partId,
+                    partMatrice[partNumber],
+                );
             }
         });
 
@@ -862,11 +1070,32 @@ $(document).ready(function () {
         }
     });
 
+    $(document).on("click", ".propagate-matrice-btn", function () {
+        const $listItem = $(this).closest("li");
+        const globalVal = $("#global-matrice").val();
+        if (globalVal) {
+            $listItem.find(".part-matrice").val(globalVal).trigger("change");
+        } else {
+            const errorMsg = $(
+                '<div class="alert alert-danger temp-alert" role="alert">Seleziona una matrice globale prima di propagare.</div>',
+            );
+            $("#partsModal .modal-body").prepend(errorMsg);
+            setTimeout(function () {
+                errorMsg.fadeOut(500, function () {
+                    $(this).remove();
+                });
+            }, 5000);
+        }
+    });
+
     $("#partsList").on("click", "li", function (e) {
         if (
             $(e.target).hasClass("add-to-mix-btn") ||
             $(e.target).hasClass("color-option") ||
-            $(e.target).closest(".color-picker-container").length
+            $(e.target).closest(".color-picker-container").length ||
+            $(e.target).hasClass("part-matrice") ||
+            $(e.target).closest(".select2-container").length ||
+            $(e.target).hasClass("propagate-matrice-btn")
         )
             return;
         selectedPartNumber = $(this).data("part-number");
@@ -892,6 +1121,7 @@ $(document).ready(function () {
             ? { idquotations: idquotations }
             : { iddatadb: iddatadb };
         let newPartColors = {};
+        let newPartMatrice = {};
         let newMarkerObjects = {};
 
         let partsData = $rows
@@ -908,6 +1138,7 @@ $(document).ready(function () {
         partsData.forEach((part, index) => {
             const newNumber = index + 1;
             newPartColors[newNumber] = partColors[part.partNumber] || "#ff0000";
+            newPartMatrice[newNumber] = partMatrice[part.partNumber] || null;
             if (markerObjects[part.partNumber]) {
                 newMarkerObjects[newNumber] = markerObjects[part.partNumber];
             }
@@ -934,6 +1165,7 @@ $(document).ready(function () {
         }
 
         partColors = newPartColors;
+        partMatrice = newPartMatrice;
         markerObjects = newMarkerObjects;
 
         const partsToSave = partsData.map((part) => ({
@@ -941,6 +1173,7 @@ $(document).ready(function () {
             part_number: part.partNumber,
             part_description: part.partDescription,
             mix: part.partDescription.startsWith("Mix") ? "Y" : "N",
+            idmatrice: partMatrice[part.partNumber] || null,
         }));
 
         $.ajax({