79 lines
2.9 KiB
TypeScript
Executable File
79 lines
2.9 KiB
TypeScript
Executable File
// src/app/pages/product-detail/product-detail.component.ts
|
|
import { Component, inject, OnInit } from '@angular/core';
|
|
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
|
|
import { PantryService } from '../../core/services/pantry.service';
|
|
import { Product, getExpiryStatus, EXPIRY_BADGE } from '../../core/models/product.model';
|
|
|
|
@Component({
|
|
selector: 'app-product-detail',
|
|
standalone: true,
|
|
imports: [RouterLink],
|
|
template: `
|
|
@if (product) {
|
|
<div class="card shadow-sm max-w-2xl mx-auto">
|
|
<div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
|
|
<h3 class="mb-0">{{ product.name }}</h3>
|
|
<span class="badge bg-{{ getBadge(product.expiry).bg }} fs-6">
|
|
{{ getBadge(product.expiry).text }}
|
|
</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row mb-4">
|
|
<div class="col-sm-4 text-muted">Kategoria:</div>
|
|
<div class="col-sm-8 fw-medium">{{ product.category }}</div>
|
|
</div>
|
|
<div class="row mb-4">
|
|
<div class="col-sm-4 text-muted">Ilość:</div>
|
|
<div class="col-sm-8 fw-medium">{{ product.amount }} {{ product.unit }}</div>
|
|
</div>
|
|
<div class="row mb-4">
|
|
<div class="col-sm-4 text-muted">Data ważności:</div>
|
|
<div class="col-sm-8 fw-medium">{{ product.expiry }}</div>
|
|
</div>
|
|
<div class="row mb-4">
|
|
<div class="col-sm-4 text-muted">Stan:</div>
|
|
<div class="col-sm-8 fw-medium">
|
|
{{ product.opened ? 'Otwarty' : 'Zamknięty' }}
|
|
</div>
|
|
</div>
|
|
@if (product.notes) {
|
|
<div class="row mb-4">
|
|
<div class="col-sm-4 text-muted">Notatki:</div>
|
|
<div class="col-sm-8">{{ product.notes }}</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div class="card-footer bg-white d-flex justify-content-between py-3">
|
|
<a routerLink="/pantry" class="btn btn-outline-secondary">Wróć do listy</a>
|
|
<button class="btn btn-danger" (click)="deleteProduct()">Usuń produkt</button>
|
|
</div>
|
|
</div>
|
|
} @else {
|
|
<div class="alert alert-danger">Produkt nie został znaleziony.</div>
|
|
<a routerLink="/pantry" class="btn btn-primary">Wróć do spiżarni</a>
|
|
}
|
|
`
|
|
})
|
|
export class ProductDetailComponent implements OnInit {
|
|
private route = inject(ActivatedRoute);
|
|
private router = inject(Router);
|
|
private pantryService = inject(PantryService);
|
|
|
|
product: Product | undefined;
|
|
|
|
ngOnInit() {
|
|
const id = Number(this.route.snapshot.paramMap.get('id'));
|
|
this.product = this.pantryService.getById(id);
|
|
}
|
|
|
|
getBadge(expiry: string) {
|
|
return EXPIRY_BADGE[getExpiryStatus(expiry)];
|
|
}
|
|
|
|
deleteProduct() {
|
|
if (this.product) {
|
|
this.pantryService.removeProduct(this.product.id);
|
|
this.router.navigate(['/pantry']);
|
|
}
|
|
}
|
|
} |