From 4dd244610958d27cabaff382eef289a8a2570499 Mon Sep 17 00:00:00 2001
From: masaaki <masaaki@nds-tyo.co.jp>
Date: Wed, 5 Jul 2023 05:44:15 +0000
Subject: [PATCH] =?UTF-8?q?Merged=20PR=20211:=20Create=E6=8A=BC=E4=B8=8B?=
 =?UTF-8?q?=E5=BE=8C=E3=81=AB=E5=87=A6=E7=90=86=E3=81=8C=E6=88=90=E5=8A=9F?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=E3=81=BE=E3=81=A7loading=E3=82=92=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=E3=81=95=E3=81=9B=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 概要
[Task2129: Create押下後に処理が成功するまでloadingを表示させる](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2129)

- ボタン押下時に処理中であることを示すイメージを実装しました

## レビューポイント
- licenseCardIssueSlice.tsでの、fulfilled時のloading解除タイミングについて。
　fulfilled時、csvのblobイメージ作成→ダウンロード実施、という処理を実施しています。
　同時実行を避ける意味で、ダウンロード実施の後（fulfilled処理の最後）でloading解除としていますが、タイミングとして問題ないか。
　（とはいえ、blob作成中に解除する理由は浮かばないので、これで問題ないと考えています。何かあれば、くらいの感覚です）

## UIの変更
- 無し

## 動作確認状況
- ローカルで確認

## 補足
- 相談、参考資料などがあれば
---
 .../licenseCardIssue/licenseCardIssueSlice.ts      |  8 ++++++++
 .../features/license/licenseCardIssue/selectors.ts |  3 +++
 .../src/features/license/licenseCardIssue/state.ts |  1 +
 .../pages/LicensePage/cardLicenseIssuePopup.tsx    | 14 +++++++++++++-
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/dictation_client/src/features/license/licenseCardIssue/licenseCardIssueSlice.ts b/dictation_client/src/features/license/licenseCardIssue/licenseCardIssueSlice.ts
index 6fcd8bb..500365e 100644
--- a/dictation_client/src/features/license/licenseCardIssue/licenseCardIssueSlice.ts
+++ b/dictation_client/src/features/license/licenseCardIssue/licenseCardIssueSlice.ts
@@ -5,6 +5,7 @@ import { createCardLicenseAsync } from "./operations";
 const initialState: LicenseCardIssuesState = {
   apps: {
     numberOfCreateLicenses: 0,
+    isLoading: false,
   },
 };
 export const licenseCardSlice = createSlice({
@@ -23,6 +24,9 @@ export const licenseCardSlice = createSlice({
     },
   },
   extraReducers: (builder) => {
+    builder.addCase(createCardLicenseAsync.pending, (state) => {
+      state.apps.isLoading = true;
+    });
     builder.addCase(createCardLicenseAsync.fulfilled, (state, action) => {
       // csvファイルダウンロード処理
       // ファイル名は「{発行日時}_licenseCard.csv」とする
@@ -43,6 +47,10 @@ export const licenseCardSlice = createSlice({
       document.body.appendChild(a);
       a.click();
       a.parentNode?.removeChild(a);
+      state.apps.isLoading = false;
+    });
+    builder.addCase(createCardLicenseAsync.rejected, (state) => {
+      state.apps.isLoading = false;
     });
   },
 });
diff --git a/dictation_client/src/features/license/licenseCardIssue/selectors.ts b/dictation_client/src/features/license/licenseCardIssue/selectors.ts
index 6de3e95..33ebffc 100644
--- a/dictation_client/src/features/license/licenseCardIssue/selectors.ts
+++ b/dictation_client/src/features/license/licenseCardIssue/selectors.ts
@@ -22,3 +22,6 @@ export const checkErrorIncorrectNumberOfCreateLicenses = (
 
 export const selectNumberOfCreateLicenses = (state: RootState) =>
   state.licenseCardIssue.apps.numberOfCreateLicenses;
+
+export const selectIsLoading = (state: RootState) =>
+  state.licenseCardIssue.apps.isLoading;
diff --git a/dictation_client/src/features/license/licenseCardIssue/state.ts b/dictation_client/src/features/license/licenseCardIssue/state.ts
index d54098c..84de47c 100644
--- a/dictation_client/src/features/license/licenseCardIssue/state.ts
+++ b/dictation_client/src/features/license/licenseCardIssue/state.ts
@@ -4,4 +4,5 @@ export interface LicenseCardIssuesState {
 
 export interface Apps {
   numberOfCreateLicenses: number;
+  isLoading: boolean;
 }
diff --git a/dictation_client/src/pages/LicensePage/cardLicenseIssuePopup.tsx b/dictation_client/src/pages/LicensePage/cardLicenseIssuePopup.tsx
index e700d01..0535ec2 100644
--- a/dictation_client/src/pages/LicensePage/cardLicenseIssuePopup.tsx
+++ b/dictation_client/src/pages/LicensePage/cardLicenseIssuePopup.tsx
@@ -12,7 +12,9 @@ import {
   selectInputValidationErrors,
   createCardLicenseAsync,
   cleanupApps,
+  selectIsLoading,
 } from "../../features/license/licenseCardIssue/index";
+import progress_activit from "../../assets/images/progress_activit.svg";
 
 interface CardLicenseIssuePopupProps {
   onClose: () => void;
@@ -27,6 +29,8 @@ export const CardLicenseIssuePopup: React.FC<CardLicenseIssuePopupProps> = (
   const initCount = useSelector(selectNumberOfCreateLicenses);
   const [count, setCount] = useState<number>(initCount);
 
+  const isLoading = useSelector(selectIsLoading);
+
   useEffect(
     () => () => {
       // useEffectのreturnとしてcleanupAppsを実行することで、ポップアップのアンマウント時に初期化を行う
@@ -140,9 +144,17 @@ export const CardLicenseIssuePopup: React.FC<CardLicenseIssuePopupProps> = (
                     "cardLicenseIssuePopupPage.label.createButton"
                   )
                 )}
-                className={`${styles.formSubmit} ${styles.marginBtm1} ${styles.isActive}`}
+                className={`${styles.formSubmit} ${styles.marginBtm1} ${
+                  !isLoading ? styles.isActive : ""
+                }`}
                 onClick={onCreateLicense}
               />
+              <img
+                style={{ display: isLoading ? "inline" : "none" }}
+                src={progress_activit}
+                className={styles.icLoading}
+                alt="Loading"
+              />
             </dd>
           </dl>
         </form>