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;
gap: 2px;
align-items: center;
overflow-x: auto;
flex-shrink: 0;
}
.preset-btn {
background: var(--surface);

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

@@ -224,19 +224,21 @@ async function loadSchedulerStatus() {
// ── Filter Bar wiring ─────────────────────────────
function wireFilterBar() {
// Period dropdown
document.getElementById('periodSelect')?.addEventListener('change', function () {
document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active'));
const matchBtn = document.querySelector(`.preset-btn[data-days="${this.value}"]`);
if (matchBtn) matchBtn.classList.add('active');
const cr = document.getElementById('customRangeInputs');
if (this.value === 'custom') {
cr?.classList.add('visible');
} else {
cr?.classList.remove('visible');
dashPage = 1;
loadDashOrders();
}
// 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 cr = document.getElementById('customRangeInputs');
if (days === 'custom') {
cr?.classList.add('visible');
} else {
cr?.classList.remove('visible');
dashPage = 1;
loadDashOrders();
}
});
});
// Custom range inputs
@@ -266,20 +268,6 @@ function wireFilterBar() {
loadDashOrders();
}, 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 ────────────────────────
@@ -300,7 +288,8 @@ function dashSortBy(col) {
}
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();
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-icons@1.11.2/font/bootstrap-icons.css" rel="stylesheet">
{% 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>
<body>
<!-- Top Navbar (hidden on mobile via CSS) -->

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

@@ -54,23 +54,14 @@
<div id="attentionCard"></div>
<div class="filter-bar" id="ordersFilterBar">
<!-- 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" data-days="7">7 zile</button>
<button class="preset-btn" data-days="30">30 zile</button>
<button class="preset-btn" data-days="custom">Custom</button>
</div>
<!-- Period dropdown -->
<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) -->
<!-- Custom date range (hidden until 'Custom' clicked) -->
<div class="period-custom-range" id="customRangeInputs">
<input type="date" id="periodStart" class="select-compact">
<span>&#8212;</span>
@@ -123,5 +114,5 @@
{% endblock %}
{% 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 %}