Sort and decorate groups

server/src/resolvers/User.js

@@ -7,10 +7,15 @@ const User = {
   displayName: parent =>
     parent.displayName ? parent.displayName.capitalize() : '',
 
-  groups: async (parent, args, { ad }) =>
-    parent.groups
+  groups: async (parent, args, { ad }) => {
+    const groups = parent.groups
       ? parent.groups
-      : ad.getGroupMembershipForUser(parent.sAMAccountName),
+      : ad.getGroupMembershipForUser(parent.sAMAccountName)
+
+    const sortedGroups = groups.sort((a, b) => a.cn.localeCompare(b.cn))
+
+    return sortedGroups
+  },
 
   lastLogin: parent => parent.lastLogin?.toISOString(),
 

web/src/components/ui/GroupBadge.vue

@@ -1,17 +1,62 @@
 <template>
-  <v-chip class="ma-1" small outlined>
-    <v-icon left x-small>mdi-account-group</v-icon>
+  <v-chip class="ma-1" small outlined :color="groupColor">
+    <v-icon left x-small>{{ groupIcon }}</v-icon>
     {{ group }}
   </v-chip>
 </template>
 
 <script>
+const especialGroups = [
+  {
+    name: 'G_SERVIDORES',
+    color: 'green',
+    icon: 'mdi-account-tie'
+  },
+  {
+    name: 'Estudantes',
+    color: 'blue',
+    icon: 'mdi-book-account'
+  },
+  {
+    name: 'SETIS',
+    color: 'red',
+    icon: 'mdi-guy-fawkes-mask'
+  },
+  {
+    name: 'SERTI',
+    color: 'orange',
+    icon: 'mdi-guy-fawkes-mask'
+  },
+  {
+    name: 'Estagiarios',
+    color: 'brown',
+    icon: 'mdi-account-tie'
+  },
+  {
+    name: 'IFMS-ADMINISTRATIVO',
+    color: 'green',
+    icon: 'mdi-wifi'
+  }
+]
+
 export default {
   props: {
     group: {
       type: String,
       required: true
     }
+  },
+  computed: {
+    groupColor() {
+      const group = especialGroups.find(({ name }) =>
+        this.group.toLowerCase().includes(name.toLowerCase())
+      )
+      return group ? group.color : undefined
+    },
+    groupIcon() {
+      const group = especialGroups.find(({ name }) => this.group.includes(name))
+      return group ? group.icon : 'mdi-account-group'
+    }
   }
 }
 </script>