forked from AkkomaGang/akkoma-fe
Group staff members by role in the About page
This commit is contained in:
parent
8d9bf3efc8
commit
481c71517e
4 changed files with 45 additions and 9 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in a new issue