Group staff members by role in the About page

src/components/staff_panel/staff_panel.js

@@ -1,4 +1,6 @@
 import map from 'lodash/map'
+import groupBy from 'lodash/groupBy'
+import { mapGetters, mapState } from 'vuex'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 
 const StaffPanel = {
@@ -10,9 +12,21 @@ const StaffPanel = {
     BasicUserCard
   },
   computed: {
-    staffAccounts () {
-      return map(this.$store.state.instance.staffAccounts, nickname => this.$store.getters.findUser(nickname)).filter(_ => _)
-    }
+    groupedStaffAccounts () {
+      const staffAccounts = map(this.staffAccounts, this.findUser).filter(_ => _)
+      const groupedStaffAccounts = groupBy(staffAccounts, 'role')
+
+      return [
+        { role: 'admin', users: groupedStaffAccounts['admin'] },
+        { role: 'moderator', users: groupedStaffAccounts['moderator'] }
+      ].filter(group => group.users)
+    },
+    ...mapGetters([
+      'findUser'
+    ]),
+    ...mapState({
+      staffAccounts: state => state.instance.staffAccounts
+    })
   }
 }