refactor(Product card): move PriceAdd action to menu (#700)

openfoodfacts · Aug 16, 2024 · 5dec6b7 · 5dec6b7
1 parent e151d15
commit 5dec6b7
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 15 deletions.
diff --git a/src/components/OpenFoodFactsLink.vue b/src/components/OpenFoodFactsLink.vue
@@ -17,11 +17,6 @@ import constants from '../constants'
 
 export default {
   props: {
-    display: {
-      type: String,
-      default: 'link',
-      examples: ['link', 'button', 'list-item']
-    },
     source: {
       type: String,
       default: null,
@@ -35,6 +30,11 @@ export default {
     value: {
       type: String,
       default: null
+    },
+    display: {
+      type: String,
+      default: 'link',
+      examples: ['link', 'button', 'list-item']
     }
   },
   data() {

diff --git a/src/components/PriceAddButton.vue → src/components/PriceAddLink.vue b/src/components/PriceAddButton.vue → src/components/PriceAddLink.vue
@@ -1,12 +1,19 @@
 <template>
+  <a v-if="display === 'link'" :href="getAddUrl">
+    {{ $t('Common.AddPrice') }}
+  </a>
   <v-btn
+    v-else-if="display === 'button'"
     size="small"
     color="primary"
     prepend-icon="mdi-tag-plus-outline"
     :to="getAddUrl"
   >
     {{ $t('Common.AddPrice') }}
   </v-btn>
+  <v-list-item v-else-if="display === 'list-item'" :slim="true" base-color="primary" prepend-icon="mdi-tag-plus-outline" :href="getAddUrl">
+    {{ $t('Common.AddPrice') }}
+  </v-list-item>
 </template>
 
 <script>
@@ -24,7 +31,12 @@ export default {
       type: String,
       default: null,
       examples: ['PRICE_TAG', 'RECEIPT']
-    }
+    },
+    display: {
+      type: String,
+      default: 'link',
+      examples: ['link', 'button', 'list-item']
+    },
   },
   data() {
     return {

diff --git a/src/components/ProductActionMenuButton.vue b/src/components/ProductActionMenuButton.vue
@@ -3,7 +3,9 @@
     <v-icon>mdi-dots-vertical</v-icon>
     <v-menu activator="parent" scroll-strategy="close" transition="slide-y-transition">
       <v-list>
-        <OpenFoodFactsLink display="list-item" :source="product.source" facet="product" :value="product.code" />
+        <PriceAddLink :productCode="product.code" display="list-item" />
+        <v-divider />
+        <OpenFoodFactsLink :source="product.source" facet="product" :value="product.code" display="list-item" />
       </v-list>
     </v-menu>
   </v-btn>
@@ -14,6 +16,7 @@ import { defineAsyncComponent } from 'vue'
 
 export default {
   components: {
+    PriceAddLink: defineAsyncComponent(() => import('../components/PriceAddLink.vue')),
     OpenFoodFactsLink: defineAsyncComponent(() => import('../components/OpenFoodFactsLink.vue'))
   },
   props: {

diff --git a/src/components/UserActionMenuButton.vue b/src/components/UserActionMenuButton.vue
@@ -3,7 +3,7 @@
     <v-icon>mdi-dots-vertical</v-icon>
     <v-menu activator="parent" scroll-strategy="close" transition="slide-y-transition">
       <v-list>
-        <OpenFoodFactsLink display="list-item" facet="editor" :value="user.user_id" />
+        <OpenFoodFactsLink facet="editor" :value="user.user_id" display="list-item" />
       </v-list>
     </v-menu>
   </v-btn>

diff --git a/src/views/BrandDetail.vue b/src/views/BrandDetail.vue
@@ -17,7 +17,7 @@
 
   <v-row class="mt-0">
     <v-col cols="12">
-      <OpenFoodFactsLink display="button" facet="brand" :value="brand" />
+      <OpenFoodFactsLink facet="brand" :value="brand" display="button" />
       <ShareButton />
     </v-col>
   </v-row>

diff --git a/src/views/CategoryDetail.vue b/src/views/CategoryDetail.vue
@@ -17,7 +17,7 @@
 
   <v-row class="mt-0">
     <v-col cols="12">
-      <OpenFoodFactsLink display="button" facet="category" :value="category" />
+      <OpenFoodFactsLink facet="category" :value="category" display="button" />
       <ShareButton />
     </v-col>
   </v-row>

diff --git a/src/views/ProductDetail.vue b/src/views/ProductDetail.vue
@@ -25,8 +25,7 @@
 
   <v-row v-if="!productOrCategoryNotFound" class="mt-0">
     <v-col cols="12">
-      <PriceAddButton v-if="product && product.code" class="mr-2" :productCode="product.code" />
-      <PriceAddButton v-else-if="category" class="mr-2" :productCode="category.name" />
+      <PriceAddLink v-if="category" class="mr-2" :productCode="category.name" />
       <ShareButton />
     </v-col>
   </v-row>
@@ -83,7 +82,7 @@ export default {
   components: {
     ProductCard: defineAsyncComponent(() => import('../components/ProductCard.vue')),
     CategoryCard: defineAsyncComponent(() => import('../components/CategoryCard.vue')),
-    PriceAddButton: defineAsyncComponent(() => import('../components/PriceAddButton.vue')),
+    PriceAddLink: defineAsyncComponent(() => import('../components/PriceAddLink.vue')),
     FilterMenu: defineAsyncComponent(() => import('../components/FilterMenu.vue')),
     OrderMenu: defineAsyncComponent(() => import('../components/OrderMenu.vue')),
     DisplayMenu: defineAsyncComponent(() => import('../components/DisplayMenu.vue')),

diff --git a/src/views/ProofDetail.vue b/src/views/ProofDetail.vue
@@ -10,7 +10,7 @@
 
   <v-row v-if="allowPriceAdd" class="mt-0">
     <v-col cols="12">
-      <PriceAddButton class="mr-2" :proofId="proof.id" :proofType="proof.type" />
+      <PriceAddLink class="mr-2" :proofId="proof.id" :proofType="proof.type" />
     </v-col>
   </v-row>
 
@@ -42,7 +42,7 @@ import api from '../services/api'
 
 export default {
   components: {
-    PriceAddButton: defineAsyncComponent(() => import('../components/PriceAddButton.vue')),
+    PriceAddLink: defineAsyncComponent(() => import('../components/PriceAddLink.vue')),
     ProofCard: defineAsyncComponent(() => import('../components/ProofCard.vue')),
     PriceCard: defineAsyncComponent(() => import('../components/PriceCard.vue')),
   },