Updated exportconfiguration, input edit toggle

static/css/export_configuration.css

@@ -796,3 +796,59 @@
     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;
+}

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;

templates/export_configuration.html

@@ -144,12 +144,24 @@
                                 
                                 <div class="column-name-input" id="name_group_{{ column.key }}" 
                                     style="{% if not column.enabled %}display: none;{% endif %}">
+                                    <div class="export-name-controls">
                                         <label for="name_{{ column.key }}">Export as:</label>
+                                        <div class="input-with-checkbox">
                                             <input type="text" 
                                                 id="name_{{ column.key }}" 
                                                 name="name_{{ column.key }}" 
                                                 value="{{ column.default_name }}"
-                                        placeholder="Column name in Excel">
+                                                placeholder="Column name in Excel"
+                                                readonly>
+                                            <label class="edit-checkbox-label" title="Enable editing">
+                                                <input type="checkbox" 
+                                                    id="edit_{{ column.key }}" 
+                                                    class="edit-enable-checkbox"
+                                                    onchange="toggleEditMode('{{ column.key }}', this.checked)">
+                                                <i class="fas fa-edit"></i>
+                                            </label>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                             {% endfor %}