Auction show dialog

src/components/auctions/Index.vue

@@ -1,7 +1,9 @@
 <script setup>
-import {ref, computed, onMounted} from "vue";
+import {ref, computed, onMounted, defineProps} from "vue";
+
 import {request} from "../lib/gateway.js";
 import {loadToken} from "../scripts/load_token.js";
+import {setAuction} from "./current_auction_store.js";
 
 const pending = Symbol('pending')
 
@@ -9,6 +11,8 @@ const qref = ref(pending)
 const isPending = computed(() => qref.value === pending)
 const data = computed(() => qref.value.data)
 
+const {path} = defineProps(['path'])
+
 async function loadAuctions() { // TODO: add params
   let token = loadToken()
   if(!token.token) return;
@@ -30,6 +34,16 @@ function formatPrice(price) {
 
   return fmt.format(price)
 }
+
+const auctionPath = (id) => path + `?id=${id}`
+
+function navigateToAuction(auction) {
+  let {id} = auction
+  let path = auctionPath(id)
+  history.pushState({...auction}, null, path)
+  setAuction(auction)
+}
+
 </script>
 
 <template>
@@ -40,7 +54,9 @@ function formatPrice(price) {
   <div v-else-if="!isPending && data != null && data.length > 0" class="auctions-section" role="list">
     <div v-for="auction in data" :key="auction.id" class="card" role="listitem">
       <div class="card-body">
-        <h2 class="h5">{{ auction.name }}</h2>
+        <h2 class="h5">
+          <a :href="auctionPath(auction.id)" @click.prevent="navigateToAuction(auction)">{{ auction.name }}</a>
+        </h2>
         <p class="text-end">{{ formatPrice(auction.currentBid || auction.startingPrice) }}</p>
       </div>
     </div>

src/components/auctions/ShowDialog.vue

@@ -0,0 +1,45 @@
+<script setup>
+import {watch, useTemplateRef, onMounted, defineProps} from "vue";
+import {useStore} from "@nanostores/vue";
+
+import {$currentAuction, resetAuction} from "./current_auction_store.js";
+
+const currentAuction = useStore($currentAuction)
+const dialogRef = useTemplateRef('dialog')
+const {path} = defineProps(['path'])
+
+const showDialog = () => dialogRef.value.showModal()
+
+onMounted(() => {
+  if(currentAuction.value !== null) showDialog()
+})
+
+watch(currentAuction,
+    (val, prevVal) => {
+      if (val !== null && prevVal == null) showDialog()
+      if (val == null) dialogRef.value.close()
+    },
+    {flush: 'post'})
+</script>
+
+<template>
+  <dialog ref="dialog" @close="resetAuction(path)">
+    <div class="card" v-if="currentAuction !== null">
+      <div class="card-body">
+        <h2 class="h5">{{currentAuction.name}}</h2>
+        <div class="buttons">
+          <button type="button" class="btn btn-primary">Bid</button>
+          <button type="button" class="btn btn-outline-secondary" @click="$el.close()">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<style scoped>
+dialog {
+  /* TODO: maybe make it global */
+  min-width: min(90vw, 20rem);
+  padding: 0;
+}
+</style>

src/components/auctions/current_auction_store.js

@@ -0,0 +1,12 @@
+import { atom } from "nanostores";
+
+export const $currentAuction = atom(null);
+
+export function setAuction(data) {
+    $currentAuction.set(data)
+}
+
+export function resetAuction(path) {
+    history.pushState(null, null, path)
+    $currentAuction.set(null)
+}

src/components/auctions/scripts/current_auction_store_history.js

@@ -0,0 +1,6 @@
+import {setAuction} from "../current_auction_store.js";
+
+window.addEventListener('popstate', (event) => {
+    let {state} = event
+    setAuction(state)
+})

src/pages/auctions.astro

@@ -2,10 +2,13 @@
 import Layout from '../layouts/Layout.astro';
 
 import Auctions from '../components/auctions/Index.vue'
+import AuctionShowDialog from '../components/auctions/ShowDialog.vue'
 ---
 
 <Layout title="Auctions">
-    <Auctions client:load />
+    <Auctions path={ Astro.url.pathname } client:load />
+    <AuctionShowDialog path={ Astro.url.pathname } client:load />
 
     <script src="../components/lib/check_user.js"></script>
+    <script src="../components/auctions/scripts/current_auction_store_history.js"></script>
 </Layout>