Updated exportconfiguration, input edit toggle
This commit is contained in:
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -144,12 +144,24 @@
|
||||
|
||||
<div class="column-name-input" id="name_group_{{ column.key }}"
|
||||
style="{% if not column.enabled %}display: none;{% endif %}">
|
||||
<label for="name_{{ column.key }}">Export as:</label>
|
||||
<input type="text"
|
||||
id="name_{{ column.key }}"
|
||||
name="name_{{ column.key }}"
|
||||
value="{{ column.default_name }}"
|
||||
placeholder="Column name in Excel">
|
||||
<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"
|
||||
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 %}
|
||||
|
||||
Reference in New Issue
Block a user