73 lines
2.0 KiB
Vue
73 lines
2.0 KiB
Vue
<script setup>
|
|
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')
|
|
|
|
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;
|
|
|
|
try {
|
|
let response = await request("/auctions", {cors: true, token: token.token})
|
|
qref.value = {error: null, headers: response.headers, data: await response.json()}
|
|
} catch (error) {
|
|
qref.value = {error}
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await loadAuctions()
|
|
})
|
|
|
|
function formatPrice(price) {
|
|
const fmt = new Intl.NumberFormat("en-US", {style: "currency", currency: "USD"}) // TODO: maybe load currency from backend or env
|
|
|
|
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>
|
|
<template v-if="isPending">
|
|
<div class="spinner-border me-1" role="status"></div>
|
|
<span>Loading…</span>
|
|
</template>
|
|
<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">
|
|
<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>
|
|
</div>
|
|
<p v-else>No auctions available</p>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.auctions-section {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
|
|
gap: 1em;
|
|
}
|
|
</style> |