Refactor avatar-icon and add to admin users page

frontend/src/components/AvatarIcon.vue

@@ -1,38 +1,46 @@
 <template>
-	<info-tooltip class='avatar_icon' @hover='loadUser' :noEvents='user === null'>
+	<info-tooltip class='avatar_icon' :noEvents='user === null'>
+		
 		<template slot='content'>
-			<template v-if='ajaxUser'>
+			
+			<template v-if='userData'>
 				<div class='avatar_icon__header'>
 					<div
 						class='avatar_icon__icon avatar_icon__icon--small picture_circle'
 						:style='{
-							"background-color": user.color,
-							"background-image": user.picture ? "url(" + user.picture + ")" : null,
+							"background-color": proxyUser.color,
+							"background-image": pictureURL,
 						}'
 						@click='goToUser'
 					>
-						{{userLetter}}
+						{{letter}}
 					</div>
 					<div class='avatar_icon__header_info'>
-						<span class='avatar_icon__username' @click.stop='goToUser'>{{ajaxUser.username}}</span>
-						<span class='avatar_icon__date'>User since {{ajaxUser.createdAt | formatDate('date') }}</span>
+						<span class='avatar_icon__username' @click.stop='goToUser'>{{proxyUser.username}}</span>
+						<span class='avatar_icon__date'>User since {{proxyUser.createdAt | formatDate('date') }}</span>
 					</div>
 				</div>
-				<div class='avatar_icon__description' v-if='ajaxUser.description'>
-					{{ajaxUser.description}}
+				<div class='avatar_icon__description' v-if='proxyUser.description'>
+					{{proxyUser.description}}
 				</div>
 			</template>
+
 			<template v-else>Loading...</template>
 		</template>
+
 		<div
 			slot='display'
 			class='avatar_icon__icon picture_circle'
 			:class='{"avatar_icon__icon--small": size === "small"}'
-			:style='{ "background-color": userColor, "background-image": userPicture, }'
+			:style='{
+				"background-color": proxyUser.color,
+				"background-image": pictureURL
+			}'
 			@click.stop='goToUser'
 		>
-			{{userLetter}}
+			{{letter}}
 		</div>
+
 	</info-tooltip>
 </template>
 
@@ -46,53 +54,56 @@
 		components: { InfoTooltip },
 		data () {
 			return {
-				ajaxUser: null
+				userData: null
 			}
 		},
 		computed: {
-			userLetter () {
-				if(this.user) {
-					if(this.userPicture) {
-						return ''
-					} else {
-						return this.user.username[0].toUpperCase()
-					}
-				} else {
-					return ''
+			//So that you never access a null variable
+			proxyUser () {
+				if(this.userData) {
+					//Data loaded via api 
+					return this.userData;
+				} else if (this.user) {
+					//Data provided as a prop
+					return this.user;
 				}
+
+				return {};
 			},
-			userColor () {
-				if(this.user) {
-					return this.user.color
+			letter () {
+				if(this.proxyUser.username) {
+					return this.proxyUser.username[0].toUpperCase();
 				} else {
-					return null
+					return '';
 				}
 			},
-			userPicture () {
-				if(this.user && this.user.picture) {
-					return "url(" + this.user.picture + ")"
-				} else {
-					return null
+			pictureURL () {
+				if(this.proxyUser.picture) {
+					return "url(" + this.proxyUser.picture + ")";
 				}
+				
+				return null;
 			}
 		},
 		methods: {
 			loadUser () {
-				if(this.ajaxUser || this.user === null) return
+				//If user is already loaded or no user provided as a prop
+				if(this.userData || this.user === null) return;
 
 				this.axios
-					.get('/api/v1/user/' + this.user.username)
+					.get('/api/v1/user/' + this.proxyUser.username)
 					.then((res) => {
-						this.ajaxUser = res.data
+						this.userData = res.data;
 					})
-					.catch(AjaxErrorHandler(this.$store))
+					.catch(AjaxErrorHandler(this.$store));
 			},
 			goToUser () {
-				if(this.user === null) return
+				if(this.user === null) return;
 
 				this.$router.push('/user/' + this.user.username)
 			}
-		}
+		},
+		mounted() { this.loadUser(); }
 	}
 </script>
 

frontend/src/components/routes/AdminUsers.vue

@@ -43,7 +43,10 @@
 					</th>
 				</tr>
 				<tr v-for='user in users'>
-					<td>{{user.username}}</td>
+					<td class='admin_users__user_column'>
+						<avatar-icon :user='user' size='small'></avatar-icon>
+						<router-link :to='"/user/" + user.username'>{{user.username}}</router-link>
+					</td>
 					<td>{{user.admin ? "Admin" : "User"}}</td>
 					<td>{{user.createdAt | formatDate}}</td>
 					<td>{{user.postCount}}</td>
@@ -67,6 +70,7 @@
 	import FancyInput from '../FancyInput.vue';
 	import LoadingMessage from '../LoadingMessage';
 	import ScrollLoad from '../ScrollLoad';
+	import AvatarIcon from '../AvatarIcon';
 
 	import throttle from 'lodash.throttle';
 	import AjaxErrorHandler from '../../assets/js/errorHandler';
@@ -78,7 +82,8 @@
 			SelectFilter,
 			SortMenu,
 			LoadingMessage,
-			ScrollLoad
+			ScrollLoad,
+			AvatarIcon
 		},
 		data () {
 			return {
@@ -211,6 +216,14 @@
 				padding: 0.75rem;
 			}
 		}
+		@at-root #{&}__user_column {
+			display: flex;
+			align-items: center;
+
+			a {
+				margin: 0 0.25rem;
+			}
+		}
 
 		.overlay_message {
 			padding-top: 2rem;