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

feat(product-list): replace ProductCard with ProductColumnWithImage and update related components

Browse Source
This commit is contained in:
ncoronel
2026-07-20 14:27:24 -03:00
parent 625990f594
commit c0eb3369c5
15 changed files with 349 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -607,7 +607,7 @@
<section class="component-demo card shadow-sm mt-4">
<div class="card-body">
<span class="eyebrow">Reusable Component</span>
<h2 class="mb-4">Tarjetas de Producto (ProductCard)</h2>
<h2 class="mb-4">Tarjetas de Producto (Column With Image)</h2>
<p class="text-muted mb-4">
Las tarjetas se adaptan al tamano del contenedor padre. A continuacion se
@@ -617,7 +617,7 @@
<div class="row">
@for (product of testProducts; track product.title) {
<div class="col-12 col-md-6 col-lg-4 mb-4 d-flex align-items-stretch">
<app-product-card
<app-product-column-with-image
[imageUrl]="product.imageUrl"
[title]="product.title"
[originalPrice]="product.originalPrice"
@@ -687,7 +687,7 @@
<div
class="col-12 col-md-6 col-lg-4 mb-4 d-flex align-items-stretch store-section-demo__item"
>
<app-product-card
<app-product-column-with-image
[imageUrl]="product.imageUrl"
[title]="product.title"
[originalPrice]="product.originalPrice"

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

@@ -130,7 +130,7 @@ h1 {
}
.store-section-demo__item {
app-product-card {
app-product-column-with-image {
width: 100%;
}
}

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

@@ -8,7 +8,7 @@ import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-
import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
import { InputComponent } from '../../../../shared/components/input/input.component';
import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
import { ProductColumnWithImageComponent } from '../../../../shared/components/product-column-with-image/product-column-with-image.component';
import { ProductRowCardComponent } from '../../../../shared/components/product-row-card/product-row-card.component';
import {
ProductVerticalWithCartCardComponent
@@ -27,7 +27,7 @@ import { StepComponent } from '../../../../shared/components/stepper/step.compon
CartComponent,
InputComponent,
PaginatorComponent,
ProductCardComponent,
ProductColumnWithImageComponent,
ProductRowCardComponent,
ProductVerticalWithCartCardComponent,
StoreSectionComponent,
@@ -280,4 +280,3 @@ export class ReutilizablesTestPageComponent {
}
}

2
src/app/features/store/pages/store-home-page/store-home-page.component.html
View File

@@ -19,7 +19,7 @@
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 g-4">
@for (product of productCards(); track product.id; let index = $index) {
<div class="col">
<app-product-card
<app-product-column-with-image
[title]="product.title"
[originalPrice]="product.originalPrice"
[discount]="product.discount"

4
src/app/features/store/pages/store-home-page/store-home-page.component.spec.ts
View File

@@ -113,7 +113,7 @@ describe('StoreHomePageComponent', () => {
expect(catalogServiceStub.getProductos).not.toHaveBeenCalled();
expect(element.querySelector('.store-section__title')?.textContent?.trim()).toBe('Productos');
expect(element.querySelectorAll('app-product-card')).toHaveLength(2);
expect(element.querySelectorAll('app-product-column-with-image')).toHaveLength(2);
expect(element.textContent).toContain('Auriculares Bluetooth');
expect(element.textContent).toContain('Teclado Mecanico');
expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe(
@@ -267,7 +267,7 @@ describe('StoreHomePageComponent', () => {
const element = fixture.nativeElement as HTMLElement;
expect(element.textContent).toContain('No pudimos cargar los productos en este momento.');
expect(element.querySelectorAll('app-product-card')).toHaveLength(0);
expect(element.querySelectorAll('app-product-column-with-image')).toHaveLength(0);
expect(catalogServiceStub.getProductos).not.toHaveBeenCalled();
});
});

9
src/app/features/store/pages/store-home-page/store-home-page.component.ts
View File

@@ -13,7 +13,7 @@ import { Subscription } from 'rxjs';
import { ApiPaginatedResponse } from '../../../../core/services/api-paginated-response.interface';
import { CatalogService } from '../../../../core/services/catalog/catalog.service';
import { Product } from '../../../../core/services/catalog/catalog.interface';
import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
import { ProductColumnWithImageComponent } from '../../../../shared/components/product-column-with-image/product-column-with-image.component';
import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
import { HeroBannerComponent } from '../../../../shared/components/hero-banner/hero-banner.component';
@@ -34,7 +34,12 @@ interface StoreHomeProductCardViewModel {
@Component({
selector: 'app-store-home-page',
imports: [StoreSectionComponent, ProductCardComponent, PaginatorComponent, HeroBannerComponent],
imports: [
StoreSectionComponent,
ProductColumnWithImageComponent,
PaginatorComponent,
HeroBannerComponent,
],
templateUrl: './store-home-page.component.html',
styleUrl: './store-home-page.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,