Group staff members by role in the About page

This commit is contained in:
eugenijm 2020-12-12 15:17:42 +03:00
parent 8d9bf3efc8
commit 481c71517e
4 changed files with 45 additions and 9 deletions

View file

@ -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

View file

@ -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
})
}
}

View file

@ -7,17 +7,34 @@
</div>
</div>
<div class="panel-body">
<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 staffAccounts"
v-for="user in group.users"
:key="user.screen_name"
:user="user"
/>
</div>
</div>
</div>
</div>
</template>
<script src="./staff_panel.js" ></script>
<style lang="scss">
.staff-group {
padding-left: 1em;
padding-top: 1em;
.basic-user-card {
padding-left: 0;
}
}
</style>

View file

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