Create layout for users moderation tab
This commit is contained in:
Sol Fisher Romanoff
parent
56fd2e773b
commit
50b919fb23
GPG Key ID:
9D3F2B64F2341B62
|
|
@ -2,7 +2,7 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
|
|||
|
||||
import ReportsTab from './tabs/reports_tab/reports_tab.vue'
|
||||
// import StatusesTab from './tabs/statuses_tab.vue'
|
||||
// import UsersTab from './tabs/users_tab.vue'
|
||||
import UsersTab from './tabs/users_tab/users_tab.vue'
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
|
|
@ -21,9 +21,9 @@ const ModModalContent = {
|
|||
components: {
|
||||
TabSwitcher,
|
||||
|
||||
ReportsTab
|
||||
ReportsTab,
|
||||
// StatusesTab,
|
||||
// UsersTab
|
||||
UsersTab
|
||||
},
|
||||
computed: {
|
||||
open () {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,13 @@
|
|||
>
|
||||
<ReportsTab />
|
||||
</div>
|
||||
<div
|
||||
:label="$t('moderation.users.users')"
|
||||
icon="users"
|
||||
data-tab-name="users"
|
||||
>
|
||||
<UsersTab />
|
||||
</div>
|
||||
</tab-switcher>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
import Popover from 'src/components/popover/popover.vue'
|
||||
|
||||
import { forEach } from 'lodash'
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faFilter,
|
||||
faSearch
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faFilter,
|
||||
faSearch
|
||||
)
|
||||
|
||||
const UsersTab = {
|
||||
data () {
|
||||
return {
|
||||
accountType: {
|
||||
local: true,
|
||||
external: false,
|
||||
all: false
|
||||
},
|
||||
status: {
|
||||
active: true,
|
||||
deactivated: false,
|
||||
pending: false,
|
||||
unconfirmed: false,
|
||||
all: false
|
||||
},
|
||||
actorType: {
|
||||
person: true,
|
||||
bot: true,
|
||||
application: true,
|
||||
all: true
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Popover
|
||||
},
|
||||
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 })
|
||||
this.accountType[type] = true
|
||||
}
|
||||
},
|
||||
setStatus (status) {
|
||||
if (status === 'all') {
|
||||
forEach(this.status, (k, v) => { this.status[v] = true })
|
||||
} else {
|
||||
forEach(this.status, (k, v) => { this.status[v] = false })
|
||||
this.status[status] = true
|
||||
}
|
||||
},
|
||||
setActorType (type) {
|
||||
if (type === 'all') {
|
||||
forEach(this.actorType, (k, v) => { this.actorType[v] = true })
|
||||
} else {
|
||||
forEach(this.actorType, (k, v) => { this.actorType[v] = false })
|
||||
this.actorType[type] = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default UsersTab
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
@import '../../../../_variables.scss';
|
||||
|
||||
.reports-header .right-side {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.search-input-container {
|
||||
padding: 0.8rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
line-height: 1.125rem;
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<template>
|
||||
<div :label="$t('moderation.users.users')">
|
||||
<div class="content">
|
||||
<div class="reports-header">
|
||||
<h2>{{ $t('moderation.users.users') }}</h2>
|
||||
<div class="right-side">
|
||||
<div class="search-input-container">
|
||||
<div class="input-search">
|
||||
<FAIcon
|
||||
class="search-icon fa-scale-110 fa-old-padding"
|
||||
icon="search"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
v-model="searchTerm"
|
||||
class="search-input"
|
||||
:placeholder="$t('nav.search')"
|
||||
@keyup.enter="newQuery(searchTerm)"
|
||||
/>
|
||||
</div>
|
||||
<Popover
|
||||
trigger="click"
|
||||
placement="bottom"
|
||||
:offset="{ x: -45, y: 5 }"
|
||||
remove-padding
|
||||
>
|
||||
<template v-slot:trigger>
|
||||
<button class="button-unstyled">
|
||||
<FAIcon icon="filter" />
|
||||
</button>
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<div class="dropdown-menu">
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setAccountType('local')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !accountType.all && accountType.local }"
|
||||
/>{{ $t('moderation.users.filter.local') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setAccountType('external')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !accountType.all && accountType.external }"
|
||||
/>{{ $t('moderation.users.filter.external') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setAccountType('all')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': accountType.all }"
|
||||
/>{{ $t('moderation.users.filter.all') }}
|
||||
</button>
|
||||
<div
|
||||
role="separator"
|
||||
class="dropdown-divider"
|
||||
/>
|
||||
</div>
|
||||
<div class="dropdown-menu">
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setStatus('active')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !status.all && status.active }"
|
||||
/>{{ $t('moderation.users.filter.active') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setStatus('deactivated')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !status.all && status.deactivated }"
|
||||
/>{{ $t('moderation.users.filter.deactivated') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setStatus('pending')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !status.all && status.pending }"
|
||||
/>{{ $t('moderation.users.filter.pending') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setStatus('unconfirmed')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !status.all && status.unconfirmed }"
|
||||
/>{{ $t('moderation.users.filter.unconfirmed') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setStatus('all')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': status.all }"
|
||||
/>{{ $t('moderation.users.filter.all') }}
|
||||
</button>
|
||||
<div
|
||||
role="separator"
|
||||
class="dropdown-divider"
|
||||
/>
|
||||
</div>
|
||||
<div class="dropdown-menu">
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setActorType('person')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !actorType.all && actorType.person }"
|
||||
/>{{ $t('moderation.users.filter.person') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setActorType('bot')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !actorType.all && actorType.bot }"
|
||||
/>{{ $t('moderation.users.filter.bot') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setActorType('application')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': !actorType.all && actorType.application }"
|
||||
/>{{ $t('moderation.users.filter.application') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
@click="setActorType('all')"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': actorType.all }"
|
||||
/>{{ $t('moderation.users.filter.all') }}
|
||||
</button>
|
||||
<div
|
||||
role="separator"
|
||||
class="dropdown-divider"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
<div class="users">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./users_tab.js"></script>
|
||||
<style src="./users_tab.scss" lang="scss"></style>
|
||||
|
|
@ -294,7 +294,20 @@
|
|||
"tags": "Set post restrictions"
|
||||
},
|
||||
"statuses": "Posts",
|
||||
"users": "Users"
|
||||
"users": {
|
||||
"users": "Users",
|
||||
"filter": {
|
||||
"active": "Active",
|
||||
"all": "All accounts",
|
||||
"application": "Application",
|
||||
"bot": "Bot",
|
||||
"deactivated": "Deactivated",
|
||||
"external": "External",
|
||||
"local": "Local",
|
||||
"pending": "Pending Approval",
|
||||
"person": "Person",
|
||||
"unconfirmed": "Unconfirmed"
|
||||
}
|
||||
},
|
||||
"nav": {
|
||||
"about": "About",
|
||||
|
|
|
|||
Loading…
Reference in New Issue