add admin panel for boxes

web/src/App.vue

@@ -2,6 +2,7 @@
     <div id="app">
         <AddItemModal v-if="addItemModalOpen && isLoggedIn" @close="closeAddItemModal()" isModal="true"/>
         <AddTicketModal v-if="addTicketModalOpen && isLoggedIn" @close="closeAddTicketModal()" isModal="true"/>
+        <AddBoxModal v-if="showAddBoxModal && isLoggedIn" @close="closeAddBoxModal()" isModal="true"/>
         <Navbar v-if="isLoggedIn" @addItemClicked="openAddItemModal()" @addTicketClicked="openAddTicketModal()"/>
         <router-view/>
         <div aria-live="polite" aria-atomic="true" v-if="isLoggedIn"
@@ -20,12 +21,13 @@ import AddItemModal from '@/components/AddItemModal';
 import Toast from './components/Toast';
 import {mapState, mapMutations, mapActions, mapGetters} from 'vuex';
 import AddTicketModal from "@/components/AddTicketModal.vue";
+import AddBoxModal from "@/components/AddBoxModal.vue";
 
 export default {
     name: 'app',
-    components: {Toast, Navbar, AddItemModal, AddTicketModal},
+    components: {AddBoxModal, Toast, Navbar, AddItemModal, AddTicketModal},
     computed: {
-        ...mapState(['loadedItems', 'layout', 'toasts']),
+        ...mapState(['loadedItems', 'layout', 'toasts', 'showAddBoxModal']),
         ...mapGetters(['isLoggedIn']),
     },
     data: () => ({
@@ -35,7 +37,7 @@ export default {
         socket_toast: null,
     }),
     methods: {
-        ...mapMutations(['removeToast', 'createToast']),
+        ...mapMutations(['removeToast', 'createToast', 'closeAddBoxModal', 'openAddBoxModal']),
         ...mapActions(['loadEventItems', 'loadTickets']),
         openAddItemModal() {
             this.addItemModalOpen = true;

web/src/components/AddBoxModal.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <Modal v-if="isModal" title="Add Box" @close="$emit('close')">
+            <template #body>
+                <div>
+                    <input type="text" class="form-control" placeholder="Box Name" v-model="box_name">
+                </div>
+            </template>
+            <template #buttons>
+                <button type="button" class="btn btn-secondary" @click="$emit('close')">Cancel</button>
+                <button type="button" class="btn btn-success" @click="createBox({name: box_name})">Create</button>
+            </template>
+        </Modal>
+    </div>
+</template>
+
+<script>
+import Modal from '@/components/Modal';
+import {mapActions} from "vuex";
+
+export default {
+    name: 'AddBoxModal',
+    components: {Modal},
+    props: ['isModal'],
+    data: () => ({
+        box_name: '',
+    }),
+    methods: {
+        ...mapActions(['createBox']),
+    },
+};
+</script>
+
+<style scoped>
+
+</style>

web/src/components/AddTicketModal.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <Modal v-if="isModal" title="Add Item" @close="$emit('close')">
+        <Modal v-if="isModal" title="Add Ticket" @close="$emit('close')">
             <template #body>
                 <div>
                     <input type="text" class="form-control" placeholder="Sender" v-model="ticket.sender">

web/src/components/Table.vue

@@ -24,14 +24,16 @@
                     >
                 </div>
             </th>
-            <th></th>
+            <th>
+                <slot name="header_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>
-                <slot v-bind:item="item"/>
+                <slot v-bind:item="item" name="actions"/>
             </td>
         </tr>
         </tbody>

web/src/router.js

@@ -15,6 +15,7 @@ import store from "@/store";
 import Empty from "@/views/Empty.vue";
 import Events from "@/views/admin/Events.vue";
 import AccessControl from "@/views/admin/AccessControl.vue";
+import {default as BoxesAdmin} from "@/views/admin/Boxes.vue"
 
 Vue.use(VueRouter);
 

web/src/store/index.js

@@ -79,6 +79,7 @@ const store = new Vuex.Store({
         state_options: [],
         token_expiry: null,
         local_loaded: false,
+        showAddBoxModal: false,
     },
     getters: {
         getEventSlug: state => state.route && state.route.params.event ? state.route.params.event : state.lastEvent,
@@ -153,6 +154,12 @@ const store = new Vuex.Store({
             const ticket = state.tickets.filter(({id}) => id === updatedTicket.id)[0];
             Object.assign(ticket, updatedTicket);
         },
+        openAddBoxModal(state) {
+            state.showAddBoxModal = true;
+        },
+        closeAddBoxModal(state) {
+            state.showAddBoxModal = false;
+        },
         createToast(state, {title, message, color}) {
             var toast = {title, message, color, key: state.keyIncrement}
             state.toasts.push(toast);
@@ -301,6 +308,13 @@ const store = new Vuex.Store({
             const {data} = await axios.get('/2/boxes/');
             commit('replaceBoxes', data);
         },
+        async createBox({commit, dispatch}, box) {
+            const {data} = await axios.post('/2/boxes/', box);
+            commit('replaceBoxes', data);
+            dispatch('loadBoxes').then(() => {
+                commit('closeAddBoxModal');
+            });
+        },
         async updateItem({commit, getters}, item) {
             const {data} = await axios.put(`/2/${getters.getEventSlug}/item/${item.uid}/`, item);
             commit('updateItem', data);

web/src/views/admin/Admin.vue

@@ -11,6 +11,9 @@
                             <li class="nav-item">
                                 <router-link class="nav-link" :to="{name: 'events'}" active-class="active">Events</router-link>
                             </li>
+                            <li class="nav-item">
+                                <router-link class="nav-link" :to="{name: 'admin_boxes'}" active-class="active">Boxes</router-link>
+                            </li>
                             <li class="nav-item">
                                 <router-link class="nav-link" :to="{name: 'users'}" active-class="active">Access Control</router-link>
                             </li>

web/src/views/admin/Boxes.vue

@@ -3,28 +3,38 @@
         :columns="['cid', 'name','itemCount']"
         :items="loadedBoxes"
         :keyName="'cid'"
-        v-slot="{ item }"
     >
-        <div class="btn-group">
-            <button class="btn btn-secondary" @click.stop="showBoxContent(item.name)">
-                <!--font-awesome-icon icon="archive"/--> content
+        <template v-slot:header_actions>
+            <button class="btn btn-success" @click.prevent="openAddBoxModal">
+                <font-awesome-icon icon="plus"/>
+                Create Box
             </button>
-            <button class="btn btn-danger" @click.stop="" title="delete">
-                <font-awesome-icon icon="trash"/>
-            </button>
-        </div>
+        </template>
+        <template v-slot:actions="{ item }">
+            <div class="btn-group">
+                <button class="btn btn-secondary" @click.stop="showBoxContent(item.name)">
+                    <!--font-awesome-icon icon="archive"/--> content
+                </button>
+                <button class="btn btn-danger" @click.stop="" title="delete">
+                    <font-awesome-icon icon="trash"/>
+                </button>
+            </div>
+        </template>
     </Table>
 </template>
 
 <script>
-import {mapActions, mapState} from 'vuex';
+import {mapActions, mapMutations, mapState} from 'vuex';
 import Table from '@/components/Table';
 
 export default {
     name: 'Boxes',
     components: {Table},
     computed: mapState(['loadedBoxes', 'layout']),
-    methods: mapActions(['showBoxContent']),
+    methods: {
+        ...mapActions(['showBoxContent']),
+        ...mapMutations(['openAddBoxModal'])
+    },
 };
 </script>