Spookie/assets/js/components/users/ProfileView.vue

<template>
	<div
		v-if="isLoading"
		class="circle"
	>
		<i class="fa fa-spinner fa-spin fa-3x fa-fw"/>
		<span class="sr-only">Loading …</span>
	</div>
	<div
		v-else
		class="container box rounded bg-dark mt-5 mb-5"
	>
		<div class="row">
			<div class="col-md-3">
				<div class="d-flex flex-column align-items-center text-center p-3 py-5">
					Profile of {{ user.username }}
					<img
						class="rounded-circle border-1 mt-5"
						src="/build/images/tracer_schmolle150x150.png"
						alt="profile image"
					>
					<span class="font-weight-bold">{{ user.username }}</span>
					<!--
					<span class="font-weight-bold">
					<a href="{{ path('app_main', { '_switch_user': app.user.username }) }}">
					switch user {{ user.username }}</span>
					-->
					<span class="text-white-50">
						<i class="fa fa-lg fa-envelope me-1"/>{{ user.email }}
					</span>
				</div>
			</div>
			<div class="col-md-5">
				<div class="p-3 py-5">
					<div class="d-flex justify-content-between align-items-center mb-3">
						<h4 class="text-right">
							User Projects …
						</h4>
					</div>
					<div class="row mt-2"/>

					<!--
					<div class="mt-5 text-center">
						<button class="btn btn-primary profile-button" type="button">Save Profile</button>
					</div>
					-->
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import axios from 'axios'

export default {
	name: 'ProfileView',
	data: () => ({
		user: null,
		isLoading: true
	}),
	computed: {
		getUserEndpoint() {
			if (this.$route.params.username) {
				return `/api/users?username=${this.$route.params.username}`
			}
			return '/api/users?username=tracer'
		}
	},
	mounted() {
		axios
			.get(this.getUserEndpoint)
			.then((response) => {
				console.log(response);
				[this.user] = response.data['hydra:member']

				console.log(this.user)
				this.isLoading = false
			})
			.catch((error) => {
				console.log(error)
			})
	}
}
</script>