before urpgrade to vue 3

assets/js/components/users/ProfileView.vue

@@ -0,0 +1,86 @@
+<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 mt-5"
+						width="150px"
+						src="/build/images/tracer_schmolle.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>

assets/js/components/users/UserCard.vue

@@ -0,0 +1,53 @@
+<template>
+    <div v-if="isLoading" class="circle">
+        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
+        <span class="sr-only">Loading …</span>
+    </div>
+    <div v-else class="mt-1 mb-1">
+        <b-link class="align-left blog-details" :to="'/profile/' + author.username">
+            <img class="article-author-img rounded-circle"
+                 :src="'build/images/' + author.avatar"
+                 alt="profile"></b-link>
+        <b-link :to="'/profile/' + author.username">
+            {{ author.username }}
+        </b-link>
+    </div>
+</template>
+
+
+<script>
+
+import axios from "axios";
+
+export default {
+    name: "Author",
+    data: () => ({
+        author: null,
+        isLoading: true
+    }),
+    props: ["authorIri"],
+
+    mounted() {
+        this.getAuthor();
+    },
+    methods: {
+        getAuthor() {
+            console.log("here" + this.authorIri);
+            axios
+                .get(this.authorIri)
+                .then(response => {
+                    console.log("response");
+                    console.log(response);
+                    this.author = response.data;
+                    console.log(this.author);
+                    this.isLoading = false;
+
+                })
+                .catch(error => {
+                    console.log(error);
+                });
+            console.log(this.author);
+        }
+    }
+};
+</script>