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

feat: enhance product attributes and event date handling for improved user experience and data management

Browse Source
This commit is contained in:
ncoronel
2026-08-07 14:16:02 -03:00
parent 8d88e1bb13
commit 1977df6765
18 changed files with 368 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.html
View File

@@ -1,5 +1,5 @@
<div class="attribute-selector">
@for (attribute of attributes(); track attribute.id) {
@for (attribute of attributes(); track attribute.codigo) {
<div class="attribute-selector__row">
<span class="attribute-selector__label">{{ attribute.nombre }}:</span>
@@ -10,12 +10,14 @@
type="button"
class="attribute-selector__swatch"
[class.attribute-selector__swatch--selected]="hasSelectedOption(attribute, option)"
[class.attribute-selector__swatch--disabled]="!availableOptions()[attribute.id][option.id]"
[class.attribute-selector__swatch--disabled]="
!availableOptions()[attribute.codigo][option.id]
"
[style.background-color]="getOptionSwatchColor(option)"
[attr.aria-label]="option.label"
[attr.aria-pressed]="hasSelectedOption(attribute, option)"
[title]="option.label"
[disabled]="!availableOptions()[attribute.id][option.id]"
[disabled]="!availableOptions()[attribute.codigo][option.id]"
(click)="selectAttributeOption(attribute, option)"
>
<span class="visually-hidden">{{ option.label }}</span>
@@ -24,10 +26,14 @@
<button
type="button"
class="attribute-selector__text-option"
[class.attribute-selector__text-option--selected]="hasSelectedOption(attribute, option)"
[class.attribute-selector__text-option--disabled]="!availableOptions()[attribute.id][option.id]"
[class.attribute-selector__text-option--selected]="
hasSelectedOption(attribute, option)
"
[class.attribute-selector__text-option--disabled]="
!availableOptions()[attribute.codigo][option.id]
"
[attr.aria-pressed]="hasSelectedOption(attribute, option)"
[disabled]="!availableOptions()[attribute.id][option.id]"
[disabled]="!availableOptions()[attribute.codigo][option.id]"
(click)="selectAttributeOption(attribute, option)"
>
{{ option.label }}

42
src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.spec.ts
View File

@@ -68,4 +68,46 @@ describe('ProductAttributeSelectorComponent', () => {
expect(buttons[0].disabled).toBe(true);
expect(buttons[1].disabled).toBe(false);
});
it('allows multiple event dates and emits the exact matching variant', () => {
const fixture = TestBed.createComponent(ProductAttributeSelectorComponent);
const emittedIds: Array<number | null> = [];
fixture.componentInstance.variantChange.subscribe((variant) =>
emittedIds.push(variant?.id ?? null),
);
fixture.componentRef.setInput('attributes', [
{
id: 2,
codigo: 'event_date',
nombre: 'Fecha',
is_required: true,
allow_multi_select: true,
metadata_schema: null,
type: 'event_date',
options: [
{ id: 101, value: '1', label: '09/10/2026', sort_order: 0, metadata: null },
{ id: 102, value: '2', label: '10/10/2026', sort_order: 1, metadata: null },
],
} satisfies ProductAttribute,
]);
fixture.componentRef.setInput('inventoryPolicy', 'unlimited');
fixture.componentRef.setInput('variants', [
{ id: 1, stock_tecnico: null, values: { event_date: '1' } },
{ id: 2, stock_tecnico: null, values: { event_date: '2' } },
{ id: 3, stock_tecnico: null, values: { event_date: ['1', '2'] } },
]);
fixture.detectChanges();
const buttons = Array.from(
fixture.nativeElement.querySelectorAll('.attribute-selector__text-option'),
) as HTMLButtonElement[];
buttons[0].click();
fixture.detectChanges();
buttons[1].click();
fixture.detectChanges();
expect(buttons[0].getAttribute('aria-pressed')).toBe('true');
expect(buttons[1].getAttribute('aria-pressed')).toBe('true');
expect(emittedIds).toContain(3);
});
});

157
src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.ts
View File

