zibo-dashboard/public/userarea/edit_template_xls.php
2025-06-05 10:11:57 +02:00

598 lines
31 KiB
PHP

<?php include('include/headscript.php');
// Controlla se è stato passato un ID valido
if (!isset($_GET['id']) || !is_numeric($_GET['id'])) {
header("Location: xlstemplates_grid.php?status=error&message=" . urlencode("Invalid ID"));
exit;
}
$id = intval($_GET['id']); // Sanifica l'ID
// Recupera il template dal database
$db = DBHandlerSelect::getInstance();
$pdo = $db->getConnection();
$stmt = $pdo->prepare("SELECT * FROM excel_templates WHERE id = ?");
$stmt->execute([$id]);
$template = $stmt->fetch(PDO::FETCH_ASSOC);
if (!$template) {
header("Location: template_dashboard.php?status=error&message=" . urlencode("Template not found"));
exit;
}
// Debug del JSON
$clientSpecificFieldsJson = $template['client_specific_fields'] ?? '{}';
error_log("Raw client_specific_fields JSON: " . $clientSpecificFieldsJson);
$clientSpecificFields = json_decode($clientSpecificFieldsJson, true);
if (json_last_error() !== JSON_ERROR_NONE) {
error_log("JSON decode error: " . json_last_error_msg());
$clientSpecificFields = [];
} else {
error_log("Decoded client_specific_fields: " . print_r($clientSpecificFields, true));
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="assets/images/favicon-32x32.png" type="image/png" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<?php include('cssinclude.php'); ?>
<style>
.client-field-row .row {
margin-bottom: 0 !important;
display: flex;
align-items: center;
}
.client-field-row .col-md-1,
.client-field-row .col-md-2,
.client-field-row .col-md-3 {
padding: 0 5px;
overflow: hidden;
max-width: 100%;
flex: 0 0 auto;
}
.client-field-row input,
.client-field-row select {
width: 100%;
box-sizing: border-box;
}
</style>
<title>Edit Template <?= htmlspecialchars($titlewebsite, ENT_QUOTES, 'UTF-8'); ?></title>
</head>
<body>
<div class="wrapper">
<?php include('include/navbar.php'); ?>
<?php include('include/topbar.php'); ?>
<div class="page-wrapper">
<div class="page-content">
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0">UpdateXLS Template</h5>
</div>
<div class="card-body">
<p class="mb-2">Edit the following form in order to update the selected import XLS template</p>
<p class="mb-2">Mandatory Fields</p>
<ul class="mb-0">
<li>Template Name</li>
<li>Row Header and Column Header: where the title of the excel starts</li>
<li>Destination Table: already prefilled</li>
</ul>
</div>
</div>
<div class="card radius-10">
<div class="card-header">
<div class="d-flex align-items-center">
<div>
<h6 class="mb-0">Edit Template: <?php echo htmlspecialchars($template['name']); ?></h6>
</div>
</div>
</div>
<div class="card-body">
<div class="col-12">
<form id="editTemplateForm" method="POST">
<input type="hidden" name="id" value="<?php echo $template['id']; ?>">
<div class="mb-3">
<label class="form-label"><?= htmlspecialchars($templatename, ENT_QUOTES, 'UTF-8'); ?> *</label>
<input type="text" name="name" class="form-control" value="<?php echo htmlspecialchars($template['name']); ?>" required>
</div>
<div class="mb-3">
<label class="form-label"><?= htmlspecialchars($rowheader, ENT_QUOTES, 'UTF-8'); ?> *</label>
<input type="number" name="header_row" class="form-control" value="<?php echo $template['header_row']; ?>" required>
</div>
<div class="mb-3">
<label class="form-label"><?= htmlspecialchars($columnheader, ENT_QUOTES, 'UTF-8'); ?>*</label>
<input type="text" name="start_column" class="form-control" value="<?php echo htmlspecialchars($template['start_column']); ?>" required>
</div>
<div class="mb-3">
<label class="form-label"><?= htmlspecialchars($desctemplate, ENT_QUOTES, 'UTF-8'); ?></label>
<textarea name="description" class="form-control"><?php echo htmlspecialchars($template['description']); ?></textarea>
</div>
<div class="mb-3">
<label class="form-label"><?= htmlspecialchars($desttable, ENT_QUOTES, 'UTF-8'); ?>*</label>
<input type="text" name="target_table" class="form-control" value="<?php echo htmlspecialchars($template['target_table']); ?>" readonly required>
</div>
<!-- Aggiungi il campo per selezionare il cliente -->
<div class="mb-3">
<label class="form-label">Select Client *</label>
<select name="client_id" id="clientSelect" class="form-control" required>
<option value="">Select a client...</option>
<!-- Le opzioni verranno popolate tramite JavaScript -->
</select>
<span id="clientLoadingStatus" class="text-muted" style="margin-left: 10px; display: none;">Recupero clienti in corso...</span>
</div>
<!-- Sezione per i campi specifici del cliente -->
<div class="mb-3">
<label class="form-label">Client-Specific Fields</label>
<!-- Intestazioni colonne -->
<div class="row fw-bold text-secondary mb-1">
<div class="col-md-3">Field Name</div>
<div class="col-md-2">Type</div>
<div class="col-md-2">Possible Values</div>
<div class="col-md-1">Required</div>
<div class="col-md-2">Export Column Name</div>
<div class="col-md-1">Default Value</div>
<div class="col-md-1">Actions</div>
</div>
<div id="clientSpecificFields">
<?php
$index = 0;
if (!empty($clientSpecificFields) && is_array($clientSpecificFields)) {
foreach ($clientSpecificFields as $fieldName => $fieldData) {
if (is_array($fieldData)) {
$type = $fieldData['type'] ?? 'text';
$possibleValues = implode(', ', $fieldData['possible_values'] ?? []);
$isRequired = isset($fieldData['is_required']) && $fieldData['is_required'] ? '1' : '0';
$exportColumnName = $fieldData['export_column_name'] ?? '';
$defaultValue = $fieldData['default_value'] ?? '';
?>
<div class="client-field-row mb-2">
<div class="row align-items-center">
<div class="col-md-3">
<input type="text" name="specific_fields[<?php echo $index; ?>][name]" class="form-control" value="<?php echo htmlspecialchars($fieldName); ?>" placeholder="Field Name (e.g., SKU)">
</div>
<div class="col-md-2">
<select name="specific_fields[<?php echo $index; ?>][type]" class="form-control" onchange="toggleDropdownValues(this)">
<option value="text" <?php echo $type === 'text' ? 'selected' : ''; ?>>Text</option>
<option value="dropdown" <?php echo $type === 'dropdown' ? 'selected' : ''; ?>>Dropdown</option>
<option value="date" <?php echo $type === 'date' ? 'selected' : ''; ?>>Date</option>
<option value="boolean" <?php echo $type === 'boolean' ? 'selected' : ''; ?>>Yes/No</option>
</select>
</div>
<div class="col-md-2 dropdown-values" style="<?php echo $type === 'dropdown' ? 'visibility: visible;' : 'visibility: hidden;'; ?>">
<input type="text" name="specific_fields[<?php echo $index; ?>][possible_values]" class="form-control" value="<?php echo htmlspecialchars($possibleValues); ?>" placeholder="Values (e.g., Red, Blue, Green)">
</div>
<div class="col-md-1">
<select name="specific_fields[<?php echo $index; ?>][required]" class="form-control">
<option value="1" <?php echo $isRequired === '1' ? 'selected' : ''; ?>>Yes</option>
<option value="0" <?php echo $isRequired === '0' ? 'selected' : ''; ?>>No</option>
</select>
</div>
<div class="col-md-2">
<input type="text" name="specific_fields[<?php echo $index; ?>][export_column_name]" class="form-control" value="<?php echo htmlspecialchars($exportColumnName); ?>" placeholder="Export Column Name (e.g., MONCLER_SKU)">
</div>
<div class="col-md-1">
<input type="text" name="specific_fields[<?php echo $index; ?>][default_value]" class="form-control" value="<?php echo htmlspecialchars($defaultValue); ?>" placeholder="Default Value (optional)">
</div>
<div class="col-md-1">
<button type="button" class="btn btn-danger remove-field">-</button>
</div>
</div>
</div>
<?php
$index++;
}
}
}
?>
</div>
<button type="button" class="btn btn-primary mt-2" id="addField">Add Field</button>
</div>
<br>
<button type="submit" class="btn btn-primary"><?= htmlspecialchars($savechanges, ENT_QUOTES, 'UTF-8'); ?></button>
<a href="templates_dashboard.php" class="btn btn-secondary">Cancel</a>
</form>
</div>
</div>
</div>
</div>
</div>
<!--end page wrapper -->
<!--start overlay-->
<div class="overlay toggle-icon"></div>
<!--end overlay-->
<!--Start Back To Top Button-->
<a href="javaScript:;" class="back-to-top"><i class='bx bxs-up-arrow-alt'></i></a>
<!--End Back To Top Button-->
<?php include('include/footer.php'); ?>
</div>
<!--end wrapper-->
<!-- search modal -->
<?php //include('include/searchmodal.php');
?>
<!-- end search modal -->
<!--start switcher-->
<?php //include('include/themeswitcher.php');
?>
<!--end switcher-->
<!-- Temporaneamente disabilitato jsinclude.php per test -->
<!-- <?php include('jsinclude.php'); ?> -->
<!-- Includi jQuery e Select2 -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
// Dati del cliente associato al template
const templateClientId = <?php echo json_encode($template['idclient'] ?? 0); ?>;
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const form = document.getElementById("editTemplateForm");
const addFieldButton = document.getElementById("addField");
const container = document.getElementById("clientSpecificFields");
const clientLoadingStatus = document.getElementById("clientLoadingStatus");
if (!form || !addFieldButton || !container || !clientLoadingStatus) {
console.error("One or more DOM elements not found:", {
form,
addFieldButton,
container,
clientLoadingStatus
});
return;
}
console.log("All DOM elements found");
// Controllo che jQuery sia caricato
if (typeof jQuery === 'undefined') {
console.error("jQuery non è caricato!");
return;
}
// Inizializza Select2 sulla tendina dei clienti
$('#clientSelect').select2({
placeholder: "Search for a client...",
allowClear: true
}).on('select2:open', function() {
console.log("Select2 initialized successfully");
}).on('select2:select', function(e) {
console.log("Client selected:", e.params.data.id, e.params.data.text);
});
// Carica i clienti al caricamento della pagina
async function loadClients() {
try {
// Mostra il messaggio di caricamento
clientLoadingStatus.style.display = 'inline';
const response = await fetch("get_clienti.php", {
method: "GET",
headers: {
"Content-Type": "application/json"
}
});
const text = await response.text();
console.log("Risposta raw (clienti):", text);
const data = JSON.parse(text);
if (!response.ok) {
throw new Error(data.error || `Errore HTTP: ${response.status}, Dettagli: ${JSON.stringify(data)}`);
}
if (data.value && Array.isArray(data.value)) {
const select = document.getElementById("clientSelect");
select.innerHTML = '<option value="">Select a client...</option>'; // Resetta la tendina
data.value.forEach(client => {
const nome = client.Nominativo || "Nome non disponibile";
const id = client.IdCliente || "ID non disponibile";
const option = new Option(`${nome.trim()} (ID: ${id})`, id);
// Pre-seleziona il cliente associato al template
if (parseInt(id) === parseInt(templateClientId)) {
option.selected = true;
}
select.add(option);
});
// Forza l'aggiornamento di Select2
$(select).trigger('change');
console.log("Clienti caricati con successo.");
clientLoadingStatus.textContent = "Clienti caricati.";
} else {
console.error("Nessun cliente trovato o formato dati non valido.", data);
clientLoadingStatus.textContent = "Nessun cliente trovato.";
Swal.fire({
title: "Error!",
text: "No clients found or invalid data format.",
icon: "error",
confirmButtonText: "OK"
});
}
} catch (error) {
console.error("Errore nel caricamento dei clienti:", error);
clientLoadingStatus.textContent = "Errore nel caricamento.";
Swal.fire({
title: "Error!",
text: "Failed to load clients: " + error.message,
icon: "error",
confirmButtonText: "OK"
});
} finally {
// Nasconde il messaggio dopo un breve ritardo per leggibilità
setTimeout(() => {
clientLoadingStatus.style.display = 'none';
}, 2000);
}
}
// Chiama la funzione per caricare i clienti
loadClients();
// Debug iniziale del DOM
const debugDom = () => {
const initialRows = container.getElementsByClassName("client-field-row");
console.log("Initial number of rows:", initialRows.length);
for (let i = 0; i < initialRows.length; i++) {
const inputs = initialRows[i].querySelectorAll("input, select");
const buttons = initialRows[i].querySelectorAll("button");
console.log(`Row ${i + 1} - Total inputs: ${inputs.length}, Total buttons: ${buttons.length}`);
inputs.forEach(input => console.log(`Input name: ${input.name}, value: ${input.value}, placeholder: ${input.placeholder}`));
buttons.forEach(button => console.log(`Button type: ${button.type}`));
}
};
debugDom();
// Pulizia del DOM da input extra
const cleanDom = () => {
const rows = container.getElementsByClassName("client-field-row");
for (let i = 0; i < rows.length; i++) {
const inputs = rows[i].querySelectorAll("input, select");
if (inputs.length > 6) { // 6 input/select attesi
console.warn(`Row ${i + 1}: Extra inputs detected, removing excess...`);
inputs.forEach((input, index) => {
if (index >= 6) {
console.log(`Removing extra input: ${input.name}`);
input.remove();
}
});
}
}
};
cleanDom();
// Osservatore del DOM per rilevare modifiche
const observer = new MutationObserver((mutations) => {
mutations.forEach(mutation => {
if (mutation.addedNodes.length) {
console.log("DOM modified: New nodes added", mutation.addedNodes);
cleanDom(); // Pulisce il DOM ogni volta che viene modificato
}
});
});
observer.observe(container, {
childList: true,
subtree: true
});
// Gestione dinamica dei campi specifici
addFieldButton.addEventListener("click", function() {
console.log("Add Field button clicked");
const fieldCount = container.getElementsByClassName("client-field-row").length;
const newField = document.createElement("div");
newField.className = "client-field-row mb-2";
newField.innerHTML = `
<div class="row align-items-center">
<div class="col-md-3">
<input type="text" name="specific_fields[${fieldCount}][name]" class="form-control" placeholder="Field Name (e.g., SKU)">
</div>
<div class="col-md-2">
<select name="specific_fields[${fieldCount}][type]" class="form-control" onchange="toggleDropdownValues(this)">
<option value="text">Text</option>
<option value="dropdown">Dropdown</option>
<option value="date">Date</option>
<option value="boolean">Yes/No</option>
</select>
</div>
<div class="col-md-2 dropdown-values" style="visibility: hidden;">
<input type="text" name="specific_fields[${fieldCount}][possible_values]" class="form-control" placeholder="Values (e.g., Red, Blue, Green)">
</div>
<div class="col-md-1">
<select name="specific_fields[${fieldCount}][required]" class="form-control">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
</div>
<div class="col-md-2">
<input type="text" name="specific_fields[${fieldCount}][export_column_name]" class="form-control" placeholder="Export Column Name (e.g., MONCLER_SKU)">
</div>
<div class="col-md-1">
<input type="text" name="specific_fields[${fieldCount}][default_value]" class="form-control" placeholder="Default Value (optional)">
</div>
<div class="col-md-1">
<button type="button" class="btn btn-danger remove-field">-</button>
</div>
</div>
`;
container.appendChild(newField);
newField.querySelector(".remove-field").addEventListener("click", function() {
console.log("Remove Field button clicked");
container.removeChild(newField);
updateFieldIndices();
});
});
// Funzione per mostrare/nascondere il campo dei valori possibili per i dropdown
window.toggleDropdownValues = function(selectElement) {
console.log("Toggling dropdown values for:", selectElement.value);
const row = selectElement.closest(".row");
const dropdownValues = row.querySelector(".dropdown-values");
if (selectElement.value === "dropdown") {
dropdownValues.style.visibility = "visible";
} else {
dropdownValues.style.visibility = "hidden";
}
};
// Event listener per i pulsanti di rimozione esistenti
document.querySelectorAll(".remove-field").forEach(button => {
button.addEventListener("click", function() {
console.log("Existing remove button clicked");
const container = document.getElementById("clientSpecificFields");
container.removeChild(button.closest(".client-field-row"));
updateFieldIndices();
});
});
// Funzione per aggiornare gli indici dei campi
function updateFieldIndices() {
console.log("Updating field indices");
const rows = container.getElementsByClassName("client-field-row");
for (let i = 0; i < rows.length; i++) {
const inputs = rows[i].querySelectorAll("input, select");
inputs.forEach(input => {
const name = input.name.replace(/\[\d+\]/, `[${i}]`);
input.name = name;
});
}
}
// Submit del form
form.addEventListener("submit", function(e) {
e.preventDefault();
console.log("Form submitted");
let formData = new FormData(this);
// Aggiungi il nome del cliente selezionato a FormData
const clientSelect = document.getElementById("clientSelect");
const clientId = clientSelect.value;
const selectedOption = clientSelect.options[clientSelect.selectedIndex];
// Validazione: assicurati che un cliente sia selezionato
if (!clientId) {
Swal.fire({
title: "Error!",
text: "Please select a client.",
icon: "error",
confirmButtonText: "OK"
});
return;
}
// Estrai il nome del cliente in modo più robusto
let clientName = "";
if (selectedOption) {
const optionText = selectedOption.text.trim();
const nameMatch = optionText.match(/^(.+?)(?:\s*\(ID:\s*\d+\))?$/);
clientName = nameMatch ? nameMatch[1].trim() : optionText;
}
formData.append("client_name", clientName);
// Log per debug
console.log("Client ID:", clientId);
console.log("Client Name:", clientName);
// Genera il JSON per client_specific_fields
let finalSpecificFields = {};
// Raccolta dei dati direttamente dal DOM
const fieldRows = container.getElementsByClassName("client-field-row");
for (let i = 0; i < fieldRows.length; i++) {
const row = fieldRows[i];
const inputs = row.querySelectorAll("input, select");
let fieldData = {};
inputs.forEach(input => {
const nameMatch = input.name.match(/specific_fields\[\d+\]\[(.*?)\]/);
if (nameMatch) {
const fieldName = nameMatch[1];
fieldData[fieldName] = input.value.trim();
}
});
if (fieldData.name) {
finalSpecificFields[fieldData.name] = {
type: fieldData.type || "text",
possible_values: (fieldData.possible_values && fieldData.type === "dropdown") ? fieldData.possible_values.split(",").map(v => v.trim()) : [],
is_required: fieldData.required === "1",
export_column_name: fieldData.export_column_name || "",
default_value: fieldData.default_value || ""
};
console.log(`Field ${fieldData.name}:`, finalSpecificFields[fieldData.name]);
}
}
console.log("Generated JSON for client_specific_fields:", JSON.stringify(finalSpecificFields));
// Aggiungi il JSON al FormData
formData.append("client_specific_fields", JSON.stringify(finalSpecificFields));
// Debug del FormData
console.log("FormData contents:");
for (let pair of formData.entries()) {
console.log(pair[0] + ': ' + pair[1]);
}
fetch("process_edit_template_xls.php", {
method: "POST",
body: formData
})
.then(response => response.json())
.then(data => {
console.log("Fetch response:", data);
if (data.success) {
Swal.fire({
title: "Success!",
text: "Template updated successfully!",
icon: "success",
confirmButtonText: "OK"
}).then(() => {
window.location.href = "templates_dashboard.php";
});
} else {
Swal.fire({
title: "Error!",
text: data.message,
icon: "error",
confirmButtonText: "OK"
});
}
})
.catch(error => {
console.error("Fetch error:", error);
Swal.fire({
title: "Error!",
text: "An unexpected error occurred.",
icon: "error",
confirmButtonText: "OK"
});
});
});
});
</script>
</body>
</html>