diff --git a/static/css/export_configuration.css b/static/css/export_configuration.css index 6f4a64c..95f4803 100644 --- a/static/css/export_configuration.css +++ b/static/css/export_configuration.css @@ -795,4 +795,60 @@ align-items: center; justify-content: space-between; flex-wrap: wrap; +} + +/* Edit checkbox styles */ +.export-name-controls { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.input-with-checkbox { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.input-with-checkbox input[type="text"] { + flex: 1; + background-color: #f8f9fa; + cursor: not-allowed; +} + +.input-with-checkbox input[type="text"]:not([readonly]) { + background-color: white; + cursor: text; +} + +.edit-checkbox-label { + display: flex; + align-items: center; + gap: 0.25rem; + cursor: pointer; + padding: 0.5rem; + border-radius: 4px; + transition: background-color 0.2s; + user-select: none; +} + +.edit-checkbox-label:hover { + background-color: #e9ecef; +} + +.edit-checkbox-label input[type="checkbox"] { + cursor: pointer; +} + +.edit-checkbox-label i { + color: #6c757d; + font-size: 0.9rem; +} + +.edit-checkbox-label input[type="checkbox"]:checked + i { + color: #0d6efd; +} + +.column-name-input input[type="text"][readonly] { + opacity: 0.7; } \ No newline at end of file diff --git a/static/js/export_configuration.js b/static/js/export_configuration.js index 3a2af13..2df1379 100644 --- a/static/js/export_configuration.js +++ b/static/js/export_configuration.js @@ -187,6 +187,38 @@ function toggleColumnName(columnKey) { } } +/** + * Toggle edit mode for column name input + * @param {string} columnKey - The column key + * @param {boolean} enableEdit - Whether to enable editing + */ +function toggleEditMode(columnKey, enableEdit) { + try { + const nameInput = document.getElementById('name_' + columnKey); + + if (nameInput) { + if (enableEdit) { + // Enable editing + nameInput.removeAttribute('readonly'); + nameInput.focus(); + nameInput.select(); + console.log(`✏️ Editing enabled for column: ${columnKey}`); + } else { + // Disable editing + nameInput.setAttribute('readonly', 'readonly'); + console.log(`🔒 Editing disabled for column: ${columnKey}`); + } + + // Update preview when name changes + updateSelectedColumnsList(); + updatePreview(); + } + } catch (error) { + console.error('Error toggling edit mode:', error); + } +} + + function initializeDragDrop() { try { const selectedColumnsList = document.getElementById('selectedColumnsList'); @@ -476,6 +508,7 @@ function resetToDefaults() { allCheckboxes.forEach(checkbox => { const key = checkbox.value; const nameInput = document.getElementById('name_' + key); + const editCheckbox = document.getElementById('edit_' + key); const columnItem = checkbox.closest('.column-item'); // Check if this column should be selected by default @@ -491,7 +524,7 @@ function resetToDefaults() { columnItem?.classList.remove('selected'); } - // Set the export name + // Set the export name and reset to readonly if (nameInput) { if (DEFAULT_COLUMNS[key]) { nameInput.value = DEFAULT_COLUMNS[key].name; @@ -500,6 +533,14 @@ function resetToDefaults() { const columnData = availableColumns.find(col => col.key === key); nameInput.value = columnData ? columnData.defaultName : nameInput.value; } + + // Reset to readonly mode + nameInput.setAttribute('readonly', 'readonly'); + } + + // Uncheck edit checkbox + if (editCheckbox) { + editCheckbox.checked = false; } // Toggle visibility @@ -638,11 +679,18 @@ function savePreferences() { .map(cb => cb.value); const columnNames = {}; + const editStates = {}; selectedColumns.forEach(col => { const input = document.getElementById('name_' + col); + const editCheckbox = document.getElementById('edit_' + col); + if (input) { columnNames[col] = input.value.trim(); } + + if (editCheckbox) { + editStates[col] = editCheckbox.checked; + } }); // Get current column order @@ -651,12 +699,13 @@ function savePreferences() { const prefs = { selected_columns: selectedColumns, column_names: columnNames, + edit_states: editStates, column_order: columnOrder, timestamp: new Date().toISOString() }; localStorage.setItem('exportPreferences', JSON.stringify(prefs)); - console.log('Preferences saved with column order:', prefs); + console.log('💾 Preferences saved with column order and edit states:', prefs); } catch (e) { console.warn('Could not save preferences:', e); @@ -725,12 +774,29 @@ function loadSavedPreferences() { }); } + // Apply saved edit states + if (prefs.edit_states) { + Object.keys(prefs.edit_states).forEach(key => { + const editCheckbox = document.getElementById('edit_' + key); + const nameInput = document.getElementById('name_' + key); + + if (editCheckbox && prefs.edit_states[key]) { + editCheckbox.checked = true; + if (nameInput) { + nameInput.removeAttribute('readonly'); + } + } else if (nameInput) { + nameInput.setAttribute('readonly', 'readonly'); + } + }); + } + // Save column order for later use if (prefs.column_order) { savedColumnOrder = prefs.column_order; } - console.log('Preferences loaded:', prefs); + console.log('📋 Preferences loaded:', prefs); // Update preview after loading preferences updateSelectedColumnsList(); @@ -772,6 +838,7 @@ window.selectAllColumns = selectAllColumns; window.deselectAllColumns = deselectAllColumns; window.resetToDefaults = resetToDefaults; window.toggleColumnName = toggleColumnName; +window.toggleEditMode = toggleEditMode; window.updateSelectedColumnsList = updateSelectedColumnsList; window.getCurrentColumnOrder = getCurrentColumnOrder; window.updateColumnOrderField = updateColumnOrderField; diff --git a/templates/export_configuration.html b/templates/export_configuration.html index 3191d57..fd6bcdb 100644 --- a/templates/export_configuration.html +++ b/templates/export_configuration.html @@ -144,12 +144,24 @@
{% endfor %}