add text field to add comment to ticket

core/tickets/api_v2.py

@@ -88,6 +88,12 @@ class IssueViewSet(viewsets.ModelViewSet):
 
 
 class CommentSerializer(serializers.ModelSerializer):
+
+    def validate(self, attrs):
+        if 'comment' not in attrs or attrs['comment'] == '':
+            raise serializers.ValidationError('comment cannot be empty')
+        return attrs
+
     class Meta:
         model = Comment
         fields = ('id', 'comment', 'timestamp', 'issue_thread')
@@ -176,12 +182,33 @@ def get_available_states(request):
     return Response(get_state_choices())
 
 
+@api_view(['POST'])
+@permission_classes([IsAuthenticated])
+@permission_required('tickets.add_comment', raise_exception=True)
+def add_comment(request, pk):
+    issue = IssueThread.objects.get(pk=pk)
+    if 'comment' not in request.data or request.data['comment'] == '':
+        return Response({'status': 'error', 'message': 'missing comment'}, status=status.HTTP_400_BAD_REQUEST)
+    comment = Comment.objects.create(
+        issue_thread=issue,
+        comment=request.data['comment'],
+    )
+    systemevent = SystemEvent.objects.create(type='comment added', reference=comment.id)
+    channel_layer = get_channel_layer()
+    async_to_sync(channel_layer.group_send)(
+        'general', {"type": "generic.event", "name": "send_message_to_frontend", "event_id": systemevent.id,
+                    "message": "comment added"}
+    )
+    return Response(CommentSerializer(comment).data, status=status.HTTP_201_CREATED)
+
+
 router = routers.SimpleRouter()
 router.register(r'tickets', IssueViewSet, basename='issues')
 router.register(r'comments', CommentViewSet, basename='comments')
 
 urlpatterns = ([
                    re_path(r'^tickets/(?P<pk>\d+)/reply/$', reply, name='reply'),
+                   re_path(r'^tickets/(?P<pk>\d+)/comment/$', add_comment, name='add_comment'),
                    re_path(r'^tickets/manual/$', manual_ticket, name='manual_ticket'),
                    re_path(r'^tickets/states/$', get_available_states, name='get_available_states'),
                ] + router.urls)

core/tickets/tests/v2/test_tickets.py

@@ -175,6 +175,23 @@ class IssueApiTest(TestCase):
         self.assertEqual(response.json()['issue_thread'], issue.id)
         self.assertEqual(response.json()['timestamp'], response.json()['timestamp'])
 
