69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
|
|
import { DecimalPipe } from '@angular/common';
|
|
import { RouterLink } from '@angular/router';
|
|
import { Product } from '../../core/products/models/product-domain.model';
|
|
import { LangRoutePipe } from '../../pipes/lang-route.pipe';
|
|
import { getBadgeClass, getDiscountedPrice, getMainImage } from '../../utils/item.utils';
|
|
|
|
export type ProductCardAppearance = 'standard' | 'compact';
|
|
|
|
@Component({
|
|
selector: 'app-product-card',
|
|
standalone: true,
|
|
imports: [DecimalPipe, RouterLink, LangRoutePipe],
|
|
templateUrl: './product-card.component.html',
|
|
styleUrls: ['./product-card.component.scss'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
})
|
|
export class ProductCardComponent {
|
|
@Input({ required: true }) item!: Product;
|
|
@Input() title = '';
|
|
@Input() description = '';
|
|
@Input() addToCartLabel = 'Add to cart';
|
|
@Input() appearance: ProductCardAppearance = 'standard';
|
|
@Input() showDescription = false;
|
|
@Input() showStock = true;
|
|
@Input() showRating = true;
|
|
@Input() showDiscountBadge = true;
|
|
@Input() showFavoritePlaceholder = false;
|
|
@Input() showComparePlaceholder = false;
|
|
@Input() showQuickViewPlaceholder = false;
|
|
|
|
@Output() addToCart = new EventEmitter<{ itemID: number; event: Event }>();
|
|
@Output() preview = new EventEmitter<number>();
|
|
@Output() selected = new EventEmitter<{ itemID: number; event: Event }>();
|
|
@Output() favoritePlaceholder = new EventEmitter<number>();
|
|
@Output() comparePlaceholder = new EventEmitter<number>();
|
|
@Output() quickViewPlaceholder = new EventEmitter<number>();
|
|
|
|
readonly getMainImage = getMainImage;
|
|
readonly getDiscountedPrice = getDiscountedPrice;
|
|
readonly getBadgeClass = getBadgeClass;
|
|
|
|
onAddToCart(event: Event): void {
|
|
this.addToCart.emit({ itemID: this.item.itemID, event });
|
|
}
|
|
|
|
onSelected(event: Event): void {
|
|
this.selected.emit({ itemID: this.item.itemID, event });
|
|
}
|
|
|
|
onFavoritePlaceholder(event: Event): void {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
this.favoritePlaceholder.emit(this.item.itemID);
|
|
}
|
|
|
|
onComparePlaceholder(event: Event): void {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
this.comparePlaceholder.emit(this.item.itemID);
|
|
}
|
|
|
|
onQuickViewPlaceholder(event: Event): void {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
this.quickViewPlaceholder.emit(this.item.itemID);
|
|
}
|
|
}
|