implemented deletion

src/components/Table.vue

@@ -32,7 +32,7 @@
                 <td v-for="(column, index) in columns" :key="index">{{ item[column] }}</td>
                 <td>
                     <div class="btn-group">
-                      <button class="btn btn-outline-secondary" v-for="(action, a_index) in actions" :key="a_index" @click="action.fun&&action.fun(item, action)">{{action.name}}</button>
+                      <button class="btn btn-outline-secondary" v-for="(action, a_index) in actions" :key="a_index" @click.stop="action.fun&&action.fun(item)" >{{action.name}}</button>
                     </div>
                 </td>
             </tr>

src/store/index.js

@@ -48,6 +48,9 @@ const store = new Vuex.Store({
       const item = state.loadedItems.filter(({ item_uid }) => item_uid === updatedItem.item_uid)[0];
       Object.assign(item, updatedItem);
     },
+    removeItem(state, item) {
+      state.loadedItems = state.loadedItems.filter(it => it !== item );
+    },
     appendItem(state, item) {
       state.loadedItems.push(item);
     }
@@ -79,6 +82,10 @@ const store = new Vuex.Store({
       const { data } = await axios.put(`/1/${getters.getEventSlug}/item/${item.uid}`, item);
       commit('updateItem', data);
     },
+    async deleteItem({ commit, getters }, item) {
+      await axios.delete(`/1/${getters.getEventSlug}/item/${item.uid}`, item);
+      commit('removeItem',item);
+    },
     async postItem({ commit, getters }, item) {
       let blob = await fetch(item.dataImage).then(res => res.blob());
       let file = new File([blob], 'dot.png', blob);

src/views/Boxes.vue

@@ -6,7 +6,7 @@
                     :columns="['cid', 'name']"
                     :actions="[
                       {name:'enlarge'},
-                      {name:'content', fun: (item,action) => showBoxContent(item.name)},
+                      {name:'content', fun: item => showBoxContent(item.name)},
                       {name:'delete'},
                     ]"
                     :items="loadedBoxes"

src/views/Items.vue

@@ -18,7 +18,7 @@
                     :columns="['uid', 'description', 'box']"
                     :actions="[
                       {name: 'enlarge'},
-                      {name: 'delete'}
+                      {name: 'delete',fun: item => deleteItem(item)}
                       ]"
                     :items="loadedItems"
                     :keyName="'uid'"
@@ -54,7 +54,7 @@ import Table from '@/components/Table';
 import Cards from '@/components/Cards';
 import Modal from '@/components/Modal';
 import EditItem from '@/components/EditItem';
-import { mapState } from 'vuex';
+import {mapActions, mapState} from 'vuex';
 import config from '../config';
 
 export default {
@@ -66,6 +66,7 @@ export default {
   components: { Table, Cards, Modal, EditItem },
   computed: mapState(['loadedItems', 'layout']),
   methods: {
+    ...mapActions(['deleteItem']),
     openModalWith(item) { // Opens the editing modal with a copy of the selected item.
       this.selectedItem = { ...item };
     },