From 766c995ceb2c1a3f6487a175cd31e8031762ea05 Mon Sep 17 00:00:00 2001
From: "maruyama.t" <maruyama.t@nds-tyo.co.jp>
Date: Fri, 7 Jul 2023 02:01:59 +0000
Subject: [PATCH] =?UTF-8?q?Merged=20PR=20217:=20[PBI1211=E3=83=87=E3=83=A2?=
 =?UTF-8?q?=E6=8C=87=E6=91=98]=E3=82=AB=E3=83=BC=E3=83=89=E3=83=A9?=
 =?UTF-8?q?=E3=82=A4=E3=82=BB=E3=83=B3=E3=82=B9=E7=99=BA=E8=A1=8CPU?=
 =?UTF-8?q?=EF=BC=8C=E7=94=9F=E6=88=90=E4=B8=AD=E3=81=AF=C3=97=E3=82=92?=
 =?UTF-8?q?=E6=8A=BC=E4=B8=8B=E3=81=A7=E3=81=8D=E3=81=AA=E3=81=84=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB=E3=81=99=E3=82=8B=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 概要
[Task2151: [PBI1211デモ指摘]カードライセンス発行PU，生成中は×を押下できないようにする。](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2151)

- 元PBI or タスクへのリンク（内容・目的などはそちらにあるはず）
- 何をどう変更したか、追加したライブラリなど
カードライセンス発行中（サーバの処理中）はポップアップを閉じれないよう修正しました。
また、ページから離れようとした場合にはダイアログ確認を行うよう修正しました。

- このPull Requestでの対象
第一階層の管理者が使える、カードライセンス発行機能

- 影響範囲（他の機能にも影響があるか）
なし

## レビューポイント
- 表示するメッセージ

## UIの変更
- Before/Afterのスクショなど
https://ndstokyo.sharepoint.com/:f:/r/sites/Piranha/Shared%20Documents/General/OMDS/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/Task2151?csf=1&web=1&e=Astuk1
## 動作確認状況
- ローカルで確認
（Chrome,Edgeで確認）

## 補足
- 相談、参考資料などがあれば
---
 .../LicensePage/cardLicenseIssuePopup.tsx     | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/dictation_client/src/pages/LicensePage/cardLicenseIssuePopup.tsx b/dictation_client/src/pages/LicensePage/cardLicenseIssuePopup.tsx
index 0535ec2..73ca9cd 100644
--- a/dictation_client/src/pages/LicensePage/cardLicenseIssuePopup.tsx
+++ b/dictation_client/src/pages/LicensePage/cardLicenseIssuePopup.tsx
@@ -28,9 +28,27 @@ export const CardLicenseIssuePopup: React.FC<CardLicenseIssuePopupProps> = (
   const dispatch: AppDispatch = useDispatch();
   const initCount = useSelector(selectNumberOfCreateLicenses);
   const [count, setCount] = useState<number>(initCount);
-
   const isLoading = useSelector(selectIsLoading);
 
+  // ブラウザのウィンドウが閉じられようとしている場合に発火するイベントハンドラ
+  const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+    // isLoadingがtrueの場合は確認ダイアログを表示する
+    if (isLoading) {
+      e.preventDefault();
+      // ChromeではreturnValueが必要
+      e.returnValue = "";
+    }
+  };
+
+  // コンポーネントがマウントされた時にイベントハンドラを登録する
+  useEffect(() => {
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    // コンポーネントがアンマウントされるときにイベントハンドラを解除する
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  });
+
   useEffect(
     () => () => {
       // useEffectのreturnとしてcleanupAppsを実行することで、ポップアップのアンマウント時に初期化を行う
@@ -41,9 +59,11 @@ export const CardLicenseIssuePopup: React.FC<CardLicenseIssuePopupProps> = (
 
   // ポップアップを閉じる処理
   const closePopup = useCallback(() => {
-    // setIsPushIssueButton(false);
+    if (isLoading) {
+      return;
+    }
     onClose();
-  }, [onClose]);
+  }, [isLoading, onClose]);
 
   // 画面からのパラメータ
   const createCount = useSelector(selectNumberOfCreateLicenses);