Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

インスタンス管理画面作り直し (#7473)

Browse source 
* wip

* wip

* wip

* wip
This commit is contained in:
syuilo 2021-04-22 22:29:33 +09:00 • committed by GitHub
parent ec75600e1c
commit 246693b848
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
50 changed files with 2588 additions and 1887 deletions
Download patch file Download diff file Expand all files Collapse all files

259
src/client/pages/instance/users.vue
View file

@ -1,86 +1,71 @@
<template>
<div class="mk-instance-users">
<div class="_section">
<div class="_content">
<MkButton inline primary @click="addUser()"><i class="fas fa-plus"></i> {{ $ts.addUser }}</MkButton>
</div>
<div class="lknzcolw">
<div class="actions">
<MkButton inline primary @click="addUser()"><i class="fas fa-plus"></i> {{ $ts.addUser }}</MkButton>
<MkButton inline primary @click="lookupUser()"><i class="fas fa-search"></i> {{ $ts.lookup }}</MkButton>
</div>
<div class="_section lookup">
<div class="_title"><i class="fas fa-search"></i> {{ $ts.lookup }}</div>
<div class="_content">
<MkInput class="target" v-model:value="target" type="text" @enter="showUser()">
<span>{{ $ts.usernameOrUserId }}</span>
<div class="users">
<div class="inputs" style="display: flex;">
<MkSelect v-model:value="sort" style="margin: 0; flex: 1;">
<template #label>{{ $ts.sort }}</template>
<option value="-createdAt">{{ $ts.registeredDate }} ({{ $ts.ascendingOrder }})</option>
<option value="+createdAt">{{ $ts.registeredDate }} ({{ $ts.descendingOrder }})</option>
<option value="-updatedAt">{{ $ts.lastUsed }} ({{ $ts.ascendingOrder }})</option>
<option value="+updatedAt">{{ $ts.lastUsed }} ({{ $ts.descendingOrder }})</option>
</MkSelect>
<MkSelect v-model:value="state" style="margin: 0; flex: 1;">
<template #label>{{ $ts.state }}</template>
<option value="all">{{ $ts.all }}</option>
<option value="available">{{ $ts.normal }}</option>
<option value="admin">{{ $ts.administrator }}</option>
<option value="moderator">{{ $ts.moderator }}</option>
<option value="silenced">{{ $ts.silence }}</option>
<option value="suspended">{{ $ts.suspend }}</option>
</MkSelect>
<MkSelect v-model:value="origin" style="margin: 0; flex: 1;">
<template #label>{{ $ts.instance }}</template>
<option value="combined">{{ $ts.all }}</option>
<option value="local">{{ $ts.local }}</option>
<option value="remote">{{ $ts.remote }}</option>
</MkSelect>
</div>
<div class="inputs" style="display: flex; padding-top: 1.2em;">
<MkInput v-model:value="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.users.reload()">
<span>{{ $ts.username }}</span>
</MkInput>
<MkInput v-model:value="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
<span>{{ $ts.host }}</span>
</MkInput>
<MkButton @click="showUser()" primary><i class="fas fa-search"></i> {{ $ts.lookup }}</MkButton>
</div>
</div>
<div class="_section users">
<div class="_title"><i class="fas fa-users"></i> {{ $ts.users }}</div>
<div class="_content">
<div class="inputs" style="display: flex;">
<MkSelect v-model:value="sort" style="margin: 0; flex: 1;">
<template #label>{{ $ts.sort }}</template>
<option value="-createdAt">{{ $ts.registeredDate }} ({{ $ts.ascendingOrder }})</option>
<option value="+createdAt">{{ $ts.registeredDate }} ({{ $ts.descendingOrder }})</option>
<option value="-updatedAt">{{ $ts.lastUsed }} ({{ $ts.ascendingOrder }})</option>
<option value="+updatedAt">{{ $ts.lastUsed }} ({{ $ts.descendingOrder }})</option>
</MkSelect>
<MkSelect v-model:value="state" style="margin: 0; flex: 1;">
<template #label>{{ $ts.state }}</template>
<option value="all">{{ $ts.all }}</option>
<option value="available">{{ $ts.normal }}</option>
<option value="admin">{{ $ts.administrator }}</option>
<option value="moderator">{{ $ts.moderator }}</option>
<option value="silenced">{{ $ts.silence }}</option>
<option value="suspended">{{ $ts.suspend }}</option>
</MkSelect>
<MkSelect v-model:value="origin" style="margin: 0; flex: 1;">
<template #label>{{ $ts.instance }}</template>
<option value="combined">{{ $ts.all }}</option>
<option value="local">{{ $ts.local }}</option>
<option value="remote">{{ $ts.remote }}</option>
</MkSelect>
</div>
<div class="inputs" style="display: flex; padding-top: 1.2em;">
<MkInput v-model:value="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.users.reload()">
<span>{{ $ts.username }}</span>
</MkInput>
<MkInput v-model:value="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
<span>{{ $ts.host }}</span>
</MkInput>
</div>
<MkPagination :pagination="pagination" #default="{items}" class="users" ref="users">
<button class="user _panel _button _gap" v-for="user in items" :key="user.id" @click="show(user)">
<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
<div class="body">
<header>
<MkUserName class="name" :user="user"/>
<span class="acct">@{{ acct(user) }}</span>
<span class="staff" v-if="user.isAdmin"><i class="fas fa-bookmark"></i></span>
<span class="staff" v-if="user.isModerator"><i class="far fa-bookmark"></i></span>
<span class="punished" v-if="user.isSilenced"><i class="fas fa-microphone-slash"></i></span>
<span class="punished" v-if="user.isSuspended"><i class="fas fa-snowflake"></i></span>
</header>
<div>
<span>{{ $ts.lastUsed }}: <MkTime v-if="user.updatedAt" :time="user.updatedAt" mode="detail"/></span>
</div>
<div>
<span>{{ $ts.registeredDate }}: <MkTime :time="user.createdAt" mode="detail"/></span>
</div>
<MkPagination :pagination="pagination" #default="{items}" class="users" ref="users">
<button class="user _panel _button _gap" v-for="user in items" :key="user.id" @click="show(user)">
<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
<div class="body">
<header>
<MkUserName class="name" :user="user"/>
<span class="acct">@{{ acct(user) }}</span>
<span class="staff" v-if="user.isAdmin"><i class="fas fa-bookmark"></i></span>
<span class="staff" v-if="user.isModerator"><i class="far fa-bookmark"></i></span>
<span class="punished" v-if="user.isSilenced"><i class="fas fa-microphone-slash"></i></span>
<span class="punished" v-if="user.isSuspended"><i class="fas fa-snowflake"></i></span>
</header>
<div>
<span>{{ $ts.lastUsed }}: <MkTime v-if="user.updatedAt" :time="user.updatedAt" mode="detail"/></span>
</div>
</button>
</MkPagination>
</div>
<div>
<span>{{ $ts.registeredDate }}: <MkTime :time="user.createdAt" mode="detail"/></span>
</div>
</div>
</button>
</MkPagination>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import parseAcct from '@/misc/acct/parse';
import MkButton from '@client/components/ui/button.vue';
import MkInput from '@client/components/ui/input.vue';
import MkSelect from '@client/components/ui/select.vue';
@ -88,6 +73,7 @@ import MkPagination from '@client/components/ui/pagination.vue';
import { acct } from '../../filters/user';
import * as os from '@client/os';
import * as symbols from '@client/symbols';
import { lookupUser } from '@client/scripts/lookup-user';
export default defineComponent({
components: {
@ -97,6 +83,8 @@ export default defineComponent({
MkPagination,
},
emits: ['info'],
data() {
return {
[symbols.PAGE_INFO]: {
@ -107,7 +95,6 @@ export default defineComponent({
handler: this.searchUser
}
},
target: '',
sort: '+createdAt',
state: 'all',
origin: 'local',
@ -140,40 +127,12 @@ export default defineComponent({
},
},
methods: {
/** テキストエリアのユーザーを解決する */
fetchUser() {
return new Promise((res) => {
const usernamePromise = os.api('users/show', parseAcct(this.target));
const idPromise = os.api('users/show', { userId: this.target });
let _notFound = false;
const notFound = () => {
if (_notFound) {
os.dialog({
type: 'error',
text: this.$ts.noSuchUser
});
} else {
_notFound = true;
}
};
usernamePromise.then(res).catch(e => {
if (e.code === 'NO_SUCH_USER') {
notFound();
}
});
idPromise.then(res).catch(e => {
notFound();
});
});
},
async mounted() {
this.$emit('info', this[symbols.PAGE_INFO]);
},
/** テキストエリアから処理対象ユーザーを設定する */
async showUser() {
const user = await this.fetchUser();
this.show(user);
this.target = '';
},
methods: {
lookupUser,
searchUser() {
os.selectUser().then(user => {
@ -203,9 +162,7 @@ export default defineComponent({
},
show(user) {
os.popup(import('./user-dialog.vue'), {
userId: user.id
}, {}, 'closed');
os.pageWindow(`/instance/user/${user.id}`);
},
acct
@ -214,57 +171,61 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.mk-instance-users {
.lknzcolw {
> .actions {
margin: var(--margin);
}
> .users {
> ._content {
> .users {
margin-top: var(--margin);
margin: var(--margin);
> .users {
margin-top: var(--margin);
> .user {
display: flex;
width: 100%;
box-sizing: border-box;
text-align: left;
align-items: center;
padding: 16px;
> .user {
display: flex;
width: 100%;
box-sizing: border-box;
text-align: left;
align-items: center;
padding: 16px;
&:hover {
color: var(--accent);
&:hover {
color: var(--accent);
}
> .avatar {
width: 60px;
height: 60px;
}
> .body {
margin-left: 0.3em;
padding: 0 8px;
flex: 1;
@media (max-width: 500px) {
font-size: 14px;
}
> .avatar {
width: 60px;
height: 60px;
}
> .body {
margin-left: 0.3em;
padding: 0 8px;
flex: 1;
@media (max-width: 500px) {
font-size: 14px;
> header {
> .name {
font-weight: bold;
}
> header {
> .name {
font-weight: bold;
}
> .acct {
margin-left: 8px;
opacity: 0.7;
}
> .acct {
margin-left: 8px;
opacity: 0.7;
}
> .staff {
margin-left: 0.5em;
color: var(--badge);
}
> .staff {
margin-left: 0.5em;
color: var(--badge);
}
> .punished {
margin-left: 0.5em;
color: #4dabf7;
}
> .punished {
margin-left: 0.5em;
color: #4dabf7;
}
}
}