Client - add link to users in admin

fittrackee_client/src/views/UserView.vue

@@ -0,0 +1,69 @@
+<template>
+  <div id="user" v-if="user.username">
+    <UserHeader :user="user" />
+    <div class="box">
+      <UserInfos :user="user" :from-admin="true" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import {
+    ComputedRef,
+    computed,
+    defineComponent,
+    onBeforeMount,
+    onBeforeUnmount,
+  } from 'vue'
+  import { useRoute } from 'vue-router'
+
+  import UserHeader from '@/components/User/ProfileDisplay/UserHeader.vue'
+  import UserInfos from '@/components/User/ProfileDisplay/UserInfos.vue'
+  import { USERS_STORE } from '@/store/constants'
+  import { IUserProfile } from '@/types/user'
+  import { useStore } from '@/use/useStore'
+
+  export default defineComponent({
+    name: 'UserView',
+    components: {
+      UserHeader,
+      UserInfos,
+    },
+    setup() {
+      const route = useRoute()
+      const store = useStore()
+
+      const user: ComputedRef<IUserProfile> = computed(
+        () => store.getters[USERS_STORE.GETTERS.USER]
+      )
+
+      onBeforeMount(() => {
+        if (
+          route.params.username &&
+          typeof route.params.username === 'string'
+        ) {
+          store.dispatch(USERS_STORE.ACTIONS.GET_USER, route.params.username)
+        }
+      })
+
+      onBeforeUnmount(() => {
+        store.dispatch(USERS_STORE.ACTIONS.EMPTY_USER)
+      })
+
+      return { user }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+
+  #user {
+    margin: auto;
+    width: 700px;
+    @media screen and (max-width: $medium-limit) {
+      width: 100%;
+      margin: 0 auto 50px auto;
+    }
+  }
+</style>