feat(Price card): new action to view product OFF page

openfoodfacts · Aug 18, 2024 · 145c3da · 145c3da
1 parent 53310db
commit 145c3da
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 5 deletions.
diff --git a/src/components/PriceActionMenuButton.vue b/src/components/PriceActionMenuButton.vue
@@ -3,10 +3,22 @@
     <v-icon>mdi-dots-vertical</v-icon>
     <v-menu activator="parent" scroll-strategy="close" transition="slide-y-transition">
       <v-list>
-        <v-list-item :slim="true" prepend-icon="mdi-pencil" @click="openEditDialog">
+        <!-- Product actions -->
+        <v-list-item v-if="!hideProductActions" :slim="true" disabled>
+          {{ $t('Common.Product') }}
+        </v-list-item>
+        <v-divider v-if="!hideProductActions" />
+        <OpenFoodFactsLink v-if="!hideProductActions && price.product" :source="price.product.source" facet="product" :value="price.product.code" display="list-item" />
+        <OpenFoodFactsLink v-else-if="!hideProductActions && price.category_tag" facet="category" :value="price.category_tag" display="list-item" />
+        <!-- Price actions -->
+        <v-list-item :slim="true" disabled>
+          {{ $t('Common.Price') }}
+        </v-list-item>
+        <v-divider />
+        <v-list-item v-if="userIsPriceOwner" :slim="true" prepend-icon="mdi-pencil" @click="openEditDialog">
           {{ $t('Common.Edit') }}
         </v-list-item>
-        <v-list-item :slim="true" prepend-icon="mdi-delete" @click="openDeleteConfirmationDialog">
+        <v-list-item v-if="userIsPriceOwner" :slim="true" prepend-icon="mdi-delete" @click="openDeleteConfirmationDialog">
           {{ $t('Common.Delete') }}
         </v-list-item>
       </v-list>
@@ -47,9 +59,12 @@
 
 <script>
 import { defineAsyncComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useAppStore } from '../store'
 
 export default {
   components: {
+    OpenFoodFactsLink: defineAsyncComponent(() => import('../components/OpenFoodFactsLink.vue')),
     PriceEditDialog: defineAsyncComponent(() => import('../components/PriceEditDialog.vue')),
     PriceDeleteConfirmationDialog: defineAsyncComponent(() => import('../components/PriceDeleteConfirmationDialog.vue'))
   },
@@ -58,6 +73,10 @@ export default {
       type: Object,
       default: null
     },
+    hideProductActions: {
+      type: Boolean,
+      default: false
+    },
     style: {
       type: String,
       default: 'position:absolute;bottom:6px;right:0;'
@@ -72,6 +91,15 @@ export default {
       deleteSuccessMessage: false
     }
   },
+  computed: {
+    ...mapStores(useAppStore),
+    username() {
+      return this.appStore.user.username
+    },
+    userIsPriceOwner() {
+      return this.username && (this.price.owner === this.username)
+    }
+  },
   methods: {
     openEditDialog() {
       this.editDialog = true

diff --git a/src/components/PriceCard.vue b/src/components/PriceCard.vue
@@ -30,7 +30,7 @@
         </v-col>
       </v-row>
 
-      <PriceFooterRow v-if="price && !hidePriceFooterRow" :price="price" :hidePriceLocation="hidePriceLocation" :hidePriceProof="hidePriceProof" :readonly="readonly" />
+      <PriceFooterRow v-if="price && !hidePriceFooterRow" :price="price" :hidePriceLocation="hidePriceLocation" :hidePriceProof="hidePriceProof" :hideProductDetails="hideProductDetails" :readonly="readonly" />
     </v-container>
   </v-card>
 </template>

diff --git a/src/components/PriceFooterRow.vue b/src/components/PriceFooterRow.vue
@@ -1,6 +1,6 @@
 <template>
   <v-row style="margin-top:0;">
-    <v-col :cols="userIsPriceOwner ? '11' : '12'">
+    <v-col cols="11">
       <LocationChip v-if="!hidePriceLocation" class="mr-1" :location="price.location" :locationId="price.location_id" :readonly="readonly" />
       <UserChip class="mr-1" :username="price.owner" :readonly="readonly" />
       <DateChip class="mr-1" :date="price.date" :readonly="readonly" />
@@ -9,7 +9,7 @@
     </v-col>
   </v-row>
 
-  <PriceActionMenuButton v-if="userIsPriceOwner" :price="price" />
+  <PriceActionMenuButton v-if="userIsPriceOwner" :price="price" :hideProductActions="hideProductDetails" />
 </template>
 
 <script>
@@ -39,6 +39,10 @@ export default {
       type: Boolean,
       default: false
     },
+    hideProductDetails: {
+      type: Boolean,
+      default: false
+    },
     readonly: {
       type: Boolean,
       default: false

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -110,6 +110,8 @@
 		"AddPrice": "Add a price",
 		"AddToOFF": "Add to {name}",
 		"Brand": "Brand",
+		"Price": "Price",
+		"Product": "Product",
 		"Proof": "Proof",
 		"Country": "Country",
 		"Currency": "Currency",