@@ -32,48 +32,65 @@ export class ProductAttributeSelectorComponent {
public variantChange = output<CatalogItemVariant | null>();
protected readonly selectedAttributeOptions = signal<Record<number, number>>({});
protected readonly selectedAttributeOptions = signal<Record<string, number[]>>({});
protected readonly availableOptions = computed(() => {
const selections = this.selectedAttributeOptions();
const variants = this.variants();
const attributes = this.attributes();
const availability: Record<number, Record<number, boolean>> = {};
const availability: Record<string, Record<number, boolean>> = {};
for (const attribute of attributes) {
availability[attribute.id] = {};
availability[attribute.codigo] = {};
for (const option of attribute.options) {
const optionNormalized = this.normalizeText(option.value || option.label);
const selectedForAttribute = selections[attribute.codigo] ?? [];
if (
!attribute.allow_multi_select &&
selectedForAttribute.length >= 1 &&
!selectedForAttribute.includes(option.id)
) {
availability[attribute.codigo][option.id] = false;
continue;
}
const isAvailable = variants.some((variant) => {
if (!this.isVariantAvailable(variant)) return false;
const variantAttrValue = this.getDefaultVariantAttributeValue(attribute, variant.values);
if (!variantAttrValue || this.normalizeText(variantAttrValue) !== optionNormalized) {
const variantAttrValues = this.getVariantAttributeValues(attribute, variant.values);
const desiredOptionIds = selectedForAttribute.includes(option.id)
? selectedForAttribute
: [...selectedForAttribute, option.id];
const desiredValues = desiredOptionIds
.map((id) => attribute.options.find((candidate) => candidate.id === id))
.filter((candidate): candidate is ProductAttributeOption => candidate !== undefined)
.map((candidate) => this.normalizeText(candidate.value || candidate.label));
if (
!variantAttrValues.includes(optionNormalized) ||
!desiredValues.every((value) => variantAttrValues.includes(value))
) {
return false;
}
for (const otherAttr of attributes) {
if (otherAttr.id === attribute.id) continue;
const selectedOptionId = selections[otherAttr.id];
if (selectedOptionId !== undefined) {
const selectedOption = otherAttr.options.find((o) => o.id === selectedOptionId);
if (selectedOption) {
const selectedNormalized = this.normalizeText(
selectedOption.value || selectedOption.label,
);
const vAttrValue = this.getDefaultVariantAttributeValue(otherAttr, variant.values);
if (!vAttrValue || this.normalizeText(vAttrValue) !== selectedNormalized) {
return false;
}
}
if (otherAttr.codigo === attribute.codigo) continue;
const selectedOptionIds = selections[otherAttr.codigo] ?? [];
const selectedValues = selectedOptionIds
.map((id) => otherAttr.options.find((candidate) => candidate.id === id))
.filter((candidate): candidate is ProductAttributeOption => candidate !== undefined)
.map((candidate) => this.normalizeText(candidate.value || candidate.label));
const variantValues = this.getVariantAttributeValues(otherAttr, variant.values);
if (!selectedValues.every((value) => variantValues.includes(value))) {
return false;
}
}
return true;
});
availability[attribute.id][option.id] = isAvailable;
availability[attribute.codigo][option.id] = isAvailable;
}
}
@@ -109,17 +126,28 @@ export class ProductAttributeSelectorComponent {
attribute: ProductAttribute,
option: ProductAttributeOption,
): boolean {
return this.selectedAttributeOptions()[attribute.id] === option.id;
return (this.selectedAttributeOptions()[attribute.codigo] ?? []).includes(option.id);
}
protected selectAttributeOption(
attribute: ProductAttribute,
option: ProductAttributeOption,
): void {
this.selectedAttributeOptions.update((current) => ({
...current,
[attribute.id]: option.id,
}));
this.selectedAttributeOptions.update((current) => {
const selected = current[attribute.codigo] ?? [];
const isMultiple = attribute.allow_multi_select ?? false;
let next: number[];
if (!isMultiple) {
next = [option.id];
} else if (selected.includes(option.id)) {
next = selected.filter((id) => id !== option.id);
} else {
next = [...selected, option.id];
}
return { ...current, [attribute.codigo]: next };
});
}
protected isColorOption(option: ProductAttributeOption): boolean {
@@ -134,51 +162,44 @@ export class ProductAttributeSelectorComponent {
attributes: ProductAttribute[],
defaultVariant: CatalogItemVariant | null,
): void {
const selections: Record<number, number> = {};
const selections: Record<string, number[]> = {};
for (const attribute of attributes) {
const optionId = this.findDefaultOptionId(attribute, defaultVariant);
if (optionId !== null) {
selections[attribute.id] = optionId;
const optionIds = this.findDefaultOptionIds(attribute, defaultVariant);
if (optionIds.length > 0) {
selections[attribute.codigo] = optionIds;
}
}
this.selectedAttributeOptions.set(selections);
}
private findDefaultOptionId(
private findDefaultOptionIds(
attribute: ProductAttribute,
variant: CatalogItemVariant | null,
): number | null {
): number[] {
if (!variant) {
return null;
return [];
}
const defaultValue = this.getDefaultVariantAttributeValue(attribute, variant.values);
if (!defaultValue) {
return null;
const defaultValues = this.getVariantAttributeValues(attribute, variant.values);
if (defaultValues.length === 0) {
return [];
}
const normalizedValue = this.normalizeText(defaultValue);
const matchByValue = attribute.options.find(
(option) => this.normalizeText(option.value) === normalizedValue,
);
if (matchByValue) {
return matchByValue.id;
}
const matchByLabel = attribute.options.find(
(option) => this.normalizeText(option.label) === normalizedValue,
);
return matchByLabel?.id ?? null;
return attribute.options
.filter(
(option) =>
defaultValues.includes(this.normalizeText(option.value)) ||
defaultValues.includes(this.normalizeText(option.label)),
)
.map((option) => option.id);
}
private getDefaultVariantAttributeValue(
private getVariantAttributeValues(
attribute: ProductAttribute,
variantAttributes: Record<string, string>,
): string | null {
variantAttributes: Record<string, string | string[]>,
): string[] {
const normalizedCodigo = this.normalizeText(attribute.codigo);
const normalizedNombre = this.normalizeText(attribute.nombre);
@@ -186,11 +207,11 @@ export class ProductAttributeSelectorComponent {
const normalizedKey = this.normalizeText(key);
if (normalizedKey === normalizedCodigo || normalizedKey === normalizedNombre) {
return value;
return (Array.isArray(value) ? value : [value]).map((item) => this.normalizeText(item));
}
}
return null;
return [];
}
private normalizeText(value: string | null | undefined): string {
@@ -234,7 +255,7 @@ export class ProductAttributeSelectorComponent {
}
private emitMatchingVariant(
selections: Record<number, number>,
selections: Record<string, number[]>,
variants: CatalogItemVariant[],
attributes: ProductAttribute[],
): void {
@@ -243,18 +264,22 @@ export class ProductAttributeSelectorComponent {
return;
}
const selectedValuesById: Record<number, string> = {};
const selectedValuesByCode: Record<string, string[]> = {};
let allSelected = true;
for (const attr of attributes) {
const selectedOptionId = selections[attr.id];
if (selectedOptionId === undefined) {
const selectedOptionIds = selections[attr.codigo] ?? [];
if (
selectedOptionIds.length === 0 ||
(!attr.allow_multi_select && selectedOptionIds.length !== 1)
) {
allSelected = false;
break;
}
const option = attr.options.find((o) => o.id === selectedOptionId);
if (option) {
selectedValuesById[attr.id] = this.normalizeText(option.value || option.label);
}
selectedValuesByCode[attr.codigo] = selectedOptionIds
.map((id) => attr.options.find((option) => option.id === id))
.filter((option): option is ProductAttributeOption => option !== undefined)
.map((option) => this.normalizeText(option.value || option.label))
.sort();
}
if (!allSelected) {
@@ -264,10 +289,12 @@ export class ProductAttributeSelectorComponent {
const matchingVariant = variants.find((variant) => {
return attributes.every((attr) => {
const selectedValue = selectedValuesById[attr.id];
const variantValue = this.getDefaultVariantAttributeValue(attr, variant.values);
if (!variantValue) return false;
return this.normalizeText(variantValue) === selectedValue;
const selectedValues = selectedValuesByCode[attr.codigo];
const variantValues = this.getVariantAttributeValues(attr, variant.values).sort();
return (
selectedValues.length === variantValues.length &&
selectedValues.every((value, index) => value === variantValues[index])
);
});
});