Show groups

web/src/components/UserTitle.vue

@@ -9,7 +9,8 @@
         {{ user.displayName }} <br />
         <small>{{ user.sAMAccountName }}</small>
         <DistinguishedNameBreadcrumb :dn="user.dn" />
-        <RoleBadge
+
+        <role-badge
           v-for="role in user.roles"
           :key="role"
           class="mr-1"
@@ -26,7 +27,11 @@ import DistinguishedNameBreadcrumb from './ui/DistinguishedNameBreadcrumb.vue'
 import RoleBadge from './ui/RoleBadge.vue'
 
 export default {
-  components: { Avatar, DistinguishedNameBreadcrumb, RoleBadge },
+  components: {
+    Avatar,
+    DistinguishedNameBreadcrumb,
+    RoleBadge
+  },
   props: {
     user: {
       type: Object,

web/src/components/ui/GroupBadge.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-chip class="ma-1" small outlined>
+    <v-icon left x-small>mdi-account-group</v-icon>
+    {{ group }}
+  </v-chip>
+</template>
+
+<script>
+export default {
+  props: {
+    group: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style></style>

web/src/views/UserInfo.vue

@@ -14,8 +14,21 @@
           <v-card-title class="font-weight-regular">
             <UserTitle :user="user" />
           </v-card-title>
+          <v-divider />
+          <v-card-title class="title font-weight-regular"
+            >Grupos efetivos:</v-card-title
+          >
+          <v-card-text>
+            <group-badge
+              v-for="(group, i) in user.groups"
+              :key="'a' + i"
+              :group="group.name"
+            />
+          </v-card-text>
+
           <v-divider />
           <v-card-text v-if="user">
+            User dump:
             <vue-json-pretty
               :data="user"
               :show-double-quotes="false"
@@ -34,13 +47,14 @@
 import UserSelect from '@/components/UserSelect'
 import UserTitle from '@/components/UserTitle.vue'
 import VueJsonPretty from 'vue-json-pretty'
+import GroupBadge from '@/components/ui/GroupBadge.vue'
 import gql from 'graphql-tag'
 
 import 'vue-json-pretty/lib/styles.css'
 
 export default {
   name: 'UserInfo',
-  components: { UserSelect, VueJsonPretty, UserTitle },
+  components: { UserSelect, VueJsonPretty, UserTitle, GroupBadge },
   data: () => ({
     username: null
   }),