Add user list, querying and pagination to moderation
This commit is contained in:
Sol Fisher Romanoff
parent
db7395b502
commit
b025b6f10f
GPG Key ID:
9D3F2B64F2341B62
|
|
@ -39,6 +39,7 @@
|
|||
|
||||
.panel-body {
|
||||
height: inherit;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,6 +35,9 @@
|
|||
<div class="panel-body">
|
||||
<ModModalContent v-if="modalOpenedOnce" />
|
||||
</div>
|
||||
<div class="panel-footer settings-footer">
|
||||
<span id="navigation" />
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import BasicUserCard from 'src/components/basic_user_card/basic_user_card.vue'
|
||||
import ModerationTools from 'src/components/moderation_tools/moderation_tools.vue'
|
||||
import Popover from 'src/components/popover/popover.vue'
|
||||
|
||||
import { forEach } from 'lodash'
|
||||
import { forEach, every, findKey } from 'lodash'
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
|
|
@ -16,53 +18,91 @@ library.add(
|
|||
const UsersTab = {
|
||||
data () {
|
||||
return {
|
||||
searchTerm: null,
|
||||
page: 1,
|
||||
accountType: {
|
||||
local: true,
|
||||
external: false,
|
||||
all: false
|
||||
external: false
|
||||
},
|
||||
status: {
|
||||
active: true,
|
||||
deactivated: false,
|
||||
pending: false,
|
||||
unconfirmed: false,
|
||||
all: false
|
||||
need_approval: false,
|
||||
unconfirmed: false
|
||||
},
|
||||
actorType: {
|
||||
person: true,
|
||||
bot: true,
|
||||
application: true,
|
||||
all: true
|
||||
Person: false,
|
||||
Service: false,
|
||||
Application: false
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
BasicUserCard,
|
||||
ModerationTools,
|
||||
Popover
|
||||
},
|
||||
created () {
|
||||
this.query()
|
||||
},
|
||||
computed: {
|
||||
users () { return this.$store.state.users.adminUsers },
|
||||
isActive () {
|
||||
const tabSwitcher = this.$parent
|
||||
console.log(this.users)
|
||||
return tabSwitcher ? tabSwitcher.isActive('users') : false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setAccountType (type) {
|
||||
if (type === 'all') {
|
||||
forEach(this.accountType, (k, v) => { this.accountType[v] = true })
|
||||
} else {
|
||||
forEach(this.accountType, (k, v) => { this.accountType[v] = false })
|
||||
all (filter) { return every(filter, _ => !_) },
|
||||
setAccountType (type = false) {
|
||||
forEach(this.accountType, (k, v) => { this.accountType[v] = false })
|
||||
if (type) {
|
||||
this.accountType[type] = true
|
||||
}
|
||||
|
||||
this.query()
|
||||
},
|
||||
setStatus (status) {
|
||||
if (status === 'all') {
|
||||
forEach(this.status, (k, v) => { this.status[v] = true })
|
||||
} else {
|
||||
forEach(this.status, (k, v) => { this.status[v] = false })
|
||||
setStatus (status = false) {
|
||||
forEach(this.status, (k, v) => { this.status[v] = false })
|
||||
if (status) {
|
||||
this.status[status] = true
|
||||
}
|
||||
|
||||
this.query()
|
||||
},
|
||||
setActorType (type) {
|
||||
if (type === 'all') {
|
||||
forEach(this.actorType, (k, v) => { this.actorType[v] = true })
|
||||
} else {
|
||||
forEach(this.actorType, (k, v) => { this.actorType[v] = false })
|
||||
setActorType (type = false) {
|
||||
forEach(this.actorType, (k, v) => { this.actorType[v] = false })
|
||||
if (type) {
|
||||
this.actorType[type] = true
|
||||
}
|
||||
|
||||
this.query()
|
||||
},
|
||||
prevPage () {
|
||||
this.page--
|
||||
this.query()
|
||||
},
|
||||
nextPage () {
|
||||
this.page++
|
||||
this.query()
|
||||
},
|
||||
query () {
|
||||
const params = {}
|
||||
params.actorTypes = [findKey(this.actorType, _ => _)].filter(Boolean)
|
||||
params.filters = [
|
||||
findKey(this.status, _ => _),
|
||||
findKey(this.accountType, _ => _)
|
||||
].filter(Boolean)
|
||||
|
||||
if (this.searchTerm) {
|
||||
params.name = this.searchTerm
|
||||
}
|
||||
if (this.page > 1) {
|
||||
params.page = this.page
|
||||
}
|
||||
|
||||
this.$store.dispatch('fetchUsers', params)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
v-model="searchTerm"
|
||||
class="search-input"
|
||||
:placeholder="$t('nav.search')"
|
||||
@keyup.enter="newQuery(searchTerm)"
|
||||
@keyup.enter="query()"
|
||||
/>
|
||||
</div>
|
||||
<Popover
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !accountType.all && accountType.local }"
|
||||
:class="{ 'menu-checkbox-checked': accountType.local }"
|
||||
/>{{ $t('moderation.users.filter.local') }}
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -46,16 +46,16 @@
|
|||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !accountType.all && accountType.external }"
|
||||
:class="{ 'menu-checkbox-checked': accountType.external }"
|
||||
/>{{ $t('moderation.users.filter.external') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setAccountType('all')"
|
||||
@click="setAccountType()"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': accountType.all }"
|
||||
:class="{ 'menu-checkbox-checked': all(accountType) }"
|
||||
/>{{ $t('moderation.users.filter.all') }}
|
||||
</button>
|
||||
<div
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !status.all && status.active }"
|
||||
:class="{ 'menu-checkbox-checked': status.active }"
|
||||
/>{{ $t('moderation.users.filter.active') }}
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -79,16 +79,16 @@
|
|||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !status.all && status.deactivated }"
|
||||
:class="{ 'menu-checkbox-checked': status.deactivated }"
|
||||
/>{{ $t('moderation.users.filter.deactivated') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setStatus('pending')"
|
||||
@click="setStatus('need_approval')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !status.all && status.pending }"
|
||||
:class="{ 'menu-checkbox-checked': status.need_approval }"
|
||||
/>{{ $t('moderation.users.filter.pending') }}
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -97,16 +97,16 @@
|
|||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !status.all && status.unconfirmed }"
|
||||
:class="{ 'menu-checkbox-checked': status.unconfirmed }"
|
||||
/>{{ $t('moderation.users.filter.unconfirmed') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setStatus('all')"
|
||||
@click="setStatus()"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': status.all }"
|
||||
:class="{ 'menu-checkbox-checked': all(status) }"
|
||||
/>{{ $t('moderation.users.filter.all') }}
|
||||
</button>
|
||||
<div
|
||||
|
|
@ -117,38 +117,38 @@
|
|||
<div class="dropdown-menu">
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setActorType('person')"
|
||||
@click="setActorType('Person')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !actorType.all && actorType.person }"
|
||||
:class="{ 'menu-checkbox-checked': actorType.Person }"
|
||||
/>{{ $t('moderation.users.filter.person') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setActorType('bot')"
|
||||
@click="setActorType('Service')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !actorType.all && actorType.bot }"
|
||||
:class="{ 'menu-checkbox-checked': actorType.Service }"
|
||||
/>{{ $t('moderation.users.filter.bot') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setActorType('application')"
|
||||
@click="setActorType('Application')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !actorType.all && actorType.application }"
|
||||
:class="{ 'menu-checkbox-checked': actorType.Application }"
|
||||
/>{{ $t('moderation.users.filter.application') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setActorType('all')"
|
||||
@click="setActorType()"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': actorType.all }"
|
||||
:class="{ 'menu-checkbox-checked': all(actorType) }"
|
||||
/>{{ $t('moderation.users.filter.all') }}
|
||||
</button>
|
||||
<div
|
||||
|
|
@ -161,8 +161,39 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="users">
|
||||
<div
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
class="user"
|
||||
>
|
||||
<BasicUserCard :user="user">
|
||||
<ModerationTools :user="user" />
|
||||
</BasicUserCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<teleport
|
||||
v-if="isActive"
|
||||
to="#navigation"
|
||||
>
|
||||
<div class="apply-container">
|
||||
<button
|
||||
class="btn button-default submit"
|
||||
:disabled="page == 1"
|
||||
@click="prevPage"
|
||||
>
|
||||
{{ $t('moderation.previous') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn button-default"
|
||||
:disabled="users.length < 50"
|
||||
@click="nextPage"
|
||||
>
|
||||
{{ $t('moderation.next') }}
|
||||
</button>
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -294,6 +294,8 @@
|
|||
"tags": "Set post restrictions"
|
||||
},
|
||||
"statuses": "Posts",
|
||||
"next": "Next page",
|
||||
"previous": "Previous page",
|
||||
"users": {
|
||||
"users": "Users",
|
||||
"filter": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue