add dropdown selection to change state of tickets

web/src/components/TimelineStateChange.vue

@@ -4,13 +4,16 @@
             <font-awesome-icon icon="user"/>
         </i>
         <span><a href="#">$USER</a> has changed state to <span
-            class="badge badge-pill badge-primary">{{ item.state }}</span> on <time
-            :datetime="item.timestamp">{{ item.timestamp }}</time></span>
+            class="badge badge-pill badge-primary" :class="'bg-' + colorLookup">{{ lookupState.text }}</span> at <time
+            :datetime="timestamp">{{ timestamp }}</time>
+        </span>
     </div>
 </template>
 
 <script>
 
+import {mapState} from "vuex";
+
 export default {
     name: 'TimelineStateChange',
     props: {
@@ -19,6 +22,30 @@ export default {
             required: true
         }
     },
+    computed: {
+        ...mapState(['state_options']),
+        lookupState: function () {
+            return this.state_options.find(state => state.value === this.item.state);
+        },
+        colorLookup: function () {
+            if (this.item.state.startsWith('closed_')) {
+                return 'secondary';
+            } else if (this.item.state.startsWith('pending_')) {
+                return 'warning';
+            } else if (this.item.state.startsWith('waiting_')) {
+                return 'primary';
+            } else {
+                return 'danger';
+            }
+        },
+        'timestamp': function () {
+            return new Date(this.item.timestamp).toLocaleString();
+        },
+        'body': function () {
+            return this.item.body.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
+        }
+
+    }
 };
 </script>
 

web/src/store/index.js

@@ -76,6 +76,7 @@ const store = new Vuex.Store({
         password: null,
         userPermissions: [],
         token: null,
+        state_options: [],
         token_expiry: null,
         local_loaded: false,
     },
@@ -111,6 +112,9 @@ const store = new Vuex.Store({
         replaceEvents(state, events) {
             state.events = events;
         },
+        replaceTicketStates(state, states) {
+            state.state_options = states;
+        },
         changeView(state, {view, slug}) {
             router.push({path: `/${slug}/${view}`});
         },
@@ -258,6 +262,10 @@ const store = new Vuex.Store({
             const {data} = await axios.get('/2/events/');
             commit('replaceEvents', data);
         },
+        async fetchTicketStates({commit}) {
+            const {data} = await axios.get('/2/tickets/states/');
+            commit('replaceTicketStates', data);
+        },
         changeEvent({dispatch, getters, commit}, eventName) {
             router.push({path: `/${eventName.slug}/${getters.getActiveView}/`});
             dispatch('loadEventItems');
@@ -319,7 +327,12 @@ const store = new Vuex.Store({
             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'});
+            const {data} = await axios.post(`/2/tickets/manual/`, {
+                name: title,
+                sender,
+                body: message,
+                recipient: 'mail@c3lf.de'
+            });
             await dispatch('loadTickets');
         },
         async loadUsers({commit}) {
@@ -330,6 +343,14 @@ const store = new Vuex.Store({
             const {data} = await axios.get('/2/groups/');
             commit('replaceGroups', data);
         },
+        async updateTicket({commit}, ticket) {
+            const {data} = await axios.put(`/2/tickets/${ticket.id}/`, ticket);
+            commit('updateTicket', data);
+        },
+        async updateTicketPartial({commit}, {id, ...ticket}) {
+            const {data} = await axios.patch(`/2/tickets/${id}/`, ticket);
+            commit('updateTicket', data);
+        }
     }
 });
 

web/src/views/Items.vue

@@ -88,13 +88,13 @@ export default {
     computed: mapState(['loadedItems', 'layout']),
     methods: {
         ...mapActions(['deleteItem', 'markItemReturned']),
-        openLightboxModalWith(item) { // Opens the editing modal with a copy of the selected item.
+        openLightboxModalWith(item) {
             this.lightboxItem = {...item};
         },
         closeLightboxModal() { // Closes the editing modal and discards the edited copy of the item.
             this.lightboxItem = null;
         },
-        openEditingModalWith(item) {
+        openEditingModalWith(item) { // Opens the editing modal with a copy of the selected item.
             this.editingItem = item;
         },
         closeEditingModal() {

web/src/views/Ticket.vue

@@ -9,13 +9,19 @@
                     <Timeline :timeline="ticket.timeline" @sendMail="handleMail"/>
                     <div class="card-footer d-flex justify-content-between">
                         <router-link :to="{name: 'tickets'}" class="btn btn-secondary mr-2">Back</router-link>
-                        <button class="btn btn-danger" @click="deleteItem({type: 'tickets', id: ticket.id})">
+                        <!--button class="btn btn-danger" @click="deleteItem({type: 'tickets', id: ticket.id})">
                             <font-awesome-icon icon="trash"/>
                             Delete
                         </button>
-                        <button class="btn btn-success" @click="markItemReturned({type: 'tickets', id: ticket.id})">Mark
+                        <button-- class="btn btn-success" @click="markItemReturned({type: 'tickets', id: ticket.id})">Mark
                             as returned
-                        </button>
+                        </button-->
+                        <div class="btn-group">
+                            <select class="form-control" v-model="ticket.state">
+                                <option v-for="status in state_options" :value="status.value">{{ status.text }}</option>
+                            </select>
+                            <button class="form-control btn btn-success" @click="changeTicketStatus(ticket)">Change Status</button>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -31,7 +37,7 @@ export default {
     name: 'Ticket',
     components: {Timeline},
     computed: {
-        ...mapState(['tickets']),
+        ...mapState(['tickets', 'state_options']),
         ticket() {
             const id = parseInt(this.$route.params.id)
             const ret = this.tickets.find(ticket => ticket.id === id);
@@ -39,15 +45,22 @@ export default {
         }
     },
     methods: {
-        ...mapActions(['deleteItem', 'markItemReturned', 'loadTickets', 'sendMail']),
+        ...mapActions(['deleteItem', 'markItemReturned', 'loadTickets', 'sendMail', 'updateTicketPartial', 'fetchTicketStates']),
         handleMail(mail) {
             this.sendMail({
                 id: this.ticket.id,
                 message: mail
             })
+        },
+        changeTicketStatus(ticket) {
+            this.updateTicketPartial({
+                id: ticket.id,
+                state: ticket.state
+            })
         }
     },
     created() {
+        this.fetchTicketStates()
         this.loadTickets()
     }
 };