Sep 11 - Reupload the code
This commit is contained in:
@@ -0,0 +1,276 @@
|
||||
{% extends "base_authenticated.html" %}
|
||||
|
||||
{% block title %}Export Configuration - QR Code Management{% endblock %}
|
||||
|
||||
{% 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 %}
|
||||
<div class="export-config-page">
|
||||
<!-- Header Section -->
|
||||
<div class="export-header">
|
||||
<div class="header-content">
|
||||
<div class="header-title-section">
|
||||
<button onclick="goBackToReport()" class="btn btn-secondary">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
Back to Report
|
||||
</button>
|
||||
<div class="header-title-text">
|
||||
<h1>
|
||||
<i class="fas fa-file-excel"></i>
|
||||
Export Configuration
|
||||
</h1>
|
||||
<p>Customize your attendance report export with selected columns, custom names, and column ordering</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-actions">
|
||||
<button type="submit" form="exportForm" class="btn btn-success btn-lg" id="generateBtn">
|
||||
<i class="fas fa-download"></i>
|
||||
Generate Excel Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Information -->
|
||||
{% if filters.date_from or filters.date_to or filters.location_filter or filters.employee_filter or filters.project_filter %}
|
||||
<div class="applied-filters-section">
|
||||
<div class="filters-card">
|
||||
<div class="filters-header">
|
||||
<h3>
|
||||
<i class="fas fa-filter"></i>
|
||||
Applied Filters
|
||||
</h3>
|
||||
</div>
|
||||
<div class="filters-display">
|
||||
{% if filters.date_from %}
|
||||
<span class="filter-tag">
|
||||
<i class="fas fa-calendar"></i>
|
||||
From: {{ filters.date_from }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if filters.date_to %}
|
||||
<span class="filter-tag">
|
||||
<i class="fas fa-calendar"></i>
|
||||
To: {{ filters.date_to }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if filters.location_filter %}
|
||||
<span class="filter-tag">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
Location: {{ filters.location_filter }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if filters.employee_filter %}
|
||||
<span class="filter-tag">
|
||||
<i class="fas fa-user"></i>
|
||||
Employee: {{ filters.employee_filter }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if filters.project_filter %}
|
||||
<span class="filter-tag">
|
||||
<i class="fas fa-project-diagram"></i>
|
||||
Project: {% if project_name %}{{ project_name }}{% else %}{{ filters.project_filter }}{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Export Configuration Form -->
|
||||
<div class="export-config-section">
|
||||
<form method="POST" action="{{ url_for('attendance.generate_excel_export') }}" id="exportForm">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<!-- Hidden fields for filters -->
|
||||
<input type="hidden" name="date_from" value="{{ filters.date_from }}">
|
||||
<input type="hidden" name="date_to" value="{{ filters.date_to }}">
|
||||
<input type="hidden" name="location_filter" value="{{ filters.location_filter }}">
|
||||
<input type="hidden" name="employee_filter" value="{{ filters.employee_filter }}">
|
||||
<input type="hidden" name="project_filter" value="{{ filters.project_filter }}">
|
||||
|
||||
<!-- Hidden field for column order -->
|
||||
<input type="hidden" id="column_order" name="column_order" value="">
|
||||
|
||||
<div class="config-card">
|
||||
<div class="config-header" onclick="toggleSection('columnsSection')" style="cursor: pointer;">
|
||||
<h3>
|
||||
Select & Order Columns for Export <i class="fas fa-chevron-down toggle-icon" id="columnsSectionIcon"></i>
|
||||
</h3>
|
||||
<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
|
||||
</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="collapsible-content collapsed" 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 %}">
|
||||
<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 %}
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Preview Section -->
|
||||
<div class="preview-section">
|
||||
<div class="preview-header">
|
||||
<h3>
|
||||
<i class="fas fa-eye"></i>
|
||||
Export Preview
|
||||
</h3>
|
||||
</div>
|
||||
<div class="preview-table-container">
|
||||
<table class="preview-table" id="previewTable">
|
||||
<thead>
|
||||
<tr id="previewHeader">
|
||||
<!-- Headers will be populated by JavaScript -->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="100%" class="preview-placeholder">
|
||||
Select columns above to see preview
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Section -->
|
||||
<div class="submit-section">
|
||||
<div class="submit-actions">
|
||||
<p class="submit-note">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
Your column preferences and order will be saved for next time
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script src="{{ url_for('static', filename='js/export_configuration.js') }}"></script>
|
||||
<script>
|
||||
// Initialize export configuration
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('Export Configuration page initialized with drag & drop');
|
||||
|
||||
// Load saved preferences if available
|
||||
loadSavedPreferences();
|
||||
|
||||
// Initialize drag & drop
|
||||
initializeDragDrop();
|
||||
|
||||
// Ensure preview is updated after all initialization is complete
|
||||
setTimeout(() => {
|
||||
const selectedColumns = document.querySelectorAll('input[name="selected_columns"]:checked');
|
||||
if (selectedColumns.length > 0) {
|
||||
console.log('Final check: ensuring preview is shown for selected columns');
|
||||
updatePreview();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
|
||||
function goBackToReport() {
|
||||
// Build URL with current filters
|
||||
const params = new URLSearchParams();
|
||||
const dateFrom = document.querySelector('input[name="date_from"]').value;
|
||||
const dateTo = document.querySelector('input[name="date_to"]').value;
|
||||
const locationFilter = document.querySelector('input[name="location_filter"]').value;
|
||||
const employeeFilter = document.querySelector('input[name="employee_filter"]').value;
|
||||
const projectFilter = document.querySelector('input[name="project_filter"]').value;
|
||||
|
||||
if (dateFrom) params.append('date_from', dateFrom);
|
||||
if (dateTo) params.append('date_to', dateTo);
|
||||
if (locationFilter) params.append('location', locationFilter);
|
||||
if (employeeFilter) params.append('employee', employeeFilter);
|
||||
if (projectFilter) params.append('project', projectFilter);
|
||||
|
||||
const url = "{{ url_for('attendance.attendance_report') }}" + (params.toString() ? '?' + params.toString() : '');
|
||||
window.location.href = url;
|
||||
}
|
||||
|
||||
// Form submission handler to save preferences
|
||||
document.getElementById('exportForm').addEventListener('submit', function() {
|
||||
savePreferences();
|
||||
updateColumnOrderField();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user