feat: new proof detail page

src/components/PriceCard.vue

@@ -35,7 +35,7 @@
         </v-col>
       </v-row>
 
-      <PriceFooter v-if="price && !hidePriceFooter" class="mt-2" :price="price" :hidePriceLocation="hidePriceLocation" :readonly="readonly"></PriceFooter>
+      <PriceFooter v-if="price && !hidePriceFooter" class="mt-2" :price="price" :hidePriceLocation="hidePriceLocation" :hidePriceProof="hidePriceProof" :readonly="readonly"></PriceFooter>
     </v-container>
   </v-card>
 </template>
@@ -61,6 +61,7 @@ export default {
     'hidePriceDate': false,
     'hidePriceFooter': false,
     'hidePriceLocation': false,
+    'hidePriceProof': false,
     'readonly': false
   },
   data() {

src/components/PriceFooter.vue

@@ -13,7 +13,7 @@
 
     <RelativeDateTimeChip :dateTime="price.created"></RelativeDateTimeChip>
 
-    <PriceProof v-if="price.proof && price.proof.is_public" :proof="price.proof"></PriceProof>
+    <PriceProof v-if="price.proof && price.proof.is_public && !hidePriceProof" :proof="price.proof"></PriceProof>
 
     <PriceDeleteChip v-if="userIsPriceOwner" :price="price"></PriceDeleteChip>
   </div>
@@ -34,6 +34,7 @@ export default {
   props: {
     'price': null,
     'hidePriceLocation': false,
+    'hidePriceProof': false,
     'readonly': false
   },
   data() {

src/components/ProofCard.vue

@@ -5,7 +5,7 @@
     </v-card-text>
     <v-divider></v-divider>
     <v-card-text>
-      <ProofFooter :proof="proof" :hideProofDelete="hideProofDelete"></ProofFooter>
+      <ProofFooter :proof="proof" :hideProofDelete="hideProofDelete" :readonly="readonly"></ProofFooter>
     </v-card-text>
   </v-card>
 </template>
@@ -27,6 +27,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {

src/components/ProofFooter.vue

@@ -11,9 +11,9 @@
       <span v-if="proof.type !== 'GDPR_REQUEST'">
         {{ proofType }}
       </span>
-      
+
     </v-chip>
-    <PriceCountChip :count="proof.price_count" :withLabel="true"></PriceCountChip>
+    <PriceCountChip :count="proof.price_count" :withLabel="true" @click="goToProof()"></PriceCountChip>
     <RelativeDateTimeChip :dateTime="proof.created"></RelativeDateTimeChip>
     <ProofDeleteChip v-if="!hideProofDelete && userCanDeleteProof" :proof="proof"></ProofDeleteChip>
   </div>
@@ -37,6 +37,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -48,14 +52,25 @@ export default {
     username() {
       return this.appStore.user.username
     },
+    isProofOwner() {
+      return this.username && (this.proof.owner === this.username)
+    },
     userCanDeleteProof() {
       // user must be proof owner
       // and proof must not have any prices
-      return this.username && (this.proof.owner === this.username) && (this.proof.price_count === 0)
+      return this.isProofOwner && (this.proof.price_count === 0)
     },
     proofType() {
       return this.$t(`ProofCard.${this.proof.type}`)
     }
+  },
+  methods: {
+    goToProof() {
+      if (this.readonly || !this.isProofOwner) {
+        return
+      }
+      this.$router.push({ path: `/proofs/${this.proof.id}` })
+    },
   }
 }
 </script>

src/components/UserRecentProofsDialog.vue

@@ -8,7 +8,7 @@
       <v-card-text style="overflow-y:scroll;">
         <v-row>
           <v-col cols="12" sm="6" md="3" v-for="proof in userProofList" :key="proof">
-            <ProofCard :proof="proof" :hideProofDelete="true" :isSelectable="true" @proofSelected="selectProof"></ProofCard>
+            <ProofCard :proof="proof" :hideProofDelete="true" :isSelectable="true" :readonly="true" @proofSelected="selectProof"></ProofCard>
           </v-col>
         </v-row>
       </v-card-text>

src/i18n/locales/en.json

@@ -219,6 +219,11 @@
 		"DeleteTitle": "Delete a proof",
 		"Success": "Proof deleted!"
 	},
+	"ProofDetail": {
+		"LoadMore": "Load more",
+		"Prices": "Prices",
+		"ProofNotFound": "Proof not found (or not the owner)"
+	},
 	"Router": {
 		"AddPrice": {
 			"Title": "Add a price"

src/router.js

@@ -21,6 +21,7 @@ const routes = [
   { path: '/locations', name: 'locations', component: () => import('./views/LocationList.vue'), meta: { title: 'TopLocations', icon: 'mdi-medal-outline', drawerMenu: true }},
   { path: '/locations/:id', name: 'location-detail', component: () => import('./views/LocationDetail.vue'), meta: { title: 'Location detail' }},
   { path: '/brands/:id', name: 'brand-detail', component: () => import('./views/BrandDetail.vue'), meta: { title: 'Brand detail' }},
+  { path: '/proofs/:id', name: 'proof-detail', component: () => import('./views/ProofDetail.vue'), meta: { title: 'Proof detail', requiresAuth: true }},
   { path: '/users', name: 'users', component: () => import('./views/UserList.vue'), meta: { title: 'TopContributors', icon: 'mdi-medal-outline', drawerMenu: true }},
   { path: '/users/:username', name: 'user-detail', component: () => import('./views/UserDetail.vue'), meta: { title: 'User detail' }},
   { path: '/stats', name: 'stats', component: () => import('./views/Stats.vue'), meta: { title: 'Stats' }},

src/views/ProofDetail.vue

@@ -0,0 +1,73 @@
+<template>
+  <v-row>
+    <v-col cols="12" sm="6">
+      <ProofCard v-if="proof" :proof="proof" :readonly="true"></ProofCard>
+      <p v-if="!loading && !proof" class="text-red">{{ $t('ProofDetail.ProofNotFound') }}</p>
+    </v-col>
+  </v-row>
+
+  <br />
+
+  <h2 class="text-h6 mb-1" v-if="proof">
+    {{ $t('ProofDetail.Prices') }}
+    <v-progress-circular v-if="loading" indeterminate :size="30"></v-progress-circular>
+  </h2>
+
+  <v-row v-if="proof">
+    <v-col cols="12" sm="6" md="4" v-for="price in proofPriceList" :key="price">
+      <PriceCard :price="price" :product="price.product" :hidePriceProof="true" elevation="1" height="100%"></PriceCard>
+    </v-col>
+  </v-row>
+
+  <v-row v-if="proof && (proofPriceList.length < proofPriceTotal)" class="mb-2">
+    <v-col align="center">
+      <v-btn size="small" :loading="loading" @click="getProofPrices">{{ $t('ProofDetail.LoadMore') }}</v-btn>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import api from '../services/api'
+import { defineAsyncComponent } from 'vue'
+
+export default {
+  components: {
+    'ProofCard': defineAsyncComponent(() => import('../components/ProofCard.vue')),
+    'PriceCard': defineAsyncComponent(() => import('../components/PriceCard.vue')),
+  },
+  data() {
+    return {
+      proofId: this.$route.params.id,
+      proof: null,
+      proofPriceList: [],
+      proofPriceTotal: null,
+      proofPricePage: 0,
+      loading: false,
+    }
+  },
+  mounted() {
+    this.getProof()
+  },
+  methods: {
+    getProof() {
+      return api.getProofById(this.proofId)
+        .then((data) => {
+          if (data.id) {
+            this.proof = data
+            this.getProofPrices()
+          }
+        })
+    },
+    getProofPrices() {
+      this.loading = true
+      this.proofPricePage += 1
+      return api.getPrices({ proof_id: this.proofId, page: this.proofPricePage })
+        .then((data) => {
+          this.proofPriceList.push(...data.items)
+          this.proofPriceTotal = data.total
+          this.loading = false
+        })
+    },
+  }
+}
+</script>