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",