Improve user info (#47)

ui/src/components/User.vue

@@ -0,0 +1,63 @@
+<template>
+  <span>
+    <span v-if="id === undefined">
+      <v-icon small class="mr-1">mdi-account</v-icon>
+      unassigned
+    </span>
+    <span v-else-if="user === undefined">
+      <v-icon small class="mr-1">mdi-account</v-icon>
+      {{ id }}
+    </span>
+    <span v-else>
+      <v-avatar v-if="user.image" :size="lodash.isInteger(size) ? size : 24">
+        <v-img :src="user.image"></v-img>
+      </v-avatar>
+      <v-icon v-else small class="">mdi-account</v-icon>
+      {{ user.name ? user.name : id }}
+    </span>
+  </span>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import {UserData} from "@/client";
+import {API} from "@/services/api";
+import {AxiosTransformer} from "axios";
+
+interface State {
+  user?: UserData,
+}
+
+export default Vue.extend({
+  name: "User",
+  props: ["id", "size"],
+  data: (): State => ({
+    user: undefined,
+  }),
+  watch: {
+    id: function(): void {
+      this.loadUserData();
+    }
+  },
+  methods: {
+    loadUserData: function () {
+      if (this.id === undefined) {
+        this.user = undefined;
+        return
+      }
+
+      let defaultTransformers = this.axios.defaults.transformResponse as AxiosTransformer[]
+      let transformResponse = defaultTransformers.concat((data) => {
+        data.notoast = true;
+        return data
+      });
+      API.getUserData(this.id, {transformResponse: transformResponse}).then(response => {
+        this.user = response.data;
+      })
+    }
+  },
+  mounted() {
+    this.loadUserData();
+  }
+});
+</script>

ui/src/components/snippets/TicketSnippet.vue

@@ -12,8 +12,7 @@
         <v-icon small class="mr-1" :color="statusColor">{{ statusIcon }}</v-icon>
         <span :class="statusColor + '--text'">{{ ticket.status | capitalize }}</span>
 
-        <v-icon small class="mx-1">mdi-account</v-icon>
-        {{ ticket.owner ? ticket.owner : 'unassigned' }}
+        <User :id="ticket.owner" :size="16" class="mx-2"></User>
         <v-spacer></v-spacer>
         <v-icon small class="mr-1">mdi-source-branch</v-icon>
         <span class="mr-1">{{ ticket.playbooks ? lodash.size(ticket.playbooks) : 0 }}</span>
@@ -38,10 +37,14 @@
 <script lang="ts">
 import Vue from "vue";
 import {Playbook, Task, Type, TypeColorEnum} from "@/client";
+import User from "@/components/User.vue";
 
 export default Vue.extend({
   name: "TicketSnippet",
   props: ["ticket", "to", "action"],
+  components: {
+    User
+  },
   computed: {
     opentaskcount: function() {
       let count = 0;