Updated export-configuration page: select & order Columns for Export section collapsible
This commit is contained in:
@@ -743,4 +743,56 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Collapsible Sections */
|
||||
.collapsible-content {
|
||||
max-height: 5000px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.collapsible-content.collapsed {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
transition: transform 0.3s ease;
|
||||
margin-left: 10px;
|
||||
font-size: 0.9em;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.toggle-icon.rotated {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.config-header[onclick],
|
||||
.selected-columns-section h4[onclick] {
|
||||
transition: background-color 0.2s ease;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin: -10px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.config-header[onclick]:hover,
|
||||
.selected-columns-section h4[onclick]:hover {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.config-header h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.selected-columns-section h4 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -8,6 +8,50 @@ let availableColumns = [];
|
||||
let sortableInstance = null;
|
||||
let savedColumnOrder = [];
|
||||
|
||||
function toggleSection(sectionId) {
|
||||
try {
|
||||
const section = document.getElementById(sectionId);
|
||||
const icon = document.getElementById(sectionId + 'Icon');
|
||||
|
||||
if (!section) return;
|
||||
|
||||
if (section.classList.contains('collapsed')) {
|
||||
section.classList.remove('collapsed');
|
||||
if (icon) icon.classList.remove('rotated');
|
||||
} else {
|
||||
section.classList.add('collapsed');
|
||||
if (icon) icon.classList.add('rotated');
|
||||
}
|
||||
|
||||
// Save state
|
||||
try {
|
||||
const collapsedSections = JSON.parse(localStorage.getItem('collapsedSections') || '{}');
|
||||
collapsedSections[sectionId] = section.classList.contains('collapsed');
|
||||
localStorage.setItem('collapsedSections', JSON.stringify(collapsedSections));
|
||||
} catch (e) {}
|
||||
} catch (error) {
|
||||
console.error('Error toggling section:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function restoreCollapsedState() {
|
||||
try {
|
||||
const collapsedSections = JSON.parse(localStorage.getItem('collapsedSections') || '{}');
|
||||
|
||||
Object.keys(collapsedSections).forEach(sectionId => {
|
||||
if (collapsedSections[sectionId]) {
|
||||
const section = document.getElementById(sectionId);
|
||||
const icon = document.getElementById(sectionId + 'Icon');
|
||||
|
||||
if (section) {
|
||||
section.classList.add('collapsed');
|
||||
if (icon) icon.classList.add('rotated');
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (error) {}
|
||||
}
|
||||
|
||||
// Initialize when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('Enhanced Export Configuration with Drag & Drop initialized');
|
||||
|
||||
@@ -89,12 +89,11 @@
|
||||
<input type="hidden" id="column_order" name="column_order" value="">
|
||||
|
||||
<div class="config-card">
|
||||
<div class="config-header">
|
||||
<div class="config-header" onclick="toggleSection('columnsSection')" style="cursor: pointer;">
|
||||
<h3>
|
||||
<i class="fas fa-columns"></i>
|
||||
Select & Order Columns for Export
|
||||
Select & Order Columns for Export <i class="fas fa-chevron-down toggle-icon" id="columnsSectionIcon"></i>
|
||||
</h3>
|
||||
<div class="config-actions">
|
||||
<div class="config-actions" onclick="event.stopPropagation();">
|
||||
<button type="button" onclick="selectAllColumns()" class="btn btn-sm btn-outline">
|
||||
<i class="fas fa-check-double"></i>
|
||||
Select All
|
||||
@@ -109,62 +108,63 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Instructions -->
|
||||
<div class="instructions-card">
|
||||
<div class="instructions-content">
|
||||
<h4><i class="fas fa-info-circle"></i> How to Use</h4>
|
||||
<ul>
|
||||
<li><strong>Select columns:</strong> Check the boxes for columns you want to export</li>
|
||||
<li><strong>Customize names:</strong> Edit the "Export as" field to change column headers</li>
|
||||
<li><strong>Reorder columns:</strong> <span class="highlight">Drag & drop</span> the selected columns to change their order in the Excel file</li>
|
||||
<li><strong>Preview:</strong> See how your export will look in the preview below</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Available Columns Grid -->
|
||||
<div class="columns-section">
|
||||
<h4><i class="fas fa-list"></i> Available Columns</h4>
|
||||
<div class="columns-grid" id="columnsGrid">
|
||||
{% for column in available_columns %}
|
||||
<div class="column-item" data-column-key="{{ column.key }}">
|
||||
<div class="column-checkbox">
|
||||
<input type="checkbox"
|
||||
id="col_{{ column.key }}"
|
||||
name="selected_columns"
|
||||
value="{{ column.key }}"
|
||||
{% if column.enabled %}checked{% endif %}
|
||||
onchange="toggleColumnName('{{ column.key }}')">
|
||||
<label for="col_{{ column.key }}">
|
||||
<i class="fas fa-check"></i>
|
||||
{{ column.label }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="collapsible-content" id="columnsSection">
|
||||
<!-- Instructions
|
||||
<div class="instructions-card">
|
||||
<div class="instructions-content">
|
||||
<h4><i class="fas fa-info-circle"></i> How to Use</h4>
|
||||
<ul>
|
||||
<li><strong>Select columns:</strong> Check the boxes for columns you want to export</li>
|
||||
<li><strong>Customize names:</strong> Edit the "Export as" field to change column headers</li>
|
||||
<li><strong>Reorder columns:</strong> <span class="highlight">Drag & drop</span> the selected columns to change their order in the Excel file</li>
|
||||
<li><strong>Preview:</strong> See how your export will look in the preview below</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- Available Columns Grid -->
|
||||
<div class="columns-section">
|
||||
<h4><i class="fas fa-list"></i> Available Columns</h4>
|
||||
<div class="columns-grid" id="columnsGrid">
|
||||
{% for column in available_columns %}
|
||||
<div class="column-item" data-column-key="{{ column.key }}">
|
||||
<div class="column-checkbox">
|
||||
<input type="checkbox"
|
||||
id="col_{{ column.key }}"
|
||||
name="selected_columns"
|
||||
value="{{ column.key }}"
|
||||
{% if column.enabled %}checked{% endif %}
|
||||
onchange="toggleColumnName('{{ column.key }}')">
|
||||
<label for="col_{{ column.key }}">
|
||||
<i class="fas fa-check"></i>
|
||||
{{ column.label }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Selected Columns Ordering Section -->
|
||||
<div class="selected-columns-section" id="selectedColumnsSection" style="display: none;">
|
||||
<h4><i class="fas fa-sort"></i> Column Order in Export <span class="drag-hint">(Drag to reorder)</span></h4>
|
||||
<div class="selected-columns-list" id="selectedColumnsList">
|
||||
<!-- Selected columns will appear here for reordering -->
|
||||
<!-- Selected Columns Ordering Section -->
|
||||
<div class="selected-columns-section" id="selectedColumnsSection" style="display: none;">
|
||||
<h4><i class="fas fa-sort"></i> Column Order in Export<span class="drag-hint">(Drag to reorder)</span></h4>
|
||||
<div class="selected-columns-list" id="selectedColumnsList">
|
||||
<!-- Selected columns will appear here for reordering -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview Section -->
|
||||
<div class="preview-section">
|
||||
<div class="preview-header">
|
||||
|
||||
Reference in New Issue
Block a user