feat(ticket-selector): simplify validation handling and remove unused validation UI elements

This commit is contained in:
2026-08-18 08:43:08 -03:00
parent 3f8b5bf206
commit 30bfd9eff8
4 changed files with 3 additions and 91 deletions

View File

@@ -17,31 +17,7 @@
</header>
<div class="ticket-selector__selection">
<div class="ticket-selector__label-row">
<span class="ticket-selector__label">Seleccioná Entrada/s:</span>
@if (validationStatus(); as status) {
<span
class="ticket-selector__validation ticket-selector__validation--{{ status }}"
role="status"
aria-live="polite"
>
@switch (status) {
@case ('validating') {
<span class="ticket-selector__validation-spinner" aria-hidden="true"></span>
Validando
}
@case ('validated') {
<i class="fa-solid fa-check" aria-hidden="true"></i>
Validado
}
@case ('error') {
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
Error
}
}
</span>
}
</div>
<span class="ticket-selector__label">Seleccioná Entrada/s:</span>
<div class="ticket-selector__rows">
@for (row of rows(); track row.id) {

View File

@@ -44,49 +44,14 @@
padding-top: 1rem;
}
&__label-row {
display: flex;
align-items: center;
gap: 0.65rem;
min-height: 1.5rem;
margin-bottom: 0.5rem;
}
&__label {
display: inline-block;
margin-bottom: 0.5rem;
color: #555;
font-size: 15px;
font-weight: 700;
}
&__validation {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 13px;
font-weight: 600;
&--validating {
color: #777;
}
&--validated {
color: var(--success-color, #198754);
}
&--error {
color: var(--danger-color, #dc3545);
}
}
&__validation-spinner {
width: 0.8rem;
height: 0.8rem;
border: 2px solid currentcolor;
border-right-color: transparent;
border-radius: 50%;
animation: ticket-selector-spin 0.7s linear infinite;
}
&__rows {
display: grid;
gap: 0.5rem;
@@ -150,18 +115,6 @@
}
}
@keyframes ticket-selector-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.ticket-selector__validation-spinner {
animation-duration: 1.4s;
}
}
@media (max-width: 767.98px) {
.ticket-selector {
&__header {

View File

@@ -160,9 +160,6 @@ describe('ProductTicketSelectorComponent', () => {
});
fixture.detectChanges();
const validation = fixture.nativeElement.querySelector('.ticket-selector__validation');
expect(validation.textContent).toContain('Validado');
expect(validation.querySelector('.fa-check')).not.toBeNull();
expect(fixture.nativeElement.querySelector('.ticket-selector__row-status')).toBeNull();
expect(fixture.nativeElement.querySelector('.ticket-selector__row-error')).toBeNull();
@@ -283,9 +280,6 @@ describe('ProductTicketSelectorComponent', () => {
'Sector A',
'1',
]);
expect(
fixture.nativeElement.querySelector('.ticket-selector__validation').textContent,
).toContain('Validado');
});
it('keeps the reserved selection and shows a toast when a variant change cannot be completed', async () => {

View File

@@ -36,8 +36,6 @@ type TicketSelectionStatus =
| 'removing'
| 'error';
type TicketValidationStatus = 'validating' | 'validated' | 'error';
interface TicketSelectionRow {
id: number;
variantId: number | null;
@@ -92,15 +90,6 @@ export class ProductTicketSelectorComponent {
row.variantId === row.reservedVariantId,
),
);
protected readonly validationStatus = computed<TicketValidationStatus | null>(() => {
const rows = this.rows();
if (rows.some((row) => this.isBusy(row))) return 'validating';
if (rows.some((row) => row.status === 'error' || row.error !== null)) return 'error';
if (rows.length > 0 && rows.every((row) => row.status === 'reserved')) return 'validated';
return null;
});
protected readonly canAddRow = computed(
() =>
this.availableVariantCount() > 0 &&