Skip to content

Commit

Permalink
設定UIで、辞書のインポートが失敗したときも成功したトーストが出てしまうのを修正 (#1450)
Browse files Browse the repository at this point in the history 
* 設定UIで、辞書のインポートが失敗したときも成功したトーストが出てしまうのを防止

* ケツカンマをなくす

* removeミス

* ケツカンマを

* toastTypeを定義

* --snapshot-update
  • Loading branch information
@Hiroshiba
Hiroshiba authored Aug 9, 2024
1 parent d399635 commit 3be23ee
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 28 deletions.
40 changes: 26 additions & 14 deletions resources/setting_ui_template.html
View file
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
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

0 comments on commit 3be23ee

Please sign in to comment.