tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(variants): standardize variant structure and improve variant handling across components

Browse Source
This commit is contained in:
ncoronel
2026-08-12 10:47:09 -03:00
parent b97753f825
commit 0f9d3e79d4
8 changed files with 149 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/core/services/catalog/catalog.interface.ts
View File

@@ -71,7 +71,7 @@ export interface CatalogItemVariant {
maximum_use_date?: string | null;
effective_minimum_use_date?: string | null;
effective_maximum_use_date?: string | null;
values: Record<string, CatalogVariantValue>;
values: Record<string, string | string[]>;
}
export interface SelectedCatalogItemVariant extends CatalogItemVariant {

2
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
View File

@@ -771,7 +771,7 @@
[description]="testTicketSelectorProduct.description"
[price]="testTicketSelectorProduct.price"
[imageUrl]="testTicketSelectorProduct.imageUrl"
[variants]="testTicketSelectorVariants"
[variants]="testTicketSelectorProduct.variants"
(buy)="onTicketBuy($event)"
/>
</div>

119
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts
View File

@@ -223,6 +223,125 @@ export class ReutilizablesTestPageComponent {
price: 11500,
};
protected readonly testTicketSelectorProduct = {
title: 'ENTRADAS DESFILE PURA TENDENCIA',
description: '',
price: 40000,
imageUrl: '/images/ticket-selector-entrada-pasarela.png',
variants: [
{
id: 1001,
precio: 250000,
stock_tecnico: 1,
values: {
tipo: ticketOption('vip_lunch', 'VIP + Lunch'),
sector: ticketOption('a', 'Sector A'),
fila: ticketOption('1', 'Fila 1'),
asiento: ticketOption('1', 'Asiento 1'),
},
},
{
id: 1002,
precio: 250000,
stock_tecnico: 1,
values: {
tipo: ticketOption('vip_lunch', 'VIP + Lunch'),
sector: ticketOption('a', 'Sector A'),
fila: ticketOption('1', 'Fila 1'),
asiento: ticketOption('2', 'Asiento 2'),
},
},
{
id: 1003,
precio: 250000,
stock_tecnico: 1,
values: {
tipo: ticketOption('vip_lunch', 'VIP + Lunch'),
sector: ticketOption('c', 'Sector C'),
fila: ticketOption('1', 'Fila 1'),
asiento: ticketOption('1', 'Asiento 1'),
},
},
{
id: 1004,
precio: 200000,
stock_tecnico: 1,
values: {
tipo: ticketOption('vip_lunch', 'VIP + Lunch'),
sector: ticketOption('a', 'Sector A'),
fila: ticketOption('2', 'Fila 2'),
asiento: ticketOption('1', 'Asiento 1'),
},
},
{
id: 1005,
precio: 200000,
stock_tecnico: 0,
values: {
tipo: ticketOption('vip_lunch', 'VIP + Lunch'),
sector: ticketOption('a', 'Sector A'),
fila: ticketOption('2', 'Fila 2'),
asiento: ticketOption('2', 'Asiento 2'),
},
},
{
id: 1006,
precio: 100000,
stock_tecnico: 1,
values: {
tipo: ticketOption('general', 'General'),
sector: ticketOption('b', 'Sector B'),
fila: ticketOption('3', 'Fila 3'),
asiento: ticketOption('1', 'Asiento 1'),
},
},
{
id: 1007,
precio: 100000,
stock_tecnico: 1,
values: {
tipo: ticketOption('general', 'General'),
sector: ticketOption('b', 'Sector B'),
fila: ticketOption('3', 'Fila 3'),
asiento: ticketOption('2', 'Asiento 2'),
},
},
{
id: 1008,
precio: 90000,
stock_tecnico: 1,
values: {
tipo: ticketOption('general', 'General'),
sector: ticketOption('d', 'Sector D'),
fila: ticketOption('3', 'Fila 3'),
asiento: ticketOption('1', 'Asiento 1'),
},
},
{
id: 1009,
precio: 65000,
stock_tecnico: 1,
values: {
tipo: ticketOption('general', 'General'),
sector: ticketOption('d', 'Sector D'),
fila: ticketOption('4', 'Fila 4'),
asiento: ticketOption('1', 'Asiento 1'),
},
},
{
id: 1010,
precio: 40000,
stock_tecnico: 1,
values: {
tipo: ticketOption('general', 'General'),
sector: ticketOption('d', 'Sector D'),
fila: ticketOption('5', 'Fila 5'),
asiento: ticketOption('1', 'Asiento 1'),
},
},
],
};
protected readonly cartMockItems: CartItemMock[] = [
{
imageUrl: null,

2
src/app/shared/components/product-list/product-list.component.html
View File

@@ -33,7 +33,7 @@
[description]="item.descripcion ?? ''"
[price]="price(item)"
[imageUrl]="loadImages() ? (item.image ?? null) : null"
[variants]="variantsFor(item)"
[variants]="item.variants ?? []"
[disabled]="loading()"
(buy)="emitTicketBuy(item, $event)"
/>

28
src/app/shared/components/product-list/product-list.component.spec.ts
View File

@@ -228,7 +228,23 @@ describe('ProductListComponent', () => {
id: 401,
precio: '10000.00',
stock_tecnico: 1,
values: { tipo: 'VIP', sector: 'A', fila: '3', asiento: '12' },
values: {
tipo: { value: 'vip', label: 'VIP' },
sector: { value: 'a', label: 'Sector A' },
fila: { value: '3', label: 'Fila 3' },
asiento: { value: '12', label: 'Asiento 12' },
},
},
{
id: 402,
precio: '12000.00',
stock_tecnico: 1,
values: {
tipo: { value: 'vip', label: 'VIP' },
sector: { value: 'a', label: 'Sector A' },
fila: { value: '3', label: 'Fila 3' },
asiento: { value: '13', label: 'Asiento 13' },
},
},
],
};
@@ -243,13 +259,19 @@ describe('ProductListComponent', () => {
expect(element.querySelectorAll('app-product-ticket-selector')).toHaveLength(1);
expect(element.querySelectorAll('.variant-selector__select')).toHaveLength(4);
(element.querySelector('.ticket-selector__add-row-button') as HTMLButtonElement).click();
fixture.detectChanges();
expect(element.querySelectorAll('.ticket-selector__row')).toHaveLength(2);
expect(element.querySelectorAll('.variant-selector__select')).toHaveLength(8);
(element.querySelector('.ticket-selector__actions .btn-primary') as HTMLButtonElement).click();
expect(buySpy).toHaveBeenCalledWith({
product: ticket,
quantity: 1,
quantity: 2,
variant: 401,
variantIds: [401],
variantIds: [401, 402],
directPurchase: true,
});
});

10
src/app/shared/components/product-list/product-list.component.ts
View File

@@ -106,16 +106,6 @@ export class ProductListComponent {
return Number.isFinite(price) ? price : 0;
}
protected variantsFor(item: ProductListItem): RowVariant[] {
return (item.variants ?? []).map((variant) => ({
value: variant.id,
descripcion: variant.descripcion,
precio: variant.precio,
stock_tecnico: variant.stock_tecnico,
values: variant.values,
}));
}
protected emitRowCart(
product: ProductListItem,
event: { quantity: number; variant: unknown },

2
src/app/shared/components/product-ticket-selector/product-ticket-selector.component.scss
View File

@@ -32,7 +32,7 @@
&__price {
flex: 0 0 auto;
font-size: 16px;
font-size: 25px;
font-weight: 400;
strong {

2
src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts
View File

@@ -98,7 +98,7 @@ export class ProductTicketSelectorComponent {
);
return this.selectableVariants().filter(
(variant) => !selectedByOtherRows.has(variant.value as number),
(variant) => !selectedByOtherRows.has(variant.id as number),
);
}