refactor(Proof card): new components for receipt price_count & price_…

…total (#1075)
openfoodfacts · Dec 2, 2024 · ad3618a · ad3618a
1 parent 93585fa
commit ad3618a
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 14 deletions.
diff --git a/src/components/ProofFooterRow.vue b/src/components/ProofFooterRow.vue
@@ -2,12 +2,8 @@
   <v-row>
     <v-col :cols="userIsProofOwner ? '11' : '12'">
       <ProofTypeChip class="mr-1" :proof="proof" />
-      <v-chip v-if="showReceiptPriceCount" class="mr-1" label size="small" variant="flat" density="comfortable" :title="$t('Common.ReceiptPriceCount')">
-        {{ $t('Common.PriceCount', { count: proof.receipt_price_count }) }}
-      </v-chip>
-      <v-chip v-if="showReceiptPriceTotal" class="mr-1" label size="small" variant="flat" density="comfortable" :title="$t('Common.ReceiptPriceTotal')">
-        {{ getPriceValueDisplay(proof.receipt_price_total) }}
-      </v-chip>
+      <ProofReceiptPriceCountChip v-if="showReceiptPriceCount" :count="proof.receipt_price_count" />
+      <ProofReceiptPriceTotalChip v-if="showReceiptPriceTotal" class="mr-1" :count="proof.receipt_price_total" :currency="proof.currency" />
       <PriceCountChip :count="proof.price_count" :withLabel="true" @click="goToProof()" />
       <LocationChip class="mr-1" :location="proof.location" :locationId="proof.location_id" :readonly="readonly" :showErrorIfLocationMissing="true" />
       <DateChip class="mr-1" :date="proof.date" :showErrorIfDateMissing="true" />
@@ -25,11 +21,12 @@ import { defineAsyncComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useAppStore } from '../store'
 import constants from '../constants'
-import utils from '../utils.js'
 
 export default {
   components: {
     ProofTypeChip: defineAsyncComponent(() => import('../components/ProofTypeChip.vue')),
+    ProofReceiptPriceCountChip: defineAsyncComponent(() => import('../components/ProofReceiptPriceCountChip.vue')),
+    ProofReceiptPriceTotalChip: defineAsyncComponent(() => import('../components/ProofReceiptPriceTotalChip.vue')),
     PriceCountChip: defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
     LocationChip: defineAsyncComponent(() => import('../components/LocationChip.vue')),
     DateChip: defineAsyncComponent(() => import('../components/DateChip.vue')),
@@ -75,13 +72,6 @@ export default {
     },
   },
   methods: {
-    getPriceValue(priceValue, priceCurrency) {
-      return utils.prettyPrice(priceValue, priceCurrency)
-    },
-    getPriceValueDisplay(price) {
-      price = parseFloat(price)
-      return this.getPriceValue(price, this.proof.currency)
-    },
     goToProof() {
       if (this.readonly || !this.userIsProofOwner) {
         return

diff --git a/src/components/ProofReceiptPriceCountChip.vue b/src/components/ProofReceiptPriceCountChip.vue
@@ -0,0 +1,16 @@
+<template>
+  <v-chip class="mr-1" label size="small" variant="flat" density="comfortable" :title="$t('Common.ReceiptPriceCount')">
+    {{ $t('Common.PriceCount', { count: count }) }}
+  </v-chip>
+</template>
+
+<script>
+export default {
+  props: {
+    count: {
+      type: Number,
+      default: null
+    },
+  }
+}
+</script>
diff --git a/src/components/ProofReceiptPriceTotalChip.vue b/src/components/ProofReceiptPriceTotalChip.vue
@@ -0,0 +1,31 @@
+<template>
+  <v-chip label size="small" variant="flat" density="comfortable" :title="$t('Common.ReceiptPriceTotal')">
+    {{ getPriceValueDisplay(count) }}
+  </v-chip>
+</template>
+
+<script>
+import utils from '../utils.js'
+
+export default {
+  props: {
+    count: {
+      type: Number,
+      default: null
+    },
+    currency: {
+      type: String,
+      default: null
+    }
+  },
+  methods: {
+    getPriceValue(priceValue, priceCurrency) {
+      return utils.prettyPrice(priceValue, priceCurrency)
+    },
+    getPriceValueDisplay(price) {
+      price = parseFloat(price)
+      return this.getPriceValue(price, this.currency)
+    },
+  }
+}
+</script>