romfast/gomag-vending
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(flow): replace duplicate period dropdown with preset buttons

Browse Source 
Period selector had both preset buttons (3/7/30 zile) and a dropdown
with overlapping options. Per plan Commit 6, preset buttons are the
single control: Azi / 3 zile / 7 zile / 30 zile / Custom. Visible
on all screen sizes with horizontal scroll on mobile.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-03-27 13:54:04 +00:00
parent f516bb5756
commit b2745a9a64
4 changed files with 25 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
api/app/static/css/style.css
View File

@@ -1039,6 +1039,8 @@ tr.mapping-deleted td {
display: flex; display: flex;
gap: 2px; gap: 2px;
align-items: center; align-items: center;
overflow-x: auto;
flex-shrink: 0;
} }
.preset-btn { .preset-btn {
background: var(--surface); background: var(--surface);

29
api/app/static/js/dashboard.js
View File

@@ -224,13 +224,14 @@ async function loadSchedulerStatus() {
// ── Filter Bar wiring ───────────────────────────── // ── Filter Bar wiring ─────────────────────────────
function wireFilterBar() { function wireFilterBar() {
// Period dropdown // Period preset buttons
document.getElementById('periodSelect')?.addEventListener('change', function () { document.querySelectorAll('.preset-btn[data-days]').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active')); document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active'));
const matchBtn = document.querySelector(`.preset-btn[data-days="${this.value}"]`); this.classList.add('active');
if (matchBtn) matchBtn.classList.add('active'); const days = this.dataset.days;
const cr = document.getElementById('customRangeInputs'); const cr = document.getElementById('customRangeInputs');
if (this.value === 'custom') { if (days === 'custom') {
cr?.classList.add('visible'); cr?.classList.add('visible');
} else { } else {
cr?.classList.remove('visible'); cr?.classList.remove('visible');
@@ -238,6 +239,7 @@ function wireFilterBar() {
loadDashOrders(); loadDashOrders();
} }
}); });
});
// Custom range inputs // Custom range inputs
['periodStart', 'periodEnd'].forEach(id => { ['periodStart', 'periodEnd'].forEach(id => {
@@ -266,20 +268,6 @@ function wireFilterBar() {
loadDashOrders(); loadDashOrders();
}, 300); }, 300);
}); });
// Period preset buttons
document.querySelectorAll('.preset-btn[data-days]').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active'));
this.classList.add('active');
const days = this.dataset.days;
const sel = document.getElementById('periodSelect');
if (sel) { sel.value = days; }
document.getElementById('customRangeInputs')?.classList.remove('visible');
dashPage = 1;
loadDashOrders();
});
});
} }
// ── Dashboard Orders Table ──────────────────────── // ── Dashboard Orders Table ────────────────────────
@@ -300,7 +288,8 @@ function dashSortBy(col) {
} }
async function loadDashOrders() { async function loadDashOrders() {
const periodVal = document.getElementById('periodSelect')?.value || '7'; const activePreset = document.querySelector('.preset-btn.active');
const periodVal = activePreset?.dataset.days || '3';
const params = new URLSearchParams(); const params = new URLSearchParams();
if (periodVal === 'custom') { if (periodVal === 'custom') {

2
api/app/templates/base.html
View File

@@ -19,7 +19,7 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css" rel="stylesheet">
{% set rp = request.scope.get('root_path', '') %} {% set rp = request.scope.get('root_path', '') %}
<link href="{{ rp }}/static/css/style.css?v=24" rel="stylesheet"> <link href="{{ rp }}/static/css/style.css?v=25" rel="stylesheet">
</head> </head>
<body> <body>
<!-- Top Navbar (hidden on mobile via CSS) --> <!-- Top Navbar (hidden on mobile via CSS) -->

19
api/app/templates/dashboard.html
View File

@@ -54,23 +54,14 @@
<div id="attentionCard"></div> <div id="attentionCard"></div>
<div class="filter-bar" id="ordersFilterBar"> <div class="filter-bar" id="ordersFilterBar">
<!-- Period preset buttons --> <!-- Period preset buttons -->
<div class="period-presets d-none d-md-flex"> <div class="period-presets">
<button class="preset-btn" data-days="1">Azi</button>
<button class="preset-btn active" data-days="3">3 zile</button> <button class="preset-btn active" data-days="3">3 zile</button>
<button class="preset-btn" data-days="7">7 zile</button> <button class="preset-btn" data-days="7">7 zile</button>
<button class="preset-btn" data-days="30">30 zile</button> <button class="preset-btn" data-days="30">30 zile</button>
<button class="preset-btn" data-days="custom">Custom</button>
</div> </div>
<!-- Period dropdown --> <!-- Custom date range (hidden until 'Custom' clicked) -->
<select id="periodSelect" class="select-compact">
<option value="1">1 zi</option>
<option value="2">2 zile</option>
<option value="3" selected>3 zile</option>
<option value="7">7 zile</option>
<option value="30">30 zile</option>
<option value="90">3 luni</option>
<option value="0">Toate</option>
<option value="custom">Perioada personalizata...</option>
</select>
<!-- Custom date range (hidden until 'custom' selected) -->
<div class="period-custom-range" id="customRangeInputs"> <div class="period-custom-range" id="customRangeInputs">
<input type="date" id="periodStart" class="select-compact"> <input type="date" id="periodStart" class="select-compact">
<span>&#8212;</span> <span>&#8212;</span>
@@ -123,5 +114,5 @@
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<script src="{{ request.scope.get('root_path', '') }}/static/js/dashboard.js?v=31"></script> <script src="{{ request.scope.get('root_path', '') }}/static/js/dashboard.js?v=32"></script>
{% endblock %} {% endblock %}