fix(frontend): modalが正しく閉じられていないのを修正 (#14307)
* 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:
parent
46d96c7412
commit
22c4e9d7ec
5 changed files with 53 additions and 34 deletions
|
@ -24,22 +24,23 @@ export type MkSystemWebhookResult = {
|
|||
};
|
||||
|
||||
export async function showSystemWebhookEditorDialog(props: MkSystemWebhookEditorProps): Promise<MkSystemWebhookResult | null> {
|
||||
const { dispose, result } = await new Promise<{ dispose: () => void, result: MkSystemWebhookResult | null }>(async resolve => {
|
||||
const { dispose: _dispose } = os.popup(
|
||||
const { result } = await new Promise<{ result: MkSystemWebhookResult | null }>(async resolve => {
|
||||
const { dispose } = os.popup(
|
||||
defineAsyncComponent(() => import('@/components/MkSystemWebhookEditor.vue')),
|
||||
props,
|
||||
{
|
||||
submitted: (ev: MkSystemWebhookResult) => {
|
||||
resolve({ dispose: _dispose, result: ev });
|
||||
resolve({ result: ev });
|
||||
},
|
||||
canceled: () => {
|
||||
resolve({ result: null });
|
||||
},
|
||||
closed: () => {
|
||||
resolve({ dispose: _dispose, result: null });
|
||||
dispose();
|
||||
},
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
dispose();
|
||||
|
||||
return result;
|
||||
}
|
||||
|
|
|
@ -5,6 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<template>
|
||||
<MkModalWindow
|
||||
ref="dialogEl"
|
||||
:width="450"
|
||||
:height="590"
|
||||
:canClose="true"
|
||||
|
@ -12,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
:okButtonDisabled="false"
|
||||
@click="onCancelClicked"
|
||||
@close="onCancelClicked"
|
||||
@closed="onCancelClicked"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<template #header>
|
||||
{{ mode === 'create' ? i18n.ts._webhookSettings.createWebhook : i18n.ts._webhookSettings.modifyWebhook }}
|
||||
|
@ -59,8 +60,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, toRefs } from 'vue';
|
||||
import FormSection from '@/components/form/section.vue';
|
||||
import { computed, onMounted, ref, shallowRef, toRefs } from 'vue';
|
||||
import MkInput from '@/components/MkInput.vue';
|
||||
import MkSwitch from '@/components/MkSwitch.vue';
|
||||
import {
|
||||
|
@ -82,9 +82,12 @@ type EventType = {
|
|||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'submitted', result: MkSystemWebhookResult): void;
|
||||
(ev: 'canceled'): void;
|
||||
(ev: 'closed'): void;
|
||||
}>();
|
||||
|
||||
const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>();
|
||||
|
||||
const props = defineProps<MkSystemWebhookEditorProps>();
|
||||
|
||||
const { mode, id, requiredEvents } = toRefs(props);
|
||||
|
@ -133,12 +136,14 @@ async function onSubmitClicked() {
|
|||
switch (mode.value) {
|
||||
case 'create': {
|
||||
const result = await misskeyApi('admin/system-webhook/create', params);
|
||||
dialogEl.value?.close();
|
||||
emit('submitted', result);
|
||||
break;
|
||||
}
|
||||
case 'edit': {
|
||||
// eslint-disable-next-line
|
||||
const result = await misskeyApi('admin/system-webhook/update', { id: id.value!, ...params });
|
||||
dialogEl.value?.close();
|
||||
emit('submitted', result);
|
||||
break;
|
||||
}
|
||||
|
@ -147,13 +152,15 @@ async function onSubmitClicked() {
|
|||
} catch (ex: any) {
|
||||
const msg = ex.message ?? i18n.ts.internalServerErrorDescription;
|
||||
await os.alert({ type: 'error', title: i18n.ts.error, text: msg });
|
||||
emit('closed');
|
||||
dialogEl.value?.close();
|
||||
emit('canceled');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onCancelClicked() {
|
||||
emit('closed');
|
||||
dialogEl.value?.close();
|
||||
emit('canceled');
|
||||
}
|
||||
|
||||
async function loadingScope<T>(fn: () => Promise<T>): Promise<T> {
|
||||
|
@ -183,11 +190,12 @@ onMounted(async () => {
|
|||
for (const ev of Object.keys(events.value)) {
|
||||
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) {
|
||||
const msg = ex.message ?? i18n.ts.internalServerErrorDescription;
|
||||
await os.alert({ type: 'error', title: i18n.ts.error, text: msg });
|
||||
emit('closed');
|
||||
dialogEl.value?.close();
|
||||
emit('canceled');
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
|
|
@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { onMounted, ref, shallowRef } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import MkInput from '@/components/MkInput.vue';
|
||||
import FormSplit from '@/components/form/split.vue';
|
||||
|
@ -91,7 +91,7 @@ const host = ref('');
|
|||
const users = ref<Misskey.entities.UserLite[]>([]);
|
||||
const recentUsers = ref<Misskey.entities.UserDetailed[]>([]);
|
||||
const selected = ref<Misskey.entities.UserLite | null>(null);
|
||||
const dialogEl = ref();
|
||||
const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>();
|
||||
|
||||
function search() {
|
||||
if (username.value === '' && host.value === '') {
|
||||
|
@ -122,7 +122,7 @@ async function ok() {
|
|||
});
|
||||
emit('ok', user);
|
||||
|
||||
dialogEl.value.close();
|
||||
dialogEl.value?.close();
|
||||
|
||||
// 最近使ったユーザー更新
|
||||
let recents = defaultStore.state.recentlyUsedUsers;
|
||||
|
@ -133,7 +133,7 @@ async function ok() {
|
|||
|
||||
function cancel() {
|
||||
emit('cancel');
|
||||
dialogEl.value.close();
|
||||
dialogEl.value?.close();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
|
|
@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<template>
|
||||
<MkModalWindow
|
||||
ref="dialog"
|
||||
ref="dialogEl"
|
||||
:width="400"
|
||||
:height="490"
|
||||
:withOkButton="false"
|
||||
|
@ -71,7 +71,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<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 MkButton from '@/components/MkButton.vue';
|
||||
import MkModalWindow from '@/components/MkModalWindow.vue';
|
||||
|
@ -88,6 +88,7 @@ type NotificationRecipientMethod = 'email' | 'webhook';
|
|||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'submitted'): void;
|
||||
(ev: 'canceled'): void;
|
||||
(ev: 'closed'): void;
|
||||
}>();
|
||||
|
||||
|
@ -98,6 +99,8 @@ const props = defineProps<{
|
|||
|
||||
const { mode, id } = toRefs(props);
|
||||
|
||||
const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>();
|
||||
|
||||
const loading = ref<number>(0);
|
||||
|
||||
const title = ref<string>('');
|
||||
|
@ -166,18 +169,21 @@ async function onSubmitClicked() {
|
|||
}
|
||||
}
|
||||
|
||||
dialogEl.value?.close();
|
||||
emit('submitted');
|
||||
// eslint-disable-next-line
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
} catch (ex: any) {
|
||||
const msg = ex.message ?? i18n.ts.internalServerErrorDescription;
|
||||
await os.alert({ type: 'error', title: i18n.ts.error, text: msg });
|
||||
emit('closed');
|
||||
dialogEl.value?.close();
|
||||
emit('canceled');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onCancelClicked() {
|
||||
emit('closed');
|
||||
dialogEl.value?.close();
|
||||
emit('canceled');
|
||||
}
|
||||
|
||||
async function onEditSystemWebhookClicked() {
|
||||
|
@ -262,7 +268,8 @@ onMounted(async () => {
|
|||
} catch (ex: any) {
|
||||
const msg = ex.message ?? i18n.ts.internalServerErrorDescription;
|
||||
await os.alert({ type: 'error', title: i18n.ts.error, text: msg });
|
||||
emit('closed');
|
||||
dialogEl.value?.close();
|
||||
emit('canceled');
|
||||
}
|
||||
} else {
|
||||
userId.value = moderators.value[0]?.id ?? null;
|
||||
|
@ -296,11 +303,13 @@ onMounted(async () => {
|
|||
gap: 8px;
|
||||
|
||||
button {
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
min-width: 2.5em;
|
||||
min-height: 2.5em;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
margin: 1px 0;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -108,26 +108,27 @@ async function onDeleteButtonClicked(id: string) {
|
|||
}
|
||||
|
||||
async function showEditor(mode: 'create' | 'edit', id?: string) {
|
||||
const { dispose, needLoad } = await new Promise<{ dispose: () => void, needLoad: boolean }>(async resolve => {
|
||||
const { dispose: _dispose } = os.popup(
|
||||
const { needLoad } = await new Promise<{ needLoad: boolean }>(async resolve => {
|
||||
const { dispose } = os.popup(
|
||||
defineAsyncComponent(() => import('./notification-recipient.editor.vue')),
|
||||
{
|
||||
mode,
|
||||
id,
|
||||
},
|
||||
{
|
||||
submitted: async () => {
|
||||
resolve({ dispose: _dispose, needLoad: true });
|
||||
submitted: () => {
|
||||
resolve({ needLoad: true });
|
||||
},
|
||||
canceled: () => {
|
||||
resolve({ needLoad: false });
|
||||
},
|
||||
closed: () => {
|
||||
resolve({ dispose: _dispose, needLoad: false });
|
||||
dispose();
|
||||
},
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
dispose();
|
||||
|
||||
if (needLoad) {
|
||||
await fetchRecipients();
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue