refactor(proof): new ProofTypeChip component (#464)

openfoodfacts · Mar 20, 2024 · 851e380 · 851e380
1 parent 15aa82d
commit 851e380
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 20 deletions.
diff --git a/src/components/ProofFooter.vue b/src/components/ProofFooter.vue
@@ -1,18 +1,7 @@
 <template>
   <v-row style="margin-top:0;">
     <v-col :cols="userIsProofOwner ? '11' : '12'">
-      <v-chip class="mr-1" label size="small" density="comfortable">
-        <v-icon start icon="mdi-paperclip"></v-icon>
-        <span v-if="proof.type === 'GDPR_REQUEST'">
-          <a :href="OFF_WIKI_GDPR_REQUEST_URL" target="_blank">
-            {{ proofType }}
-            <v-icon size="x-small" icon="mdi-open-in-new"></v-icon>
-          </a>
-        </span>
-        <span v-if="proof.type !== 'GDPR_REQUEST'">
-          {{ proofType }}
-        </span>
-      </v-chip>
+      <ProofTypeChip class="mr-1" :proof="proof"></ProofTypeChip>
       <PriceCountChip :count="proof.price_count" :withLabel="true" @click="goToProof()"></PriceCountChip>
       <RelativeDateTimeChip :dateTime="proof.created"></RelativeDateTimeChip>
     </v-col>
@@ -29,6 +18,7 @@ import constants from '../constants'
 
 export default {
   components: {
+    'ProofTypeChip': defineAsyncComponent(() => import('../components/ProofTypeChip.vue')),
     'PriceCountChip': defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
     'RelativeDateTimeChip': defineAsyncComponent(() => import('../components/RelativeDateTimeChip.vue')),
     'ProofActionMenuButton': defineAsyncComponent(() => import('../components/ProofActionMenuButton.vue'))
@@ -44,21 +34,13 @@ export default {
       default: false,
     },
   },
-  data() {
-    return {
-      OFF_WIKI_GDPR_REQUEST_URL: constants.OFF_WIKI_GDPR_REQUEST_URL,
-    }
-  },
   computed: {
     ...mapStores(useAppStore),
     username() {
       return this.appStore.user.username
     },
     userIsProofOwner() {
       return this.username && (this.proof.owner === this.username)
-    },
-    proofType() {
-      return this.$t(`ProofCard.${this.proof.type}`)
     }
   },
   methods: {

diff --git a/src/components/ProofTypeChip.vue b/src/components/ProofTypeChip.vue
@@ -0,0 +1,34 @@
+<template>
+  <v-chip label size="small" density="comfortable">
+    <v-icon start icon="mdi-paperclip"></v-icon>
+    <span v-if="proof.type === 'GDPR_REQUEST'">
+      <a :href="OFF_WIKI_GDPR_REQUEST_URL" target="_blank">
+        {{ proofTypeName }}
+        <v-icon size="x-small" icon="mdi-open-in-new"></v-icon>
+      </a>
+    </span>
+    <span v-else>
+      {{ proofTypeName }}
+    </span>
+  </v-chip>
+</template>
+
+<script>
+import constants from '../constants'
+
+export default {
+  props: {
+    'proof': null,
+  },
+  data() {
+    return {
+      OFF_WIKI_GDPR_REQUEST_URL: constants.OFF_WIKI_GDPR_REQUEST_URL,
+    }
+  },
+  computed: {
+    proofTypeName() {
+      return this.$t(`ProofCard.${this.proof.type}`)
+    }
+  }
+}
+</script>