fix(ticket-selector): reset invalid variant selections
This commit is contained in:
@@ -27,6 +27,7 @@
|
|||||||
[variants]="variantsForRow(row.id)"
|
[variants]="variantsForRow(row.id)"
|
||||||
[disabled]="rowDisabled(row)"
|
[disabled]="rowDisabled(row)"
|
||||||
[autoSelectFirst]="false"
|
[autoSelectFirst]="false"
|
||||||
|
[resetToken]="row.resetToken"
|
||||||
[selectedVariant]="row.variantId"
|
[selectedVariant]="row.variantId"
|
||||||
(selectedVariantChange)="updateCandidate(row.id, $event)"
|
(selectedVariantChange)="updateCandidate(row.id, $event)"
|
||||||
(selectionValuesChange)="onSelectionChange(row.id, $event)"
|
(selectionValuesChange)="onSelectionChange(row.id, $event)"
|
||||||
|
|||||||
@@ -47,6 +47,7 @@ interface TicketSelectionRow {
|
|||||||
remoteVariants: TicketSelectorVariant[] | null;
|
remoteVariants: TicketSelectorVariant[] | null;
|
||||||
status: TicketSelectionStatus;
|
status: TicketSelectionStatus;
|
||||||
error: string | null;
|
error: string | null;
|
||||||
|
resetToken: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@@ -211,9 +212,11 @@ export class ProductTicketSelectorComponent {
|
|||||||
if (!response.valid) {
|
if (!response.valid) {
|
||||||
this.patchRow(rowId, {
|
this.patchRow(rowId, {
|
||||||
variantId: null,
|
variantId: null,
|
||||||
remoteVariants: variants,
|
selectedValues: {},
|
||||||
|
remoteVariants: null,
|
||||||
status: 'error',
|
status: 'error',
|
||||||
error: 'La combinación seleccionada ya no está disponible.',
|
error: 'La combinación seleccionada ya no está disponible.',
|
||||||
|
resetToken: row.resetToken + 1,
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -324,6 +327,7 @@ export class ProductTicketSelectorComponent {
|
|||||||
remoteVariants: null,
|
remoteVariants: null,
|
||||||
status: 'selecting',
|
status: 'selecting',
|
||||||
error: null,
|
error: null,
|
||||||
|
resetToken: 0,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -114,4 +114,24 @@ describe('VariantSelectorComponent', () => {
|
|||||||
|
|
||||||
expect(fixture.componentInstance.selectedVariant()).toBe(2);
|
expect(fixture.componentInstance.selectedVariant()).toBe(2);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('clears every selected value when the reset token changes', async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [VariantSelectorComponent],
|
||||||
|
}).compileComponents();
|
||||||
|
const fixture = TestBed.createComponent(VariantSelectorComponent);
|
||||||
|
fixture.componentRef.setInput('variants', [{ id: 1, values: { sector: 'A', asiento: '1' } }]);
|
||||||
|
fixture.componentRef.setInput('autoSelectFirst', false);
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
(fixture.componentInstance as any).onValueChange('sector', 'A');
|
||||||
|
(fixture.componentInstance as any).onValueChange('asiento', '1');
|
||||||
|
expect(fixture.componentInstance.selectedVariant()).toBe(1);
|
||||||
|
|
||||||
|
fixture.componentRef.setInput('resetToken', 1);
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
expect(fixture.componentInstance.selectedVariant()).toBeNull();
|
||||||
|
expect((fixture.componentInstance as any).selectedValues()).toEqual({});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -55,6 +55,7 @@ export class VariantSelectorComponent {
|
|||||||
readonly disabled = input(false);
|
readonly disabled = input(false);
|
||||||
readonly compact = input(false);
|
readonly compact = input(false);
|
||||||
readonly autoSelectFirst = input(true);
|
readonly autoSelectFirst = input(true);
|
||||||
|
readonly resetToken = input(0);
|
||||||
readonly selectionValuesChange = output<VariantSelectorSelectionChange>();
|
readonly selectionValuesChange = output<VariantSelectorSelectionChange>();
|
||||||
|
|
||||||
protected readonly selectedValues = signal<Record<string, VariantAttributeValue>>({});
|
protected readonly selectedValues = signal<Record<string, VariantAttributeValue>>({});
|
||||||
@@ -87,6 +88,27 @@ export class VariantSelectorComponent {
|
|||||||
});
|
});
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
|
let initializedResetToken = false;
|
||||||
|
let previousResetToken = 0;
|
||||||
|
|
||||||
|
effect(() => {
|
||||||
|
const resetToken = this.resetToken();
|
||||||
|
|
||||||
|
untracked(() => {
|
||||||
|
if (!initializedResetToken) {
|
||||||
|
initializedResetToken = true;
|
||||||
|
previousResetToken = resetToken;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (resetToken === previousResetToken) return;
|
||||||
|
|
||||||
|
previousResetToken = resetToken;
|
||||||
|
this.selectedValues.set({});
|
||||||
|
this.selectedVariant.set(null);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
effect(() => {
|
effect(() => {
|
||||||
const variants = this.variants();
|
const variants = this.variants();
|
||||||
const selectedVariant = this.selectedVariant();
|
const selectedVariant = this.selectedVariant();
|
||||||
|
|||||||
Reference in New Issue
Block a user