diff --git a/src/app/features/store/pages/category-items-page/category-items-page.component.html b/src/app/features/store/pages/category-items-page/category-items-page.component.html index bf39754..3d6c403 100644 --- a/src/app/features/store/pages/category-items-page/category-items-page.component.html +++ b/src/app/features/store/pages/category-items-page/category-items-page.component.html @@ -1,8 +1,6 @@
@if (error()) {

{{ error() }}

- } @else if (loading()) { -

Cargando productos...

} @else if (results(); as categoryResults) {

@@ -19,7 +17,6 @@ [layout]="categoryResults.layout" [groupLayout]="paginatedLayout" [items]="categoryResults" - [loading]="loading()" (buy)="onBuyProduct($event)" (addToCart)="onAddToCart($event)" (pageChange)="onPageChange($event)" diff --git a/src/app/features/store/pages/category-items-page/category-items-page.component.spec.ts b/src/app/features/store/pages/category-items-page/category-items-page.component.spec.ts index 0d3b4df..0d2293d 100644 --- a/src/app/features/store/pages/category-items-page/category-items-page.component.spec.ts +++ b/src/app/features/store/pages/category-items-page/category-items-page.component.spec.ts @@ -71,9 +71,6 @@ describe('CategoryItemsPageComponent', () => { provide: CatalogService, useValue: { getCategoryItems, - withCustomLoading() { - return this; - }, }, }, { diff --git a/src/app/features/store/pages/category-items-page/category-items-page.component.ts b/src/app/features/store/pages/category-items-page/category-items-page.component.ts index 82775d8..ae683f6 100644 --- a/src/app/features/store/pages/category-items-page/category-items-page.component.ts +++ b/src/app/features/store/pages/category-items-page/category-items-page.component.ts @@ -50,7 +50,6 @@ export class CategoryItemsPageComponent { private readonly toastService = inject(ToastService); protected readonly results = signal(null); - protected readonly loading = signal(true); protected readonly error = signal(null); protected readonly creatingDirectPurchase = signal(false); protected readonly paginatedLayout: CatalogGroupLayout = 'paginated'; @@ -71,7 +70,6 @@ export class CategoryItemsPageComponent { tap(() => { this.results.set(null); this.error.set(null); - this.loading.set(true); }), switchMap(({ categoryId, page }) => { if (categoryId === 0) { @@ -80,10 +78,7 @@ export class CategoryItemsPageComponent { return of(null); } - return this.catalogService - .withCustomLoading() - .getCategoryItems(categoryId, { page }) - .pipe( + return this.catalogService.getCategoryItems(categoryId, { page }).pipe( catchError(() => { this.error.set('No pudimos cargar los productos de esta categoría.'); @@ -95,7 +90,6 @@ export class CategoryItemsPageComponent { ) .subscribe((results) => { this.results.set(results); - this.loading.set(false); }); } diff --git a/src/app/features/store/pages/search-page/search-page.component.html b/src/app/features/store/pages/search-page/search-page.component.html index 888283d..d007831 100644 --- a/src/app/features/store/pages/search-page/search-page.component.html +++ b/src/app/features/store/pages/search-page/search-page.component.html @@ -1,8 +1,8 @@
-
-

Resultados de búsqueda

+
+

Resultados de búsqueda

@if (query()) { -

+

Resultados para “{{ query() }}”

} @@ -10,8 +10,6 @@ @if (error()) {

{{ error() }}

- } @else if (loading()) { -

Buscando productos...

} @else if (results(); as searchResults) { @if (!searchResults.data.length) {

diff --git a/src/app/features/store/pages/search-page/search-page.component.scss b/src/app/features/store/pages/search-page/search-page.component.scss index dad323d..cf0805f 100644 --- a/src/app/features/store/pages/search-page/search-page.component.scss +++ b/src/app/features/store/pages/search-page/search-page.component.scss @@ -1,3 +1,24 @@ +.search-results__header { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8px; + padding: 16px 28px; + text-align: center; +} + +.search-results__title { + color: var(--bs-primary); + font-size: 24px; + font-weight: bold; + line-height: 1.2; +} + +.search-results__subtitle { + line-height: 1.2; +} + .search-results__alert-error { color: var(--tenant-danger-color, var(--bs-danger)); } diff --git a/src/app/features/store/pages/search-page/search-page.component.spec.ts b/src/app/features/store/pages/search-page/search-page.component.spec.ts index 72947af..686be74 100644 --- a/src/app/features/store/pages/search-page/search-page.component.spec.ts +++ b/src/app/features/store/pages/search-page/search-page.component.spec.ts @@ -67,9 +67,6 @@ describe('SearchPageComponent', () => { provide: CatalogService, useValue: { searchCatalog, - withCustomLoading() { - return this; - }, }, }, { @@ -111,6 +108,22 @@ describe('SearchPageComponent', () => { ); }); + it('renders the search title and query subtitle with the category header layout', () => { + const fixture = TestBed.createComponent(SearchPageComponent); + fixture.detectChanges(); + + const element = fixture.nativeElement as HTMLElement; + const header = element.querySelector('.search-results__header'); + const title = element.querySelector('#search-results-title'); + const subtitle = element.querySelector('.search-results__subtitle'); + + expect(header?.classList).toContain('mb-5'); + expect(title?.classList).toContain('search-results__title'); + expect(title?.classList).toContain('mb-0'); + expect(subtitle?.textContent).toContain('Resultados para'); + expect(subtitle?.textContent).toContain('running'); + }); + it('does not search when the query has fewer than three characters', () => { TestBed.overrideProvider(ActivatedRoute, { useValue: { diff --git a/src/app/features/store/pages/search-page/search-page.component.ts b/src/app/features/store/pages/search-page/search-page.component.ts index 3c9d7ab..9aab8b0 100644 --- a/src/app/features/store/pages/search-page/search-page.component.ts +++ b/src/app/features/store/pages/search-page/search-page.component.ts @@ -56,7 +56,6 @@ export class SearchPageComponent { protected readonly query = signal(''); protected readonly results = signal | null>(null); - protected readonly loading = signal(false); protected readonly error = signal(null); protected readonly creatingDirectPurchase = signal(false); @@ -105,14 +104,13 @@ export class SearchPageComponent { ? null : `Ingresá al menos ${this.minSearchLength} caracteres para buscar.`, ); - this.loading.set(query.length >= this.minSearchLength); }), switchMap(({ query, page }) => { if (query.length < this.minSearchLength) { return of(null); } - return this.catalogService.withCustomLoading().searchCatalog({ q: query, page }).pipe( + return this.catalogService.searchCatalog({ q: query, page }).pipe( catchError(() => { this.error.set('No pudimos realizar la búsqueda en este momento.'); @@ -124,7 +122,6 @@ export class SearchPageComponent { ) .subscribe((results) => { this.results.set(results); - this.loading.set(false); }); }