working with inventory style changes - tbd
This commit is contained in:
Zach Harding
@@ -1,4 +1,6 @@
|
||||
---
|
||||
import { Show } from '@clerk/astro/components';
|
||||
|
||||
import ebay from "/vendors/ebay.svg?raw";
|
||||
import SetIcon from '../../components/SetIcon.astro';
|
||||
import EnergyIcon from '../../components/EnergyIcon.astro';
|
||||
@@ -168,6 +170,7 @@ const ebaySearchUrl = (card: any) => {
|
||||
const altSearchUrl = (card: any) => {
|
||||
return `https://alt.xyz/browse?query=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${encodeURIComponent(card?.number)}&sortBy=newest_first`;
|
||||
};
|
||||
|
||||
---
|
||||
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
|
||||
<div class="modal-content" data-card-id={card?.cardId}>
|
||||
@@ -248,11 +251,13 @@ const altSearchUrl = (card: any) => {
|
||||
<span class="d-none">Damaged</span><span class="d-inline">DMG</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link vendor" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false">
|
||||
<span class="d-none d-xxl-inline">Inventory</span><span class="d-xxl-none">+/-</span>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link vendor" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false">
|
||||
<span class="d-none d-xxl-inline">Inventory</span><span class="d-xxl-none">+/-</span>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="tab-content" id="myTabContent">
|
||||
@@ -336,176 +341,198 @@ const altSearchUrl = (card: any) => {
|
||||
);
|
||||
})}
|
||||
|
||||
<div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0">
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-md-6">
|
||||
<h5 class="my-3">Add {card?.productName} to inventory</h5>
|
||||
<div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0">
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-md-6">
|
||||
<h5 class="mt-1 mb-2">Add {card?.productName} to inventory</h5>
|
||||
|
||||
<form id="inventoryForm" data-inventory-form novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-4">
|
||||
<label for="quantity" class="form-label fw-medium">Quantity</label>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control mt-1"
|
||||
id="quantity"
|
||||
name="quantity"
|
||||
min="1"
|
||||
step="1"
|
||||
value="1"
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">Required.</div>
|
||||
</div>
|
||||
<form id="inventoryForm" data-inventory-form novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-4">
|
||||
<label for="quantity" class="form-label fw-medium">Quantity</label>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control mt-1"
|
||||
id="quantity"
|
||||
name="quantity"
|
||||
min="1"
|
||||
step="1"
|
||||
value="1"
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">Required.</div>
|
||||
</div>
|
||||
|
||||
<div class="col-8">
|
||||
<div class="d-flex justify-content-between align-items-start gap-2 flex-wrap">
|
||||
<label for="purchasePrice" class="form-label fw-medium mb-0 mt-1">
|
||||
Purchase price
|
||||
</label>
|
||||
<div class="col-8">
|
||||
<div class="d-flex justify-content-between align-items-start gap-2 flex-wrap">
|
||||
<label for="purchasePrice" class="form-label fw-medium">
|
||||
Purchase price
|
||||
</label>
|
||||
|
||||
<div class="btn-group btn-group-sm price-toggle" role="group" aria-label="Price mode">
|
||||
<div class="btn-group btn-group-sm price-toggle" role="group" aria-label="Price mode">
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="priceMode"
|
||||
id="mode-dollar"
|
||||
value="dollar"
|
||||
autocomplete="off"
|
||||
checked
|
||||
/>
|
||||
<label class="btn btn-outline-secondary" for="mode-dollar">$</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="priceMode"
|
||||
id="mode-percent"
|
||||
value="percent"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-outline-secondary" for="mode-percent">%</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-group-text mt-1" id="pricePrefix">$</span>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control mt-1 rounded-end"
|
||||
id="purchasePrice"
|
||||
name="purchasePrice"
|
||||
min="0"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
aria-describedby="pricePrefix priceSuffix priceHint"
|
||||
required
|
||||
/>
|
||||
<span class="input-group-text d-none mt-1" id="priceSuffix">%</span>
|
||||
</div>
|
||||
|
||||
<div class="form-text" id="priceHint">Enter the purchase price.</div>
|
||||
<div class="invalid-feedback">Enter a purchase price.</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-medium">Condition</label>
|
||||
<div class="btn-group condition-input w-100" role="group" aria-label="Condition">
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="priceMode"
|
||||
id="mode-dollar"
|
||||
value="dollar"
|
||||
name="condition"
|
||||
id="cond-nm"
|
||||
value="Near Mint"
|
||||
autocomplete="off"
|
||||
checked
|
||||
/>
|
||||
<label class="btn btn-outline-secondary" for="mode-dollar">$</label>
|
||||
<label class="btn btn-cond-nm" for="cond-nm">NM</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="priceMode"
|
||||
id="mode-percent"
|
||||
value="percent"
|
||||
name="condition"
|
||||
id="cond-lp"
|
||||
value="Lightly Played"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-outline-secondary" for="mode-percent">%</label>
|
||||
<label class="btn btn-cond-lp" for="cond-lp">LP</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-mp"
|
||||
value="Moderately Played"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-cond-mp" for="cond-mp">MP</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-hp"
|
||||
value="Heavily Played"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-cond-hp" for="cond-hp">HP</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-dmg"
|
||||
value="Damaged"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-cond-dmg" for="cond-dmg">DMG</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-group-text mt-1" id="pricePrefix">$</span>
|
||||
<div class="col-12">
|
||||
<label for="catalogName" class="form-label fw-medium">
|
||||
Catalog
|
||||
<span class="text-body-tertiary fw-normal ms-1 small">optional</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control mt-1 rounded-end"
|
||||
id="purchasePrice"
|
||||
name="purchasePrice"
|
||||
min="0"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
aria-describedby="pricePrefix priceSuffix priceHint"
|
||||
required
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="catalogName"
|
||||
name="catalogName"
|
||||
list="catalogSuggestions"
|
||||
placeholder="Default"
|
||||
autocomplete="off"
|
||||
maxlength="100"
|
||||
/>
|
||||
<span class="input-group-text d-none mt-1" id="priceSuffix">%</span>
|
||||
<datalist id="catalogSuggestions">
|
||||
|
||||
</datalist>
|
||||
<div class="form-text">
|
||||
Type a name or pick an existing catalog.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="note" class="form-label fw-medium">
|
||||
Note
|
||||
<span class="text-body-tertiary fw-normal ms-1 small">optional</span>
|
||||
</label>
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="note"
|
||||
name="note"
|
||||
rows="2"
|
||||
maxlength="255"
|
||||
placeholder="e.g. bought at local shop, gift, graded copy…"
|
||||
></textarea>
|
||||
<div class="form-text text-end" id="noteCount">0 / 255</div>
|
||||
</div>
|
||||
|
||||
<div class="form-text" id="priceHint">Enter the purchase price.</div>
|
||||
<div class="invalid-feedback">Enter a purchase price.</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-medium">Condition</label>
|
||||
<div class="btn-group condition-input w-100" role="group" aria-label="Condition">
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-nm"
|
||||
value="Near Mint"
|
||||
autocomplete="off"
|
||||
checked
|
||||
/>
|
||||
<label class="btn btn-cond-nm" for="cond-nm">NM</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-lp"
|
||||
value="Lightly Played"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-cond-lp" for="cond-lp">LP</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-mp"
|
||||
value="Moderately Played"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-cond-mp" for="cond-mp">MP</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-hp"
|
||||
value="Heavily Played"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-cond-hp" for="cond-hp">HP</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-dmg"
|
||||
value="Damaged"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-cond-dmg" for="cond-dmg">DMG</label>
|
||||
<div class="col-12 d-flex gap-3 pt-2">
|
||||
<button type="reset" class="btn btn-outline-danger flex-fill">Reset</button>
|
||||
<button type="submit" class="btn btn-success flex-fill">Save to inventory</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label for="note" class="form-label fw-medium">
|
||||
Note
|
||||
<span class="text-body-tertiary fw-normal ms-1 small">optional</span>
|
||||
</label>
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="note"
|
||||
name="note"
|
||||
rows="2"
|
||||
maxlength="255"
|
||||
placeholder="e.g. bought at local shop, gift, graded copy…"
|
||||
></textarea>
|
||||
<div class="form-text text-end" id="noteCount">0 / 255</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 d-flex gap-3 pt-2">
|
||||
<button type="reset" class="btn btn-outline-danger flex-fill">Reset</button>
|
||||
<button type="submit" class="btn btn-success flex-fill">Save to inventory</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6">
|
||||
<h5 class="my-3">Inventory entries for {card?.productName}</h5>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div class="alert alert-dark border-0 rounded-4 d-none" id="inventoryEmptyState">
|
||||
<div class="fw-medium mb-1">No inventory entries yet</div>
|
||||
<div class="text-secondary small">
|
||||
Once you add copies of this card, they'll show up here.
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Inventory list -->
|
||||
<div class="d-flex flex-column gap-3" id="inventoryEntryList" data-card-id={cardId}>
|
||||
<span>Loading...</span>
|
||||
<div class="col-12 col-md-6">
|
||||
<h5 class="mt-1 mb-2">Inventory entries for {card?.productName}</h5>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div class="alert alert-dark border-0 rounded-4 d-none" id="inventoryEmptyState">
|
||||
<div class="fw-medium mb-1">No inventory entries yet</div>
|
||||
<div class="text-secondary small">
|
||||
Once you add copies of this card, they'll show up here.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inventory list -->
|
||||
<div class="d-flex flex-column gap-3" id="inventoryEntryList" data-card-id={cardId}>
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Chart lives permanently outside tab-content so Bootstrap never hides it. -->
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
---
|
||||
import { client } from '../../db/typesense';
|
||||
|
||||
import { Show } from '@clerk/astro/components';
|
||||
|
||||
import RarityIcon from '../../components/RarityIcon.astro';
|
||||
import FirstEditionIcon from "../../components/FirstEditionIcon.astro";
|
||||
export const prerender = false;
|
||||
@@ -283,9 +286,11 @@ const facets = searchResults.results.slice(1).map((result: any) => {
|
||||
|
||||
{pokemon.map((card:any) => (
|
||||
<div class="col">
|
||||
<button type="button" class="btn btn-sm inventory-button position-relative float-end shadow-filter text-center p-2" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="event.stopPropagation(); sessionStorage.setItem('openModalTab', 'nav-vendor');">
|
||||
<b>+/–</b>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-sm inventory-button position-relative float-end shadow-filter text-center p-2" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="event.stopPropagation(); sessionStorage.setItem('openModalTab', 'nav-vendor');">
|
||||
<b>+/–</b>
|
||||
</button>
|
||||
|
||||
<div class="card-trigger position-relative" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="const cardTitle = this.querySelector('#cardImage').getAttribute('alt'); dataLayer.push({'event': 'virtualPageview', 'pageUrl': this.getAttribute('hx-get'), 'pageTitle': cardTitle, 'previousUrl': '/pokemon'});">
|
||||
<div class="image-grow rounded-4 card-image" data-energy={card.energyType} data-rarity={card.rarityName} data-variant={card.variant} data-name={card.productName}><img src={`/static/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 w-100" onerror="this.onerror=null; this.src='/static/cards/default.jpg'; this.closest('.image-grow')?.setAttribute('data-default','true')"/><span class="position-absolute top-50 start-0 d-inline medium-icon"><FirstEditionIcon edition={card?.variant} /></span>
|
||||
<div class="holo-shine"></div>
|
||||
|
||||
Reference in New Issue
Block a user