feat: new dialog to set RECEIPT as private (#404)

Co-authored-by: dq18 <>

src/components/ProofCard.vue

@@ -7,7 +7,20 @@
     <v-divider v-if="!hideProofHeader"></v-divider>
 
     <v-card-text>
-      <v-img :src="getProofUrl(proof)"></v-img>
+      <v-img :src="getProofUrl(proof)">
+        <v-row justify="end">
+          <v-btn
+          v-if="proof.type === 'RECEIPT' && isEditable"
+            elevation="2"
+            density="default"
+            position="fixed"
+            icon
+            @click="showProofEditDialog(proof)"
+          >
+            <v-icon>mdi-pencil</v-icon>
+          </v-btn>
+        </v-row>
+      </v-img>
     </v-card-text>
 
     <v-divider></v-divider>
@@ -16,14 +29,23 @@
       <ProofFooter :proof="proof" :hideProofDelete="hideProofDelete" :readonly="readonly"></ProofFooter>
     </v-card-actions>
   </v-card>
+  <ProofEditDialog
+    v-if="proofEditDialog"
+    :proof="proof"
+    v-model="proofEditDialog"
+    @proofUpdated="handleProofUpdated"
+    @close="proofEditDialog = false"
+  ></ProofEditDialog>
 </template>
 
 <script>
 import ProofFooter from '../components/ProofFooter.vue'
+import { defineAsyncComponent } from 'vue'
 
 export default {
   components: {
     ProofFooter,
+    'ProofEditDialog': defineAsyncComponent(() => import('../components/ProofEditDialog.vue')),
   },
   props: {
     'proof': null,
@@ -43,11 +65,22 @@ export default {
       type: Boolean,
       default: false,
     },
+    isEditable: {
+      type: Boolean,
+      default: false,
+    },
+    height: {
+      type: String,
+      default: 'auto',
+    },
   },
   data() {
     return {
+      proofEditDialog: false,
     }
   },
+  emits: ['proofUpdated'],
+
   methods: {
     selectProof() {
       if (this.isSelectable) {
@@ -59,6 +92,12 @@ export default {
       // return 'https://prices.openfoodfacts.net/img/0001/lZGFga9ZOT.webp'
       return `${import.meta.env.VITE_OPEN_PRICES_APP_URL}/img/${proof.file_path}`
     },
+    showProofEditDialog(proof) {
+      this.proofEditDialog = true
+    },
+    handleProofUpdated() {
+      this.$emit('proofUpdated')
+  },
     close() {
       this.$emit('close')
     }

src/components/ProofEditDialog.vue

@@ -0,0 +1,78 @@
+<template>
+  <v-dialog>
+    <v-card>
+      <v-card-title>
+        {{ $t('ProofEditDialog.Title') }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="close"></v-btn>
+      </v-card-title>
+      <v-divider></v-divider>
+      <v-card-subtitle size="small">
+        {{ $t('ProofEditDialog.EditProof') }}
+      </v-card-subtitle>
+      <v-card-text v-if="proof.type === 'RECEIPT'">
+        <v-switch
+          v-model="isPublic"
+          color="green"
+          density="compact"
+          inset
+          :label="isPublic ? $t('ProofEditDialog.Public') : $t('ProofEditDialog.Private')"
+          hide-details
+        ></v-switch>
+        <p class="text-caption text-warning">
+          <i>{{ $t('ProofEditDialog.PrivateWarning') }}</i>
+        </p>
+        <!-- placeholder for receipt type change-->
+
+      </v-card-text>
+      <v-divider></v-divider>
+      <!-- placeholder for proof delete-->
+      <v-card-actions>
+        <v-btn @click="save">{{ $t('ProofEditDialog.Save') }}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import api from '../services/api'
+import { useAppStore } from '../store'
+export default {
+  props: {
+    'proof': null,
+  },
+  data() {
+    return {
+      isPublic: false,
+    }
+  },
+  computed: {
+  },
+  mounted() {
+    this.isPublic = this.proof.is_public
+  },
+  methods: {
+    updateIsPublicProof() {
+      const params = {
+        is_public: this.isPublic
+      }
+      api
+        .updateProof(this.proof.id, params)
+        .then((response) => {
+          // if response.status == 204
+          const store = useAppStore()
+          store.updateProof(this.proof.id, params)
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    close() {
+      this.$emit('close')
+    },
+    save() {
+      this.updateIsPublicProof()
+      this.$emit('close')
+      this.$emit('proofUpdated')
+    },
+  }
+}
+</script>

src/components/ProofFooter.vue

@@ -11,7 +11,6 @@
       <span v-if="proof.type !== 'GDPR_REQUEST'">
         {{ proofType }}
       </span>
-
     </v-chip>
     <PriceCountChip :count="proof.price_count" :withLabel="true" @click="goToProof()"></PriceCountChip>
     <RelativeDateTimeChip :dateTime="proof.created"></RelativeDateTimeChip>

src/i18n/locales/en.json

@@ -252,6 +252,14 @@
 		"Prices": "Prices",
 		"ProofNotFound": "Proof not found (or not the owner)"
 	},
+	"ProofEditDialog": {
+		"Title": "Modify your proof",
+		"EditProof": "Edit your proof",
+		"Public": "Public",
+		"Private": "Private",
+		"PrivateWarning": "When setting your proof to Private, it will be hidden from public view. We recommend hiding any personal information by redacting or folding the document, if possible.",
+		"Save": "Save"
+	},
 	"Router": {
 		"AddPrice": {
 			"Title": "Add a price"
@@ -312,6 +320,7 @@
 		"LoadMore": "Load more",
 		"MyPrices": "My prices",
 		"MyProofs": "My proofs",
+		"ProofUpdated": "Proof updated!",
 		"Settings": "Settings",
 		"Title": "Dashboard",
 		"UserPriceTotal": "{count} prices",

src/store.js

@@ -82,6 +82,10 @@ export const useAppStore = defineStore('app', {
         this.user.proofs.push(proof)
       }
     },
+    updateProof(proofId, params) {
+      const proof = this.user.proofs.find(proof => proof.id === proofId)
+      Object.assign(proof, params)
+    },
     removeProof(proofId) {
       this.user.proofs = this.user.proofs.filter(proof => proof.id !== proofId)
       this.user.proofTotal -= 1

src/views/UserDashboardProofList.vue

@@ -20,18 +20,23 @@
     {{ $t('UserDashboard.LatestProofs') }}
     <v-progress-circular v-if="loading" indeterminate :size="30"></v-progress-circular>
   </h2>
-
   <v-row>
     <v-col cols="12" sm="6" md="4" v-for="proof in appStore.user.proofs" :key="proof">
-      <ProofCard :proof="proof" :hideProofHeader="true" height="100%"></ProofCard>
+      <ProofCard :proof="proof" :hideProofHeader="true" :isEditable="true" @proofUpdated="handleProofUpdated" height="100%">
+      </ProofCard>
     </v-col>
   </v-row>
-
   <v-row v-if="this.appStore.user.proofs.length < this.appStore.getUserProofTotal" class="mb-2">
     <v-col align="center">
       <v-btn size="small" :loading="loading" @click="getUserProofs">{{ $t('UserDashboard.LoadMore') }}</v-btn>
     </v-col>
   </v-row>
+
+  <v-snackbar
+    v-model="proofUpdated"
+    color="success"
+    :timeout="2000"
+  >{{ $t('UserDashboard.ProofUpdated') }}</v-snackbar>
 </template>
 
 <script>
@@ -48,6 +53,7 @@ export default {
     return {
       userProofPage: 0,
       loading: false,
+      proofUpdated: false
     }
   },
   computed: {
@@ -71,6 +77,9 @@ export default {
           this.loading = false
         })
     },
+    handleProofUpdated() {
+      this.proofUpdated = true
+  },
   }
 }
 </script>