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>