Load & show user card

src/components/UserActionMenuButton.vue

@@ -7,6 +7,9 @@
           {{ $t('Common.User') }}
         </v-list-subheader>
         <v-divider />
+        <v-list-item :slim="true" prepend-icon="mdi-cog-outline" to="/settings">
+          {{ $t('UserDashboard.Settings') }}
+        </v-list-item>
         <ShareLink :overrideUrl="getShareLinkUrl" display="list-item" />
         <OpenFoodFactsLink facet="editor" :value="user.user_id" display="list-item" />
       </v-list>
@@ -16,6 +19,8 @@
 
 <script>
 import { defineAsyncComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useAppStore } from '../store'
 
 export default {
   components: {
@@ -33,6 +38,13 @@ export default {
     }
   },
   computed: {
+    ...mapStores(useAppStore),
+    username() {
+      return this.appStore.user.username
+    },
+    userIsPriceOwner() {
+      return this.username && (this.user.user_id === this.username)
+    },
     getShareLinkUrl() {
       return `/users/${this.user.user_id}`
     }

src/views/UserDashboard.vue

@@ -1,12 +1,7 @@
 <template>
-  <v-row>
-    <v-col>
-      <v-chip class="mr-2" label variant="text" prepend-icon="mdi-account">
-        {{ username }}
-      </v-chip>
-      <v-btn size="small" prepend-icon="mdi-cog-outline" to="/settings">
-        {{ $t('UserDashboard.Settings') }}
-      </v-btn>
+  <v-row v-if="user">
+    <v-col cols="12" sm="6">
+      <UserCard :user="user" readonly />
     </v-col>
   </v-row>
 
@@ -33,13 +28,18 @@
 </template>
 
 <script>
+import { defineAsyncComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useAppStore } from '../store'
 import api from '../services/api'
 
 export default {
+  components: {
+    UserCard: defineAsyncComponent(() => import('../components/UserCard.vue')),
+  },
   data() {
     return {
+      user: null,
       userPriceTotal: null,
       userProofTotal: null,
       loading: false,
@@ -52,10 +52,19 @@ export default {
     },
   },
   mounted() {
+    this.getUser()
     this.getUserPriceCount()
     this.getUserProofCount()
   },
   methods: {
+    getUser() {
+      this.loading = true
+      return api.getUserById(this.username)
+        .then((data) => {
+          this.user = data
+          this.loading = false
+        })
+    },
     getUserPriceCount() {
       this.loading = true
       return api.getPrices({ owner: this.username, size: 1 })