#29 feat: add user profile menu in navbar

src/components/NavBar.vue

@@ -13,11 +13,37 @@
     </v-btn>
     <v-btn 
       v-else 
-      prepend-icon="mdi-logout" 
       variant="text"
-      @click="logout"
     >
-      Logout
+      <v-menu activator="parent">
+        <v-list>
+          <v-list-item>
+            <v-list-item-title class="font-weight-bold">{{ user?.username }}</v-list-item-title>
+            <v-list-item-subtitle>{{ user?.email }}</v-list-item-subtitle>
+          </v-list-item>
+          <v-divider></v-divider>
+          <v-list-item v-if="user?.first_name || user?.last_name">
+            <v-list-item-title>{{ user?.first_name }} {{ user?.last_name }}</v-list-item-title>
+          </v-list-item>
+          <v-list-item>
+            <v-chip 
+              :color="user?.is_staff ? 'error' : 'primary'" 
+              size="small"
+            >
+              {{ user?.is_staff ? 'Administrador' : 'Usuario' }}
+            </v-chip>
+          </v-list-item>
+          <v-divider></v-divider>
+          <v-list-item @click="logout">
+            <v-list-item-title>
+              <v-icon start>mdi-logout</v-icon>
+              Cerrar sesión
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+      <v-icon start>mdi-account</v-icon>
+      {{ user?.username }}
     </v-btn>
   </v-app-bar>
   <v-navigation-drawer v-model="drawer"
@@ -53,6 +79,7 @@
 <script>
  import trytonIcon from '../assets/icons/tryton-icon.svg';
  import AuthService from '@/services/auth';
+ import { inject } from 'vue';
  export default {
      name: 'NavBar',
      data: () => ({
@@ -60,6 +87,8 @@
          group: null,
          showAdminMenu: false,
          isAuthenticated: false,
+         user: null,
+         api: inject('api'),
          menuItems: [
              { title: 'Inicio', route: '/', icon: 'mdi-home'},
              { title: 'Comprar', route:'/comprar', icon: 'mdi-cart'},
@@ -76,6 +105,9 @@
      }),
      mounted() {
        this.checkAuth();
+       if (this.isAuthenticated) {
+         this.fetchUser();
+       }
      },
      watch: {
          group () {
@@ -89,6 +121,13 @@
          checkAuth() {
            this.isAuthenticated = AuthService.isAuthenticated();
          },
+         async fetchUser() {
+           try {
+             this.user = await this.api.getCurrentUser();
+           } catch (error) {
+             console.error('Error fetching user:', error);
+           }
+         },
          navigate(route) {
              this.$router.push(route);
          },
@@ -102,6 +141,7 @@
         logout() {
             AuthService.logout();
             this.isAuthenticated = false;
+            this.user = null;
             this.$router.push('/');
           },
      }

src/services/api.js

@@ -62,6 +62,10 @@ class Api {
   sendSalesToTryton(){
     return this.apiImplementation.sendSalesToTryton();
   }
+
+  getCurrentUser() {
+    return this.apiImplementation.getCurrentUser();
+  }
 }
 
 export default Api;

src/services/django-api.js

@@ -88,6 +88,11 @@ class DjangoApi {
     const url = this.base + '/don_confiao/api/enviar_ventas_a_tryton';
     return this.postRequest(url, {});
   }
+
+  getCurrentUser() {
+    const url = this.base + '/users/me/';
+    return this.getRequest(url);
+  }
 }
 
 export default DjangoApi;