sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(search): add Search Intelligence module

Browse Source
This commit is contained in:
sdarbinyan
2026-07-10 13:25:31 +04:00
parent 494451bb96
commit 7ecb19cb1a
29 changed files with 1030 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/app/features/search/components/empty-results/search-empty-results.component.html Normal file
View File

@@ -0,0 +1,44 @@
<section class="search-empty-results card" [attr.aria-label]="'search.emptyResultsAria' | translate">
<h3>{{ 'search.noResults' | translate }}</h3>
<button type="button" class="reset-btn" (click)="resetFilters.emit()">{{ 'catalog.clearFilters' | translate }}</button>
@if (popularCategories.length > 0) {
<div class="block">
<strong>{{ 'search.popularCategories' | translate }}</strong>
<div class="chip-list">
@for (category of popularCategories; track category.id) {
<button type="button" class="chip" (click)="popularCategorySelected.emit(category.id)">{{ category.label }}</button>
}
</div>
</div>
}
@if (popularSearches.length > 0) {
<div class="block">
<strong>{{ 'catalog.popularSearchesTitle' | translate }}</strong>
<div class="chip-list">
@for (item of popularSearches; track $index) {
<button type="button" class="chip" (click)="popularSearchSelected.emit(item)">{{ item }}</button>
}
</div>
</div>
}
@if (recommendedProducts.length > 0) {
<div class="block">
<strong>{{ 'search.recommendedProducts' | translate }}</strong>
<div class="product-grid">
@for (product of recommendedProducts; track product.itemID) {
<app-product-card
[item]="product"
[title]="product.name"
appearance="compact"
[addToCartLabel]="'catalog.addToCart' | translate"
(selected)="productSelected.emit(product)"
(addToCart)="productAddToCart.emit({ product, event: $event.event })" />
}
</div>
</div>
}
</section>

48
src/app/features/search/components/empty-results/search-empty-results.component.scss Normal file
View File

@@ -0,0 +1,48 @@
.search-empty-results {
display: grid;
gap: 14px;
padding: 16px;
}
h3 {
margin: 0;
}
.reset-btn {
justify-self: start;
min-height: 40px;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
background: var(--bg-primary);
color: var(--text-primary);
padding: 0 14px;
cursor: pointer;
font-weight: 700;
}
.block {
display: grid;
gap: 8px;
}
.chip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip {
min-height: 36px;
border: 1px solid var(--border-color);
border-radius: 999px;
background: var(--bg-primary);
color: var(--text-secondary);
padding: 0 12px;
cursor: pointer;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}

24
src/app/features/search/components/empty-results/search-empty-results.component.ts Normal file
View File

