ability to delete fillups and expenses

ui/src/router/views/vehicle.vue

@@ -81,19 +81,8 @@ export default {
     },
   },
   mounted() {
-    axios
+    this.fetchFillups()
-      .get(`/api/vehicles/${this.vehicle.id}/fillups`)
+    this.fetchExpenses()
-      .then((response) => {
-        this.fillups = response.data
-      })
-      .catch((err) => console.log(err))
-
-    axios
-      .get(`/api/vehicles/${this.vehicle.id}/expenses`)
-      .then((response) => {
-        this.expenses = response.data
-      })
-      .catch((err) => console.log(err))
 
     this.fetchAttachments()
     this.fetchVehicleStats()
@@ -108,6 +97,22 @@ export default {
         })
         .catch((err) => console.log(err))
     },
+    fetchFillups() {
+      axios
+        .get(`/api/vehicles/${this.vehicle.id}/fillups`)
+        .then((response) => {
+          this.fillups = response.data
+        })
+        .catch((err) => console.log(err))
+    },
+    fetchExpenses() {
+      axios
+        .get(`/api/vehicles/${this.vehicle.id}/expenses`)
+        .then((response) => {
+          this.expenses = response.data
+        })
+        .catch((err) => console.log(err))
+    },
 
     fetchVehicleStats() {
       store
@@ -125,6 +130,30 @@ export default {
         })
         .catch((err) => console.log(err))
     },
+    deleteFillup(fillupId) {
+      var sure = confirm('This will delete this fillup. This step cannot be reversed. Are you sure?')
+      if (sure) {
+        store
+          .dispatch('vehicles/deleteFillupById', { vehicleId: this.vehicle.id, fillupId: fillupId })
+          .then((data) => {
+            this.fetchVehicleStats()
+            this.fetchFillups()
+          })
+          .catch((err) => console.log(err))
+      }
+    },
+    deleteExpense(expenseId) {
+      var sure = confirm('This will delete this expense. This step cannot be reversed. Are you sure?')
+      if (sure) {
+        store
+          .dispatch('vehicles/deleteExpenseById', { vehicleId: this.vehicle.id, expenseId: expenseId })
+          .then((data) => {
+            this.fetchVehicleStats()
+            this.fetchExpenses()
+          })
+          .catch((err) => console.log(err))
+      }
+    },
     deleteVehicle() {
       var sure = confirm(
         'This will delete all the expenses and fillups related with this vehicle as well. This step cannot be reversed. Are you sure?'
@@ -326,6 +355,9 @@ export default {
           >
             <b-icon pack="fas" icon="edit" type="is-info"> </b-icon
           ></b-button>
+          <b-button type="is-ghost" title="Delete this fillup" @click="deleteFillup(props.row.id)">
+            <b-icon pack="fas" icon="trash" type="is-danger"> </b-icon
+          ></b-button>
         </b-table-column>
         <template v-slot:empty> No Fillups so far</template>
         <template v-slot:detail="props">
@@ -368,6 +400,9 @@ export default {
           >
             <b-icon pack="fas" icon="edit" type="is-info"> </b-icon
           ></b-button>
+          <b-button type="is-ghost" title="Delete this expense" @click="deleteExpense(props.row.id)">
+            <b-icon pack="fas" icon="trash" type="is-danger"> </b-icon
+          ></b-button>
         </b-table-column>
         <template v-slot:empty> No Expenses so far</template>
       </b-table>

ui/src/state/modules/vehicles.js

@@ -105,6 +105,12 @@ export const actions = {
       return data
     })
   },
+  deleteFillupById({ commit, state, rootState }, { vehicleId, fillupId }) {
+    return axios.delete(`/api/vehicles/${vehicleId}/fillups/${fillupId}`).then((response) => {
+      const data = response.data
+      return data
+    })
+  },
   fetchExpenseById({ commit, state, rootState }, { vehicleId, expenseId }) {
     return axios.get(`/api/vehicles/${vehicleId}/expenses/${expenseId}`).then((response) => {
       const data = response.data
@@ -112,6 +118,12 @@ export const actions = {
       return data
     })
   },
+  deleteExpenseById({ commit, state, rootState }, { vehicleId, expenseId }) {
+    return axios.delete(`/api/vehicles/${vehicleId}/expenses/${expenseId}`).then((response) => {
+      const data = response.data
+      return data
+    })
+  },
   fetchAttachmentsByVehicleId({ commit, state, rootState }, { vehicleId }) {
     return axios.get(`/api/vehicles/${vehicleId}/attachments`).then((response) => {
       const data = response.data