stash

web/src/components/Timeline.vue

@@ -24,7 +24,12 @@
                 <font-awesome-icon icon="comment"/>
             </span>
             <div class="new-comment">
-                <input type="text" placeholder="Add a comment..."/>
+                <div class="input-group">
+                    <input type="text" placeholder="Add a comment..." v-model="newMail">
+                    <button class="btn" @click="sendMail">
+                        Send
+                    </button>
+                </div>
             </div>
         </li>
     </ol>
@@ -45,6 +50,16 @@ export default {
             default: () => []
         }
     },
+    emits: ['sendMail'],
+    data: () => ({
+        newMail: ""
+    }),
+    methods: {
+        sendMail() {
+            this.$emit('sendMail', this.newMail);
+            this.newMail = "";
+        }
+    }
 };
 </script>
 
@@ -105,7 +120,6 @@ img {
         border-radius: 6px;
         height: 48px;
         padding: 0 16px;
-        width: 100%;
 
         &::placeholder {
             color: var(--gray-dark);

web/src/store/index.js

@@ -157,6 +157,10 @@ const store = new Vuex.Store({
             const {data} = await axios.get('/2/tickets/');
             commit('replaceTickets', data);
         },
+        async sendMail({commit, dispatch}, {id, message}) {
+            const {data} = await axios.post(`/2/tickets/${id}/reply/`, {message});
+            await dispatch('loadTickets');
+        }
     }
 });
 

web/src/views/Ticket.vue

@@ -6,7 +6,7 @@
                     <div class="card-header">
                         <h3>Ticket #{{ ticket.id }} - {{ ticket.name }}</h3>
                     </div>
-                    <Timeline :timeline="ticket.timeline"/>
+                    <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})">
@@ -39,7 +39,13 @@ export default {
         }
     },
     methods: {
-        ...mapActions(['deleteItem', 'markItemReturned', 'loadTickets']),
+        ...mapActions(['deleteItem', 'markItemReturned', 'loadTickets', 'sendMail']),
+        handleMail(mail) {
+            this.sendMail({
+                id: this.ticket.id,
+                message: mail
+            })
+        }
     },
     created() {
         this.loadTickets()