add delete Contribution function

frontend/src/components/Contributions/ContributionList.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="contribution-list container">
     <div class="list-group" v-for="item in items" :key="item.id">
-      <contribution-list-item v-bind="item" @update-contribution-form="updateContributionForm" />
+      <contribution-list-item
+        v-bind="item"
+        @update-contribution-form="updateContributionForm"
+        @delete-contribution="deleteContribution"
+      />
     </div>
     <b-pagination
       v-if="isPaginationVisible"
@@ -52,6 +56,11 @@ export default {
     updateContributionForm(item) {
       this.$emit('update-contribution-form', item)
     },
+    deleteContribution(id) {
+      this.$emit('delete-contribution', {
+        id: id,
+      })
+    },
   },
   computed: {
     isPaginationVisible() {

frontend/src/components/Contributions/ContributionListItem.vue

@@ -12,19 +12,23 @@
           <div class="mx-2">{{ $d(new Date(date), 'short') }}</div>
         </div>
         <div class="mr-2">{{ memo }}</div>
-        <div
-          v-if="type === 'pending' && !firstName"
-          class="text-right pointer"
-          @click="
-            $emit('update-contribution-form', {
-              id: id,
-              contributionDate: contributionDate,
-              memo: memo,
-              amount: amount,
-            })
-          "
-        >
-          <b-icon icon="pencil" class="h2"></b-icon>
+        <div v-if="type === 'pending' && !firstName" class="d-flex flex-row-reverse">
+          <div
+            class="pointer ml-5"
+            @click="
+              $emit('update-contribution-form', {
+                id: id,
+                contributionDate: contributionDate,
+                memo: memo,
+                amount: amount,
+              })
+            "
+          >
+            <b-icon icon="pencil" class="h2"></b-icon>
+          </div>
+          <div class="pointer" @click="deleteContribution(id)">
+            <b-icon icon="trash" class="h2"></b-icon>
+          </div>
         </div>
       </div>
     </slot>
@@ -93,6 +97,14 @@ export default {
     updateContributionForm(item) {
       this.$emit('update-contribution-form', item)
     },
+    deleteContribution(id) {
+      this.boxOne = ''
+      this.$bvModal.msgBoxConfirm('Delete Contribution! Are you sure?').then((value) => {
+        this.$emit('delete-contribution', {
+          id: id,
+        })
+      })
+    },
   },
 }
 </script>

frontend/src/pages/Community.vue

@@ -6,6 +6,7 @@
           <contribution-form
             @set-contribution="setContribution"
             @update-contribution="updateContribution"
+            @delete-contribution="deleteContribution"
             v-model="form"
           />
         </b-tab>