nngo/GOV_QR_Codes_Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated export-configuration page: select & order Columns for Export section collapsible

Browse Source
This commit is contained in:
nngo
2025-11-25 14:13:10 -05:00
parent 5780218e99
commit d7747cb557
3 changed files with 150 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/export_configuration.css
+52
View File
@@ -743,4 +743,56 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 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;
} }
static/js/export_configuration.js
+44
View File
@@ -8,6 +8,50 @@ let availableColumns = [];
let sortableInstance = null; let sortableInstance = null;
let savedColumnOrder = []; 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 // Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
console.log('Enhanced Export Configuration with Drag & Drop initialized'); console.log('Enhanced Export Configuration with Drag & Drop initialized');
templates/export_configuration.html
+54 -54
View File
@@ -89,12 +89,11 @@
<input type="hidden" id="column_order" name="column_order" value=""> <input type="hidden" id="column_order" name="column_order" value="">
<div class="config-card"> <div class="config-card">
<div class="config-header"> <div class="config-header" onclick="toggleSection('columnsSection')" style="cursor: pointer;">
<h3> <h3>
<i class="fas fa-columns"></i> Select & Order Columns for Export <i class="fas fa-chevron-down toggle-icon" id="columnsSectionIcon"></i>
Select & Order Columns for Export
</h3> </h3>
<div class="config-actions"> <div class="config-actions" onclick="event.stopPropagation();">
<button type="button" onclick="selectAllColumns()" class="btn btn-sm btn-outline"> <button type="button" onclick="selectAllColumns()" class="btn btn-sm btn-outline">
<i class="fas fa-check-double"></i> <i class="fas fa-check-double"></i>
Select All Select All
@@ -109,62 +108,63 @@
</button> </button>
</div> </div>
</div> </div>
<div class="collapsible-content" id="columnsSection">
<!-- Instructions --> <!-- Instructions
<div class="instructions-card"> <div class="instructions-card">
<div class="instructions-content"> <div class="instructions-content">
<h4><i class="fas fa-info-circle"></i> How to Use</h4> <h4><i class="fas fa-info-circle"></i> How to Use</h4>
<ul> <ul>
<li><strong>Select columns:</strong> Check the boxes for columns you want to export</li> <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>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>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> <li><strong>Preview:</strong> See how your export will look in the preview below</li>
</ul> </ul>
</div> </div>
</div> </div>
-->
<!-- Available Columns Grid -->
<div class="columns-section"> <!-- Available Columns Grid -->
<h4><i class="fas fa-list"></i> Available Columns</h4> <div class="columns-section">
<div class="columns-grid" id="columnsGrid"> <h4><i class="fas fa-list"></i> Available Columns</h4>
{% for column in available_columns %} <div class="columns-grid" id="columnsGrid">
<div class="column-item" data-column-key="{{ column.key }}"> {% for column in available_columns %}
<div class="column-checkbox"> <div class="column-item" data-column-key="{{ column.key }}">
<input type="checkbox" <div class="column-checkbox">
id="col_{{ column.key }}" <input type="checkbox"
name="selected_columns" id="col_{{ column.key }}"
value="{{ column.key }}" name="selected_columns"
{% if column.enabled %}checked{% endif %} value="{{ column.key }}"
onchange="toggleColumnName('{{ column.key }}')"> {% if column.enabled %}checked{% endif %}
<label for="col_{{ column.key }}"> onchange="toggleColumnName('{{ column.key }}')">
<i class="fas fa-check"></i> <label for="col_{{ column.key }}">
{{ column.label }} <i class="fas fa-check"></i>
</label> {{ column.label }}
</div> </label>
</div>
<div class="column-name-input" id="name_group_{{ column.key }}"
style="{% if not column.enabled %}display: none;{% endif %}"> <div class="column-name-input" id="name_group_{{ column.key }}"
<label for="name_{{ column.key }}">Export as:</label> style="{% if not column.enabled %}display: none;{% endif %}">
<input type="text" <label for="name_{{ column.key }}">Export as:</label>
id="name_{{ column.key }}" <input type="text"
name="name_{{ column.key }}" id="name_{{ column.key }}"
value="{{ column.default_name }}" name="name_{{ column.key }}"
placeholder="Column name in Excel"> value="{{ column.default_name }}"
</div> placeholder="Column name in Excel">
</div>
</div>
{% endfor %}
</div> </div>
{% endfor %}
</div> </div>
</div>
<!-- Selected Columns Ordering Section --> <!-- Selected Columns Ordering Section -->
<div class="selected-columns-section" id="selectedColumnsSection" style="display: none;"> <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> <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"> <div class="selected-columns-list" id="selectedColumnsList">
<!-- Selected columns will appear here for reordering --> <!-- Selected columns will appear here for reordering -->
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Preview Section --> <!-- Preview Section -->
<div class="preview-section"> <div class="preview-section">
<div class="preview-header"> <div class="preview-header">