tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

style tweaks to both form and existing inventory, added createdAt and modified purchasePrice (for % of market)

Browse Source
This commit is contained in:
Zach Harding
2026-04-05 16:09:52 -04:00
parent 87235ab37a
commit 404355304c
8 changed files with 1914 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/pages/partials/card-modal.astro
View File

@@ -1,6 +1,4 @@
---
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';
@@ -12,6 +10,18 @@ import FirstEditionIcon from "../../components/FirstEditionIcon.astro";
import { Tooltip } from "bootstrap";
import { clerkClient } from '@clerk/astro/server';
const { userId, has } = Astro.locals.auth();
const TARGET_ORG_ID = 'org_3Baav9czkRLLlC7g89oJWqRRulK';
let hasAccess = has({ feature: 'inventory_add' });
if (!hasAccess && userId) {
const memberships = await clerkClient(Astro).users.getOrganizationMembershipList({ userId });
hasAccess = memberships.data.some(m => m.organization.id === TARGET_ORG_ID);
}
export const partial = true;
export const prerender = false;
@@ -163,6 +173,14 @@ const conditionAttributes = (price: any) => {
}[condition];
};
// ── Build a market price lookup keyed by condition for use in JS ──────────
const marketPriceByCondition: Record<string, number> = {};
for (const price of card?.prices ?? []) {
if (price.condition && price.marketPrice != null) {
marketPriceByCondition[price.condition] = Number(price.marketPrice);
}
}
const ebaySearchUrl = (card: any) => {
return `https://www.ebay.com/sch/i.html?_nkw=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${encodeURIComponent(card?.number)}&LH_Sold=1&Graded=No&_dcat=183454`;
};
@@ -251,13 +269,13 @@ const altSearchUrl = (card: any) => {
<span class="d-none">Damaged</span><span class="d-inline">DMG</span>
</button>
</li>
{hasAccess && (
<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">
@@ -314,7 +332,7 @@ const altSearchUrl = (card: any) => {
<!-- Table only — chart is outside the tab panes -->
<div class="w-100">
<div class="alert alert-dark rounded p-2 mb-0 table-responsive">
<div class="alert alert-dark rounded p-2 mb-0 table-responsive d-none">
<h6>Latest Verified Sales</h6>
<table class="table table-sm mb-0">
<caption class="small">Filtered to remove mismatched language variants</caption>
@@ -340,16 +358,16 @@ const altSearchUrl = (card: any) => {
</div>
);
})}
{hasAccess && (
<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>
<h6 class="mt-1 mb-2">Add {card?.productName} to inventory</h6>
<form id="inventoryForm" data-inventory-form novalidate>
<div class="row g-3">
<div class="row gx-3 gy-1">
<div class="col-4">
<label for="quantity" class="form-label fw-medium">Quantity</label>
<label for="quantity" class="form-label">Quantity</label>
<input
type="number"
class="form-control mt-1"
@@ -365,7 +383,7 @@ const altSearchUrl = (card: any) => {
<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">
<label for="purchasePrice" class="form-label">
Purchase price
</label>
@@ -414,7 +432,7 @@ const altSearchUrl = (card: any) => {
</div>
<div class="col-12">
<label class="form-label fw-medium">Condition</label>
<label class="form-label">Condition</label>
<div class="btn-group condition-input w-100" role="group" aria-label="Condition">
<input
type="radio"
@@ -469,9 +487,8 @@ const altSearchUrl = (card: any) => {
</div>
</div>
<div class="col-12">
<label for="catalogName" class="form-label fw-medium">
<label for="catalogName" class="form-label">
Catalog
<span class="text-body-tertiary fw-normal ms-1 small">optional</span>
</label>
<input
type="text"
@@ -491,9 +508,8 @@ const altSearchUrl = (card: any) => {
</div>
</div>
<div class="col-12">
<label for="note" class="form-label fw-medium">
<label for="note" class="form-label">
Note
<span class="text-body-tertiary fw-normal ms-1 small">optional</span>
</label>
<textarea
class="form-control"
@@ -515,10 +531,10 @@ const altSearchUrl = (card: any) => {
</div>
<div class="col-12 col-md-6">
<h5 class="mt-1 mb-2">Inventory entries for {card?.productName}</h5>
<h6 class="mt-1 mb-2">Inventory entries for {card?.productName}</h6>
<!-- Empty state -->
<div class="alert alert-dark border-0 rounded-4 d-none" id="inventoryEmptyState">
<div class="alert alert-dark 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.
@@ -526,17 +542,17 @@ const altSearchUrl = (card: any) => {
</div>
<!-- Inventory list -->
<div class="d-flex flex-column gap-3" id="inventoryEntryList" data-card-id={cardId}>
<div class="d-flex flex-column gap-3" id="inventoryEntryList" data-card-id={cardId} data-market-prices={JSON.stringify(marketPriceByCondition)}>
<span>Loading...</span>
</div>
</div>
</div>
</div>
)}
</div>
<!-- Chart lives permanently outside tab-content so Bootstrap never hides it. -->
<div class="d-block d-lg-flex gap-1 mt-1">
<div class="d-block d-lg-flex gap-1 mt-1 price-chart-container">
<div class="col-12">
<div class="alert alert-dark rounded p-2 mb-0">
<h6>Market Price History</h6>