+    def test_post_comment_altenative(self):
+        issue = IssueThread.objects.create(
+            name="test issue",
+        )
+        response = self.client.post(f'/api/2/tickets/{issue.id}/comment/', {'comment': 'test'})
+        self.assertEqual(response.status_code, 201)
+        self.assertEqual(response.json()['comment'], 'test')
+        self.assertEqual(response.json()['issue_thread'], issue.id)
+        self.assertEqual(response.json()['timestamp'], response.json()['timestamp'])
+
+    def test_post_alt_comment_empty(self):
+        issue = IssueThread.objects.create(
+            name="test issue",
+        )
+        response = self.client.post(f'/api/2/tickets/{issue.id}/comment/', {'comment': ''})
+        self.assertEqual(response.status_code, 400)
+
     def test_state_change(self):
         issue = IssueThread.objects.create(
             name="test issue",

web/src/components/Navbar.vue

@@ -148,6 +148,7 @@ export default {
         padding-bottom: 1rem !important;
         border: var(--gray) solid 1px !important;
         border-bottom: none !important;
+        color: var(--blue) !important;
 
         &.active {
             background: black !important;

web/src/components/Timeline.vue

@@ -23,12 +23,31 @@
             <span class="timeline-item-icon | faded-icon">
                 <font-awesome-icon icon="comment"/>
             </span>
-            <div class="new-comment">
-                <div class="input-group">
-                    <textarea placeholder="reply mail..." v-model="newMail">
+            <div class="new-comment card bg-dark">
+                <div class="">
+                    <textarea placeholder="add comment..." v-model="newComment" class="form-control">
                     </textarea>
-                    <button class="btn btn-primary" @click="sendMailandClear">
-                        Send
+                    <button class="btn btn-primary float-right" @click="addCommentAndClear">
+                        <font-awesome-icon icon="comment"/>
+                        Save Comment
+                    </button>
+                </div>
+            </div>
+        </li>
+        <li class="timeline-item">
+            <span class="timeline-item-icon | faded-icon">
+                <font-awesome-icon icon="envelope"/>
+            </span>
+            <div class="new-mail card bg-dark">
+                <div class="card-header">
+                    {{ newestMailSubject }}
+                </div>
+                <div>
+                    <textarea placeholder="reply mail..." v-model="newMail" class="form-control">
+                    </textarea>
+                    <button class="btn btn-primary float-right" @click="sendMailAndClear">
+                        <font-awesome-icon icon="envelope"/>
+                        Send Mail
                     </button>
                 </div>
             </div>
@@ -52,18 +71,27 @@ export default {
             default: () => []
         }
     },
-    emits: ['sendMail'],
+    emits: ['sendMail', 'addComment'],
     data: () => ({
-        newMail: ""
+        newMail: "",
+        newComment: ""
     }),
     computed: {
         ...mapGetters(['stateInfo']),
+        newestMailSubject() {
+            const mail = this.timeline.filter(item => item.type === 'mail').pop();
+            return mail ? mail.subject : "";
+        },
     },
     methods: {
-        sendMailandClear: function () {
+        sendMailAndClear: function () {
             this.$emit('sendMail', this.newMail);
             this.newMail = "";
         },
+        addCommentAndClear: function () {
+            this.$emit('addComment', this.newComment);
+            this.newComment = "";
+        }
     },
 };
 </script>
@@ -117,14 +145,14 @@ img {
     }
 }
 
-.new-comment {
+.new-comment, .new-mail {
     width: 100%;
 
-    input {
+    textarea, input {
         border: 1px solid var(--gray);
         border-radius: 6px;
-        height: 48px;
-        padding: 0 16px;
+        height: 5em;
+        padding: 8px 16px;
 
         &::placeholder {
             color: var(--gray-dark);

web/src/components/inputs/ClipboardButton.vue

@@ -0,0 +1,18 @@
+<template>
+    <button @click="fillClipboard" class="btn" :title="payload">
+        <slot></slot>
+    </button>
+</template>
+
+<script>
+
+export default {
+    name: 'ClipboardButton',
+    props: ['payload'],
+    methods: {
+        fillClipboard() {
+            navigator.clipboard.writeText(this.payload);
+        },
+    }
+};
+</script>

web/src/main.js

@@ -36,7 +36,7 @@ import {
     faUser,
     faComments,
     faArchive,
-    faMinus, faHourglass, faExclamation,
+    faMinus, faHourglass, faExclamation, faClipboard,
 } from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 
@@ -44,7 +44,7 @@ import vueDebounce from 'vue-debounce';
 
 library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList,
     faWindowClose, faCamera, faStop, faPen, faCheck, faTimes, faSave, faEye, faComment, faUser, faComments, faEnvelope,
-    faArchive, faMinus, faExclamation, faHourglass);
+    faArchive, faMinus, faExclamation, faHourglass, faClipboard);
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 
 sync(store, router);

web/src/store/index.js

@@ -35,9 +35,7 @@ axios.interceptors.response.use(response => response, error => {
         store.commit('createToast', {title: 'Error: Access denied', message, color: 'danger'});
         return Promise.reject(error)
     } else {
-        console.log('error interceptor fired');
-        console.error(error); // todo: toast error
-        console.log(Object.entries(error));
+        console.error('error interceptor fired', error.message);
 
         if (error.isAxiosError) {
             const message = `
@@ -272,6 +270,7 @@ const store = new Vuex.Store({
             //credentials failed, logout
             store.commit('logout');
         },
+        //async verifyToken({commit, state}) {
         async afterLogin({dispatch}) {
             const boxes = dispatch('loadBoxes');
             const items = dispatch('loadEventItems');
@@ -375,6 +374,10 @@ const store = new Vuex.Store({
             });
             await dispatch('loadTickets');
         },
+        async postComment({commit, dispatch}, {id, message}) {
+            const {data} = await axios.post(`/2/tickets/${id}/comment/`, {comment: message});
+            await dispatch('loadTickets');
+        },
         async loadUsers({commit}) {
             const {data} = await axios.get('/2/users/');
             commit('replaceUsers', data);

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" @sendMail="handleMail"/>
+                    <Timeline :timeline="ticket.timeline" @sendMail="handleMail" @addComment="handleComment"/>
                     <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})">
@@ -16,11 +16,17 @@
                         <button-- class="btn btn-success" @click="markItemReturned({type: 'tickets', id: ticket.id})">Mark
                             as returned
                         </button-->
+                        <ClipboardButton :payload="shippingEmail" class="btn btn-primary">
+                            <font-awesome-icon icon="clipboard"/>
+                            Copy DHL contact to clipboard
+                        </ClipboardButton>
                         <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>
+                            <button class="form-control btn btn-success" @click="changeTicketStatus(ticket)">
+                                Change&nbsp;Status
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -32,26 +38,37 @@
 <script>
 import {mapActions, mapState} from 'vuex';
 import Timeline from "@/components/Timeline.vue";
+import ClipboardButton from "@/components/inputs/ClipboardButton.vue";
 
 export default {
     name: 'Ticket',
-    components: {Timeline},
+    components: {ClipboardButton, Timeline},
     computed: {
         ...mapState(['tickets', 'state_options']),
         ticket() {
             const id = parseInt(this.$route.params.id)
             const ret = this.tickets.find(ticket => ticket.id === id);
             return ret ? ret : {};
+        },
+        shippingEmail() {
+            const domain = document.location.hostname;
+            return `ticket+${this.ticket.uuid}@${domain}`;
         }
     },
     methods: {
-        ...mapActions(['deleteItem', 'markItemReturned', 'loadTickets', 'sendMail', 'updateTicketPartial', 'fetchTicketStates']),
+        ...mapActions(['deleteItem', 'markItemReturned', 'loadTickets', 'sendMail', 'updateTicketPartial', 'fetchTicketStates', 'postComment']),
         handleMail(mail) {
             this.sendMail({
                 id: this.ticket.id,
                 message: mail
             })
         },
+        handleComment(comment) {
+            this.postComment({
+                id: this.ticket.id,
+                message: comment
+            })
+        },
         changeTicketStatus(ticket) {
             this.updateTicketPartial({
                 id: ticket.id,