171 lines
6.4 KiB
Vue
171 lines
6.4 KiB
Vue
<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>
|