From 481c71517e41cdfc097b489b781847e0319f71fa Mon Sep 17 00:00:00 2001
From: eugenijm <eugenijm@protonmail.com>
Date: Sat, 12 Dec 2020 15:17:42 +0300
Subject: [PATCH] Group staff members by role in the About page

---
 CHANGELOG.md                               |  1 +
 src/components/staff_panel/staff_panel.js  | 20 +++++++++++++---
 src/components/staff_panel/staff_panel.vue | 27 ++++++++++++++++++----
 src/i18n/en.json                           |  6 ++++-
 4 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 83bcee6e..9a78d328 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Added some missing unicode emoji
 - Added the upload limit to the Features panel in the About page
 - Support for solid color wallpaper, instance doesn't have to define a wallpaper anymore
+- Group staff members by role in the About page
 
 ### Fixed
 - Fixed the occasional bug where screen would scroll 1px when typing into a reply form
diff --git a/src/components/staff_panel/staff_panel.js b/src/components/staff_panel/staff_panel.js
index 8665648a..b9561bf1 100644
--- a/src/components/staff_panel/staff_panel.js
+++ b/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
+    })
   }
 }
 
diff --git a/src/components/staff_panel/staff_panel.vue b/src/components/staff_panel/staff_panel.vue
index 1d13003d..c52ade42 100644
--- a/src/components/staff_panel/staff_panel.vue
+++ b/src/components/staff_panel/staff_panel.vue
@@ -7,11 +7,18 @@
         </div>
       </div>
       <div class="panel-body">
-        <basic-user-card
-          v-for="user in staffAccounts"
-          :key="user.screen_name"
-          :user="user"
-        />
+        <div
+          v-for="group in groupedStaffAccounts"
+          :key="group.role"
+          class="staff-group"
+        >
+          <h4>{{ $t('general.role.' + group.role) }}</h4>
+          <basic-user-card
+            v-for="user in group.users"
+            :key="user.screen_name"
+            :user="user"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -20,4 +27,14 @@
 <script src="./staff_panel.js" ></script>
 
 <style lang="scss">
+
+.staff-group {
+  padding-left: 1em;
+  padding-top: 1em;
+
+  .basic-user-card {
+    padding-left: 0;
+  }
+}
+
 </style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 26dd6144..cb4c0205 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -75,7 +75,11 @@
     "confirm": "Confirm",
     "verify": "Verify",
     "close": "Close",
-    "peek": "Peek"
+    "peek": "Peek",
+    "role": {
+      "admin": "Admin",
+      "moderator": "Moderator"
+    }
   },
   "image_cropper": {
     "crop_picture": "Crop picture",