feat(purchase-detail): add purchase detail page with routing and mock data
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
<div class="purchase-item">
|
||||
<div class="purchase-item" [routerLink]="[purchase.id]" style="cursor: pointer;">
|
||||
<div class="purchase-info">
|
||||
<span class="purchase-id">Compra {{ purchase.id }}.</span>
|
||||
<span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { RouterLink } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-purchase-list-item',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
imports: [RouterLink],
|
||||
templateUrl: './purchase-list-item.html',
|
||||
styleUrl: './purchase-list-item.scss',
|
||||
})
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
<div class="page-container">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<a routerLink="../" class="text-decoration-none me-3" style="color: #888;">
|
||||
<i class="bi bi-arrow-left fs-5"></i>
|
||||
</a>
|
||||
<h2 class="page-title m-0">MIS COMPRAS</h2>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-end mb-4 pb-2 border-bottom">
|
||||
<div class="purchase-info pb-3">
|
||||
<span class="purchase-id">Compra #{{ purchase.id }}.</span>
|
||||
<span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
|
||||
</div>
|
||||
<div class="purchase-total pb-3">
|
||||
<span class="purchase-total-label">Total:</span>
|
||||
<span class="purchase-total-value">${{ purchase.total }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mb-3" style="font-size: 12px; color: #666666; font-weight: 325;">Productos:</p>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
@for (product of purchase.products; track product.id) {
|
||||
<article class="w-100 py-3 rounded-0 cart-item">
|
||||
<div class="position-relative overflow-hidden cart-item-media">
|
||||
@if (product.discountPercentage) {
|
||||
<span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ product.discountPercentage }}%</span>
|
||||
}
|
||||
|
||||
@if (product.imageUrl) {
|
||||
<img class="w-100 h-100 object-fit-cover d-block" [src]="product.imageUrl" [alt]="product.name" />
|
||||
} @else {
|
||||
<div class="w-100 h-100 cart-item-placeholder" aria-hidden="true"></div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="d-grid min-w-0 cart-item-content">
|
||||
<div class="d-grid align-items-start cart-item-top-row">
|
||||
<h3 class="m-0 text-uppercase fw-bold cart-item-product">{{ product.name }}</h3>
|
||||
|
||||
<div class="text-nowrap cart-item-prices">
|
||||
@if (product.originalPrice) {
|
||||
<span class="text-decoration-line-through mb-1 fw-light cart-item-original-price">$ {{ product.originalPrice }}</span>
|
||||
}
|
||||
<span class="fw-bold cart-item-discounted-price">$ {{ product.discountedPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mt-auto">
|
||||
<div class="d-grid cart-item-attributes">
|
||||
<div class="cart-item-attribute">
|
||||
<span class="fw-normal cart-item-attribute-label">Cantidad: </span>
|
||||
<span class="fw-bold">{{ product.quantity }} unidad</span>
|
||||
</div>
|
||||
<div class="cart-item-attribute">
|
||||
<span class="fw-normal cart-item-attribute-label">Color: </span>
|
||||
<span class="fw-bold">{{ product.color }}</span>
|
||||
</div>
|
||||
<div class="cart-item-attribute">
|
||||
<span class="fw-normal cart-item-attribute-label">Talle: </span>
|
||||
<span class="fw-bold">{{ product.size }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cart-item-transfer-price text-end">
|
||||
<span class="fw-bold">${{ product.transferPrice }}</span>
|
||||
<span class="fw-normal ms-1">con transferencia</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,142 @@
|
||||
.page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.purchase-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.purchase-id {
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
font-size: 13px;
|
||||
}
|
||||
.purchase-date {
|
||||
font-weight: 325;
|
||||
color: #666666;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.purchase-total {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.purchase-total-label {
|
||||
font-size: 13px;
|
||||
color: #666666;
|
||||
font-weight: 325;
|
||||
}
|
||||
.purchase-total-value {
|
||||
color: var(--bs-primary, #5b75ff);
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
display: grid;
|
||||
grid-template-columns: 90px minmax(0, 1fr);
|
||||
gap: 0.75rem;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.cart-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.cart-item-media {
|
||||
width: 90px;
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: 5px 0 0 5px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #eaeaea;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-item-discount-badge {
|
||||
padding: 2px 5px;
|
||||
border-bottom-right-radius: 4px;
|
||||
background-color: var(--bs-primary, #5b75ff);
|
||||
color: #ffffff;
|
||||
font-size: 8px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cart-item-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
|
||||
}
|
||||
|
||||
.cart-item-content {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.cart-item-top-row {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.cart-item-product {
|
||||
color: #666666;
|
||||
font-size: 12px;
|
||||
line-height: 1.25;
|
||||
font-weight: 325;
|
||||
}
|
||||
|
||||
.cart-item-prices {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.cart-item-original-price {
|
||||
color: #a0a0a0;
|
||||
font-size: 10px;
|
||||
font-weight: 325;
|
||||
}
|
||||
|
||||
.cart-item-discounted-price {
|
||||
color: var(--bs-primary, #5b75ff);
|
||||
font-size: 13px;
|
||||
font-weight: 425;
|
||||
}
|
||||
|
||||
.cart-item-attributes {
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.cart-item-attribute {
|
||||
color: #666666;
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.cart-item-attribute-label {
|
||||
font-weight: 325;
|
||||
}
|
||||
|
||||
.cart-item-transfer-price {
|
||||
color: #666666;
|
||||
font-size: 10px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
import { ActivatedRoute, RouterLink } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-purchase-detail-page',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterLink],
|
||||
templateUrl: './purchase-detail-page.html',
|
||||
styleUrl: './purchase-detail-page.scss',
|
||||
})
|
||||
export class PurchaseDetailPage {
|
||||
purchaseId = 'A00013';
|
||||
|
||||
// Mocked data based on the provided image
|
||||
purchase = {
|
||||
id: this.purchaseId,
|
||||
date: '15/04/2026',
|
||||
total: '365.480,00',
|
||||
products: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'PANTALÓN RECTO DE SCUBA NEGRO',
|
||||
quantity: 1,
|
||||
color: 'Beige',
|
||||
size: 'S',
|
||||
originalPrice: '95.000',
|
||||
discountedPrice: '76.000',
|
||||
transferPrice: '74.800',
|
||||
discountPercentage: '20',
|
||||
imageUrl: '' // placeholder
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'CALZA SIN TIRO DE LYCRA METALIZADA BORDEAU',
|
||||
quantity: 1,
|
||||
color: 'Beige',
|
||||
size: 'M',
|
||||
originalPrice: '68.500',
|
||||
discountedPrice: '61.000',
|
||||
transferPrice: '59.800',
|
||||
discountPercentage: '10',
|
||||
imageUrl: ''
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'CALZA TÉRMICA UNISEX CON PROCESO SENSE Y CINTURA CON MAYOR AGARRE',
|
||||
quantity: 1,
|
||||
color: 'Beige',
|
||||
size: 'M',
|
||||
originalPrice: null,
|
||||
discountedPrice: '120.000',
|
||||
transferPrice: '180.000',
|
||||
discountPercentage: null,
|
||||
imageUrl: ''
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'CALZA SIN TIRO DE LYCRA METALIZADA BORDEAU',
|
||||
quantity: 1,
|
||||
color: 'Beige',
|
||||
size: 'M',
|
||||
originalPrice: '68.500',
|
||||
discountedPrice: '61.000',
|
||||
transferPrice: '59.800',
|
||||
discountPercentage: '10',
|
||||
imageUrl: ''
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
constructor(private route: ActivatedRoute) {
|
||||
this.route.params.subscribe(params => {
|
||||
if (params['id']) {
|
||||
this.purchaseId = params['id'];
|
||||
this.purchase.id = this.purchaseId;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -88,6 +88,13 @@ export const routes: Routes = [
|
||||
(m) => m.PurchasesPage
|
||||
)
|
||||
},
|
||||
{
|
||||
path: 'compras/:id',
|
||||
loadComponent: () =>
|
||||
import('./pages/account-page/pages/purchase-detail-page/purchase-detail-page').then(
|
||||
(m) => m.PurchaseDetailPage
|
||||
)
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
redirectTo: 'datos-personales',
|
||||
|
||||
Reference in New Issue
Block a user