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

enhance(frontend): エラー発生時のダイアログに詳細情報を載せる (MisskeyIO#543)

Browse source
This commit is contained in:
まっちゃとーにゅ 2024-03-20 15:42:20 +09:00 • committed by GitHub
parent 41ea486881
commit daf297c9c0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 37 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

16
packages/frontend/src/components/MkDialog.vue
View file

@ -48,6 +48,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
</template>
</MkSelect>
<details v-if="details" class="_acrylic" style="margin: 1em 0;">
<summary>{{ i18n.ts.details }}</summary>
<div class="_gaps_s" style="text-align: initial;">
<MkKeyValue v-for="(value, key) in details" :key="key" :value="value">
<template #key>{{ key }}</template>
<template #value>{{ value }}</template>
</MkKeyValue>
</div>
</details>
<div v-if="(showOkButton || showCancelButton) && !actions" :class="$style.buttons">
<MkButton v-if="showOkButton" data-cy-modal-dialog-ok inline primary rounded :autofocus="!input && !select" :disabled="okButtonDisabledReason" @click="ok">{{ okText ?? ((showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt) }}</MkButton>
<MkButton v-if="showCancelButton || input || select" data-cy-modal-dialog-cancel inline rounded @click="cancel">{{ cancelText ?? i18n.ts.cancel }}</MkButton>
@ -66,6 +75,7 @@ import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
import { i18n } from '@/i18n.js';
type Input = {
@ -89,11 +99,12 @@ type Result = string | number | true | null;
const props = withDefaults(defineProps<{
type?: 'success' | 'error' | 'warning' | 'info' | 'question' | 'waiting';
icon?: string;
title?: string | null;
text?: string | null;
input?: Input;
select?: Select;
icon?: string;
details?: Record<string, string>;
actions?: {
text: string;
primary?: boolean,
@ -107,11 +118,12 @@ const props = withDefaults(defineProps<{
cancelText?: string;
}>(), {
type: 'info',
icon: undefined,
title: undefined,
text: undefined,
input: undefined,
select: undefined,
icon: undefined,
details: undefined,
actions: undefined,
showOkButton: true,
showCancelButton: false,

9
packages/frontend/src/os.ts
View file

@ -47,6 +47,7 @@ export const apiWithDialog = (<E extends keyof Misskey.Endpoints = keyof Misskey
type: 'error',
title,
text,
details: err.info,
actions: [{
value: 'ok',
text: i18n.ts.gotIt,
@ -81,6 +82,7 @@ export const apiWithDialog = (<E extends keyof Misskey.Endpoints = keyof Misskey
type: 'error',
title,
text,
details: err.info,
});
});
@ -113,7 +115,9 @@ export function promiseDialog<T>(
} else {
alert({
type: 'error',
text: err,
title: err.message,
text: err.id,
details: err.info,
});
}
});
@ -217,6 +221,7 @@ export function alert(props: {
type?: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
title?: string | null;
text?: string | null;
details?: Record<string, string>;
}): Promise<void> {
return new Promise(resolve => {
popup(MkDialog, props, {
@ -231,6 +236,7 @@ export function confirm(props: {
type: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
title?: string | null;
text?: string | null;
details?: Record<string, string>;
okText?: string;
cancelText?: string;
}): Promise<{ canceled: boolean }> {
@ -257,6 +263,7 @@ export function actions<T extends {
type: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
title?: string | null;
text?: string | null;
details?: Record<string, string>;
actions: T;
}): Promise<{
canceled: true; result: undefined;