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

Update report functions

Browse Source
This commit is contained in:
Nguyen Ngo
2025-08-14 12:05:01 -04:00
parent fc9f4d7f54
commit c2f402f45a
4 changed files with 1094 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/export_configuration.html
+80 -32
View File
@@ -5,6 +5,8 @@
{% block extra_head %}
<!-- Export Configuration specific CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/export_configuration.css') }}">
<!-- Add Sortable.js for drag & drop -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
{% endblock %}
{% block content %}
@@ -16,7 +18,7 @@
<i class="fas fa-file-excel"></i>
Export Configuration
</h1>
<p>Customize your attendance report export with selected columns and custom names</p>
<p>Customize your attendance report export with selected columns, custom names, and column ordering</p>
</div>
<div class="header-actions">
@@ -76,52 +78,83 @@
<input type="hidden" name="location_filter" value="{{ filters.location_filter }}">
<input type="hidden" name="employee_filter" value="{{ filters.employee_filter }}">
<!-- Hidden field for column order -->
<input type="hidden" id="column_order" name="column_order" value="">
<div class="config-card">
<div class="config-header">
<h3>
<i class="fas fa-columns"></i>
Select Columns to Export
Select & Order Columns for Export
</h3>
<div class="config-actions">
<button type="button" onclick="selectAllColumns()" class="btn btn-sm btn-outline">
<i class="fas fa-check-double"></i>
Select All
</button>
<button type="button" onclick="deselectAllColumns()" class="btn btn-sm btn-outline">
<i class="fas fa-times"></i>
Deselect All
</button>
<button type="button" onclick="resetToDefaults()" class="btn btn-sm btn-outline">
<i class="fas fa-undo"></i>
Reset to Defaults
</button>
</div>
</div>
<div class="columns-grid">
{% for column in available_columns %}
<div class="column-item">
<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>
<!-- 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>
</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 -->
</div>
{% endfor %}
</div>
</div>
@@ -160,7 +193,7 @@
</button>
<p class="submit-note">
<i class="fas fa-info-circle"></i>
Your column preferences will be saved for next time
Your column preferences and order will be saved for next time
</p>
</div>
</div>
@@ -174,13 +207,16 @@
<script>
// Initialize export configuration
document.addEventListener('DOMContentLoaded', function() {
console.log('Export Configuration page initialized');
console.log('Export Configuration page initialized with drag & drop');
// Load saved preferences if available
loadSavedPreferences();
// Update preview on page load
updatePreview();
// Initialize drag & drop
initializeDragDrop();
});
function goBackToReport() {
@@ -226,6 +262,13 @@ function loadSavedPreferences() {
});
}
// Apply saved column order
if (prefs.column_order) {
// Column order will be applied when selected columns are updated
window.savedColumnOrder = prefs.column_order;
}
updateSelectedColumnsList();
updatePreview();
}
} catch (e) {
@@ -236,6 +279,7 @@ function loadSavedPreferences() {
// Form submission handler to save preferences
document.getElementById('exportForm').addEventListener('submit', function() {
savePreferences();
updateColumnOrderField();
});
function savePreferences() {
@@ -250,9 +294,13 @@ function savePreferences() {
}
});
// Get current column order from the sortable list
const columnOrder = getCurrentColumnOrder();
const prefs = {
selected_columns: selectedColumns,
column_names: columnNames
column_names: columnNames,
column_order: columnOrder
};
localStorage.setItem('exportPreferences', JSON.stringify(prefs));