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 some missing unicode emoji
- Added the upload limit to the Features panel in the About page - 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 - 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
- Fixed the occasional bug where screen would scroll 1px when typing into a reply form - 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 map from 'lodash/map'
import groupBy from 'lodash/groupBy'
import { mapGetters, mapState } from 'vuex'
import BasicUserCard from '../basic_user_card/basic_user_card.vue' import BasicUserCard from '../basic_user_card/basic_user_card.vue'
const StaffPanel = { const StaffPanel = {
@ -10,9 +12,21 @@ const StaffPanel = {
BasicUserCard BasicUserCard
}, },
computed: { computed: {
staffAccounts () { groupedStaffAccounts () {
return map(this.$store.state.instance.staffAccounts, nickname => this.$store.getters.findUser(nickname)).filter(_ => _) 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> </div>
<div class="panel-body"> <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 <basic-user-card
v-for="user in staffAccounts" v-for="user in group.users"
:key="user.screen_name" :key="user.screen_name"
:user="user" :user="user"
/> />
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script src="./staff_panel.js" ></script> <script src="./staff_panel.js" ></script>
<style lang="scss"> <style lang="scss">
.staff-group {
padding-left: 1em;
padding-top: 1em;
.basic-user-card {
padding-left: 0;
}
}
</style> </style>

View file

@ -75,7 +75,11 @@
"confirm": "Confirm", "confirm": "Confirm",
"verify": "Verify", "verify": "Verify",
"close": "Close", "close": "Close",
"peek": "Peek" "peek": "Peek",
"role": {
"admin": "Admin",
"moderator": "Moderator"
}
}, },
"image_cropper": { "image_cropper": {
"crop_picture": "Crop picture", "crop_picture": "Crop picture",