From 4394c7e11273fb22bd4331b9e4e5b2872100e380 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Tue, 25 Oct 2022 12:39:39 -0400
Subject: [PATCH] Sort and decorate groups

---
 server/src/resolvers/User.js         | 11 +++++--
 web/src/components/ui/GroupBadge.vue | 49 ++++++++++++++++++++++++++--
 2 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/server/src/resolvers/User.js b/server/src/resolvers/User.js
index 254c32d..fd86ab8 100755
--- a/server/src/resolvers/User.js
+++ b/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(),
 
diff --git a/web/src/components/ui/GroupBadge.vue b/web/src/components/ui/GroupBadge.vue
index 59b7676..6d872f0 100644
--- a/web/src/components/ui/GroupBadge.vue
+++ b/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>