46 lines
1.6 KiB
Vue
46 lines
1.6 KiB
Vue
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import { RouterLink, useRoute } from 'vue-router';
|
|
|
|
import { getPublicProduct } from '@/services/catalog-service.js';
|
|
import CollectibleDetail from '@/components/organisms/CollectibleDetail.vue';
|
|
|
|
const route = useRoute();
|
|
const product = ref(null);
|
|
const isLoading = ref(true);
|
|
const error = ref(null);
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
product.value = await getPublicProduct(route.params.slug);
|
|
} 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" role="status">Loading product...</p>
|
|
<p v-else-if="error" class="catalog-state catalog-state--error" role="alert">{{ error.message }}</p>
|
|
<CollectibleDetail
|
|
v-else-if="product"
|
|
:title="product.name"
|
|
:description="product.description"
|
|
:images="product.images"
|
|
:facts="[
|
|
...(product.brand ? [{ label: 'Brand', value: product.brand }] : []),
|
|
...(product.setName ? [{ label: 'Set', value: product.setName }] : []),
|
|
...(product.cardNumber ? [{ label: 'Card number', value: product.cardNumber }] : []),
|
|
...(product.releaseYear ? [{ label: 'Release year', value: product.releaseYear }] : []),
|
|
]"
|
|
:seller-description="product.sellerDescription"
|
|
:seller-display-name="product.sellerDisplayName"
|
|
:seller-contact-email="product.sellerContactEmail"
|
|
:seller-contact-phone="product.sellerContactPhone"
|
|
/>
|
|
</main>
|
|
</template> |