fix(payment): add ability to delete fee payments through frontend for…

… system admins (#2153) * feat: add ability to delete fee payments through frontend for system admins * fix(members): fix reactivity of fee payment page --------- Co-authored-by: Leon Vreling <[email protected]>
AEGEE · Dec 7, 2024 · 5e704fc · 5e704fc
1 parent 43e09dd
commit 5e704fc
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 22 deletions.
diff --git a/src/views/core/bodies/AddFeePaymentModal.vue b/src/views/core/bodies/AddFeePaymentModal.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="modal-card">
     <header class="modal-card-head">
-      <p class="modal-card-title">Add fee payment</p>
+      <p class="modal-card-title">Add fee payment for {{member.user.first_name }} {{ member.user.last_name }}</p>
       <button class="delete" aria-label="close" @click="$parent.close()" />
     </header>
     <section class="modal-card-body">
@@ -114,17 +114,7 @@ export default {
         body_id: this.body.id
       }).then((response) => {
         this.showSuccess('Payment is added.')
-
-        this.tmpPayment = {
-          starts: '',
-          expires: '',
-          currency: '',
-          amount: 0
-        }
-
         this.member.payments.push(response.data.data)
-        this.$set(this.member, 'lastPayment', this.member.payments[this.member.payments.length - 1])
-
         this.isLoading = false
         this.$parent.close()
       }).catch((err) => {

diff --git a/src/views/core/bodies/ListFeePaymentsModal.vue b/src/views/core/bodies/ListFeePaymentsModal.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="modal-card">
+  <div class="modal-card" style="width: 90%; max-width: 1200px;">
     <header class="modal-card-head">
-      <p class="modal-card-title">List view payments</p>
+      <p class="modal-card-title">Fee payments for {{ member.user.first_name }} {{ member.user.last_name }}</p>
       <button class="delete" aria-label="close" @click="$parent.close()" />
     </header>
     <section class="modal-card-body">
-      <b-table :data="member.payments">
+      <b-table :data="member.payments" v-if="member.payments.length > 0">
         <template slot-scope="props">
           <b-table-column field="id" label="#" numeric sortable>
             {{ props.row.id }}
@@ -34,12 +34,22 @@
           <b-table-column field="invoice_name" label="Invoice name">
             {{ props.row.invoice_name }}
           </b-table-column>
+
+          <b-table-column label="Delete" centered :visible="canDelete">
+            <a class="button is-small is-danger" @click="askDeleteMemberPaymentFee(props.row, false)">
+              <span class="icon"><font-awesome-icon icon="minus" /></span>
+              <span>Delete</span>
+            </a>
+          </b-table-column>
         </template>
 
         <template slot="empty">
           <empty-table-stub />
         </template>
       </b-table>
+      <template v-else>
+        <empty-table-stub />
+      </template>
     </section>
     <footer class="modal-card-foot" />
   </div>
@@ -48,14 +58,41 @@
 <script>
 export default {
   name: 'ListFeePaymentsModal',
-  props: ['member'],
+  props: [
+    'member',
+    'payments',
+    'canDelete',
+    'route',
+    'services',
+    'root'
+  ],
   data () {
     return {
 
     }
   },
   methods: {
+    askDeleteMemberPaymentFee (fee) {
+      const message = `Are you sure you want to <b>delete</b> ${fee.id} from ${this.member.user.first_name} ${this.member.user.last_name}? This action cannot be undone.`
 
+      this.$buefy.dialog.confirm({
+        title: 'Deleting a fee',
+        message,
+        confirmText: 'Delete fee',
+        type: 'is-danger',
+        hasIcon: true,
+        onConfirm: () => this.deleteFee(fee)
+      })
+    },
+    deleteFee (fee) {
+      this.axios.delete(this.services['core'] + '/bodies/' + this.route.params.id + '/payments/' + fee.id).then(() => {
+        this.root.showSuccess('Fee is deleted.')
+        const updatedPayments = [...this.member.payments]
+        const index = updatedPayments.findIndex(p => p.id === fee.id)
+        updatedPayments.splice(index, 1)
+        this.member.payments = updatedPayments
+      }).catch((err) => this.root.showError('Could not delete fee', err))
+    }
   }
 }
 </script>
diff --git a/src/views/core/bodies/ViewMembers.vue b/src/views/core/bodies/ViewMembers.vue
@@ -46,7 +46,7 @@
             </b-table-column>
 
             <b-table-column field="lastPaymentExpires" sortable label="Last payment exp. date" centered :visible="can.viewPayment && body.pays_fees">
-              <span v-if="props.row.lastPaymentExpires !== PAST_DATE_PLACEHOLDER">{{ props.row.lastPaymentExpires | date }}</span>
+              <span v-if="props.row.payments && props.row.payments.length > 0">{{ getLastPaymentExpiration(props.row) | date }}</span>
             </b-table-column>
 
             <b-table-column label="View payments" centered :visible="(can.viewPayment || can.createPayment) && body.pays_fees">
@@ -110,7 +110,8 @@ export default {
         create: false,
         viewMember: false,
         viewPayment: false,
-        createPayment: false
+        createPayment: false,
+        deletePayment: false
       },
       PAST_DATE_PLACEHOLDER: '1900-01-1'
     }
@@ -127,7 +128,12 @@ export default {
         component: ListFeePaymentsModal,
         hasModalCard: true,
         props: {
-          member
+          member,
+          payments: this.payments,
+          canDelete: this.can.deletePayment,
+          route: this.$route,
+          services: this.services,
+          root: this.$root
         }
       })
     },
@@ -165,6 +171,9 @@ export default {
         }
       })
     },
+    getLastPaymentExpiration (member) {
+      return member.payments[member.payments.length - 1].expires
+    },
     askDeleteMember (member) {
       const message = 'Are you sure you want to <b>delete</b> '
         + member.user.first_name + ' ' + member.user.last_name
@@ -243,6 +252,7 @@ export default {
         this.can.viewMember = this.permissions.some(permission => permission.combined.endsWith('view:member'))
         this.can.viewPayment = this.permissions.some(permission => permission.combined.endsWith('view:payment'))
         this.can.createPayment = this.permissions.some(permission => permission.combined.endsWith('create:payment'))
+        this.can.deletePayment = this.permissions.some(permission => permission.combined.endsWith('delete:payment'))
 
         if (!this.can.viewPayment || !this.body.pays_fees) {
           this.isLoading = false
@@ -260,10 +270,6 @@ export default {
               .filter(payment => payment.user_id === member.user_id)
               .sort((a, b) => a.expires.localeCompare(b.expires))
             this.$set(member, 'payments', paymentsForMember)
-            this.$set(member, 'lastPayment', paymentsForMember.length >= 1 ? paymentsForMember[paymentsForMember.length - 1] : null)
-            this.$set(member, 'lastPaymentExpires', paymentsForMember.length >= 1
-              ? paymentsForMember[paymentsForMember.length - 1].expires
-              : this.PAST_DATE_PLACEHOLDER)
           }
 
           this.isLoading = false