mirror/misskey
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey synced 2024-11-28 06:48:42 +09:00
Code

fix(frontend): modalが正しく閉じられていないのを修正 (#14307)

Browse Source 
* fix(frontend): modalが正しく閉じられていないのを修正

* Update packages/frontend/src/components/MkSystemWebhookEditor.vue

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
かっこかり 2024-07-27 18:09:57 +09:00 committed by GitHub
parent 46d96c7412
commit 22c4e9d7ec
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 53 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/frontend/src/components/MkSystemWebhookEditor.impl.ts
View File

@ -24,22 +24,23 @@ export type MkSystemWebhookResult = {
}; };
export async function showSystemWebhookEditorDialog(props: MkSystemWebhookEditorProps): Promise<MkSystemWebhookResult | null> { export async function showSystemWebhookEditorDialog(props: MkSystemWebhookEditorProps): Promise<MkSystemWebhookResult | null> {
const { dispose, result } = await new Promise<{ dispose: () => void, result: MkSystemWebhookResult | null }>(async resolve => { const { result } = await new Promise<{ result: MkSystemWebhookResult | null }>(async resolve => {
const { dispose: _dispose } = os.popup( const { dispose } = os.popup(
defineAsyncComponent(() => import('@/components/MkSystemWebhookEditor.vue')), defineAsyncComponent(() => import('@/components/MkSystemWebhookEditor.vue')),
props, props,
{ {
submitted: (ev: MkSystemWebhookResult) => { submitted: (ev: MkSystemWebhookResult) => {
resolve({ dispose: _dispose, result: ev }); resolve({ result: ev });
},
canceled: () => {
resolve({ result: null });
}, },
closed: () => { closed: () => {
resolve({ dispose: _dispose, result: null }); dispose();
}, },
}, },
); );
}); });
dispose();
return result; return result;
} }

22
packages/frontend/src/components/MkSystemWebhookEditor.vue
View File

@ -5,6 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<MkModalWindow <MkModalWindow
ref="dialogEl"
:width="450" :width="450"
:height="590" :height="590"
:canClose="true" :canClose="true"
@ -12,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:okButtonDisabled="false" :okButtonDisabled="false"
@click="onCancelClicked" @click="onCancelClicked"
@close="onCancelClicked" @close="onCancelClicked"
@closed="onCancelClicked" @closed="emit('closed')"
> >
<template #header> <template #header>
{{ mode === 'create' ? i18n.ts._webhookSettings.createWebhook : i18n.ts._webhookSettings.modifyWebhook }} {{ mode === 'create' ? i18n.ts._webhookSettings.createWebhook : i18n.ts._webhookSettings.modifyWebhook }}
@ -59,8 +60,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, ref, toRefs } from 'vue'; import { computed, onMounted, ref, shallowRef, toRefs } from 'vue';
import FormSection from '@/components/form/section.vue';
import MkInput from '@/components/MkInput.vue'; import MkInput from '@/components/MkInput.vue';
import MkSwitch from '@/components/MkSwitch.vue'; import MkSwitch from '@/components/MkSwitch.vue';
import { import {
@ -82,9 +82,12 @@ type EventType = {
const emit = defineEmits<{ const emit = defineEmits<{
(ev: 'submitted', result: MkSystemWebhookResult): void; (ev: 'submitted', result: MkSystemWebhookResult): void;
(ev: 'canceled'): void;
(ev: 'closed'): void; (ev: 'closed'): void;
}>(); }>();
const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>();
const props = defineProps<MkSystemWebhookEditorProps>(); const props = defineProps<MkSystemWebhookEditorProps>();
const { mode, id, requiredEvents } = toRefs(props); const { mode, id, requiredEvents } = toRefs(props);
@ -133,12 +136,14 @@ async function onSubmitClicked() {
switch (mode.value) { switch (mode.value) {
case 'create': { case 'create': {
const result = await misskeyApi('admin/system-webhook/create', params); const result = await misskeyApi('admin/system-webhook/create', params);
dialogEl.value?.close();
emit('submitted', result); emit('submitted', result);
break; break;
} }
case 'edit': { case 'edit': {
// eslint-disable-next-line // eslint-disable-next-line
const result = await misskeyApi('admin/system-webhook/update', { id: id.value!, ...params }); const result = await misskeyApi('admin/system-webhook/update', { id: id.value!, ...params });
dialogEl.value?.close();
emit('submitted', result); emit('submitted', result);
break; break;
} }
@ -147,13 +152,15 @@ async function onSubmitClicked() {
} catch (ex: any) { } catch (ex: any) {
const msg = ex.message ?? i18n.ts.internalServerErrorDescription; const msg = ex.message ?? i18n.ts.internalServerErrorDescription;
await os.alert({ type: 'error', title: i18n.ts.error, text: msg }); await os.alert({ type: 'error', title: i18n.ts.error, text: msg });
emit('closed'); dialogEl.value?.close();
emit('canceled');
} }
}); });
} }
function onCancelClicked() { function onCancelClicked() {
emit('closed'); dialogEl.value?.close();
emit('canceled');
} }
async function loadingScope<T>(fn: () => Promise<T>): Promise<T> { async function loadingScope<T>(fn: () => Promise<T>): Promise<T> {
@ -183,11 +190,12 @@ onMounted(async () => {
for (const ev of Object.keys(events.value)) { for (const ev of Object.keys(events.value)) {
events.value[ev] = res.on.includes(ev as SystemWebhookEventType); events.value[ev] = res.on.includes(ev as SystemWebhookEventType);
} }
// eslint-disable-next-line // eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (ex: any) { } catch (ex: any) {
const msg = ex.message ?? i18n.ts.internalServerErrorDescription; const msg = ex.message ?? i18n.ts.internalServerErrorDescription;
await os.alert({ type: 'error', title: i18n.ts.error, text: msg }); await os.alert({ type: 'error', title: i18n.ts.error, text: msg });
emit('closed'); dialogEl.value?.close();
emit('canceled');
} }
break; break;
} }

