Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

設定UIで、辞書のインポートが失敗したときも成功したトーストが出てしまうのを修正 #1450

Merged
merged 6 commits into from
Aug 9, 2024
Merged

設定UIで、辞書のインポートが失敗したときも成功したトーストが出てしまうのを修正 #1450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
16f5e9e
設定UIで、辞書のインポートが失敗したときも成功したトーストが出てしまうのを防止
Hiroshiba Jul 17, 2024
c8d11c9
ケツカンマをなくす
Hiroshiba Jul 17, 2024
089e067
removeミス
Hiroshiba Jul 17, 2024
2a7534e
ケツカンマを
Hiroshiba Jul 17, 2024
a81ec6a
toastTypeを定義
Hiroshiba Jul 17, 2024
fa225ac
--snapshot-update
Hiroshiba Jul 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 26 additions & 14 deletions resources/setting_ui_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ <h1 class="mb-3">{{brandName}} エンジン 設定</h1>
download="VOICEVOXユーザー辞書.json"
class="btn btn-primary mb-3"
href="/user_dict"
@click="showToastWithMessage('辞書をエクスポートしました。');"
@click="showToastWithMessage('辞書をエクスポートしました。', 'success');"
target="_blank"
rel="noopener noreferrer"
>
Expand Down Expand Up @@ -166,7 +166,8 @@ <h5 class="modal-title" id="importUserDictModalLabel">
<!-- トースト -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
<div
class="toast align-items-center autohide text-white bg-success"
class="toast align-items-center autohide text-white"
:class="'bg-' + toastType"
role="alert"
aria-live="assertive"
aria-atomic="true"
Expand All @@ -187,7 +188,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
setup() {
// 設定値周り
const corsPolicyMode = ref(
"<JINJA_PRE>cors_policy_mode<JINJA_POST>"
"<JINJA_PRE>cors_policy_mode<JINJA_POST>",
);
const allowOrigin = ref("<JINJA_PRE>allow_origin<JINJA_POST>");

Expand All @@ -203,9 +204,9 @@ <h5 class="modal-title" id="importUserDictModalLabel">
body: formData,
}).then((res) => {
if (res.ok) {
showToastWithMessage("設定を保存しました。");
showToastWithMessage("設定を保存しました。", "success");
} else {
showToastWithMessage("設定の保存に失敗しました。");
showToastWithMessage("設定の保存に失敗しました。", "danger");
}
});
});
Expand All @@ -223,14 +224,20 @@ <h5 class="modal-title" id="importUserDictModalLabel">
const params = new URLSearchParams({
override: true, // 重複するエントリを上書きする
});
await fetch(`/import_user_dict?${params}`, {
const response = await fetch(`/import_user_dict?${params}`, {
method: "POST",
mode: "same-origin",
headers: { "Content-Type": "application/json" },
body: reader.result,
});

showToastWithMessage("辞書をインポートしました。");
if (response.ok) {
showToastWithMessage("辞書をインポートしました。", "success");
} else {
showToastWithMessage(
"辞書のインポートに失敗しました。",
"danger",
);
}
});

reader.readAsText(userDictFileForImport.value);
Expand All @@ -240,16 +247,20 @@ <h5 class="modal-title" id="importUserDictModalLabel">
const toastElem = ref(undefined);
const bootstrapToast = ref(undefined);
const toastMessage = ref("");
const toastType = ref("success");
onMounted(() => {
if (toastElem.value == undefined) {
throw new Error("toastElemが見つかりません。");
}
bootstrapToast.value = new bootstrap.Toast(toastElem.value);
});
const showToastWithMessage = (message) => {
console.log(`showToastWithMessage: ${message}`);

// メッセージを表示する。typeはsuccess・info・warning・dangerなど。
const showToastWithMessage = (message, type) => {
console.log(`showToastWithMessage: ${message}, ${type}`);
bootstrapToast.value.show();
toastMessage.value = message;
toastType.value = type;
};

// 表示用の情報
Expand All @@ -268,6 +279,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
importUserDict,
toastElem,
toastMessage,
toastType,
showToastWithMessage,
brandName,
};
Expand Down Expand Up @@ -306,7 +318,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
elem.onload = resolve;
elem.onerror = () => {
console.warn(
`CDNの読み込みに失敗しました。 ${candidateUrlList[current]}`
`CDNの読み込みに失敗しました。 ${candidateUrlList[current]}`,
);
document.head.removeChild(elem);
current++;
Expand All @@ -331,7 +343,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css",
],
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC",
);
libraryLoadingPromises.push(bootstrapCssPromise);

