107 lines
3.0 KiB
TypeScript
107 lines
3.0 KiB
TypeScript
import { Component, OnInit, signal, ChangeDetectionStrategy } from '@angular/core';
|
|
import { DecimalPipe } from '@angular/common';
|
|
import { RouterLink } from '@angular/router';
|
|
import { CarouselModule } from 'primeng/carousel';
|
|
import { ButtonModule } from 'primeng/button';
|
|
import { TagModule } from 'primeng/tag';
|
|
import { ApiService, CartService } from '../../services';
|
|
import { Item } from '../../models';
|
|
import { environment } from '../../../environments/environment';
|
|
import { getDiscountedPrice, getMainImage } from '../../utils/item.utils';
|
|
|
|
@Component({
|
|
selector: 'app-items-carousel',
|
|
templateUrl: './items-carousel.component.html',
|
|
imports: [DecimalPipe, RouterLink, CarouselModule, ButtonModule, TagModule],
|
|
styleUrls: ['./items-carousel.component.scss'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
})
|
|
export class ItemsCarouselComponent implements OnInit {
|
|
products = signal<Item[]>([]);
|
|
loading = signal(true);
|
|
isnovo = environment.theme === 'novo';
|
|
|
|
responsiveOptions: any[] | undefined;
|
|
|
|
constructor(
|
|
private apiService: ApiService,
|
|
private cartService: CartService
|
|
) {}
|
|
|
|
ngOnInit() {
|
|
this.apiService.getRandomItems(10).subscribe({
|
|
next: (items) => {
|
|
this.products.set(items);
|
|
this.loading.set(false);
|
|
},
|
|
error: () => {
|
|
this.loading.set(false);
|
|
}
|
|
});
|
|
|
|
this.responsiveOptions = [
|
|
{
|
|
breakpoint: '1400px',
|
|
numVisible: 5,
|
|
numScroll: 1
|
|
},
|
|
{
|
|
breakpoint: '1199px',
|
|
numVisible: 4,
|
|
numScroll: 1
|
|
},
|
|
{
|
|
breakpoint: '991px',
|
|
numVisible: 3,
|
|
numScroll: 1
|
|
},
|
|
{
|
|
breakpoint: '767px',
|
|
numVisible: 2,
|
|
numScroll: 1
|
|
},
|
|
{
|
|
breakpoint: '575px',
|
|
numVisible: 1,
|
|
numScroll: 1
|
|
}
|
|
];
|
|
}
|
|
|
|
getSeverity(remainings: string) {
|
|
switch (remainings) {
|
|
case 'high':
|
|
return 'success';
|
|
case 'low':
|
|
return 'warn';
|
|
case 'out':
|
|
return 'danger';
|
|
default:
|
|
return 'success';
|
|
}
|
|
}
|
|
|
|
getInventoryStatus(remainings: string): string {
|
|
switch (remainings) {
|
|
case 'high':
|
|
return 'INSTOCK';
|
|
case 'low':
|
|
return 'LOWSTOCK';
|
|
case 'out':
|
|
return 'OUTOFSTOCK';
|
|
default:
|
|
return 'INSTOCK';
|
|
}
|
|
}
|
|
|
|
readonly getItemImage = getMainImage;
|
|
readonly getDiscountedPrice = getDiscountedPrice;
|
|
|
|
addToCart(event: Event, item: Item): void {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
this.cartService.addItem(item.itemID, 1);
|
|
}
|
|
}
|
|
|