@@ -0,0 +1,24 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { Product } from '../../../../core/products/models/product-domain.model';
import { ProductCardComponent } from '../../../../components/product-card/product-card.component';
import { TranslatePipe } from '../../../../i18n/translate.pipe';
@Component({
selector: 'app-search-empty-results',
standalone: true,
imports: [ProductCardComponent, TranslatePipe],
templateUrl: './search-empty-results.component.html',
styleUrls: ['./search-empty-results.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SearchEmptyResultsComponent {
@Input() popularCategories: Array<{ id: string | number; label: string }> = [];
@Input() popularSearches: string[] = [];
@Input() recommendedProducts: Product[] = [];
@Output() resetFilters = new EventEmitter<void>();
@Output() popularCategorySelected = new EventEmitter<string | number>();
@Output() popularSearchSelected = new EventEmitter<string>();
@Output() productSelected = new EventEmitter<Product>();
@Output() productAddToCart = new EventEmitter<{ product: Product; event: Event }>();
}

86
src/app/features/search/components/search-bar/search-bar.component.html Normal file
View File

@@ -0,0 +1,86 @@
<section class="search-bar card" [class.mobile-overlay-open]="mobileOverlayOpen()" [attr.aria-label]="'search.searchBarAria' | translate">
@if (mobileOverlayOpen()) {
<div class="mobile-overlay-backdrop" (click)="closeOverlay()" aria-hidden="true"></div>
}
<div class="search-shell" [class.mobile-overlay]="mobileOverlayOpen()">
<form class="search-form" (submit)="onSubmit($event)">
<input
type="search"
[ngModel]="query"
(ngModelChange)="onQueryInput($event)"
(keydown)="onKeydown($event)"
(focus)="onFocus()"
(blur)="onBlur()"
name="query"
[placeholder]="'catalog.searchPlaceholder' | translate"
[attr.aria-expanded]="suggestions.length > 0"
[attr.aria-label]="'catalog.searchPlaceholder' | translate"
autocomplete="off" />
@if (loading) {
<span class="loading-dot" [attr.aria-label]="'search.searching' | translate"></span>
}
<button type="button" class="search-clear-btn" [disabled]="!query" (click)="clearQuery()" [attr.aria-label]="'catalog.clearSearch' | translate">×</button>
<button type="submit" [disabled]="loading">{{ 'catalog.searchSubmit' | translate }}</button>
</form>
@if (suggestions.length > 0) {
<div class="suggestions" role="listbox" [attr.aria-label]="'catalog.suggestionsTitle' | translate">
<strong>{{ 'catalog.suggestionsTitle' | translate }}</strong>
<div class="suggestion-list">
@for (item of suggestions; track item.id) {
<button
type="button"
class="suggestion-item"
[class.active]="$index === activeSuggestionIndex()"
[attr.aria-label]="suggestionLabel(item)"
(click)="selectSuggestion(item)">
<span class="suggestion-icon" aria-hidden="true">{{ item.icon }}</span>
<span class="suggestion-copy">
<span class="suggestion-title">{{ item.title }}</span>
@if (item.subtitle) {
<small>{{ item.subtitle | translate }}</small>
}
</span>
<span class="suggestion-type">{{ ('search.suggestionType.' + item.type) | translate }}</span>
</button>
}
</div>
</div>
}
@if (popularSearches.length > 0) {
<app-trending-searches
[title]="'catalog.popularSearchesTitle' | translate"
[items]="popularSearches"
(selected)="onRecentSelected($event)" />
}
@if (recentSearches.length > 0) {
<app-trending-searches
[title]="'catalog.recentSearchesTitle' | translate"
[items]="recentSearches"
(selected)="onRecentSelected($event)" />
}
@if (searchHistory.length > 0) {
<div class="history">
<div class="history-head">
<strong>{{ 'catalog.searchHistoryTitle' | translate }}</strong>
<button type="button" (click)="historyCleared.emit()">{{ 'catalog.clearHistory' | translate }}</button>
</div>
<div class="chip-list">
@for (item of searchHistory; track $index) {
<button type="button" class="chip" (click)="onRecentSelected(item)">{{ item }}</button>
}
</div>
</div>
}
@if (noResults && !loading) {
<p class="no-results">{{ 'catalog.searchNoResultsHint' | translate }}</p>
}
</div>
</section>

195
src/app/features/search/components/search-bar/search-bar.component.scss Normal file
View File

@@ -0,0 +1,195 @@
.search-bar {
position: relative;
padding: 14px;
display: grid;
gap: 12px;
}
.search-shell {
display: grid;
gap: 12px;
}
.search-form {
display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 8px;
}
.search-form input {
min-height: 44px;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0 12px;
font: inherit;
}
.search-form input:focus-visible {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
outline: 0;
}
.loading-dot {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid var(--border-color);
border-top-color: var(--primary-color);
animation: search-spin 0.8s linear infinite;
align-self: center;
justify-self: center;
}
@keyframes search-spin {
to { transform: rotate(360deg); }
}
.search-form button {
min-height: 44px;
border: 0;
border-radius: var(--radius-sm);
background: var(--primary-color);
color: #fff;
font-weight: 700;
padding: 0 14px;
cursor: pointer;
}
.search-clear-btn {
min-width: 44px;
min-height: 44px;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-sm);
background: var(--bg-primary) !important;
color: var(--text-secondary) !important;
font-size: 1.2rem;
line-height: 1;
}
.suggestions {
display: grid;
gap: 8px;
}
.suggestion-list {
display: grid;
gap: 6px;
}
.suggestion-item {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 8px;
min-height: 44px;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
background: var(--bg-primary);
color: var(--text-primary);
padding: 8px 10px;
text-align: left;
cursor: pointer;
}
.suggestion-item.active {
border-color: var(--primary-color);
background: color-mix(in srgb, var(--primary-color) 7%, white);
}
.suggestion-icon {
font-size: 0.75rem;
text-transform: uppercase;
color: var(--text-secondary);
}
.suggestion-copy {
display: grid;
}
.suggestion-title {
font-weight: 700;
}
.suggestion-copy small,
.suggestion-type {
color: var(--text-secondary);
font-size: 0.78rem;
}
.chip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip {
min-height: 32px;
border: 1px solid var(--border-color);
border-radius: 999px;
background: var(--bg-primary);
color: var(--text-secondary);
padding: 0 10px;
cursor: pointer;
}
.history-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.history-head button {
border: 0;
background: transparent;
color: var(--primary-color);
cursor: pointer;
font-weight: 700;
}
.no-results {
margin: 0;
color: var(--text-secondary);
}
.mobile-overlay-backdrop {
display: none;
}
@media (max-width: 767px) {
.search-form {
grid-template-columns: 1fr auto auto;
}
.search-form button[type='submit'] {
grid-column: 1 / -1;
width: 100%;
}
.mobile-overlay-open .mobile-overlay-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(16, 24, 24, 0.5);
z-index: 30;
}
.search-shell.mobile-overlay {
position: fixed;
inset: auto 0 0 0;
max-height: 82vh;
overflow: auto;
border-radius: 14px 14px 0 0;
background: #fff;
padding: 12px;
z-index: 31;
box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18);
}
.chip,
.suggestion-item,
.history-head button {
min-height: 44px;
}
}