Expand All @@ -342,7 +354,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.bundle.min.js",
],
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM",
);
libraryLoadingPromises.push(bootstrapScriptPromise);

Expand All @@ -354,7 +366,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js",
"https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.10/vue.global.js",
],
"sha384-ttfhgYK68lNlS8ak6Z//mvUbpRbRCh43MYGuqEtK8mj/yzlKqY8GA8o3BPMi23cE"
"sha384-ttfhgYK68lNlS8ak6Z//mvUbpRbRCh43MYGuqEtK8mj/yzlKqY8GA8o3BPMi23cE",
);
libraryLoadingPromises.push(vuePromise);

Expand Down
40 changes: 26 additions & 14 deletions test/e2e/single_api/setting/__snapshots__/test_setting_api.ambr
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
download="VOICEVOXユーザー辞書.json"
class="btn btn-primary mb-3"
href="/user_dict"
@click="showToastWithMessage('辞書をエクスポートしました。');"
@click="showToastWithMessage('辞書をエクスポートしました。', 'success');"
target="_blank"
rel="noopener noreferrer"
>
Expand Down Expand Up @@ -169,7 +169,8 @@
<!-- トースト -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
<div
class="toast align-items-center autohide text-white bg-success"
class="toast align-items-center autohide text-white"
:class="'bg-' + toastType"
role="alert"
aria-live="assertive"
aria-atomic="true"
Expand All @@ -190,7 +191,7 @@
setup() {
// 設定値周り
const corsPolicyMode = ref(
"localapps"
"localapps",
);
const allowOrigin = ref("");

Expand All @@ -206,9 +207,9 @@
body: formData,
}).then((res) => {
if (res.ok) {
showToastWithMessage("設定を保存しました。");
showToastWithMessage("設定を保存しました。", "success");
} else {
showToastWithMessage("設定の保存に失敗しました。");
showToastWithMessage("設定の保存に失敗しました。", "danger");
}
});
});
Expand All @@ -226,14 +227,20 @@
const params = new URLSearchParams({
override: true, // 重複するエントリを上書きする
});
await fetch(`/import_user_dict?${params}`, {
const response = await fetch(`/import_user_dict?${params}`, {
method: "POST",
mode: "same-origin",
headers: { "Content-Type": "application/json" },
body: reader.result,
});

showToastWithMessage("辞書をインポートしました。");
if (response.ok) {
showToastWithMessage("辞書をインポートしました。", "success");
} else {
showToastWithMessage(
"辞書のインポートに失敗しました。",
"danger",
);
}
});

reader.readAsText(userDictFileForImport.value);
Expand All @@ -243,16 +250,20 @@
const toastElem = ref(undefined);
const bootstrapToast = ref(undefined);
const toastMessage = ref("");
const toastType = ref("success");
onMounted(() => {
if (toastElem.value == undefined) {
throw new Error("toastElemが見つかりません。");
}
bootstrapToast.value = new bootstrap.Toast(toastElem.value);
});
const showToastWithMessage = (message) => {
console.log(`showToastWithMessage: ${message}`);

// メッセージを表示する。typeはsuccess・info・warning・dangerなど。
const showToastWithMessage = (message, type) => {
console.log(`showToastWithMessage: ${message}, ${type}`);
bootstrapToast.value.show();
toastMessage.value = message;
toastType.value = type;
};

// 表示用の情報
Expand All @@ -271,6 +282,7 @@
importUserDict,
toastElem,
toastMessage,
toastType,
showToastWithMessage,
brandName,
};
Expand Down Expand Up @@ -309,7 +321,7 @@
elem.onload = resolve;
elem.onerror = () => {
console.warn(
`CDNの読み込みに失敗しました。 ${candidateUrlList[current]}`
`CDNの読み込みに失敗しました。 ${candidateUrlList[current]}`,
);
document.head.removeChild(elem);
current++;
Expand All @@ -334,7 +346,7 @@
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css",
],
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC",
);
libraryLoadingPromises.push(bootstrapCssPromise);

Expand All @@ -345,7 +357,7 @@
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.bundle.min.js",
],
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM",
);
libraryLoadingPromises.push(bootstrapScriptPromise);

Expand All @@ -357,7 +369,7 @@
"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js",
"https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.10/vue.global.js",
],
"sha384-ttfhgYK68lNlS8ak6Z//mvUbpRbRCh43MYGuqEtK8mj/yzlKqY8GA8o3BPMi23cE"
"sha384-ttfhgYK68lNlS8ak6Z//mvUbpRbRCh43MYGuqEtK8mj/yzlKqY8GA8o3BPMi23cE",
);
libraryLoadingPromises.push(vuePromise);

Expand Down