make tickets assignable to users

web/src/components/Timeline.vue

@@ -11,12 +11,16 @@
             <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'state'" :class="'bg-' + stateInfo(item.state).color">
                 <font-awesome-icon :icon="stateInfo(item.state).icon"/>
             </span>
+            <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'assignment'" :class="'bg-secondary'">
+                <font-awesome-icon icon="user"/>
+            </span>
             <span class="timeline-item-icon faded-icon" v-else>
                 <font-awesome-icon icon="pen"/>
             </span>
             <TimelineMail v-if="item.type === 'mail'" :item="item"/>
             <TimelineComment v-else-if="item.type === 'comment'" :item="item"/>
             <TimelineStateChange v-else-if="item.type === 'state'" :item="item"/>
+            <TimelineAssignment v-else-if="item.type === 'assignment'" :item="item"/>
             <p v-else>{{ item }}</p>
         </li>
         <li class="timeline-item">
@@ -61,10 +65,11 @@ import TimelineMail from "@/components/TimelineMail.vue";
 import TimelineComment from "@/components/TimelineComment.vue";
 import TimelineStateChange from "@/components/TimelineStateChange.vue";
 import {mapGetters} from "vuex";
+import TimelineAssignment from "@/components/TimelineAssignment.vue";
 
 export default {
     name: 'Timeline',
-    components: {TimelineStateChange, TimelineComment, TimelineMail},
+    components: {TimelineAssignment, TimelineStateChange, TimelineComment, TimelineMail},
     props: {
         timeline: {
             type: Array,

web/src/components/TimelineAssignment.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="timeline-item-description">
+        <i class="avatar | small">
+            <font-awesome-icon icon="user"/>
+        </i>
+        <span><a href="#">$USER</a> assigned ticket to <span
+            class="badge badge-pill badge-secondary">{{ item.assigned_to }}</span> at <time
+            :datetime="timestamp">{{ timestamp }}</time>
+        </span>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'TimelineAssignment',
+    props: {
+        'item': {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        'timestamp': function () {
+            return new Date(this.item.timestamp).toLocaleString();
+        },
+
+    }
+};
+</script>
+
+<style scoped>
+
+
+a {
+    color: inherit;
+}
+
+
+.timeline-item-description {
+    display: flex;
+    padding-top: 6px;
+    gap: 8px;
+    color: var(--gray);
+
+    img {
+        flex-shrink: 0;
+    }
+
+    a {
+        /*color: var(--c-grey-500);*/
+        font-weight: 500;
+        text-decoration: none;
+
+        &:hover,
+        &:focus {
+            outline: 0; /* Don't actually do this */
+            color: var(--info);
+        }
+    }
+}
+
+.avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    overflow: hidden;
+    aspect-ratio: 1 / 1;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+
+    &.small {
+        width: 28px;
+        height: 28px;
+    }
+
+    img {
+        object-fit: cover;
+    }
+}
+
+</style>

web/src/components/TimelineStateChange.vue

@@ -41,9 +41,6 @@ export default {
         '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/>');
-        }
 
     }
 };

web/src/views/Ticket.vue

@@ -17,6 +17,14 @@
                             <font-awesome-icon icon="clipboard"/>
                             Copy DHL contact to clipboard
                         </ClipboardButton>
+                        <div class="btn-group">
+                            <select class="form-control" v-model="ticket.assigned_to">
+                                <option v-for="user in users" :value="user.username">{{ user.username }}</option>
+                            </select>
+                            <button class="form-control btn btn-success" @click="assigTicket(ticket)">
+                                Assign&nbsp;Ticket
+                            </button>
+                        </div>
                         <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>
@@ -41,7 +49,7 @@ export default {
     name: 'Ticket',
     components: {ClipboardButton, Timeline},
     computed: {
-        ...mapState(['tickets', 'state_options']),
+        ...mapState(['tickets', 'state_options', 'users']),
         ticket() {
             const id = parseInt(this.$route.params.id)
             const ret = this.tickets.find(ticket => ticket.id === id);
@@ -53,7 +61,8 @@ export default {
         }
     },
     methods: {
-        ...mapActions(['deleteItem', 'markItemReturned', 'loadTickets', 'sendMail', 'updateTicketPartial', 'fetchTicketStates', 'postComment']),
+        ...mapActions(['deleteItem', 'markItemReturned', 'sendMail', 'updateTicketPartial', 'postComment']),
+        ...mapActions(['loadTickets', 'loadUsers', 'fetchTicketStates']),
         handleMail(mail) {
             this.sendMail({
                 id: this.ticket.id,
@@ -71,11 +80,18 @@ export default {
                 id: ticket.id,
                 state: ticket.state
             })
+        },
+        assigTicket(ticket) {
+            this.updateTicketPartial({
+                id: ticket.id,
+                assigned_to: ticket.assigned_to
+            })
         }
     },
     created() {
         this.fetchTicketStates()
         this.loadTickets()
+        this.loadUsers()
     }
 };
 </script>