refactor(Proof card): move PriceAdd action to menu

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

Hide file tree

Showing 2 changed files with 6 additions and 12 deletions.
diff --git a/src/components/ProofActionMenuButton.vue b/src/components/ProofActionMenuButton.vue
@@ -3,6 +3,8 @@
     <v-icon>mdi-dots-vertical</v-icon>
     <v-menu activator="parent" scroll-strategy="close" transition="slide-y-transition">
       <v-list>
+        <PriceAddLink :proofId="proof.id" :proofType="proof.type" display="list-item" :disabled="!userCanAddPrice" />
+        <v-divider />
         <v-list-item :slim="true" prepend-icon="mdi-pencil" :disabled="!userCanEditProof" @click="openEditDialog">
           {{ $t('Common.Edit') }}
         </v-list-item>
@@ -50,6 +52,7 @@ import { defineAsyncComponent } from 'vue'
 
 export default {
   components: {
+    PriceAddLink: defineAsyncComponent(() => import('../components/PriceAddLink.vue')),
     ProofEditDialog: defineAsyncComponent(() => import('../components/ProofEditDialog.vue')),
     ProofDeleteConfirmationDialog: defineAsyncComponent(() => import('../components/ProofDeleteConfirmationDialog.vue'))
   },
@@ -73,6 +76,9 @@ export default {
     }
   },
   computed: {
+    userCanAddPrice() {
+      return this.proof && (this.proof.type === 'PRICE_TAG' || this.proof.type === 'RECEIPT')
+    },
     userCanEditProof() {
       // user must be proof owner
       // and proof must not have any prices

diff --git a/src/views/ProofDetail.vue b/src/views/ProofDetail.vue
@@ -8,12 +8,6 @@
     </v-col>
   </v-row>
 
-  <v-row v-if="allowPriceAdd" class="mt-0">
-    <v-col cols="12">
-      <PriceAddLink class="mr-2" :proofId="proof.id" :proofType="proof.type" />
-    </v-col>
-  </v-row>
-
   <br>
 
   <h2 v-if="proof" class="text-h6 mb-1">
@@ -42,7 +36,6 @@ import api from '../services/api'
 
 export default {
   components: {
-    PriceAddLink: defineAsyncComponent(() => import('../components/PriceAddLink.vue')),
     ProofCard: defineAsyncComponent(() => import('../components/ProofCard.vue')),
     PriceCard: defineAsyncComponent(() => import('../components/PriceCard.vue')),
   },
@@ -56,11 +49,6 @@ export default {
       loading: false,
     }
   },
-  computed: {
-    allowPriceAdd() {
-      return this.proof && (this.proof.type === 'PRICE_TAG' || this.proof.type === 'RECEIPT')
-    }
-  },
   mounted() {
     this.getProof()
   },