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>