130
src/app/features/search/components/search-bar/search-bar.component.ts Normal file
View File

@@ -0,0 +1,130 @@
import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SearchSuggestion } from '../../models/search.model';
import { TranslatePipe } from '../../../../i18n/translate.pipe';
import { TrendingSearchesComponent } from '../trending-searches/trending-searches.component';
@Component({
selector: 'app-search-bar',
standalone: true,
imports: [FormsModule, TranslatePipe, TrendingSearchesComponent],
templateUrl: './search-bar.component.html',
styleUrls: ['./search-bar.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SearchBarComponent {
@Input() query = '';
@Input() loading = false;
@Input() suggestions: SearchSuggestion[] = [];
@Input() recentSearches: string[] = [];
@Input() popularSearches: string[] = [];
@Input() searchHistory: string[] = [];
@Input() noResults = false;
@Output() queryChange = new EventEmitter<string>();
@Output() searchSubmit = new EventEmitter<string>();
@Output() suggestionSelected = new EventEmitter<SearchSuggestion>();
@Output() recentSelected = new EventEmitter<string>();
@Output() historyCleared = new EventEmitter<void>();
readonly activeSuggestionIndex = signal(-1);
readonly focused = signal(false);
readonly mobileOverlayOpen = signal(false);
@HostListener('window:resize')
onResize(): void {
if (!this.isMobile()) {
this.mobileOverlayOpen.set(false);
}
}
onSubmit(event: Event): void {
event.preventDefault();
const active = this.suggestions[this.activeSuggestionIndex()];
if (active) {
this.selectSuggestion(active);
return;
}
this.searchSubmit.emit(this.query.trim());
this.mobileOverlayOpen.set(false);
}
onQueryInput(value: string): void {
this.queryChange.emit(value);
this.activeSuggestionIndex.set(-1);
}
onFocus(): void {
this.focused.set(true);
if (this.isMobile()) {
this.mobileOverlayOpen.set(true);
}
}
onBlur(): void {
this.focused.set(false);
}
selectSuggestion(suggestion: SearchSuggestion): void {
this.suggestionSelected.emit(suggestion);
this.activeSuggestionIndex.set(-1);
this.mobileOverlayOpen.set(false);
}
clearQuery(): void {
this.queryChange.emit('');
this.searchSubmit.emit('');
this.activeSuggestionIndex.set(-1);
}
closeOverlay(): void {
this.mobileOverlayOpen.set(false);
}
onKeydown(event: KeyboardEvent): void {
if (event.key === 'Escape') {
event.preventDefault();
this.activeSuggestionIndex.set(-1);
this.mobileOverlayOpen.set(false);
return;
}
if (this.suggestions.length === 0) {
return;
}
if (event.key === 'ArrowDown') {
event.preventDefault();
this.activeSuggestionIndex.set(Math.min(this.suggestions.length - 1, this.activeSuggestionIndex() + 1));
return;
}
if (event.key === 'ArrowUp') {
event.preventDefault();
this.activeSuggestionIndex.set(Math.max(-1, this.activeSuggestionIndex() - 1));
return;
}
if (event.key === 'Enter' && this.activeSuggestionIndex() >= 0) {
event.preventDefault();
const active = this.suggestions[this.activeSuggestionIndex()];
this.selectSuggestion(active);
}
}
onRecentSelected(value: string): void {
this.recentSelected.emit(value);
this.activeSuggestionIndex.set(-1);
this.mobileOverlayOpen.set(false);
}
suggestionLabel(item: SearchSuggestion): string {
return item.subtitle ? `${item.title} · ${item.subtitle}` : item.title;
}
private isMobile(): boolean {
return typeof window !== 'undefined' && window.innerWidth <= 767;
}
}

8
src/app/features/search/components/trending-searches/trending-searches.component.html Normal file
View File

@@ -0,0 +1,8 @@
<div class="trending-searches">
<strong>{{ title }}</strong>
<div class="chip-list">
@for (item of items; track $index) {
<button type="button" class="chip" (click)="selected.emit(item)">{{ item }}</button>
}
</div>
</div>

20
src/app/features/search/components/trending-searches/trending-searches.component.scss Normal file
View File

@@ -0,0 +1,20 @@
.trending-searches {
display: grid;
gap: 8px;
}
.chip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip {
min-height: 32px;
border: 1px solid var(--border-color);
border-radius: 999px;
background: var(--bg-primary);
color: var(--text-secondary);
padding: 0 10px;
cursor: pointer;
}

15
src/app/features/search/components/trending-searches/trending-searches.component.ts Normal file
View File

@@ -0,0 +1,15 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-trending-searches',
standalone: true,
templateUrl: './trending-searches.component.html',
styleUrls: ['./trending-searches.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TrendingSearchesComponent {
@Input() title = '';
@Input() items: string[] = [];
@Output() selected = new EventEmitter<string>();
}

12
src/app/features/search/facade/search.facade.ts
View File

@@ -89,6 +89,7 @@ export class SearchFacade {
constructor() {
const history = this.historyService.getSnapshot();
this.store.setRecentSearches(history.recent);
this.store.setPopularSearches(this.popularSearches.map(item => item.title));
this.autocompleteInput$
.pipe(
@@ -128,19 +129,26 @@ export class SearchFacade {
return {
items: snapshot.items,
recent: snapshot.recent,
popular: this.popularSearches.map(item => item.title),
};
}
pushSearchHistory(term: string, maxHistory = 12): SearchHistory {
const snapshot = this.historyService.push(term, maxHistory);
this.store.setRecentSearches(snapshot.recent);
return snapshot;
return {
...snapshot,
popular: this.popularSearches.map(item => item.title),
};
}
clearSearchHistory(): SearchHistory {
const snapshot = this.historyService.clear();
this.store.setRecentSearches([]);
return snapshot;
return {
...snapshot,
popular: this.popularSearches.map(item => item.title),
};
}
trending(): Observable<SearchSuggestion[] | null> {

15
src/app/features/search/models/search-state.model.ts
View File

@@ -3,6 +3,7 @@ import { ProductSort } from '../../../core/products/models/product-domain.model'
import { SearchFilterState, SearchResult, SearchSuggestion } from './search.model';
export interface SearchState {
// Canonical feature state
currentQuery: string;
loading: boolean;
results: SearchResult | null;
@@ -15,6 +16,12 @@ export interface SearchState {
pageSize: number;
totalResults: number;
layout: CatalogLayoutMode;
// Legacy compatibility fields
text: string;
sort: ProductSort | 'discount';
page: number;
filters: SearchFilterState;
}
export function createInitialSearchState(pageSize = 24): SearchState {
@@ -35,5 +42,13 @@ export function createInitialSearchState(pageSize = 24): SearchState {
pageSize,
totalResults: 0,
layout: 'grid',
text: '',
sort: 'relevance',
page: 1,
filters: {
values: {},
ranges: {},
toggles: {},
},
};
}

4
src/app/features/search/models/search.model.ts
View File

@@ -30,7 +30,8 @@ export interface SearchSuggestion {
id: string;
type: SearchSuggestionType;
title: string;
text?: string;
text: string;
kind?: 'live' | 'recent' | 'popular';
subtitle?: string;
icon: string;
target: SearchNavigationTarget;
@@ -86,6 +87,7 @@ export interface SortOption {
export interface SearchHistory {
items: string[];
recent: string[];
popular: string[];
}
export interface SearchFilterState {

8
src/app/features/search/services/search-autocomplete.service.ts
View File

@@ -19,6 +19,8 @@ export class SearchAutocompleteService {
id: `product-${item.itemID}`,
type: 'product' as const,
title: item.name,
text: item.name,
kind: 'live' as const,
subtitle: item.simpleDescription ?? '',
icon: 'inventory_2',
target: { route: '/product', params: { id: item.itemID } },
@@ -34,6 +36,8 @@ export class SearchAutocompleteService {
id: `category-${item.id}`,
type: 'category' as const,
title: item.title,
text: item.title,
kind: 'live' as const,
subtitle: '',
icon: 'category',
target: { route: '/catalog', params: { id: item.id } },
@@ -50,6 +54,8 @@ export class SearchAutocompleteService {
id: `brand-${tag}`,
type: 'brand' as const,
title: tag,
text: tag,
kind: 'live' as const,
subtitle: '',
icon: 'sell',
target: { route: '/search', query: { q: tag } },
@@ -62,6 +68,8 @@ export class SearchAutocompleteService {
id: `ai-${normalized}`,
type: 'ai',
title: query,
text: query,
kind: 'live',
subtitle: 'search.aiSuggestionHint',
icon: 'auto_awesome',
target: { route: '/search', query: { q: query } },

4
src/app/features/search/services/search-history.service.ts
View File

@@ -20,6 +20,7 @@ export class SearchHistoryService {
return {
items,
recent: items.slice(0, 8),
popular: [],
};
}
@@ -37,11 +38,12 @@ export class SearchHistoryService {
return {
items: next,
recent: next.slice(0, 8),
popular: [],
};
}
clear(): SearchHistory {
this.repository.clear();
return { items: [], recent: [] };
return { items: [], recent: [], popular: [] };
}
}

5
src/app/features/search/store/search.store.ts
View File

@@ -20,7 +20,7 @@ export class SearchStore {
}
setQuery(query: string): void {
this.patch({ currentQuery: query });
this.patch({ currentQuery: query, text: query });
}
setSuggestions(suggestions: SearchSuggestion[]): void {
@@ -32,6 +32,7 @@ export class SearchStore {
results,
totalResults: results?.total ?? 0,
currentPage: results?.page ?? 1,
page: results?.page ?? 1,
pageSize: results?.pageSize ?? this.stateSignal().pageSize,
});
}
@@ -45,6 +46,6 @@ export class SearchStore {
}
setFilters(selectedFilters: SearchFilterState): void {
this.patch({ selectedFilters });
this.patch({ selectedFilters, filters: selectedFilters });
}
}

39
src/app/features/website/catalog/components/catalog-empty-state/catalog-empty-state.component.html
View File

@@ -28,4 +28,43 @@
@if (actionLabel) {
<button type="button" class="catalog-empty-state__action" (click)="action.emit()">{{ actionLabel }}</button>
}
@if (variant === 'filtered' && popularCategories.length > 0) {
<div class="catalog-empty-state__block">
<strong>{{ 'search.popularCategories' | translate }}</strong>
<div class="catalog-empty-state__chips">
@for (category of popularCategories; track category.id) {
<button type="button" class="catalog-empty-state__chip" (click)="popularCategorySelected.emit(category.id)">{{ category.label }}</button>
}
</div>
</div>
}
@if (variant === 'filtered' && popularSearches.length > 0) {
<div class="catalog-empty-state__block">
<strong>{{ 'catalog.popularSearchesTitle' | translate }}</strong>
<div class="catalog-empty-state__chips">
@for (entry of popularSearches; track $index) {
<button type="button" class="catalog-empty-state__chip" (click)="popularSearchSelected.emit(entry)">{{ entry }}</button>
}
</div>
</div>
}
@if (variant === 'filtered' && recommendedProducts.length > 0) {
<div class="catalog-empty-state__block catalog-empty-state__recommendations">
<strong>{{ 'search.recommendedProducts' | translate }}</strong>
<div class="catalog-empty-state__products">
@for (product of recommendedProducts; track product.itemID) {
<app-product-card
[item]="product"
[title]="product.name"
appearance="compact"
[addToCartLabel]="'catalog.addToCart' | translate"
(selected)="recommendedProductSelected.emit(product)"
(addToCart)="recommendedAddToCart.emit({ product, event: $event.event })" />
}
</div>
</div>
}
</section>

33
src/app/features/website/catalog/components/catalog-empty-state/catalog-empty-state.component.scss
View File

@@ -70,6 +70,39 @@
transform: translateY(-1px);
}
.catalog-empty-state__block {
width: 100%;
display: grid;
gap: 10px;
}
.catalog-empty-state__chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.catalog-empty-state__chip {
min-height: 34px;
border: 1px solid var(--border-color);
border-radius: 999px;
background: var(--bg-primary);
color: var(--text-secondary);
padding: 0 12px;
cursor: pointer;
}
.catalog-empty-state__recommendations {
text-align: left;
}
.catalog-empty-state__products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 10px;
}
@media (max-width: 640px) {
.catalog-empty-state {
min-height: 260px;

11
src/app/features/website/catalog/components/catalog-empty-state/catalog-empty-state.component.ts
View File

@@ -1,8 +1,12 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { Product } from '../../../../../core/products/models/product-domain.model';
import { ProductCardComponent } from '../../../../../components/product-card/product-card.component';
import { TranslatePipe } from '../../../../../i18n/translate.pipe';
@Component({
selector: 'app-catalog-empty-state',
standalone: true,
imports: [ProductCardComponent, TranslatePipe],
templateUrl: './catalog-empty-state.component.html',
styleUrls: ['./catalog-empty-state.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
@@ -13,6 +17,13 @@ export class CatalogEmptyStateComponent {
@Input() message = '';
@Input() categoryTitle: string | null = null;
@Input() actionLabel = '';
@Input() popularCategories: Array<{ id: string | number; label: string }> = [];
@Input() popularSearches: string[] = [];
@Input() recommendedProducts: Product[] = [];
@Output() action = new EventEmitter<void>();
@Output() popularCategorySelected = new EventEmitter<string | number>();
@Output() popularSearchSelected = new EventEmitter<string>();
@Output() recommendedProductSelected = new EventEmitter<Product>();
@Output() recommendedAddToCart = new EventEmitter<{ product: Product; event: Event }>();
}

78
src/app/features/website/catalog/components/search-box/search-box.component.html
View File

@@ -1,65 +1,13 @@
<section class="catalog-search-box card">
<form class="search-form" (submit)="onSubmit($event)">
<input
type="search"
[ngModel]="query"
(ngModelChange)="onQueryInput($event)"
(keydown)="onKeydown($event)"
name="query"
[placeholder]="'catalog.searchPlaceholder' | translate"
autocomplete="off" />
<button type="button" class="search-clear-btn" [disabled]="!query" (click)="clearQuery()" [attr.aria-label]="'catalog.clearSearch' | translate">×</button>
<button type="submit" [disabled]="loading">{{ 'catalog.searchSubmit' | translate }}</button>
</form>
@if (suggestions.length > 0) {
<div class="suggestions">
<strong>{{ 'catalog.suggestionsTitle' | translate }}</strong>
<div class="chip-list">
@for (item of suggestions; track item.id) {
<button type="button" class="chip" [class.active]="$index === activeSuggestionIndex" (click)="selectSuggestion(item.text)">{{ item.text }}</button>
}
</div>
</div>
}
@if (popularSearches.length > 0) {
<div class="popular">
<strong>{{ 'catalog.popularSearchesTitle' | translate }}</strong>
<div class="chip-list">
@for (item of popularSearches; track $index) {
<button type="button" class="chip" (click)="onRecentSelected(item)">{{ item }}</button>
}
</div>
</div>
}
@if (recentSearches.length > 0) {
<div class="recent">
<strong>{{ 'catalog.recentSearchesTitle' | translate }}</strong>
<div class="chip-list">
@for (item of recentSearches; track $index) {
<button type="button" class="chip" (click)="onRecentSelected(item)">{{ item }}</button>
}
</div>
</div>
}
@if (searchHistory.length > 0) {
<div class="history">
<div class="history-head">
<strong>{{ 'catalog.searchHistoryTitle' | translate }}</strong>
<button type="button" (click)="historyCleared.emit()">{{ 'catalog.clearHistory' | translate }}</button>
</div>
<div class="chip-list">
@for (item of searchHistory; track $index) {
<button type="button" class="chip" (click)="onRecentSelected(item)">{{ item }}</button>
}
</div>
</div>
}
@if (noResults && !loading) {
<p class="no-results">{{ 'catalog.searchNoResultsHint' | translate }}</p>
}
</section>
<app-search-bar
[query]="query"
[loading]="loading"
[suggestions]="suggestions"
[recentSearches]="recentSearches"
[popularSearches]="popularSearches"
[searchHistory]="searchHistory"
[noResults]="noResults"
(queryChange)="queryChange.emit($event)"
(searchSubmit)="searchSubmit.emit($event)"
(suggestionSelected)="suggestionSelected.emit($event)"
(recentSelected)="recentSelected.emit($event)"
(historyCleared)="historyCleared.emit()" />

115
src/app/features/website/catalog/components/search-box/search-box.component.scss
View File

@@ -1,114 +1,3 @@
.catalog-search-box {
padding: 14px;
display: grid;
gap: 12px;
}
.search-form {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 8px;
}
.search-form input {
min-height: 44px;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0 12px;
font: inherit;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-form input:focus-visible {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
outline: 0;
}
.search-form button {
min-height: 44px;
border: 0;
border-radius: var(--radius-sm);
background: var(--primary-color);
color: #fff;
font-weight: 700;
padding: 0 14px;
cursor: pointer;
transition: transform 0.2s ease, filter 0.2s ease;
}
.search-clear-btn {
min-width: 44px;
min-height: 44px;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
background: var(--bg-primary);
color: var(--text-secondary);
font-size: 1.2rem;
line-height: 1;
}
.search-form button:hover:not(:disabled) {
transform: translateY(-1px);
filter: brightness(0.96);
}
.chip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip {
min-height: 30px;
border: 1px solid var(--border-color);
border-radius: 999px;
background: var(--bg-primary);
color: var(--text-secondary);
padding: 0 10px;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.chip:hover {
border-color: var(--primary-color);
color: var(--text-primary);
background: color-mix(in srgb, var(--primary-color) 8%, white);
}
.chip.active {
border-color: var(--primary-color);
color: var(--text-primary);
background: color-mix(in srgb, var(--primary-color) 10%, white);
}
.history-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.history-head button {
border: 0;
background: transparent;
color: var(--primary-color);
cursor: pointer;
font-weight: 700;
}
.no-results {
margin: 0;
color: var(--text-secondary);
}
@media (max-width: 680px) {
.search-form {
grid-template-columns: 1fr auto;
}
.search-form button[type='submit'] {
grid-column: 1 / -1;
width: 100%;
}
:host {
display: block;
}

64
src/app/features/website/catalog/components/search-box/search-box.component.ts
View File

@@ -1,12 +1,11 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SearchSuggestion } from '../../../../../core/search/models/search.model';
import { TranslatePipe } from '../../../../../i18n/translate.pipe';
import { SearchBarComponent } from '../../../../search/components/search-bar/search-bar.component';
@Component({
selector: 'app-catalog-search-box',
standalone: true,
imports: [FormsModule, TranslatePipe],
imports: [SearchBarComponent],
templateUrl: './search-box.component.html',
styleUrls: ['./search-box.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
@@ -22,64 +21,7 @@ export class CatalogSearchBoxComponent {
@Output() queryChange = new EventEmitter<string>();
@Output() searchSubmit = new EventEmitter<string>();
@Output() suggestionSelected = new EventEmitter<string>();
@Output() suggestionSelected = new EventEmitter<SearchSuggestion>();
@Output() recentSelected = new EventEmitter<string>();
@Output() historyCleared = new EventEmitter<void>();
activeSuggestionIndex = -1;
onSubmit(event: Event): void {
event.preventDefault();
this.searchSubmit.emit(this.query.trim());
}
onQueryInput(value: string): void {
this.queryChange.emit(value);
this.activeSuggestionIndex = -1;
}
selectSuggestion(value: string): void {
this.suggestionSelected.emit(value);
this.activeSuggestionIndex = -1;
}
clearQuery(): void {
this.queryChange.emit('');
this.searchSubmit.emit('');
this.activeSuggestionIndex = -1;
}
onKeydown(event: KeyboardEvent): void {
if (this.suggestions.length === 0) {
return;
}
if (event.key === 'ArrowDown') {
event.preventDefault();
this.activeSuggestionIndex = Math.min(this.suggestions.length - 1, this.activeSuggestionIndex + 1);
return;
}
if (event.key === 'ArrowUp') {
event.preventDefault();
this.activeSuggestionIndex = Math.max(-1, this.activeSuggestionIndex - 1);
return;
}
if (event.key === 'Enter' && this.activeSuggestionIndex >= 0) {
event.preventDefault();
const active = this.suggestions[this.activeSuggestionIndex];
this.selectSuggestion(active.text);
return;
}
if (event.key === 'Escape') {
this.activeSuggestionIndex = -1;
}
}
onRecentSelected(value: string): void {
this.recentSelected.emit(value);
this.activeSuggestionIndex = -1;
}
}

9
src/app/features/website/catalog/containers/catalog-container.component.html
View File

@@ -179,7 +179,14 @@
[title]="'catalog.noFilterMatchTitle' | translate"
[message]="'catalog.noFilterMatchMessage' | translate"
[actionLabel]="'catalog.clearFilters' | translate"
(action)="resetFilters()" />
[popularCategories]="popularCategorySuggestions()"
[popularSearches]="popularSearches()"
[recommendedProducts]="recommendedProductsForEmpty()"
(action)="resetFilters()"
(popularCategorySelected)="usePopularCategory($event)"
(popularSearchSelected)="useRecentSearch($event)"
(recommendedProductSelected)="selectProduct($event)"
(recommendedAddToCart)="addRecommendedToCart($event)" />
@if (isDrawerLayout()) {
<button type="button" class="catalog-open-filters-btn" (click)="openFilterDrawer()">{{ 'catalog.openFilters' | translate }}</button>

42
src/app/features/website/catalog/containers/catalog-container.component.ts
View File

@@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, DestroyRef, HostListener, computed, inject, signal } from '@angular/core';
import { ChangeDetectionStrategy, Component, DestroyRef, HostListener, computed, effect, inject, signal } from '@angular/core';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { A11yModule } from '@angular/cdk/a11y';
@@ -30,6 +30,7 @@ import { CatalogSortingControlComponent } from '../components/sorting-control/so
import { CatalogState, createInitialCatalogState } from '../models/catalog-state.model';
import { ProductShareService } from '../../user-experience/services/product-share.service';
import { UserNotificationService } from '../../user-experience/services/user-notification.service';
import { SearchSuggestion as SearchSuggestionItem } from '../../../../features/search/models/search.model';
type CatalogViewMode = 'categories' | 'products';
@@ -103,6 +104,21 @@ export class CatalogContainerComponent {
readonly showDesktopFilters = computed(() => this.viewMode() === 'products' && !this.isEmptyCategoryState() && !this.isDrawerLayout());
readonly showMobileToolbar = computed(() => this.viewMode() === 'products' && !this.isEmptyCategoryState() && this.isMobile());
readonly showCatalogTools = computed(() => this.viewMode() === 'products' && this.products().length > 0 && !this.loadingProducts());
readonly popularCategorySuggestions = computed(() => {
const sources = [...this.subcategoryChips(), ...this.categories()]
.slice(0, 8)
.map(category => ({ id: category.id, label: category.title }));
const byId = new Map<string | number, { id: string | number; label: string }>();
for (const entry of sources) {
if (!byId.has(entry.id)) {
byId.set(entry.id, entry);
}
}
return [...byId.values()];
});
readonly recommendedProductsForEmpty = computed(() => this.rawProducts().slice(0, 4));
readonly mobileSortOptions = computed(() => {
const allowed = new Set(['relevance', 'latest', 'price_asc', 'price_desc', 'rating', 'popular']);
const options = this.sortDefinitions().filter(option => allowed.has(option.id));
@@ -124,6 +140,10 @@ export class CatalogContainerComponent {
private syncingUrl = false;
constructor() {
effect(() => {
this.searchSuggestions.set(this.searchFacade.state().suggestions);
});
this.destroyRef.onDestroy(() => this.dataSubscription?.unsubscribe());
if (this.catalogConfig().searchHistoryEnabled) {
const snapshot = this.searchFacade.getSearchHistory();
@@ -131,7 +151,7 @@ export class CatalogContainerComponent {
this.recentSearches.set(snapshot.recent);
this.popularSearches.set(snapshot.popular);
} else {
this.popularSearches.set(this.searchFacade.popularSearches.map(item => item.text));
this.popularSearches.set(this.searchFacade.popularSearches.map(item => item.title));
}
combineLatest([this.route.paramMap, this.route.queryParamMap])
@@ -250,7 +270,7 @@ export class CatalogContainerComponent {
return;
}
this.searchSuggestions.set(this.searchFacade.buildLiveSuggestions(query, this.rawProducts()));
this.searchFacade.autocomplete(query, this.rawProducts());
}
submitSearch(query: string): void {
@@ -278,7 +298,8 @@ export class CatalogContainerComponent {
this.loadCatalog();
}
useSuggestion(value: string): void {
useSuggestion(suggestion: SearchSuggestionItem): void {
const value = suggestion.title;
this.onSearchQueryChange(value);
this.submitSearch(value);
}
@@ -288,6 +309,15 @@ export class CatalogContainerComponent {
this.submitSearch(value);
}
usePopularCategory(categoryId: string | number): void {
const numeric = Number(categoryId);
if (!Number.isFinite(numeric)) {
return;
}
this.router.navigate([`/${this.languageService.currentLanguage()}/catalog`, numeric]);
}
clearSearchHistory(): void {
const snapshot = this.searchFacade.clearSearchHistory();
this.searchHistory.set(snapshot.items);
@@ -295,6 +325,10 @@ export class CatalogContainerComponent {
this.popularSearches.set(snapshot.popular);
}
addRecommendedToCart(payload: { product: Product; event: Event }): void {
this.addToCart(payload);
}
onFavoriteToggled(product: Product): void {
const result = this.uxFacade.toggleWishlist(product);
this.notifications.show(