sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

モデレーション周りのv11の機能復元 (#6249)

Browse Source 
* モデレーション周りのv11の機能復元

* i18n

* wip

* wip

Co-authored-by: syuilo <syuilotan@yahoo.co.jp>
This commit is contained in:
Satsuki Yanagi
2020-04-13 23:27:12 +09:00
committed by GitHub
parent 11cc9cbc7c
commit 63225ed0fd
10 changed files with 409 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/client/pages/instance/users.vue
View File

@@ -12,19 +12,65 @@
<mk-button @click="showUser()" primary><fa :icon="faSearch"/> {{ $t('lookup') }}</mk-button>
</div>
<div class="_footer">
<mk-button inline primary @click="search()"><fa :icon="faSearch"/> {{ $t('search') }}</mk-button>
<mk-button inline primary @click="searchUser()"><fa :icon="faSearch"/> {{ $t('search') }}</mk-button>
</div>
</section>
<section class="_card users">
<div class="_title"><fa :icon="faUsers"/> {{ $t('users') }}</div>
<div class="_content">
<div class="inputs" style="display: flex;">
<mk-select v-model="sort" style="margin: 0; flex: 1;">
<template #label>{{ $t('sort') }}</template>
<option value="-createdAt">{{ $t('registeredDate') }} ({{ $t('ascendingOrder') }})</option>
<option value="+createdAt">{{ $t('registeredDate') }} ({{ $t('descendingOrder') }})</option>
<option value="-updatedAt">{{ $t('lastUsed') }} ({{ $t('ascendingOrder') }})</option>
<option value="+updatedAt">{{ $t('lastUsed') }} ({{ $t('descendingOrder') }})</option>
</mk-select>
<mk-select v-model="state" style="margin: 0; flex: 1;">
<template #label>{{ $t('state') }}</template>
<option value="all">{{ $t('all') }}</option>
<option value="available">{{ $t('normal') }}</option>
<option value="admin">{{ $t('administrator') }}</option>
<option value="moderator">{{ $t('moderator') }}</option>
<option value="silenced">{{ $t('silence') }}</option>
<option value="suspended">{{ $t('suspend') }}</option>
</mk-select>
<mk-select v-model="origin" style="margin: 0; flex: 1;">
<template #label>{{ $t('instance') }}</template>
<option value="combined">{{ $t('all') }}</option>
<option value="local">{{ $t('local') }}</option>
<option value="remote">{{ $t('remote') }}</option>
</mk-select>
</div>
<div class="inputs" style="display: flex; padding-top: 1.2em;">
<mk-input v-model="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @input="$refs.users.reload()">
<span>{{ $t('username') }}</span>
</mk-input>
<mk-input v-model="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @input="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
<span>{{ $t('host') }}</span>
</mk-input>
</div>
</div>
<div class="_content _list">
<mk-pagination :pagination="pagination" #default="{items}" class="users" ref="users" :auto-margin="false">
<button class="user _button _listItem" v-for="(user, i) in items" :key="user.id" @click="show(user)">
<mk-avatar :user="user" class="avatar"/>
<mk-avatar class="avatar" :user="user" :disable-link="true"/>
<div class="body">
<mk-user-name :user="user" class="name"/>
<mk-acct :user="user" class="acct"/>
<header>
<mk-user-name class="name" :user="user"/>
<span class="acct">@{{ user | acct }}</span>
<span class="staff" v-if="user.isAdmin"><fa :icon="faBookmark"/></span>
<span class="staff" v-if="user.isModerator"><fa :icon="farBookmark"/></span>
<span class="punished" v-if="user.isSilenced"><fa :icon="faMicrophoneSlash"/></span>
<span class="punished" v-if="user.isSuspended"><fa :icon="faSnowflake"/></span>
</header>
<div>
<span>{{ $t('lastUsed') }}: <mk-time :time="user.updatedAt" mode="detail"/></span>
</div>
<div>
<span>{{ $t('registeredDate') }}: <mk-time :time="user.createdAt" mode="detail"/></span>
</div>
</div>
</button>
</mk-pagination>
@@ -38,12 +84,13 @@
<script lang="ts">
import Vue from 'vue';
import { faPlus, faUsers, faSearch } from '@fortawesome/free-solid-svg-icons';
import { faPlus, faUsers, faSearch, faBookmark, faMicrophoneSlash } from '@fortawesome/free-solid-svg-icons';
import { faSnowflake, faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
import parseAcct from '../../../misc/acct/parse';
import MkButton from '../../components/ui/button.vue';
import MkInput from '../../components/ui/input.vue';
import MkSelect from '../../components/ui/select.vue';
import MkPagination from '../../components/ui/pagination.vue';
import MkUserModerateDialog from '../../components/user-moderate-dialog.vue';
import MkUserSelect from '../../components/user-select.vue';
export default Vue.extend({
@@ -56,24 +103,46 @@ export default Vue.extend({
components: {
MkButton,
MkInput,
MkSelect,
MkPagination,
},
data() {
return {
target: '',
sort: '+createdAt',
state: 'all',
origin: 'local',
searchUsername: '',
searchHost: '',
pagination: {
endpoint: 'admin/show-users',
limit: 10,
params: () => ({
sort: '+createdAt'
sort: this.sort,
state: this.state,
origin: this.origin,
username: this.searchUsername,
hostname: this.searchHost,
}),
offsetMode: true
},
target: '',
faPlus, faUsers, faSearch
faPlus, faUsers, faSearch, faBookmark, farBookmark, faMicrophoneSlash, faSnowflake
}
},
watch: {
sort() {
this.$refs.users.reload();
},
state() {
this.$refs.users.reload();
},
origin() {
this.$refs.users.reload();
},
},
methods: {
/** テキストエリアのユーザーを解決する */
fetchUser() {
@@ -105,12 +174,16 @@ export default Vue.extend({
/** テキストエリアから処理対象ユーザーを設定する */
async showUser() {
const user = await this.fetchUser();
this.$root.api('admin/show-user', { userId: user.id }).then(info => {
this.show(user, info);
});
this.show(user);
this.target = '';
},
searchUser() {
this.$root.new(MkUserSelect, {}).$once('selected', user => {
this.show(user);
});
},
async addUser() {
const { canceled: canceled1, result: username } = await this.$root.dialog({
title: this.$t('username'),
@@ -148,19 +221,8 @@ export default Vue.extend({
});
},
async show(user, info) {
if (info == null) info = await this.$root.api('admin/show-user', { userId: user.id });
this.$root.new(MkUserModerateDialog, {
user: { ...user, ...info }
});
},
search() {
this.$root.new(MkUserSelect, {}).$once('selected', user => {
this.$root.api('admin/show-user', { userId: user.id }).then(info => {
this.show(user, info);
});
});
async show(user) {
this.$router.push('./users/' + user.id);
}
}
});
@@ -182,20 +244,38 @@ export default Vue.extend({
align-items: center;
> .avatar {
width: 50px;
height: 50px;
width: 64px;
height: 64px;
}
> .body {
margin-left: 0.3em;
padding: 8px;
flex: 1;
> .name {
display: block;
font-weight: bold;
@media (max-width 500px) {
font-size: 14px;
}
> .acct {
opacity: 0.5;
> header {
> .name {
font-weight: bold;
}
> .acct {
margin-left: 8px;
opacity: 0.7;
}
> .staff {
margin-left: 0.5em;
color: var(--badge);
}
> .punished {
margin-left: 0.5em;
color: #4dabf7;
}
}
}
}