tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(purchase-detail): implement purchase item component with dynamic attributes and styling

Browse Source
This commit is contained in:
ncoronel
2026-07-08 14:09:51 -03:00
parent 5e9a5917fd
commit a9dc55c274
6 changed files with 186 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/app/features/store/pages/account-page/components/purchase-item/purchase-item.html Normal file
View File

@@ -0,0 +1,49 @@
<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-flex justify-content-between w-100 h-100 py-1">
<!-- Left Column -->
<div class="d-flex flex-column justify-content-between h-100 pe-2" style="max-width: 65%;">
<h3 class="m-0 text-uppercase fw-bold cart-item-product">{{ product.name }}</h3>
<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>
@for (attribute of product.attributes; track attribute.label) {
<div class="cart-item-attribute">
<span class="fw-normal cart-item-attribute-label">{{ attribute.label }}: </span>
<span class="fw-bold">{{ attribute.value }}</span>
</div>
}
</div>
</div>
<!-- Right Column -->
<div class="d-flex flex-column position-relative text-end flex-grow-1 h-100">
<div class="cart-item-prices d-flex flex-column align-items-end">
@if (product.originalPrice) {
<span class="text-decoration-line-through fw-light cart-item-original-price">$ {{ product.originalPrice }}</span>
}
<span class="fw-bold cart-item-discounted-price">$ {{ product.discountedPrice }}</span>
</div>
<div class="cart-item-transfer-price position-absolute top-50 end-0 translate-middle-y w-100">
<span class="fw-bold">${{ product.transferPrice }}</span> con transferencia
</div>
</div>
</div>
</article>

101
src/app/features/store/pages/account-page/components/purchase-item/purchase-item.scss Normal file
View File

@@ -0,0 +1,101 @@
:host {
display: block;
border-bottom: 1px solid #dddddd;
}
:host(:last-child) {
border-bottom: none;
}
.cart-item {
display: grid;
grid-template-columns: 90px minmax(0, 1fr);
gap: 0.75rem;
background-color: transparent;
position: relative;
}
.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: 15px;
font-weight: bold;
}
.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;
}

12
src/app/features/store/pages/account-page/components/purchase-item/purchase-item.ts Normal file
View File

@@ -0,0 +1,12 @@
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-purchase-item',
standalone: true,
imports: [],
templateUrl: './purchase-item.html',
styleUrl: './purchase-item.scss',
})
export class PurchaseItem {
@Input() product!: any;
}

58
src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html
View File

@@ -6,72 +6,22 @@
<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="d-flex justify-content-between align-items-end mb-4 pb-2" style="border-bottom: 1px solid #dddddd;">
<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">
<div class="purchase-total ">
<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>
<p style="font-size: 12px; color: #666666; margin:0;">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-flex justify-content-between w-100 h-100 py-1">
<!-- Left Column -->
<div class="d-flex flex-column justify-content-between h-100 pe-2" style="max-width: 65%;">
<h3 class="m-0 text-uppercase fw-bold cart-item-product">{{ product.name }}</h3>
<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>
<!-- Right Column -->
<div class="d-flex flex-column position-relative text-end flex-grow-1 h-100">
<div class="cart-item-prices d-flex flex-column align-items-end">
@if (product.originalPrice) {
<span class="text-decoration-line-through fw-light cart-item-original-price">$ {{ product.originalPrice }}</span>
}
<span class="fw-bold cart-item-discounted-price">$ {{ product.discountedPrice }}</span>
</div>
<div class="cart-item-transfer-price position-absolute top-50 end-0 translate-middle-y w-100">
<span class="fw-bold">${{ product.transferPrice }}</span> con transferencia
</div>
</div>
</div>
</article>
<app-purchase-item [product]="product"></app-purchase-item>
}
</div>
</div>

102
src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.scss
View File

@@ -33,110 +33,12 @@
gap: 0.5rem;
}
.purchase-total-label {
font-size: 13px;
font-size: 17px;
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;
font-size: 17px;
}

27
src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.ts
View File

@@ -1,11 +1,12 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { PurchaseItem } from '../../components/purchase-item/purchase-item';
@Component({
selector: 'app-purchase-detail-page',
standalone: true,
imports: [CommonModule, RouterLink],
imports: [CommonModule, RouterLink, PurchaseItem],
templateUrl: './purchase-detail-page.html',
styleUrl: './purchase-detail-page.scss',
})
@@ -22,8 +23,10 @@ export class PurchaseDetailPage {
id: 1,
name: 'PANTALÓN RECTO DE SCUBA NEGRO',
quantity: 1,
color: 'Beige',
size: 'S',
attributes: [
{ label: 'Color', value: 'Beige' },
{ label: 'Talle', value: 'S' }
],
originalPrice: '95.000',
discountedPrice: '76.000',
transferPrice: '74.800',
@@ -34,8 +37,10 @@ export class PurchaseDetailPage {
id: 2,
name: 'CALZA SIN TIRO DE LYCRA METALIZADA BORDEAU',
quantity: 1,
color: 'Beige',
size: 'M',
attributes: [
{ label: 'Color', value: 'Beige' },
{ label: 'Talle', value: 'M' }
],
originalPrice: '68.500',
discountedPrice: '61.000',
transferPrice: '59.800',
@@ -46,8 +51,10 @@ export class PurchaseDetailPage {
id: 3,
name: 'CALZA TÉRMICA UNISEX CON PROCESO SENSE Y CINTURA CON MAYOR AGARRE',
quantity: 1,
color: 'Beige',
size: 'M',
attributes: [
{ label: 'Color', value: 'Beige' },
{ label: 'Talle', value: 'M' }
],
originalPrice: null,
discountedPrice: '120.000',
transferPrice: '180.000',
@@ -58,8 +65,10 @@ export class PurchaseDetailPage {
id: 4,
name: 'CALZA SIN TIRO DE LYCRA METALIZADA BORDEAU',
quantity: 1,
color: 'Beige',
size: 'M',
attributes: [
{ label: 'Color', value: 'Beige' },
{ label: 'Talle', value: 'M' }
],
originalPrice: '68.500',
discountedPrice: '61.000',
transferPrice: '59.800',