Extract component

web/src/components/UserTitle.vue

@@ -0,0 +1,33 @@
+<template>
+  <div v-if="user">
+    <Avatar :src="user.thumbnailPhoto" size="56" left />
+    <div>
+      {{ user.displayName }}
+      <DistinguishedNameBreadcrumb :dn="user.dn" />
+      <RoleBadge
+        v-for="role in user.roles"
+        :key="role"
+        class="mr-1"
+        :role="role"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Avatar from '../components/Avatar.vue'
+import DistinguishedNameBreadcrumb from './ui/DistinguishedNameBreadcrumb.vue'
+import RoleBadge from './ui/RoleBadge.vue'
+
+export default {
+  components: { Avatar, DistinguishedNameBreadcrumb, RoleBadge },
+  props: {
+    user: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
+
+<style></style>

web/src/components/ui/signalStrength.vue

@@ -10,8 +10,8 @@
           :color="signalStrengthColor(value) + ' lighten-5'"
           small
           v-bind="attrs"
-          v-on="on"
           :outlined="$vuetify.theme.dark"
+          v-on="on"
         >
           <v-icon small left :color="signalStrengthColor(value) + ' darken-2'">
             {{ signalStrengthIcon(value) }}

web/src/views/AccessPoints/index.vue

@@ -151,8 +151,8 @@
             :elevation="0"
             :color="loadColor(item.clients) + ' lighten-5'"
             light
-            @click="navigateToAccessPoint(item)"
             :outlined="$vuetify.theme.dark"
+            @click="navigateToAccessPoint(item)"
           >
             <v-icon left :color="loadColor(item.clients)">
               {{ loadIcon(item.clients) }}

web/src/views/UserInfo.vue

@@ -12,8 +12,9 @@
       <v-col v-if="!$apollo.queries.user.loading && username">
         <v-card>
           <v-card-title class="font-weight-regular">
-            Informações do usuário
+            <UserTitle :user="user" />
           </v-card-title>
+          <v-divider />
           <v-card-text v-if="user">
             <vue-json-pretty
               :data="user"
@@ -31,6 +32,7 @@
 
 <script>
 import UserSelect from '../components/UserSelect'
+import UserTitle from '../components/UserTitle.vue'
 import VueJsonPretty from 'vue-json-pretty'
 import gql from 'graphql-tag'
 
@@ -38,7 +40,7 @@ import 'vue-json-pretty/lib/styles.css'
 
 export default {
   name: 'UserInfo',
-  components: { UserSelect, VueJsonPretty },
+  components: { UserSelect, VueJsonPretty, UserTitle },
   data: () => ({
     username: null
   }),

web/src/views/WifiUsers/single.vue

@@ -6,17 +6,7 @@
     <v-container v-if="user">
       <v-card class="mb-2">
         <v-card-title class="font-weight-regular">
-          <Avatar :src="user.thumbnailPhoto" size="56" left />
+          <UserTitle :user="user" />
-          <div>
-            {{ user.displayName }}
-            <DistinguishedNameBreadcrumb :dn="user.dn" />
-            <RoleBadge
-              v-for="role in user.roles"
-              :key="role"
-              class="mr-1"
-              :role="role"
-            />
-          </div>
           <v-spacer />
         </v-card-title>
         <v-divider />
@@ -37,16 +27,13 @@
 import gql from 'graphql-tag'
 
 import UserWifiDevicesDataTable from '../../components/DataTables/UserWifiDevicesDataTable.vue'
-import Avatar from '../../components/Avatar.vue'
+
-import DistinguishedNameBreadcrumb from '../../components/ui/DistinguishedNameBreadcrumb.vue'
+import UserTitle from '../../components/UserTitle.vue'
-import RoleBadge from '../../components/ui/RoleBadge.vue'
 
 export default {
   components: {
     UserWifiDevicesDataTable,
-    Avatar,
+    UserTitle
-    DistinguishedNameBreadcrumb,
-    RoleBadge
   },
   apollo: {
     user: {