Ability to moderate users on the statuses page

This commit is contained in:
Maxim Filippov 2019-12-11 17:49:11 +03:00
parent 14cdc4aae1
commit 44007dc5cd
4 changed files with 36 additions and 3 deletions

View file

@ -23,6 +23,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Ability to fetch all statuses from a given instance - Ability to fetch all statuses from a given instance
- Grouped reports: now you can view reports, which are grouped by status (pagination is not implemented yet, though) - Grouped reports: now you can view reports, which are grouped by status (pagination is not implemented yet, though)
- Ability to confirm users' emails and resend confirmation emails - Ability to confirm users' emails and resend confirmation emails
- Ability to moderate users on the statuses page
### Fixed ### Fixed

View file

@ -5,8 +5,10 @@
<div class="status-header"> <div class="status-header">
<div class="status-account-container"> <div class="status-account-container">
<div class="status-account"> <div class="status-account">
<img :src="status.account.avatar" class="status-avatar-img"> <el-checkbox @change="handleStatusSelection(status.account)">
<h3 class="status-account-name">{{ status.account.display_name }}</h3> <img :src="status.account.avatar" class="status-avatar-img">
<h3 class="status-account-name">{{ status.account.display_name }}</h3>
</el-checkbox>
</div> </div>
<a :href="status.account.url" target="_blank" class="account"> <a :href="status.account.url" target="_blank" class="account">
@{{ status.account.acct }} @{{ status.account.acct }}
@ -179,6 +181,9 @@ export default {
}, },
parseTimestamp(timestamp) { parseTimestamp(timestamp) {
return moment(timestamp).format('YYYY-MM-DD HH:mm') return moment(timestamp).format('YYYY-MM-DD HH:mm')
},
handleStatusSelection(account) {
this.$emit('status-selection', account)
} }
} }
} }
@ -205,11 +210,13 @@ export default {
align-items: center; align-items: center;
} }
.status-avatar-img { .status-avatar-img {
display: inline-block;
width: 15px; width: 15px;
height: 15px; height: 15px;
margin-right: 5px; margin-right: 5px;
} }
.status-account-name { .status-account-name {
display: inline-block;
margin: 0; margin: 0;
height: 22px; height: 22px;
} }

View file

@ -47,6 +47,10 @@ const users = {
return acc.filter(u => u.id !== user.id) return acc.filter(u => u.id !== user.id)
}, state.fetchedUsers) }, state.fetchedUsers)
if (state.fetchedUsers.length === 0) {
return
}
state.fetchedUsers = [...usersWithoutSwapped, ...users].sort((a, b) => state.fetchedUsers = [...usersWithoutSwapped, ...users].sort((a, b) =>
a.nickname.localeCompare(b.nickname) a.nickname.localeCompare(b.nickname)
) )

View file

@ -11,8 +11,13 @@
:label="instance" :label="instance"
:value="instance"/> :value="instance"/>
</el-select> </el-select>
<multiple-users-menu
:selected-users="selectedUsers"
@apply-action="clearSelection"/>
</div>
<div v-for="status in statuses" :key="status.id" class="status-container">
<status :status="status" @status-selection="handleStatusSelection" />
</div> </div>
<status v-for="status in statuses" :key="status.id" :status="status" />
<div v-if="statuses.length > 0" class="statuses-pagination"> <div v-if="statuses.length > 0" class="statuses-pagination">
<el-button @click="handleLoadMore">{{ $t('statuses.loadMore') }}</el-button> <el-button @click="handleLoadMore">{{ $t('statuses.loadMore') }}</el-button>
</div> </div>
@ -21,16 +26,19 @@
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import MultipleUsersMenu from '@/views/users/components/MultipleUsersMenu'
import Status from '@/components/Status' import Status from '@/components/Status'
export default { export default {
name: 'Statuses', name: 'Statuses',
components: { components: {
MultipleUsersMenu,
Status Status
}, },
data() { data() {
return { return {
selectedInstance: '', selectedInstance: '',
selectedUsers: [],
page: 1, page: 1,
pageSize: 30 pageSize: 30
} }
@ -63,6 +71,16 @@ export default {
page: this.page, page: this.page,
pageSize: this.pageSize pageSize: this.pageSize
}) })
},
clearSelection() {
// TODO
},
handleStatusSelection(user) {
if (this.selectedUsers.find(selectedUser => user.id === selectedUser.id) !== undefined) {
return
}
this.selectedUsers = [...this.selectedUsers, user]
} }
} }
} }
@ -71,6 +89,9 @@ export default {
<style rel='stylesheet/scss' lang='scss'> <style rel='stylesheet/scss' lang='scss'>
.statuses-container { .statuses-container {
padding: 0 15px; padding: 0 15px;
.status-container {
margin: 0 0 10px;
}
} }
.filter-container { .filter-container {
margin: 22px 15px 15px 0; margin: 22px 15px 15px 0;