add direct link from box view to items filtered by box

src/components/Table.vue

@@ -24,11 +24,17 @@
                         >
                     </div>
                 </th>
+                <th>actions</th>
             </tr>
         </thead>
         <tbody>
             <tr v-for="item in internalItems" :key="item[keyName]" @click="$emit('itemActivated', item)">
                 <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>
+                    </div>
+                </td>
             </tr>
         </tbody>
     </table>

src/store/index.js

@@ -64,6 +64,9 @@ const store = new Vuex.Store({
     changeView({ getters }, link) {
       router.push({path: `/${getters.getEventSlug}/${link.path}`});
     },
+    showBoxContent({ getters }, box) {
+      router.push({path: `/${getters.getEventSlug}/items`, query: {box}});
+    },
     async loadEventItems({ commit, getters }) {
       const { data } = await axios.get(`/1/${getters.getEventSlug}/items`);
       commit('replaceLoadedItems', data);

src/views/Boxes.vue

@@ -4,7 +4,11 @@
             <div class="col-xl-8 offset-xl-2">
                 <Table
                     :columns="['cid', 'name']"
-                    :actions="['enlarge']"
+                    :actions="[
+                      {name:'enlarge'},
+                      {name:'content', fun: (item,action) => showBoxContent(item.name)},
+                      {name:'delete'},
+                    ]"
                     :items="loadedBoxes"
                     :keyName="'cid'"
                 />
@@ -14,12 +18,14 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import {mapActions, mapState} from 'vuex';
 import Table from '@/components/Table';
+
 export default {
   name: 'Boxes',
   components: {Table},
   computed: mapState(['loadedBoxes', 'layout']),
+  methods: mapActions(['showBoxContent']),
 };
 </script>
 

src/views/Items.vue

@@ -16,7 +16,10 @@
             <div class="col-xl-8 offset-xl-2">
                 <Table
                     :columns="['uid', 'description', 'box']"
-                    :actions="['enlarge', 'delete']"
+                    :actions="[
+                      {name: 'enlarge'},
+                      {name: 'delete'}
+                      ]"
                     :items="loadedItems"
                     :keyName="'uid'"
                     @itemActivated="openModalWith($event)"
@@ -26,7 +29,9 @@
         <Cards
             v-if="layout === 'cards'"
             :columns="['uid', 'description', 'box']"
-            :actions="['delete']"
+            :actions="[
+              {name: 'delete'}
+              ]"
             :items="loadedItems"
             :keyName="'uid'"
             v-slot="{ item }"