From b6002b69186d6578fc2fe39a942fed81f3dffe30 Mon Sep 17 00:00:00 2001 From: yoshidakenji <181298858+kenjiyoshid-a@users.noreply.github.com> Date: Mon, 20 Jan 2025 14:16:39 +0900 Subject: [PATCH 01/12] =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=87=E3=82=A3?= =?UTF-8?q?=E3=83=B3=E3=82=B0=E3=83=BB=E3=82=B9=E3=83=94=E3=83=8A=E3=83=BC?= =?UTF-8?q?=E3=81=AE=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3?= =?UTF-8?q?=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/src/components/LoadingSpinner.vue | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 samples/web-csr/dressca-frontend/admin/src/components/LoadingSpinner.vue diff --git a/samples/web-csr/dressca-frontend/admin/src/components/LoadingSpinner.vue b/samples/web-csr/dressca-frontend/admin/src/components/LoadingSpinner.vue new file mode 100644 index 000000000..3dd989254 --- /dev/null +++ b/samples/web-csr/dressca-frontend/admin/src/components/LoadingSpinner.vue @@ -0,0 +1,22 @@ + + From 602e6eb797c370b73704874f51bd25df14283a48 Mon Sep 17 00:00:00 2001 From: yoshidakenji <181298858+kenjiyoshid-a@users.noreply.github.com> Date: Mon, 20 Jan 2025 14:17:22 +0900 Subject: [PATCH 02/12] =?UTF-8?q?=E3=82=AB=E3=82=BF=E3=83=AD=E3=82=B0?= =?UTF-8?q?=E3=82=A2=E3=82=A4=E3=83=86=E3=83=A0=E3=81=AE=E4=B8=80=E8=A6=A7?= =?UTF-8?q?=E7=94=BB=E9=9D=A2=E3=81=AB=E3=83=AD=E3=83=BC=E3=83=87=E3=82=A3?= =?UTF-8?q?=E3=83=B3=E3=82=B0=E3=82=B9=E3=83=94=E3=83=8A=E3=83=BC=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/src/views/catalog/ItemsView.vue | 126 ++++++++++-------- 1 file changed, 69 insertions(+), 57 deletions(-) diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsView.vue index d00a9b596..4c859963f 100644 --- a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsView.vue +++ b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsView.vue @@ -9,6 +9,7 @@ import { currencyHelper } from '@/shared/helpers/currencyHelper'; import { assetHelper } from '@/shared/helpers/assetHelper'; import { useCustomErrorHandler } from '@/shared/error-handler/use-custom-error-handler'; import { showToast } from '@/services/notification/notificationService'; +import LoadingSpinner from '@/components/LoadingSpinner.vue'; import type { GetCatalogBrandsResponse, GetCatalogCategoriesResponse, @@ -57,6 +58,11 @@ const catalogCategories = ref([ { id: 0, name: '' }, ]); +/** + * ローディング・スピナーの表示の状態です。 + */ +const showLoading = ref(true); + /** * カタログブランドの名前を取得します。 * @param id カタログブランドID @@ -80,6 +86,7 @@ const getCategoryName = (id: number) => { * それぞれの状態を更新します。 */ onMounted(async () => { + showLoading.value = true; try { pagedListOfCatalogItem.value = await fetchItems(0, 0); [catalogCategories.value, catalogBrands.value] = @@ -88,6 +95,8 @@ onMounted(async () => { customErrorHandler.handle(error, () => { showToast('カタログアイテムの取得に失敗しました。'); }); + } finally { + showLoading.value = false; } }); @@ -109,63 +118,66 @@ const goToEditItem = (id: number) => { From 6e0ba22b9f1eae3ed596a1a9f1b7abc85a47cbf5 Mon Sep 17 00:00:00 2001 From: yoshidakenji <181298858+kenjiyoshid-a@users.noreply.github.com> Date: Mon, 20 Jan 2025 14:23:58 +0900 Subject: [PATCH 03/12] =?UTF-8?q?=E3=82=A2=E3=82=A4=E3=83=86=E3=83=A0?= =?UTF-8?q?=E3=81=AE=E8=BF=BD=E5=8A=A0=E7=94=BB=E9=9D=A2=E3=81=AB=E3=83=AD?= =?UTF-8?q?=E3=83=BC=E3=83=87=E3=82=A3=E3=83=B3=E3=82=B0=E3=83=BB=E3=82=B9?= =?UTF-8?q?=E3=83=94=E3=83=8A=E3=83=BC=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/src/views/catalog/ItemsAddView.vue | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue index 8fa7e1ea6..2bbce5392 100644 --- a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue +++ b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue @@ -17,6 +17,7 @@ import type { } from '@/generated/api-client'; import { useAuthenticationStore } from '@/stores/authentication/authentication'; import { Roles } from '@/shared/constants/roles'; +import LoadingSpinner from '@/components/LoadingSpinner.vue'; const router = useRouter(); const customErrorHandler = useCustomErrorHandler(); @@ -69,6 +70,11 @@ const catalogCategories = ref([ */ const showAddNotice = ref(false); +/** + * ローディング・スピナーの表示の状態です。 + */ +const showLoading = ref(true); + /** * アイテムをカタログに追加します。 * 追加に成功したら、成功を通知するモーダルを開きます。 @@ -107,6 +113,7 @@ const closeAddNotice = () => { * それぞれの状態を更新します。 */ onMounted(async () => { + showLoading.value = true; try { [catalogCategories.value, catalogBrands.value] = await fetchCategoriesAndBrands(); @@ -114,6 +121,8 @@ onMounted(async () => { customErrorHandler.handle(error, () => { showToast('カテゴリとブランド情報の取得に失敗しました。'); }); + } finally { + showLoading.value = false; } }); @@ -125,8 +134,9 @@ onMounted(async () => { body="カタログアイテムを追加しました。" @close="closeAddNotice" > - +
カタログアイテム追加
From b41e8caaa01540c73a175a41a7d72237a519f32a Mon Sep 17 00:00:00 2001 From: yoshidakenji <181298858+kenjiyoshid-a@users.noreply.github.com> Date: Mon, 20 Jan 2025 14:28:28 +0900 Subject: [PATCH 04/12] =?UTF-8?q?=E3=82=A2=E3=82=A4=E3=83=86=E3=83=A0?= =?UTF-8?q?=E3=81=AE=E7=B7=A8=E9=9B=86=E7=94=BB=E9=9D=A2=E3=81=AB=E3=83=AD?= =?UTF-8?q?=E3=83=BC=E3=83=87=E3=82=A3=E3=83=B3=E3=82=B0=E3=83=BB=E3=82=B9?= =?UTF-8?q?=E3=83=94=E3=83=8A=E3=83=BC=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/src/views/catalog/ItemsEditView.vue | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue index 5a84a0150..ab2566365 100644 --- a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue +++ b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue @@ -26,6 +26,7 @@ import type { import { useCustomErrorHandler } from '@/shared/error-handler/use-custom-error-handler'; import { useAuthenticationStore } from '@/stores/authentication/authentication'; import { Roles } from '@/shared/constants/roles'; +import LoadingSpinner from '@/components/LoadingSpinner.vue'; const customErrorHandler = useCustomErrorHandler(); const authenticationStore = useAuthenticationStore(); @@ -126,6 +127,11 @@ const showUpdateConfirm = ref(false); */ const showUpdateNotice = ref(false); +/** + * ローディング・スピナーの表示の状態です。 + */ +const showLoading = ref(true); + /** * 削除通知モーダルを閉じます。 * 表示する編集対象のアイテムがなくなるので、 @@ -227,7 +233,9 @@ const reFetchItemAndInitRowVersionAsync = async (itemId: number) => { * */ onMounted(async () => { + showLoading.value = true; await initItemAsync(id); + showLoading.value = false; }); /** @@ -333,7 +341,9 @@ const updateItemAsync = async () => { @close="closeUpdateNotice" > -
+ + +
カタログアイテム編集 From 30947f834798fe5f24cf013a5e4d1368c1829fb3 Mon Sep 17 00:00:00 2001 From: yoshidakenji <181298858+kenjiyoshid-a@users.noreply.github.com> Date: Fri, 24 Jan 2025 17:04:35 +0900 Subject: [PATCH 05/12] =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=87=E3=82=A3?= =?UTF-8?q?=E3=83=B3=E3=82=B0=E3=83=BB=E3=82=B9=E3=83=94=E3=83=8A=E3=83=BC?= =?UTF-8?q?=E3=82=92components/common=E3=81=AB=E5=86=8D=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/src/components/{ => common}/LoadingSpinner.vue | 0 .../dressca-frontend/admin/src/views/catalog/ItemsAddView.vue | 2 +- .../dressca-frontend/admin/src/views/catalog/ItemsEditView.vue | 2 +- .../dressca-frontend/admin/src/views/catalog/ItemsView.vue | 2 +- 4 files changed, 3 insertions(+), 3 deletions(-) rename samples/web-csr/dressca-frontend/admin/src/components/{ => common}/LoadingSpinner.vue (100%) diff --git a/samples/web-csr/dressca-frontend/admin/src/components/LoadingSpinner.vue b/samples/web-csr/dressca-frontend/admin/src/components/common/LoadingSpinner.vue similarity index 100% rename from samples/web-csr/dressca-frontend/admin/src/components/LoadingSpinner.vue rename to samples/web-csr/dressca-frontend/admin/src/components/common/LoadingSpinner.vue diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue index 2bbce5392..a2171c57d 100644 --- a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue +++ b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue @@ -17,7 +17,7 @@ import type { } from '@/generated/api-client'; import { useAuthenticationStore } from '@/stores/authentication/authentication'; import { Roles } from '@/shared/constants/roles'; -import LoadingSpinner from '@/components/LoadingSpinner.vue'; +import LoadingSpinner from '@/components/common/LoadingSpinner.vue'; const router = useRouter(); const customErrorHandler = useCustomErrorHandler(); diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue index ab2566365..95e74d0fa 100644 --- a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue +++ b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue @@ -26,7 +26,7 @@ import type { import { useCustomErrorHandler } from '@/shared/error-handler/use-custom-error-handler'; import { useAuthenticationStore } from '@/stores/authentication/authentication'; import { Roles } from '@/shared/constants/roles'; -import LoadingSpinner from '@/components/LoadingSpinner.vue'; +import LoadingSpinner from '@/components/common/LoadingSpinner.vue'; const customErrorHandler = useCustomErrorHandler(); const authenticationStore = useAuthenticationStore(); diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsView.vue index 4c859963f..5a8819b86 100644 --- a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsView.vue +++ b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsView.vue @@ -9,7 +9,7 @@ import { currencyHelper } from '@/shared/helpers/currencyHelper'; import { assetHelper } from '@/shared/helpers/assetHelper'; import { useCustomErrorHandler } from '@/shared/error-handler/use-custom-error-handler'; import { showToast } from '@/services/notification/notificationService'; -import LoadingSpinner from '@/components/LoadingSpinner.vue'; +import LoadingSpinner from '@/components/common/LoadingSpinner.vue'; import type { GetCatalogBrandsResponse, GetCatalogCategoriesResponse, From 25bb047bcaad1e818be79d65aa5abf0990fd4db8 Mon Sep 17 00:00:00 2001 From: yoshidakenji <181298858+kenjiyoshid-a@users.noreply.github.com> Date: Mon, 27 Jan 2025 13:54:44 +0900 Subject: [PATCH 06/12] =?UTF-8?q?admin=E3=81=AE=E3=82=AB=E3=82=BF=E3=83=AD?= =?UTF-8?q?=E3=82=B0=E3=82=A2=E3=82=A4=E3=83=86=E3=83=A0=E3=81=AE=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0=E3=81=A7=E3=81=AF=E5=A4=89=E3=81=AA=E7=94=BB=E9=9D=A2?= =?UTF-8?q?=E3=81=AB=E3=81=AF=E3=81=AA=E3=82=89=E3=81=AA=E3=81=84=E3=81=AE?= =?UTF-8?q?=E3=81=A7=E3=80=81=E3=83=AD=E3=83=BC=E3=83=87=E3=82=A3=E3=83=B3?= =?UTF-8?q?=E3=82=B0=E3=83=BB=E3=82=B9=E3=83=94=E3=83=8A=E3=83=BC=E3=82=92?= =?UTF-8?q?=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/src/views/catalog/ItemsAddView.vue | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue index a2171c57d..44b63eb7a 100644 --- a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue +++ b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue @@ -17,7 +17,6 @@ import type { } from '@/generated/api-client'; import { useAuthenticationStore } from '@/stores/authentication/authentication'; import { Roles } from '@/shared/constants/roles'; -import LoadingSpinner from '@/components/common/LoadingSpinner.vue'; const router = useRouter(); const customErrorHandler = useCustomErrorHandler(); @@ -70,11 +69,6 @@ const catalogCategories = ref([ */ const showAddNotice = ref(false); -/** - * ローディング・スピナーの表示の状態です。 - */ -const showLoading = ref(true); - /** * アイテムをカタログに追加します。 * 追加に成功したら、成功を通知するモーダルを開きます。 @@ -113,7 +107,6 @@ const closeAddNotice = () => { * それぞれの状態を更新します。 */ onMounted(async () => { - showLoading.value = true; try { [catalogCategories.value, catalogBrands.value] = await fetchCategoriesAndBrands(); @@ -121,8 +114,6 @@ onMounted(async () => { customErrorHandler.handle(error, () => { showToast('カテゴリとブランド情報の取得に失敗しました。'); }); - } finally { - showLoading.value = false; } }); @@ -134,9 +125,7 @@ onMounted(async () => { body="カタログアイテムを追加しました。" @close="closeAddNotice" > -
カタログアイテム追加
From 28eacbd82173c05a70e0bccf6dc7d44d2f33284d Mon Sep 17 00:00:00 2001 From: yoshidakenji <181298858+kenjiyoshid-a@users.noreply.github.com> Date: Wed, 5 Feb 2025 14:53:24 +0900 Subject: [PATCH 07/12] =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=87=E3=82=A3?= =?UTF-8?q?=E3=83=B3=E3=82=B0=E3=82=B9=E3=83=94=E3=83=8A=E3=83=BC=E3=81=A8?= =?UTF-8?q?=E3=81=84=E3=81=86=E6=96=87=E8=A8=80=E3=81=AB=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/src/components/common/LoadingSpinner.vue | 2 +- .../dressca-frontend/admin/src/views/catalog/ItemsEditView.vue | 2 +- .../dressca-frontend/admin/src/views/catalog/ItemsView.vue | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/samples/web-csr/dressca-frontend/admin/src/components/common/LoadingSpinner.vue b/samples/web-csr/dressca-frontend/admin/src/components/common/LoadingSpinner.vue index 3dd989254..2757bccf9 100644 --- a/samples/web-csr/dressca-frontend/admin/src/components/common/LoadingSpinner.vue +++ b/samples/web-csr/dressca-frontend/admin/src/components/common/LoadingSpinner.vue @@ -1,6 +1,6 @@ + + + ``` + +次に、 ルーティングが指定されている vue ファイルで作成したコンポーネントを使用して、コンテンツの表示・非表示を制御します。 + +表示・非表示の制御には ref オブジェクトの真理値を利用します。 +コンポーネントがマウントされた時のライフサイクルフックである [onMounted :material-open-in-new:](https://ja.vuejs.org/api/composition-api-lifecycle#onmounted){target=_blank} を使って ref オブジェクトの真理値を切り替えます。 +API 呼び出しの際に例外が発生する可能性のある場合は、 finally 句でスピナーを非表示にする処理を追加してください。 +最後に、 template タグ内で ref オブジェクトの真理値を使って表示するコンテンツを切り替えます。 + +以下は、ローディングスピナーのコンポーネントが実装された vue ファイルの例です。 + +??? example "ローディングスピナーのコンポーネントが実装された vue ファイルの例" + + ``` ts + + + + ``` diff --git a/documents/mkdocs.yml b/documents/mkdocs.yml index e89fe8bbb..8fceefb48 100644 --- a/documents/mkdocs.yml +++ b/documents/mkdocs.yml @@ -106,6 +106,7 @@ nav: - Open API 仕様書からのクライアントコード生成: guidebooks/how-to-develop/vue-js/create-api-client-code.md - エラーハンドラーの設定: guidebooks/how-to-develop/vue-js/error-handler-settings.md - モックモードの設定: guidebooks/how-to-develop/vue-js/mock-mode-settings.md + - ローディングスピナーの実装: guidebooks/how-to-develop/vue-js/loading-spinner.md - ローカル開発環境の構築: - guidebooks/how-to-develop/local-environment/index.md - CORS 環境の構築: From 801160f6448f74b611bd86e9fb6031a6b314f08d Mon Sep 17 00:00:00 2001 From: yoshidakenji <181298858+kenjiyoshid-a@users.noreply.github.com> Date: Fri, 14 Feb 2025 11:20:27 +0900 Subject: [PATCH 09/12] =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=87=E3=82=A3?= =?UTF-8?q?=E3=83=B3=E3=82=B0=E3=82=B9=E3=83=94=E3=83=8A=E3=83=BC=E3=81=AE?= =?UTF-8?q?=E8=AA=AC=E6=98=8E=E3=82=92=E3=82=AC=E3=82=A4=E3=83=89=E3=81=8B?= =?UTF-8?q?=E3=82=89=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3?= =?UTF-8?q?=E3=83=88=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=E3=81=AB=E7=A7=BB?= =?UTF-8?q?=E5=8B=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../guidebooks/how-to-develop/vue-js/index.md | 1 - .../how-to-develop/vue-js/loading-spinner.md | 91 ------------------- documents/mkdocs.yml | 1 - 3 files changed, 93 deletions(-) delete mode 100644 documents/contents/guidebooks/how-to-develop/vue-js/loading-spinner.md diff --git a/documents/contents/guidebooks/how-to-develop/vue-js/index.md b/documents/contents/guidebooks/how-to-develop/vue-js/index.md index ed05eb72a..f48fb03b4 100644 --- a/documents/contents/guidebooks/how-to-develop/vue-js/index.md +++ b/documents/contents/guidebooks/how-to-develop/vue-js/index.md @@ -21,6 +21,5 @@ Vue.js を用いてフロントエンドアプリケーションを開発する 1. [OpenAPI 仕様書からのクライアントコード生成](create-api-client-code.md) 1. [エラーハンドラーの設定](error-handler-settings.md) 1. [モックモードの設定](mock-mode-settings.md) -1. [ローディングスピナーの実装](loading-spinner.md) フロントエンドアプリケーションを公開するオリジンと、呼び出し先の Web API を公開するオリジンが異なる場合（クロスオリジン）の設定は、[こちら](../cors/index.md) を参照してください。 diff --git a/documents/contents/guidebooks/how-to-develop/vue-js/loading-spinner.md b/documents/contents/guidebooks/how-to-develop/vue-js/loading-spinner.md deleted file mode 100644 index ab5a5cdc7..000000000 --- a/documents/contents/guidebooks/how-to-develop/vue-js/loading-spinner.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Vue.js 開発手順 -description: Vue.js を用いた クライアントサイドアプリケーションの 開発手順を説明します。 ---- - -# ローディングスピナーの実装 {#top} - -ローディングスピナーの実装方法を解説します。 - -ローディングスピナーの実装には次の利点があります。 - -- API のレスポンスを待機している間の崩れたレイアウトをユーザーから隠蔽できる。 -- ユーザーにデータの送受信中であることを明示できる。 - -実装手順は以下の通りです。 - -1. ローディングスピナーのコンポーネントを作成する。 -1. vue ファイルで作成したコンポーネントを利用して表示・非表示を制御する。 - -初めに、ローディングスピナーのコンポーネントを作成します。 - -以下は Tailwind CSS を用いた実装例です。 - -??? example "ローディングスピナーのコンポーネントの実装例" - - ``` ts - - - - ``` - -次に、 ルーティングが指定されている vue ファイルで作成したコンポーネントを使用して、コンテンツの表示・非表示を制御します。 - -表示・非表示の制御には ref オブジェクトの真理値を利用します。 -コンポーネントがマウントされた時のライフサイクルフックである [onMounted :material-open-in-new:](https://ja.vuejs.org/api/composition-api-lifecycle#onmounted){target=_blank} を使って ref オブジェクトの真理値を切り替えます。 -API 呼び出しの際に例外が発生する可能性のある場合は、 finally 句でスピナーを非表示にする処理を追加してください。 -最後に、 template タグ内で ref オブジェクトの真理値を使って表示するコンテンツを切り替えます。 - -以下は、ローディングスピナーのコンポーネントが実装された vue ファイルの例です。 - -??? example "ローディングスピナーのコンポーネントが実装された vue ファイルの例" - - ``` ts - - - - ``` diff --git a/documents/mkdocs.yml b/documents/mkdocs.yml index 8fceefb48..e89fe8bbb 100644 --- a/documents/mkdocs.yml +++ b/documents/mkdocs.yml @@ -106,7 +106,6 @@ nav: - Open API 仕様書からのクライアントコード生成: guidebooks/how-to-develop/vue-js/create-api-client-code.md - エラーハンドラーの設定: guidebooks/how-to-develop/vue-js/error-handler-settings.md - モックモードの設定: guidebooks/how-to-develop/vue-js/mock-mode-settings.md - - ローディングスピナーの実装: guidebooks/how-to-develop/vue-js/loading-spinner.md - ローカル開発環境の構築: - guidebooks/how-to-develop/local-environment/index.md - CORS 環境の構築: From 18f2b394c861d2aa25c610015dbdc54c3752fe16 Mon Sep 17 00:00:00 2001 From: yoshidakenji <181298858+kenjiyoshid-a@users.noreply.github.com> Date: Fri, 14 Feb 2025 11:31:59 +0900 Subject: [PATCH 10/12] =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=87=E3=82=A3?= =?UTF-8?q?=E3=83=B3=E3=82=B0=E3=82=B9=E3=83=94=E3=83=8A=E3=83=BC=E3=81=AE?= =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?= =?UTF-8?q?=E3=81=AB=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88=E3=82=92=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/src/components/common/LoadingSpinner.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/samples/web-csr/dressca-frontend/admin/src/components/common/LoadingSpinner.vue b/samples/web-csr/dressca-frontend/admin/src/components/common/LoadingSpinner.vue index 2757bccf9..f85069a3f 100644 --- a/samples/web-csr/dressca-frontend/admin/src/components/common/LoadingSpinner.vue +++ b/samples/web-csr/dressca-frontend/admin/src/components/common/LoadingSpinner.vue @@ -1,6 +1,7 @@ - diff --git a/samples/web-csr/dressca-frontend/admin/src/components/common/LoadingSpinnerOverlay.vue b/samples/web-csr/dressca-frontend/admin/src/components/common/LoadingSpinnerOverlay.vue new file mode 100644 index 000000000..2d3d64cea --- /dev/null +++ b/samples/web-csr/dressca-frontend/admin/src/components/common/LoadingSpinnerOverlay.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue index f30870688..1e66c0d43 100644 --- a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue +++ b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue @@ -26,7 +26,7 @@ import type { import { useCustomErrorHandler } from '@/shared/error-handler/use-custom-error-handler'; import { useAuthenticationStore } from '@/stores/authentication/authentication'; import { Roles } from '@/shared/constants/roles'; -import LoadingSpinner from '@/components/common/LoadingSpinner.vue'; +import LoadingSpinner from '@/components/common/LoadingSpinnerOverlay.vue'; const customErrorHandler = useCustomErrorHandler(); const authenticationStore = useAuthenticationStore(); diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsView.vue index 29ca5394b..466ec66cf 100644 --- a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsView.vue +++ b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsView.vue @@ -9,7 +9,7 @@ import { currencyHelper } from '@/shared/helpers/currencyHelper'; import { assetHelper } from '@/shared/helpers/assetHelper'; import { useCustomErrorHandler } from '@/shared/error-handler/use-custom-error-handler'; import { showToast } from '@/services/notification/notificationService'; -import LoadingSpinner from '@/components/common/LoadingSpinner.vue'; +import LoadingSpinner from '@/components/common/LoadingSpinnerOverlay.vue'; import type { GetCatalogBrandsResponse, GetCatalogCategoriesResponse, diff --git a/samples/web-csr/dressca-frontend/consumer/src/components/common/LoadingSpinner.vue b/samples/web-csr/dressca-frontend/consumer/src/components/common/LoadingSpinner.vue deleted file mode 100644 index d12a89b0a..000000000 --- a/samples/web-csr/dressca-frontend/consumer/src/components/common/LoadingSpinner.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/samples/web-csr/dressca-frontend/consumer/src/components/common/LoadingSpinnerOverlay.vue b/samples/web-csr/dressca-frontend/consumer/src/components/common/LoadingSpinnerOverlay.vue new file mode 100644 index 000000000..2d3d64cea --- /dev/null +++ b/samples/web-csr/dressca-frontend/consumer/src/components/common/LoadingSpinnerOverlay.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/samples/web-csr/dressca-frontend/consumer/src/views/basket/BasketView.vue b/samples/web-csr/dressca-frontend/consumer/src/views/basket/BasketView.vue index 21a1be7bb..2a9e9a001 100644 --- a/samples/web-csr/dressca-frontend/consumer/src/views/basket/BasketView.vue +++ b/samples/web-csr/dressca-frontend/consumer/src/views/basket/BasketView.vue @@ -10,7 +10,7 @@ import { useBasketStore } from '@/stores/basket/basket'; import { useRouter } from 'vue-router'; import { i18n } from '@/locales/i18n'; import BasketItem from '@/components/basket/BasketItem.vue'; -import Loading from '@/components/common/LoadingSpinner.vue'; +import Loading from '@/components/common/LoadingSpinnerOverlay.vue'; import { currencyHelper } from '@/shared/helpers/currencyHelper'; import { assetHelper } from '@/shared/helpers/assetHelper'; import { storeToRefs } from 'pinia'; diff --git a/samples/web-csr/dressca-frontend/consumer/src/views/catalog/CatalogView.vue b/samples/web-csr/dressca-frontend/consumer/src/views/catalog/CatalogView.vue index 73ed79445..88da8d308 100644 --- a/samples/web-csr/dressca-frontend/consumer/src/views/catalog/CatalogView.vue +++ b/samples/web-csr/dressca-frontend/consumer/src/views/catalog/CatalogView.vue @@ -10,7 +10,7 @@ import { storeToRefs } from 'pinia'; import { useSpecialContentStore } from '@/stores/special-content/special-content'; import { useCatalogStore } from '@/stores/catalog/catalog'; import CarouselSlider from '@/components/common/CarouselSlider.vue'; -import Loading from '@/components/common/LoadingSpinner.vue'; +import Loading from '@/components/common/LoadingSpinnerOverlay.vue'; import { useRouter } from 'vue-router'; import { currencyHelper } from '@/shared/helpers/currencyHelper'; import { assetHelper } from '@/shared/helpers/assetHelper'; From 3c627568022cffd331950b091d06eff9e6a11c58 Mon Sep 17 00:00:00 2001 From: yoshidakenji <181298858+kenjiyoshid-a@users.noreply.github.com> Date: Fri, 21 Feb 2025 17:02:45 +0900 Subject: [PATCH 12/12] =?UTF-8?q?consumer=E3=81=AE=E5=A4=89=E6=9B=B4?= =?UTF-8?q?=E3=82=92=E5=88=A5PR=E3=81=AB=E7=A7=BB=E5=8B=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/common/LoadingSpinner.vue | 19 ++++++ .../common/LoadingSpinnerOverlay.vue | 60 ------------------- .../consumer/src/views/basket/BasketView.vue | 2 +- .../src/views/catalog/CatalogView.vue | 2 +- 4 files changed, 21 insertions(+), 62 deletions(-) create mode 100644 samples/web-csr/dressca-frontend/consumer/src/components/common/LoadingSpinner.vue delete mode 100644 samples/web-csr/dressca-frontend/consumer/src/components/common/LoadingSpinnerOverlay.vue diff --git a/samples/web-csr/dressca-frontend/consumer/src/components/common/LoadingSpinner.vue b/samples/web-csr/dressca-frontend/consumer/src/components/common/LoadingSpinner.vue new file mode 100644 index 000000000..d12a89b0a --- /dev/null +++ b/samples/web-csr/dressca-frontend/consumer/src/components/common/LoadingSpinner.vue @@ -0,0 +1,19 @@ + + diff --git a/samples/web-csr/dressca-frontend/consumer/src/components/common/LoadingSpinnerOverlay.vue b/samples/web-csr/dressca-frontend/consumer/src/components/common/LoadingSpinnerOverlay.vue deleted file mode 100644 index 2d3d64cea..000000000 --- a/samples/web-csr/dressca-frontend/consumer/src/components/common/LoadingSpinnerOverlay.vue +++ /dev/null @@ -1,60 +0,0 @@ - - - - - diff --git a/samples/web-csr/dressca-frontend/consumer/src/views/basket/BasketView.vue b/samples/web-csr/dressca-frontend/consumer/src/views/basket/BasketView.vue index 2a9e9a001..21a1be7bb 100644 --- a/samples/web-csr/dressca-frontend/consumer/src/views/basket/BasketView.vue +++ b/samples/web-csr/dressca-frontend/consumer/src/views/basket/BasketView.vue @@ -10,7 +10,7 @@ import { useBasketStore } from '@/stores/basket/basket'; import { useRouter } from 'vue-router'; import { i18n } from '@/locales/i18n'; import BasketItem from '@/components/basket/BasketItem.vue'; -import Loading from '@/components/common/LoadingSpinnerOverlay.vue'; +import Loading from '@/components/common/LoadingSpinner.vue'; import { currencyHelper } from '@/shared/helpers/currencyHelper'; import { assetHelper } from '@/shared/helpers/assetHelper'; import { storeToRefs } from 'pinia'; diff --git a/samples/web-csr/dressca-frontend/consumer/src/views/catalog/CatalogView.vue b/samples/web-csr/dressca-frontend/consumer/src/views/catalog/CatalogView.vue index 88da8d308..73ed79445 100644 --- a/samples/web-csr/dressca-frontend/consumer/src/views/catalog/CatalogView.vue +++ b/samples/web-csr/dressca-frontend/consumer/src/views/catalog/CatalogView.vue @@ -10,7 +10,7 @@ import { storeToRefs } from 'pinia'; import { useSpecialContentStore } from '@/stores/special-content/special-content'; import { useCatalogStore } from '@/stores/catalog/catalog'; import CarouselSlider from '@/components/common/CarouselSlider.vue'; -import Loading from '@/components/common/LoadingSpinnerOverlay.vue'; +import Loading from '@/components/common/LoadingSpinner.vue'; import { useRouter } from 'vue-router'; import { currencyHelper } from '@/shared/helpers/currencyHelper'; import { assetHelper } from '@/shared/helpers/assetHelper';