feat: add public listing detail web flow

2026-09-08 19:40:11 -04:00
parent 3d17637711
commit fd6d4cf37b
10 changed files with 128 additions and 16 deletions
@@ -0,0 +1,35 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { RouterLink, useRoute } from 'vue-router';
+
+import { getPublicListing } from '@/services/catalog-service.js';
+
+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>
+    <article v-else-if="listing" class="detail-content">
+      <p class="catalog-kicker">{{ listing.status }}</p>
+      <h1>{{ listing.productName }}</h1>
+      <p class="detail-price">${{ (listing.askingPriceMinor / 100).toFixed(2) }}</p>
+      <p v-if="listing.notes" class="detail-notes">{{ listing.notes }}</p>
+    </article>
+  </main>
+</template>