refactor(Proof upload): allow deleting the picture(s) selected (#1334)

openfoodfacts · Jan 26, 2025 · 518d5a6 · 518d5a6
1 parent 7546554
commit 518d5a6
Showing 1 changed file with 32 additions and 10 deletions.
diff --git a/src/components/ProofImageInputRow.vue b/src/components/ProofImageInputRow.vue
@@ -50,11 +50,25 @@
   </v-row>
 
   <v-row v-if="showProofImagePreviewList" class="mt-0">
-    <v-col v-for="proofImagePreview in proofImagePreviewList" :key="proofImagePreview" cols="6">
-      <v-card>
-        <v-card-text class="pa-2">
+    <v-col v-for="(proofImagePreview, index) in proofImagePreviewList" :key="proofImagePreview" cols="6">
+      <v-card class="d-flex flex-column" height="100%">
+        <v-card-text class="flex-grow-1 pa-2">
           <v-img :src="proofImagePreview" style="max-height:200px" />
         </v-card-text>
+        <v-divider />
+        <v-card-actions>
+          <v-btn v-if="!$vuetify.display.smAndUp" color="error" variant="outlined" icon="mdi-delete" size="small" density="comfortable" :aria-label="$t('Common.Search')" @click="removeImage(index)" />
+          <v-btn
+            v-else
+            color="error"
+            variant="outlined"
+            prepend-icon="mdi-delete"
+            size="small"
+            @click="removeImage(index)"
+          >
+            {{ $t('Common.Delete') }}
+          </v-btn>
+        </v-card-actions>
       </v-card>
     </v-col>
   </v-row>
@@ -117,13 +131,16 @@ export default {
     }
   },
   watch: {
-    proofImageList(newProofImageList, oldProofImageList) {  // eslint-disable-line no-unused-vars
-      // v-file-input returns an object (single) or an array (multiple)
-      if (!Array.isArray(newProofImageList)) {
-        newProofImageList = [newProofImageList]
-      }
-      this.proofImagePreviewList = newProofImageList.map(proofImage => this.getLocalProofUrl(proofImage))
-      this.$emit('proofList', newProofImageList)
+    proofImageList: {
+      handler(newProofImageList, oldProofImageList) {  // eslint-disable-line no-unused-vars
+        // v-file-input returns an object (single) or an array (multiple)
+        if (!Array.isArray(newProofImageList)) {
+          newProofImageList = [newProofImageList]
+        }
+        this.proofImagePreviewList = newProofImageList.map(proofImage => this.getLocalProofUrl(proofImage))
+        this.$emit('proofList', newProofImageList)
+      },
+      // deep: true
     }
   },
   mounted() {
@@ -143,6 +160,11 @@ export default {
     recentProofSelected(proof) {
       this.proofImageList = [proof]
     },
+    removeImage(index) {
+      this.proofImageList.splice(index, 1)
+      this.proofImagePreviewList.splice(index, 1)
+      this.$emit('proofList', this.proofImageList)
+    },
     clearProof() {
       this.proofImageList = []
       this.proofImagePreviewList = []