SWREI/switched
0
0
Fork 0
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> {
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;
}

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

@ -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;
}

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

@ -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(() => {

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>
<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;
}
}

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) {
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();
}