commit: 8b7c367b0478ac3907480e3a354612473fc0ba08
parent 647d75f27c89b0972a58c62e7ab741d339c545d0
Author: Shpuld Shpludson <shp@cock.li>
Date: Fri, 12 Feb 2021 08:05:55 +0000
Merge branch 'staff-grouping' into 'develop'
Group staff by role in the About page
Closes #737
See merge request pleroma/pleroma-fe!1309
Diffstat:
4 files changed, 45 insertions(+), 9 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,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
@@ -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
@@ -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
@@ -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",