[feat] modal dialog pulls from db

src/components/Card.astro

@@ -38,7 +38,7 @@ const formatPrice = (price:any) => {
 const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
 ---
 {pokemon.map((card) => (
-    <div data-bs-toggle="modal" data-bs-target="#cardModal">
+    <div hx-get={`/partials/card-modal?productId=${card.productId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal">
     <div class="col tcg-card">
         <img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
         <div class="row row-cols-5 gx-1 price-row mb-2">

src/layouts/Main.astro

@@ -28,5 +28,6 @@ import '/src/assets/css/main.scss';
       // import 'bootstrap/js/dist/toast';
       // import 'bootstrap/js/dist/tooltip';
     </script>
+    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
   </body>
 </html>

src/pages/partials/card-modal.astro

@@ -1,19 +1,29 @@
 ---
-import Card from '../components/Card.astro';
 import ebay from "/vendors/ebay.svg?raw";
-import EnergyIcon from './EnergyIcon.astro';
+import { db } from '../../db/index.ts';
-import RarityIcon from './RarityIcon.astro';
-import SetIcon from './SetIcon.astro';
----
 
-<!-- Modal -->
+export const partial = true;
-<div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
+export const prerender = false;
+
+const searchParams = Astro.url.searchParams;
+const productId = Number(searchParams.get('productId')) || 0;
+
+
+// query the database for the card with the given productId and return the card data as json
+const card = await db.query.cards.findFirst({
+    where: { productId: Number(productId) },
+    with: {
+        prices: true,
+        set: true,
+    }
+});
+
+---
+<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
   <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
     <div class="modal-content">
       <div class="modal-header border-0">
-        <div class="container-fluid">
+        <h4 class="card-title">{card?.productName} | <span class="text-secondary">{card?.number}</span> {card?.energyType}</h4>
-            <span class="h4 card-title w-100 pe-2">Pikachu</span><span class="text-secondary smaller ps-2 border-start">070/111</span>
-        </div>
         <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
       </div>        
         <div class="modal-body pt-0">
@@ -21,8 +31,8 @@ import SetIcon from './SetIcon.astro';
             <div class="card mb-2 border-0">
             <div class="row g-4">
                 <div class="col-sm-12 col-md-3">
-                    <h6 class="text-secondary">Neo Genesis</h6>
+                    <h6 class="text-secondary">Set name | Set Symbol</h6>
-                    <div class="position-relative d-inline-block"><img src="/cards/88072.jpg" class="card-image img-fluid rounded" alt="..."><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set="Neo Genesis" /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy="Electric" /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity="Common" /></span></div>
+                    <img src={`/cards/${card?.productId}.jpg`} class="card-image img-fluid rounded" alt="...">
                     <div class="d-flex flex-row justify-content-between mt-2">
                     <div class="h6 text-secondary">Naoyo Kimura</div>
                     </div>

src/pages/pokemon.astro

@@ -2,7 +2,6 @@
 import Layout from '../layouts/Main.astro';
 import CardGrid from "../components/CardGrid.astro";
 import Card from "../components/Card.astro";
-import CardModal from "../components/CardModal.astro";
 import StickyFilter from '../components/StickyFilter.astro';
 
 export const prerender = false;
@@ -21,7 +20,12 @@ const query = searchParams.get('q') || '*';
     <CardGrid>
         <Card slot="Card" query={query}></Card>
     </CardGrid>
-    <CardModal></CardModal>
+
-</div>
+    <div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
+            <div class="modal-content">
+            </div>
+        </div>
+    </div>
 </div>
 </Layout>