consultoria-as/Autoparts-DB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pos): selector de vehiculo con dropdowns — Ano > Marca > Modelo > Motor

Browse Source 
Barra de 4 dropdowns arriba del catalogo que se habilitan en cascada.
Al completar los 4, muestra categorias y partes para ese vehiculo.
Boton de limpiar para resetear. Endpoint /years-all para cargar anos.
Estilos con design system tokens (ambos temas).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
consultoria-as
2026-04-02 07:59:50 +00:00
parent 1a770999f5
commit 10d5b62e00
3 changed files with 243 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
pos/templates/catalog.html
View File

@@ -433,12 +433,70 @@
RESPONSIVE
========================================================================= */
/* ── Vehicle Selector ── */
.vehicle-selector {
background: var(--color-bg-elevated);
border-bottom: 2px solid var(--color-primary-muted, rgba(245,166,35,0.2));
padding: var(--space-3) var(--space-5);
flex-shrink: 0;
}
.vehicle-selector__inner {
display: flex;
align-items: flex-end;
gap: var(--space-3);
flex-wrap: wrap;
}
.vs-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
.vs-label {
font-size: var(--text-caption, 0.75rem);
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wider, 0.04em);
}
.vs-select {
padding: var(--space-2) var(--space-3);
background: var(--color-bg-base);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
font-family: var(--font-body);
font-size: var(--text-body-sm, 0.875rem);
cursor: pointer;
transition: var(--transition-fast);
appearance: auto;
}
[data-theme="industrial"] .vs-select { border-radius: 0; }
[data-theme="modern"] .vs-select { border-radius: var(--radius-md); }
.vs-select:focus { border-color: var(--color-primary); outline: none; box-shadow: var(--shadow-focus); }
.vs-select:disabled { opacity: 0.4; cursor: not-allowed; }
.vs-arrow {
color: var(--color-primary);
font-size: 1.4rem;
font-weight: 700;
padding-bottom: 6px;
flex-shrink: 0;
}
.vs-clear {
background: none;
border: 1px solid var(--color-border);
color: var(--color-text-muted);
padding: var(--space-2) var(--space-3);
cursor: pointer;
font-size: 1rem;
transition: var(--transition-fast);
}
[data-theme="industrial"] .vs-clear { border-radius: 0; }
[data-theme="modern"] .vs-clear { border-radius: var(--radius-md); }
.vs-clear:hover { color: var(--color-error); border-color: var(--color-error); }
@media (max-width: 768px) {
.sidebar { position: fixed; left: -260px; z-index: var(--z-modal); transition: left var(--duration-normal) var(--ease-in-out); height: 100vh; }
.sidebar.is-open { left: 0; }
.search-bar { width: 200px; }
.detail-panel { width: 100%; }
.nav-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.vehicle-selector__inner { flex-direction: column; }
.vs-arrow { display: none; }
}
</style>
</head>
@@ -540,6 +598,40 @@
</div>
</header>
<!-- Vehicle selector bar -->
<div class="vehicle-selector" id="vehicleSelector">
<div class="vehicle-selector__inner">
<div class="vs-group">
<label class="vs-label">Año</label>
<select class="vs-select" id="vsYear" onchange="CatalogApp.vsYearChanged()">
<option value="">Seleccionar...</option>
</select>
</div>
<div class="vs-arrow">›</div>
<div class="vs-group">
<label class="vs-label">Marca</label>
<select class="vs-select" id="vsBrand" disabled onchange="CatalogApp.vsBrandChanged()">
<option value="">Seleccionar...</option>
</select>
</div>
<div class="vs-arrow">›</div>
<div class="vs-group">
<label class="vs-label">Modelo</label>
<select class="vs-select" id="vsModel" disabled onchange="CatalogApp.vsModelChanged()">
<option value="">Seleccionar...</option>
</select>
</div>
<div class="vs-arrow">›</div>
<div class="vs-group">
<label class="vs-label">Motor</label>
<select class="vs-select" id="vsEngine" disabled onchange="CatalogApp.vsEngineChanged()">
<option value="">Seleccionar...</option>
</select>
</div>
<button class="vs-clear" id="vsClear" onclick="CatalogApp.vsClear()" title="Limpiar seleccion" style="display:none;">✕</button>
</div>
</div>
<!-- Scrollable page body -->
<div class="page-body" id="pageBody">