8
packages/frontend/src/components/MkUserSelectDialog.vue
View File

@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref } from 'vue'; import { onMounted, ref, shallowRef } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import MkInput from '@/components/MkInput.vue'; import MkInput from '@/components/MkInput.vue';
import FormSplit from '@/components/form/split.vue'; import FormSplit from '@/components/form/split.vue';
@ -91,7 +91,7 @@ const host = ref('');
const users = ref<Misskey.entities.UserLite[]>([]); const users = ref<Misskey.entities.UserLite[]>([]);
const recentUsers = ref<Misskey.entities.UserDetailed[]>([]); const recentUsers = ref<Misskey.entities.UserDetailed[]>([]);
const selected = ref<Misskey.entities.UserLite | null>(null); const selected = ref<Misskey.entities.UserLite | null>(null);
const dialogEl = ref(); const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>();
function search() { function search() {
if (username.value === '' && host.value === '') { if (username.value === '' && host.value === '') {
@ -122,7 +122,7 @@ async function ok() {
}); });
emit('ok', user); emit('ok', user);
dialogEl.value.close(); dialogEl.value?.close();
// 最近使ったユーザー更新 // 最近使ったユーザー更新
let recents = defaultStore.state.recentlyUsedUsers; let recents = defaultStore.state.recentlyUsedUsers;
@ -133,7 +133,7 @@ async function ok() {
function cancel() { function cancel() {
emit('cancel'); emit('cancel');
dialogEl.value.close(); dialogEl.value?.close();
} }
onMounted(() => { onMounted(() => {

29
packages/frontend/src/pages/admin/abuse-report/notification-recipient.editor.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<MkModalWindow <MkModalWindow
ref="dialog" ref="dialogEl"
:width="400" :width="400"
:height="490" :height="490"
:withOkButton="false" :withOkButton="false"
@ -71,7 +71,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, onMounted, ref, toRefs } from 'vue'; import { computed, onMounted, ref, shallowRef, toRefs } from 'vue';
import { entities } from 'misskey-js'; import { entities } from 'misskey-js';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkModalWindow from '@/components/MkModalWindow.vue'; import MkModalWindow from '@/components/MkModalWindow.vue';
@ -88,6 +88,7 @@ type NotificationRecipientMethod = 'email' | 'webhook';
const emit = defineEmits<{ const emit = defineEmits<{
(ev: 'submitted'): void; (ev: 'submitted'): void;
(ev: 'canceled'): void;
(ev: 'closed'): void; (ev: 'closed'): void;
}>(); }>();
@ -98,6 +99,8 @@ const props = defineProps<{
const { mode, id } = toRefs(props); const { mode, id } = toRefs(props);
const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>();
const loading = ref<number>(0); const loading = ref<number>(0);
const title = ref<string>(''); const title = ref<string>('');
@ -166,18 +169,21 @@ async function onSubmitClicked() {
} }
} }
dialogEl.value?.close();
emit('submitted'); emit('submitted');
// eslint-disable-next-line // eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (ex: any) { } catch (ex: any) {
const msg = ex.message ?? i18n.ts.internalServerErrorDescription; const msg = ex.message ?? i18n.ts.internalServerErrorDescription;
await os.alert({ type: 'error', title: i18n.ts.error, text: msg }); await os.alert({ type: 'error', title: i18n.ts.error, text: msg });
emit('closed'); dialogEl.value?.close();
emit('canceled');
} }
}); });
} }
function onCancelClicked() { function onCancelClicked() {
emit('closed'); dialogEl.value?.close();
emit('canceled');
} }
async function onEditSystemWebhookClicked() { async function onEditSystemWebhookClicked() {
@ -262,7 +268,8 @@ onMounted(async () => {
} catch (ex: any) { } catch (ex: any) {
const msg = ex.message ?? i18n.ts.internalServerErrorDescription; const msg = ex.message ?? i18n.ts.internalServerErrorDescription;
await os.alert({ type: 'error', title: i18n.ts.error, text: msg }); await os.alert({ type: 'error', title: i18n.ts.error, text: msg });
emit('closed'); dialogEl.value?.close();
emit('canceled');
} }
} else { } else {
userId.value = moderators.value[0]?.id ?? null; userId.value = moderators.value[0]?.id ?? null;
@ -296,11 +303,13 @@ onMounted(async () => {
gap: 8px; gap: 8px;
button { button {
width: 2.5em; min-width: 0;
height: 2.5em; min-height: 0;
min-width: 2.5em; width: 34px;
min-height: 2.5em; height: 34px;
flex-shrink: 0;
box-sizing: border-box; box-sizing: border-box;
margin: 1px 0;
padding: 6px; padding: 6px;
} }
} }

15
packages/frontend/src/pages/admin/abuse-report/notification-recipient.vue
View File

@ -108,26 +108,27 @@ async function onDeleteButtonClicked(id: string) {
} }
async function showEditor(mode: 'create' | 'edit', id?: string) { async function showEditor(mode: 'create' | 'edit', id?: string) {
const { dispose, needLoad } = await new Promise<{ dispose: () => void, needLoad: boolean }>(async resolve => { const { needLoad } = await new Promise<{ needLoad: boolean }>(async resolve => {
const { dispose: _dispose } = os.popup( const { dispose } = os.popup(
defineAsyncComponent(() => import('./notification-recipient.editor.vue')), defineAsyncComponent(() => import('./notification-recipient.editor.vue')),
{ {
mode, mode,
id, id,
}, },
{ {
submitted: async () => { submitted: () => {
resolve({ dispose: _dispose, needLoad: true }); resolve({ needLoad: true });
},
canceled: () => {
resolve({ needLoad: false });
}, },
closed: () => { closed: () => {
resolve({ dispose: _dispose, needLoad: false }); dispose();
}, },
}, },
); );
}); });
dispose();
if (needLoad) { if (needLoad) {
await fetchRecipients(); await fetchRecipients();
} }