stash

web/src/App.vue

@@ -1,7 +1,8 @@
 <template>
     <div id="app">
-        <AddItemModal v-if="addModalOpen && isLoggedIn" @close="closeAddModal()" isModal="true"/>
+        <AddItemModal v-if="addItemModalOpen && isLoggedIn" @close="closeAddItemModal()" isModal="true"/>
-        <Navbar v-if="isLoggedIn" @addClicked="openAddModal()"/>
+        <AddTicketModal v-if="addTicketModalOpen && isLoggedIn" @close="closeAddTicketModal()" isModal="true"/>
+        <Navbar v-if="isLoggedIn" @addItemClicked="openAddItemModal()" @addTicketClicked="openAddTicketModal()"/>
         <router-view/>
         <div aria-live="polite" aria-atomic="true" v-if="isLoggedIn"
              class="d-flex justify-content-end align-items-start fixed-top mx-1 my-5 py-3"
@@ -18,27 +19,35 @@ import Navbar from '@/components/Navbar';
 import AddItemModal from '@/components/AddItemModal';
 import Toast from './components/Toast';
 import {mapState, mapMutations, mapActions, mapGetters} from 'vuex';
+import AddTicketModal from "@/components/AddTicketModal.vue";
 
 export default {
     name: 'app',
-    components: {Toast, Navbar, AddItemModal},
+    components: {Toast, Navbar, AddItemModal, AddTicketModal},
     computed: {
         ...mapState(['loadedItems', 'layout', 'toasts']),
         ...mapGetters(['isLoggedIn']),
     },
     data: () => ({
-        addModalOpen: false,
+        addItemModalOpen: false,
+        addTicketModalOpen: false,
         notify_socket: null,
         socket_toast: null,
     }),
     methods: {
         ...mapMutations(['removeToast', 'createToast']),
         ...mapActions(['loadEventItems', 'loadTickets']),
-        openAddModal() {
+        openAddItemModal() {
-            this.addModalOpen = true;
+            this.addItemModalOpen = true;
         },
-        closeAddModal() {
+        openAddTicketModal() {
-            this.addModalOpen = false;
+            this.addTicketModalOpen = true;
+        },
+        closeAddItemModal() {
+            this.addItemModalOpen = false;
+        },
+        closeAddTicketModal() {
+            this.addTicketModalOpen = false;
         },
         tryConnect() {
             if (!this.notify_socket || this.notify_socket.readyState !== WebSocket.OPEN) {

web/src/components/AddTicketModal.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <Modal v-if="isModal" title="Add Item" @close="$emit('close')">
+            <template #body>
+                <div>
+                    <input type="text" class="form-control" placeholder="Sender" v-model="ticket.sender">
+                    <input type="text" class="form-control" placeholder="Title" v-model="ticket.title">
+                    <textarea class="form-control" placeholder="Message" v-model="ticket.message"></textarea>
+                </div>
+            </template>
+            <template #buttons>
+                <button type="button" class="btn btn-secondary" @click="$emit('close')">Cancel</button>
+                <button type="button" class="btn btn-success" @click="saveNewTicket()">Save new Item</button>
+            </template>
+        </Modal>
+    </div>
+</template>
+
+<script>
+import Modal from '@/components/Modal';
+import EditItem from '@/components/EditItem';
+
+export default {
+    name: 'AddTicketModal',
+    components: {Modal, EditItem},
+    props: ['isModal'],
+    data: () => ({
+        ticket: {
+            sender: '',
+            message: '',
+            title: '',
+        }
+    }),
+    created() {
+        this.ticket = {box: this.$store.state.lastUsed.box || '', cid: this.$store.state.lastUsed.cid || ''};
+    },
+    methods: {
+        saveNewTicket() {
+            this.$store.dispatch('postManualTicket', this.ticket).then(() => {
+                this.$emit('close');
+            });
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

web/src/components/Navbar.vue

@@ -13,13 +13,13 @@
         <ul class="nav nav-tabs flex-nowrap">
             <li class="nav-item" v-if="checkPermission(getEventSlug, 'view_item')">
                 <router-link :to="{name: 'items', params: {event: getEventSlug}}"
-                             :class="['nav-link', { active: getActiveView === 'items' || getActiveView === 'item' }]">
+                             :class="['nav-link', { active: isItemView() }]">
                     Items
                 </router-link>
             </li>
             <li class="nav-item" v-if="checkPermission(getEventSlug, 'view_issuethread')">
                 <router-link :to="{name: 'tickets', params: {event: getEventSlug}}"
-                             :class="['nav-link', { active: getActiveView === 'tickets' || getActiveView === 'ticket' }]">
+                             :class="['nav-link', { active: isTicketView() }]">
                     Tickets
                 </router-link>
             </li>
@@ -29,7 +29,7 @@
                 </router-link>
             </li>
         </ul>
-        <form class="form-inline mt-1 my-lg-auto my-xl-auto w-100 d-inline" v-if="hasPermissions">
+        <form class="form-inline mt-1 my-lg-auto my-xl-auto w-100 d-inline mr-1" v-if="hasPermissions">
             <input
                 class="form-control w-100"
                 type="search"
@@ -40,7 +40,7 @@
             >
         </form>
         <div class="custom-control-inline mr-1" v-if="hasPermissions">
-            <div class="btn-group btn-group-toggle mx-1">
+            <div class="btn-group btn-group-toggle mr-1" v-if="isItemView()">
                 <button :class="['btn', 'btn-info', { active: layout === 'cards' }]" @click="setLayout('cards')">
                     <font-awesome-icon icon="th"/>
                 </button>
@@ -48,9 +48,15 @@
                     <font-awesome-icon icon="list"/>
                 </button>
             </div>
-            <button type="button" class="btn text-nowrap btn-success" @click="$emit('addClicked')">
+            <button type="button" class="btn text-nowrap btn-success mr-1" @click="$emit('addItemClicked')"
+                    v-if="isItemView()">
                 <font-awesome-icon icon="plus"/>
-                <span class="d-none d-md-inline">&nbsp;Add</span>
+                <span class="d-none d-md-inline">&nbsp;Add Item</span>
+            </button>
+            <button type="button" class="btn text-nowrap btn-success mr-1" @click="$emit('addTicketClicked')"
+                    v-if="isTicketView()">
+                <font-awesome-icon icon="plus"/>
+                <span class="d-none d-md-inline">&nbsp;Add Ticket</span>
             </button>
         </div>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
@@ -84,7 +90,6 @@
                 </li>
             </ul>
         </div>
-
     </nav>
 </template>
 
@@ -113,6 +118,12 @@ export default {
         navigateTo(link) {
             if (this.$router.currentRoute.path !== link)
                 this.$router.push(link);
+        },
+        isItemView() {
+            return this.getActiveView === 'items' || this.getActiveView === 'item';
+        },
+        isTicketView() {
+            return this.getActiveView === 'tickets' || this.getActiveView === 'ticket';
         }
     }
 };

web/src/store/index.js

@@ -318,6 +318,10 @@ const store = new Vuex.Store({
             const {data} = await axios.post(`/2/tickets/${id}/reply/`, {message});
             await dispatch('loadTickets');
         },
+        async postManualTicket({commit, dispatch}, {sender, message, title,}) {
+            const {data} = await axios.post(`/2/tickets/manual/`, {name: title, sender, body: message, recipient: 'mail@c3lf.de'});
+            await dispatch('loadTickets');
+        },
         async loadUsers({commit}) {
             const {data} = await axios.get('/2/users/');
             commit('replaceUsers', data);