feat: add public product detail web flow

2026-09-08 19:56:44 -04:00
parent 7e5ca1448f
commit 5916ce1ff5
6 changed files with 74 additions and 0 deletions
@@ -0,0 +1,40 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { RouterLink, useRoute } from 'vue-router';
+
+import { getPublicProduct } from '@/services/catalog-service.js';
+
+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">Loading product...</p>
+    <p v-else-if="error" class="catalog-state catalog-state--error">{{ error.message }}</p>
+    <article v-else-if="product" class="detail-content">
+      <p class="catalog-kicker">Product catalog</p>
+      <h1>{{ product.name }}</h1>
+      <p v-if="product.description" class="detail-notes">{{ product.description }}</p>
+      <dl class="product-facts">
+        <div v-if="product.brand"><dt>Brand</dt><dd>{{ product.brand }}</dd></div>
+        <div v-if="product.setName"><dt>Set</dt><dd>{{ product.setName }}</dd></div>
+        <div v-if="product.cardNumber"><dt>Card number</dt><dd>{{ product.cardNumber }}</dd></div>
+        <div v-if="product.releaseYear"><dt>Release year</dt><dd>{{ product.releaseYear }}</dd></div>
+      </dl>
+    </article>
+  </main>
+</template>