feat: allow users to delete its own proofs (#304)

src/components/ProofCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card>
+  <v-card :id="'proof_' + proof.id">
     <v-card-text>
       <v-img :src="getProofUrl(proof)"></v-img>
     </v-card-text>

src/components/ProofDeleteChip.vue

@@ -0,0 +1,94 @@
+<template>
+  <v-chip
+    style="padding-left:5px;padding-right:5px"
+    label
+    size="small"
+    density="comfortable"
+    color="error"
+    :title="$t('ProofDeleteChip.Delete')"
+    @click="openDialog">
+    <v-icon icon="mdi-delete"></v-icon>
+  </v-chip>
+
+  <v-dialog v-model="dialog" max-height="80%" max-width="80%">
+    <v-card>
+      <v-card-title>
+        {{ $t('ProofDeleteChip.DeleteTitle') }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="closeDialog"></v-btn>
+      </v-card-title>
+      <v-divider></v-divider>
+      <v-card-text>
+        <p class="mb-1">{{ $t('ProofDeleteChip.Confirmation') }}</p>
+        <v-row>
+          <v-col cols="12" md="6">
+            <v-img :src="proofUrl" max-height="150px"></v-img>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <v-btn
+              size="small"
+              color="error"
+              prepend-icon="mdi-delete"
+              :loading="loading"
+              @click="deleteProof"
+            >{{ $t('ProofDeleteChip.Delete') }}</v-btn>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+
+  <v-snackbar
+    v-model="deleteSuccessMessage"
+    color="success"
+    :timeout="2000"
+  >{{ $t('ProofDeleteChip.Success') }}</v-snackbar>
+</template>
+
+<script>
+import api from '../services/api'
+
+export default {
+  props: {
+    'proof': null,
+  },
+  data() {
+    return {
+      loading: false,
+      dialog: false,
+      deleteSuccessMessage: false
+    }
+  },
+  computed: {
+    proofUrl() {
+      // return 'https://prices.openfoodfacts.org/img/0002/qU59gK8PQw.webp'
+      // return 'https://prices.openfoodfacts.net/img/0001/lZGFga9ZOT.webp'
+      return `${import.meta.env.VITE_OPEN_PRICES_APP_URL}/img/${this.proof.file_path}`
+    }
+  },
+  methods: {
+    deleteProof() {
+      this.loading = true
+      api
+        .deleteProof(this.proof.id)
+        .then((response) => {
+          // if response.status == 204
+          this.loading = false
+          this.deleteSuccessMessage = true
+          this.removeProofCard()
+          this.closeDialog()
+        })
+    },
+    removeProofCard() {
+      const proofCardCol = document.getElementById(`proof_${this.proof.id}`)
+      proofCardCol.remove()
+    },
+    openDialog() {
+      this.dialog = true
+    },
+    closeDialog() {
+      this.dialog = false
+    }
+  }
+}
+</script>

src/components/ProofFooter.vue

@@ -6,22 +6,36 @@
     </v-chip>
     <PriceCountChip :count="proof.price_count" :withLabel="true"></PriceCountChip>
     <RelativeDateTimeChip :dateTime="proof.created"></RelativeDateTimeChip>
+    <ProofDeleteChip v-if="userCanDeleteProof" :proof="proof"></ProofDeleteChip>
   </div>
 </template>
 
 <script>
+import { mapStores } from 'pinia'
+import { useAppStore } from '../store'
 import PriceCountChip from '../components/PriceCountChip.vue'
 import RelativeDateTimeChip from '../components/RelativeDateTimeChip.vue'
+import ProofDeleteChip from '../components/ProofDeleteChip.vue'
 
 export default {
   components: {
     PriceCountChip,
     RelativeDateTimeChip,
+    ProofDeleteChip
   },
   props: {
     'proof': null,
   },
   computed: {
+    ...mapStores(useAppStore),
+    username() {
+      return this.appStore.user.username
+    },
+    userCanDeleteProof() {
+      // user must be proof owner
+      // and proof must not have any prices
+      return this.username && (this.proof.owner === this.username) && (this.proof.price_count === 0)
+    },
     proofType() {
       return this.$t(`ProofCard.${this.proof.type}`)
     }

src/i18n/locales/en.json

@@ -192,6 +192,12 @@
 		"PRICE_TAG": "Price tag",
 		"RECEIPT": "Receipt"
 	},
+	"ProofDeleteChip": {
+		"Confirmation": "Are you sure you want to delete this proof?",
+		"Delete": "Delete",
+		"DeleteTitle": "Delete a proof",
+		"Success": "Proof deleted!"
+	},
 	"Router": {
 		"AddPrice": {
 			"Title": "Add a price"

src/services/api.js

@@ -59,6 +59,17 @@ export default {
     .then((response) => response.json())
   },
 
+  deleteProof(proofId) {
+    const store = useAppStore()
+    return fetch(`${import.meta.env.VITE_OPEN_PRICES_API_URL}/proofs/${proofId}`, {
+      method: 'DELETE',
+      headers: {
+        'Authorization': `Bearer ${store.user.token}`
+      },
+    })
+    // .then((response) => response.json())
+  },
+
   createPrice(priceData) {
     const store = useAppStore()
     store.user.last_product_mode_used = priceData.product_code ? 'barcode' : 'category'