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
- 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 moderate users on the statuses page
### Fixed

View file

@ -5,8 +5,10 @@
<div class="status-header">
<div class="status-account-container">
<div class="status-account">
<img :src="status.account.avatar" class="status-avatar-img">
<h3 class="status-account-name">{{ status.account.display_name }}</h3>
<el-checkbox @change="handleStatusSelection(status.account)">
<img :src="status.account.avatar" class="status-avatar-img">
<h3 class="status-account-name">{{ status.account.display_name }}</h3>
</el-checkbox>
</div>
<a :href="status.account.url" target="_blank" class="account">
@{{ status.account.acct }}
@ -179,6 +181,9 @@ export default {
},
parseTimestamp(timestamp) {
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;
}
.status-avatar-img {
display: inline-block;
width: 15px;
height: 15px;
margin-right: 5px;
}
.status-account-name {
display: inline-block;
margin: 0;
height: 22px;
}

View file

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

View file

@ -11,8 +11,13 @@
:label="instance"
:value="instance"/>
</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>
<status v-for="status in statuses" :key="status.id" :status="status" />
<div v-if="statuses.length > 0" class="statuses-pagination">
<el-button @click="handleLoadMore">{{ $t('statuses.loadMore') }}</el-button>
</div>
@ -21,16 +26,19 @@
<script>
import { mapGetters } from 'vuex'
import MultipleUsersMenu from '@/views/users/components/MultipleUsersMenu'
import Status from '@/components/Status'
export default {
name: 'Statuses',
components: {
MultipleUsersMenu,
Status
},
data() {
return {
selectedInstance: '',
selectedUsers: [],
page: 1,
pageSize: 30
}
@ -63,6 +71,16 @@ export default {
page: this.page,
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'>
.statuses-container {
padding: 0 15px;
.status-container {
margin: 0 0 10px;
}
}
.filter-container {
margin: 22px 15px 15px 0;