From 40b0e148e86762006b8e6dfc452420f97334ae0a Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Tue, 25 Oct 2022 08:45:15 -0400
Subject: [PATCH] Show groups

---
 web/src/components/UserTitle.vue     |  9 +++++++--
 web/src/components/ui/GroupBadge.vue | 19 +++++++++++++++++++
 web/src/views/UserInfo.vue           | 16 +++++++++++++++-
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 web/src/components/ui/GroupBadge.vue

diff --git a/web/src/components/UserTitle.vue b/web/src/components/UserTitle.vue
index 6acd014..ab96042 100644
--- a/web/src/components/UserTitle.vue
+++ b/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,
diff --git a/web/src/components/ui/GroupBadge.vue b/web/src/components/ui/GroupBadge.vue
new file mode 100644
index 0000000..59b7676
--- /dev/null
+++ b/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>
diff --git a/web/src/views/UserInfo.vue b/web/src/views/UserInfo.vue
index 777d315..17e29f8 100755
--- a/web/src/views/UserInfo.vue
+++ b/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
   }),