refactor(Price add): show receipt personal data in already added pric…

…es footer (#1076)
openfoodfacts · Dec 2, 2024 · 4c8c337 · 4c8c337
1 parent ad3618a
commit 4c8c337
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 25 deletions.
diff --git a/src/components/PriceAlreadyUploadedListCard.vue b/src/components/PriceAlreadyUploadedListCard.vue
@@ -26,12 +26,8 @@
     <v-card-actions v-if="showCardFooter">
       <v-row>
         <v-col cols="12">
-          <v-chip class="mr-1" label size="small" density="comfortable">
-            {{ $t('Common.PriceCount', { count: proofPriceUploadedList.length }) }}
-          </v-chip>
-          <v-chip class="mr-1" label size="small" density="comfortable">
-            {{ getPriceValueDisplay(proofPriceUploadedListSum) }}
-          </v-chip>
+          <ProofReceiptPriceCountChip class="mr-1" :uploadedCount="proofPriceUploadedList.length" :totalCount="proof.receipt_price_count" />
+          <ProofReceiptPriceTotalChip :uploadedCount="proofPriceUploadedListSum" :totalCount="proof.receipt_price_total" :currency="proofPriceUploadedList[0].currency" />
         </v-col>
       </v-row>
     </v-card-actions>
@@ -43,11 +39,12 @@
 <script>
 import { defineAsyncComponent } from 'vue'
 import constants from '../constants'
-import utils from '../utils.js'
 
 export default {
   components: {
     PriceCard: defineAsyncComponent(() => import('../components/PriceCard.vue')),
+    ProofReceiptPriceCountChip: defineAsyncComponent(() => import('../components/ProofReceiptPriceCountChip.vue')),
+    ProofReceiptPriceTotalChip: defineAsyncComponent(() => import('../components/ProofReceiptPriceTotalChip.vue')),
   },
   props: {
     proof: {
@@ -84,14 +81,5 @@ export default {
       }, 0)
     }
   },
-  methods: {
-    getPriceValue(priceValue, priceCurrency) {
-      return utils.prettyPrice(priceValue, priceCurrency)
-    },
-    getPriceValueDisplay(price) {
-      price = parseFloat(price)
-      return this.getPriceValue(price, this.proofPriceUploadedList[0].currency)
-    },
-  }
 }
 </script>
diff --git a/src/components/ProofFooterRow.vue b/src/components/ProofFooterRow.vue
@@ -2,9 +2,9 @@
   <v-row>
     <v-col :cols="userIsProofOwner ? '11' : '12'">
       <ProofTypeChip class="mr-1" :proof="proof" />
-      <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()" />
+      <ProofReceiptPriceCountChip v-if="showReceiptPriceCount" class="mr-1" :totalCount="proof.receipt_price_count" />
+      <ProofReceiptPriceTotalChip v-if="showReceiptPriceTotal" class="mr-1" :totalCount="proof.receipt_price_total" :currency="proof.currency" />
+      <PriceCountChip class="mr-1" :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" />
       <CurrencyChip class="mr-1" :currency="proof.currency" :showErrorIfCurrencyMissing="true" />

diff --git a/src/components/ProofReceiptPriceCountChip.vue b/src/components/ProofReceiptPriceCountChip.vue
@@ -1,16 +1,28 @@
 <template>
-  <v-chip class="mr-1" label size="small" variant="flat" density="comfortable" :title="$t('Common.ReceiptPriceCount')">
-    {{ $t('Common.PriceCount', { count: count }) }}
+  <v-chip label size="small" :variant="totalCount ? 'flat' : ''" density="comfortable" :title="$t('Common.ReceiptPriceCount')">
+    <span v-if="uploadedCount && totalCount">
+      {{ uploadedCount }}&nbsp;/&nbsp;{{ $t('Common.PriceCount', { count: totalCount }) }}
+    </span>
+    <span v-else-if="uploadedCount">
+      {{ $t('Common.PriceCount', { count: uploadedCount }) }}
+    </span>
+    <span v-else>
+      {{ $t('Common.PriceCount', { count: totalCount }) }}
+    </span>
   </v-chip>
 </template>
 
 <script>
 export default {
   props: {
-    count: {
+    uploadedCount: {
       type: Number,
       default: null
     },
+    totalCount: {
+      type: Number,
+      default: null
+    }
   }
 }
 </script>
diff --git a/src/components/ProofReceiptPriceTotalChip.vue b/src/components/ProofReceiptPriceTotalChip.vue
@@ -1,6 +1,14 @@
 <template>
-  <v-chip label size="small" variant="flat" density="comfortable" :title="$t('Common.ReceiptPriceTotal')">
-    {{ getPriceValueDisplay(count) }}
+  <v-chip label size="small" :variant="totalCount ? 'flat' : ''" density="comfortable" :title="$t('Common.ReceiptPriceTotal')">
+    <span v-if="uploadedCount && totalCount">
+      {{ getPriceValueDisplay(uploadedCount) }}&nbsp;/&nbsp;{{ getPriceValueDisplay(totalCount) }}
+    </span>
+    <span v-else-if="uploadedCount">
+      {{ getPriceValueDisplay(uploadedCount) }}
+    </span>
+    <span v-else>
+      {{ getPriceValueDisplay(totalCount) }}
+    </span>
   </v-chip>
 </template>
 
@@ -9,7 +17,11 @@ import utils from '../utils.js'
 
 export default {
   props: {
-    count: {
+    uploadedCount: {
+      type: Number,
+      default: null
+    },
+    totalCount: {
       type: Number,
       default: null
     },