wip: refactor(client): migrate components to composition api

Fix #8155
This commit is contained in:
syuilo 2022-01-18 21:30:17 +09:00
parent 9885c6ba6c
commit 7588397fb8
3 changed files with 57 additions and 93 deletions

View file

@ -16,6 +16,8 @@ const data = localStorage.getItem('account');
// TODO: 外部からはreadonlyに // TODO: 外部からはreadonlyに
export const $i = data ? reactive(JSON.parse(data) as Account) : null; export const $i = data ? reactive(JSON.parse(data) as Account) : null;
export const iAmModerator = $i != null && ($i.isAdmin || $i.isModerator);
export async function signout() { export async function signout() {
waiting(); waiting();
localStorage.removeItem('account'); localStorage.removeItem('account');
@ -197,10 +199,3 @@ export async function openAccountMenu(ev: MouseEvent) {
align: 'left' align: 'left'
}); });
} }
// このファイルに書きたくないけどここに書かないと何故かVeturが認識しない
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$i: typeof $i;
}
}

View file

@ -28,7 +28,7 @@
<FormSection v-if="iAmModerator"> <FormSection v-if="iAmModerator">
<template #label>Moderation</template> <template #label>Moderation</template>
<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ $ts.stopActivityDelivery }}</FormSwitch> <FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ $ts.stopActivityDelivery }}</FormSwitch>
<FormSwitch :model-value="isBlocked" class="switch" @update:modelValue="changeBlock">{{ $ts.blockThisInstance }}</FormSwitch> <FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ $ts.blockThisInstance }}</FormSwitch>
</FormSection> </FormSection>
<FormSection> <FormSection>
@ -104,15 +104,14 @@
</MkSpacer> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineAsyncComponent, defineComponent } from 'vue'; import { } from 'vue';
import * as misskey from 'misskey-js';
import MkChart from '@/components/chart.vue'; import MkChart from '@/components/chart.vue';
import MkObjectView from '@/components/object-view.vue'; import MkObjectView from '@/components/object-view.vue';
import FormTextarea from '@/components/form/textarea.vue';
import FormLink from '@/components/form/link.vue'; import FormLink from '@/components/form/link.vue';
import MkLink from '@/components/link.vue'; import MkLink from '@/components/link.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import FormButton from '@/components/ui/button.vue';
import MkKeyValue from '@/components/key-value.vue'; import MkKeyValue from '@/components/key-value.vue';
import MkSelect from '@/components/form/select.vue'; import MkSelect from '@/components/form/select.vue';
import FormSwitch from '@/components/form/switch.vue'; import FormSwitch from '@/components/form/switch.vue';
@ -120,87 +119,57 @@ import * as os from '@/os';
import number from '@/filters/number'; import number from '@/filters/number';
import bytes from '@/filters/bytes'; import bytes from '@/filters/bytes';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import { iAmModerator } from '@/account';
export default defineComponent({ const props = defineProps<{
components: { host: string;
FormTextarea, }>();
MkObjectView,
FormButton,
FormLink,
FormSection,
FormSwitch,
MkKeyValue,
MkSelect,
MkChart,
MkLink,
},
props: { let meta = $ref<misskey.entities.DetailedInstanceMetadata | null>(null);
host: { let instance = $ref<misskey.entities.Instance | null>(null);
type: String, let suspended = $ref(false);
required: true let isBlocked = $ref(false);
} let chartSrc = $ref('instance-requests');
}, let chartSpan = $ref('hour');
data() { async function fetch() {
return { meta = await os.api('meta', { detail: true });
instance = await os.api('federation/show-instance', {
host: props.host,
});
suspended = instance.isSuspended;
isBlocked = meta.blockedHosts.includes(instance.host);
}
async function toggleBlock(ev) {
if (meta == null) return;
await os.api('admin/update-meta', {
blockedHosts: isBlocked ? meta.blockedHosts.concat([instance.host]) : meta.blockedHosts.filter(x => x !== instance.host)
});
}
async function toggleSuspend(v) {
await os.api('admin/federation/update-instance', {
host: instance.host,
isSuspended: suspended,
});
}
fetch();
defineExpose({
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: {
title: this.host, title: props.host,
icon: 'fas fa-info-circle', icon: 'fas fa-info-circle',
bg: 'var(--bg)', bg: 'var(--bg)',
actions: [{ actions: [{
text: `https://${this.host}`, text: `https://${props.host}`,
icon: 'fas fa-external-link-alt', icon: 'fas fa-external-link-alt',
handler: () => { handler: () => {
window.open(`https://${this.host}`, '_blank'); window.open(`https://${props.host}`, '_blank');
} }
}], }],
}, },
instance: null,
suspended: false,
chartSrc: 'instance-requests',
chartSpan: 'hour',
}
},
computed: {
iAmModerator(): boolean {
return this.$i && (this.$i.isAdmin || this.$i.isModerator);
},
isBlocked() {
return this.instance && this.$instance && this.$instance.blockedHosts && this.$instance.blockedHosts.includes(this.instance.host);
}
},
mounted() {
this.fetch();
},
methods: {
number,
bytes,
async fetch() {
this.instance = await os.api('federation/show-instance', {
host: this.host
});
this.suspended = this.instance.isSuspended;
},
changeBlock(e) {
os.api('admin/update-meta', {
blockedHosts: this.isBlocked ? this.meta.blockedHosts.concat([this.instance.host]) : this.meta.blockedHosts.filter(x => x !== this.instance.host)
});
},
async toggleSuspend(v) {
await os.api('admin/federation/update-instance', {
host: this.instance.host,
isSuspended: this.suspended
});
},
}
}); });
</script> </script>

View file

@ -5,7 +5,7 @@ import * as Acct from 'misskey-js/built/acct';
import * as os from '@/os'; import * as os from '@/os';
import { userActions } from '@/store'; import { userActions } from '@/store';
import { router } from '@/router'; import { router } from '@/router';
import { $i } from '@/account'; import { $i, iAmModerator } from '@/account';
export function getUserMenu(user) { export function getUserMenu(user) {
const meId = $i ? $i.id : null; const meId = $i ? $i.id : null;
@ -175,7 +175,7 @@ export function getUserMenu(user) {
action: reportAbuse action: reportAbuse
}]); }]);
if ($i && ($i.isAdmin || $i.isModerator)) { if (iAmModerator) {
menu = menu.concat([null, { menu = menu.concat([null, {
icon: 'fas fa-microphone-slash', icon: 'fas fa-microphone-slash',
text: user.isSilenced ? i18n.locale.unsilence : i18n.locale.silence, text: user.isSilenced ? i18n.locale.unsilence : i18n.locale.silence,