39 lines
1.1 KiB
Vue
39 lines
1.1 KiB
Vue
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import { RouterLink, useRoute } from 'vue-router';
|
|
|
|
import { getPublicListing } from '@/services/catalog-service.js';
|
|
import CollectibleDetail from '@/components/organisms/CollectibleDetail.vue';
|
|
|
|
const route = useRoute();
|
|
const listing = ref(null);
|
|
const isLoading = ref(true);
|
|
const error = ref(null);
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
listing.value = await getPublicListing(route.params.id);
|
|
} catch (requestError) {
|
|
error.value = requestError;
|
|
} finally {
|
|
isLoading.value = false;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<main class="detail-page">
|
|
<RouterLink class="detail-back" :to="{ name: 'catalog' }">Back to catalog</RouterLink>
|
|
<p v-if="isLoading" class="catalog-state">Loading listing...</p>
|
|
<p v-else-if="error" class="catalog-state catalog-state--error">{{ error.message }}</p>
|
|
<CollectibleDetail
|
|
v-else-if="listing"
|
|
:title="listing.productName"
|
|
:status="listing.status"
|
|
:price-minor="listing.askingPriceMinor"
|
|
:condition="listing.conditionId"
|
|
:description="listing.notes"
|
|
:images="listing.images"
|
|
/>
|
|
</main>
|
|
</template> |