Merged PR 112: 画面実装（ライセンス情報）

## 概要 [Task1683: 画面実装（ライセンス情報）](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/1683) - ライセンス情報画面を仮実装。ライセンス注文を起動するためのボタンを用意しました。 - 画面デザイン上に登場する文言については、多言語対応を実施しています。 - このPull Requestで対象外 - 細かな画面の実装部分は別PBIのため対象外 - ライセンス注文のボタン実装については、「タスク 1684: 画面実装（ライセンス注文ポップアップ）」で実装するため対象外 - AppRouter.tsxの定義について、本来、ログイン後の画面のため、RouteAuthGuardの設定を行う必要がありますが、タスク1786の事象により多言語でのログインが出来なく、多言語対応の確認ができないため一時的に外しています。タスク1789で対応予定です。（ソースコメントにも記載） ## レビューポイント - 特にありません ## UIの変更 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/Task1683?csf=1&web=1&e=agPOmO ## 動作確認状況 - ローカルで確認済 ## 補足 - 無し
2023-05-22 01:11:00 +00:00 · 2023-05-22 01:11:00 +00:00 · 713d587abf
commit 713d587abf
parent 58203f39c8
11 changed files with 204 additions and 15 deletions
--- a/dictation_client/src/AppRouter.tsx
+++ b/dictation_client/src/AppRouter.tsx
@ -13,6 +13,7 @@ import VerifyFailedPage from "pages/VerifyFailedPage";
 import VerifyAlreadyExistPage from "pages/VerifyAlreadyExistPage";
 import SignupCompletePage from "pages/SignupCompletePage";
 import UserListPage from "pages/UserListPage";
+import LicensePage from "pages/LicensePage";

 const AppRouter: React.FC = () => (
  <Routes>
@ -36,6 +37,11 @@ const AppRouter: React.FC = () => (
      path="/user"
      element={<RouteAuthGuard component={<UserListPage />} />}
    />
+
+    {/* XXX 本来{<RouteAuthGuard component={<LicensePage />}とすべきだが、タスク1786により
+        多言語でのログインが出来なく、多言語対応の確認ができないため一時的に外す
+        タスク1789で対応予定 */}
+    <Route path="/license" element={<LicensePage />} />
    <Route
      path="/xxx"
      element={<RouteAuthGuard component={<SamplePage />} />}
@ -49,10 +55,6 @@ const AppRouter: React.FC = () => (
      path="/dictations"
      element={<RouteAuthGuard component={<SamplePage />} />}
    />
-    <Route
-      path="/license"
-      element={<RouteAuthGuard component={<SamplePage />} />}
-    />
    <Route
      path="/workflow"
      element={<RouteAuthGuard component={<SamplePage />} />}
--- a/dictation_client/src/assets/images/history.svg
+++ b/dictation_client/src/assets/images/history.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#282828;}
+</style>
+<path class="st0" d="M23.9,42c-5,0-9.2-1.8-12.7-5.3C7.7,33.2,6,28.9,6,23.9h3c0,4.2,1.4,7.7,4.3,10.7S19.7,39,23.9,39
+	c4.2,0,7.8-1.5,10.8-4.5c2.9-3,4.4-6.6,4.4-10.8c0-4.1-1.5-7.6-4.5-10.5S28,9,23.9,9c-2.3,0-4.4,0.5-6.4,1.5s-3.7,2.4-5.2,4.1h5.3v3
+	H7.1V7.2h3v5.3c1.7-2,3.8-3.6,6.2-4.8S21.2,6,23.9,6c2.5,0,4.9,0.5,7,1.4c2.2,0.9,4.1,2.2,5.8,3.8c1.7,1.6,3,3.5,3.9,5.7
+	s1.4,4.5,1.4,7s-0.5,4.8-1.4,7s-2.2,4.1-3.9,5.8c-1.6,1.6-3.6,2.9-5.8,3.9C28.7,41.5,26.4,42,23.9,42z M30.2,32.1l-7.7-7.6V13.8h3
+	v9.5l6.9,6.7L30.2,32.1z"/>
+</svg>
--- a/dictation_client/src/assets/images/key.svg
+++ b/dictation_client/src/assets/images/key.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="_レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 48 49.1" style="enable-background:new 0 0 48 49.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#282828;}
+</style>
+<path class="st0" d="M20.3,34c-0.7,0.8-1.6,1.2-2.6,1.2c-1,0-1.9-0.3-2.7-1c-0.8-0.7-1.2-1.6-1.2-2.6c0-1,0.3-1.9,1-2.7
+	c0.7-0.8,1.6-1.2,2.6-1.2s1.9,0.3,2.7,1c0.8,0.7,1.2,1.6,1.2,2.6S21,33.3,20.3,34z M27.3,40.6c-2.5,2.7-5.6,4.1-9.3,4.2
+	c-3.7,0.1-6.9-1.1-9.6-3.6s-4.1-5.7-4.2-9.3c-0.1-3.7,1.1-6.9,3.6-9.6c1.8-1.9,3.9-3.2,6.2-3.8c2.3-0.6,4.8-0.4,7.4,0.5L35,4.5
+	l8.9-0.3l-0.2,12.6L37.7,18L37,24l-5.3,0.8l-1.9,2.1c1,2.2,1.3,4.5,1,6.9S29.3,38.4,27.3,40.6L27.3,40.6z M24.8,38.3
+	c1.5-1.6,2.3-3.5,2.5-5.8s-0.3-4.4-1.6-6.3l4.3-4.6l3.9-0.5l0.8-6l5.6-1l0-6.5l-4,0.1L22.3,22.9c-1.8-1.1-3.9-1.5-6.2-1.2
+	s-4.3,1.2-5.8,2.9c-1.9,2-2.8,4.4-2.7,7.2c0.1,2.7,1.1,5.1,3.2,7c2,1.9,4.4,2.8,7.2,2.7C20.6,41.4,22.9,40.3,24.8,38.3L24.8,38.3z"
+	/>
+</svg>
--- a/dictation_client/src/assets/images/post_add.svg
+++ b/dictation_client/src/assets/images/post_add.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#282828;}
+</style>
+<path class="st0" d="M9,42c-0.8,0-1.5-0.3-2.1-0.9C6.3,40.5,6,39.8,6,39V9c0-0.8,0.3-1.5,0.9-2.1S8.2,6,9,6h19.7v3H9v30h30V19.3h3
+	V39c0,0.8-0.3,1.5-0.9,2.1C40.5,41.7,39.8,42,39,42H9z M16.1,34.1v-3H32v3H16.1z M16.1,27.8v-3H32v3H16.1z M16.1,21.4v-3H32v3H16.1z
+	 M34.6,17.8v-4.4h-4.4v-3h4.4V6h3v4.4H42v3h-4.4v4.4H34.6z"/>
+</svg>
--- a/dictation_client/src/pages/LicensePage/index.tsx
+++ b/dictation_client/src/pages/LicensePage/index.tsx
@ -0,0 +1,89 @@
+import { useMsal } from "@azure/msal-react";
+import { AppDispatch } from "app/store";
+import { UpdateTokenTimer } from "components/auth/updateTokenTimer";
+import Footer from "components/footer";
+import Header from "components/header";
+import { clearToken } from "features/auth";
+import React from "react";
+import { useDispatch } from "react-redux";
+import styles from "styles/app.module.scss";
+import { getTranslationID } from "translation";
+import { useTranslation } from "react-i18next";
+import postAdd from "../../assets/images/post_add.svg";
+import history from "../../assets/images/history.svg";
+import key from "../../assets/images/key.svg";
+
+// eslintの検査エラー無視設定
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+const LicensePage: React.FC = (): JSX.Element => {
+  const { instance } = useMsal();
+  const dispatch: AppDispatch = useDispatch();
+  const [t] = useTranslation();
+
+  return (
+    /* TODO 現状（PBI1221）はライセンス注文PUを起動するためのボタンのみ。別途ライセンス注文を実装するPBIで全般的に見直し。 */
+    <div className={styles.wrap}>
+      <Header userName="XXXXXX" />
+
+      <UpdateTokenTimer />
+      <main className={styles.main}>
+        <div className="">
+          <div className={styles.pageHeader}>
+            <h1 className={styles.pageTitle}>
+              {t(getTranslationID("LicensePage.label.title"))}
+            </h1>
+          </div>
+          <section className={styles.license}>
+            <div>
+              <h2 className="">
+                {t(getTranslationID("LicensePage.label.subTitle"))}
+              </h2>
+              <ul className={styles.menuAction}>
+                <li>
+                  {/* TODO ライセンス注文ポップアップのタスクにて起動の実装を行う（その際buttonに変更する想定） */}
+                  <a
+                    href=""
+                    className={`${styles.menuLink} ${styles.isActive}`}
+                  >
+                    <img src={postAdd} alt="" className={styles.menuIcon} />
+                    {t(getTranslationID("LicensePage.label.orderLicense"))}
+                  </a>
+                </li>
+                <li>
+                  <a href="" className={`${styles.menuLink}`}>
+                    <img src={history} alt="" className={styles.menuIcon} />
+                    {t(getTranslationID("LicensePage.label.orderHistory"))}
+                  </a>
+                </li>
+                <li>
+                  <a href="" className={`${styles.menuLink}`}>
+                    <img src={key} alt="" className={styles.menuIcon} />
+                    {t(getTranslationID("LicensePage.label.importLicenseKey"))}
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </section>
+        </div>
+      </main>
+
+      {/* TODO 画面デザインにはないが、試験時に便利なので配置しておく。ライセンス注文を実装するPBIで正式なサインアウトのレイアウトに直す */}
+      <div>
+        <button
+          type="button"
+          className={styles.buttonText}
+          onClick={() => {
+            instance.logout({ postLogoutRedirectUri: "/" });
+            dispatch(clearToken());
+          }}
+        >
+          sign out
+        </button>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default LicensePage;
--- a/dictation_client/src/styles/app.module.scss
+++ b/dictation_client/src/styles/app.module.scss
@ -796,27 +796,49 @@ _:-ms-lang(x)::-ms-backdrop,
  width: auto;
 }

-.user > div {
+.user > div,
+.license > div {
  padding: 0 2rem;
 }
-.user .table tr:not(.tableHeader) {
+.user .table tr:not(.tableHeader),
+.license .table tr:not(.tableHeader) {
  cursor: pointer;
+  position: relative;
 }
-.user .table tr:not(.tableHeader):hover {
-  color: #0084b2;
+.user .table tr:not(.tableHeader):hover .tdEx,
+.license .table tr:not(.tableHeader):hover .tdEx {
+  opacity: 1;
 }
-.user .table tr:not(.tableHeader).isSelected {
+.user .table tr:not(.tableHeader).isSelected,
+.license .table tr:not(.tableHeader).isSelected {
  background: #0084b2;
  color: #ffffff;
 }
-.user .table tr:not(.tableHeader).isSelected:hover {
+.user .table tr:not(.tableHeader).isSelected:hover,
+.license .table tr:not(.tableHeader).isSelected:hover {
  color: #ffffff;
 }
-.user .table td {
+.user .table td:not(.tdEx),
+.license .table td:not(.tdEx) {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
+  padding-bottom: 2rem;
+}
+.user .table td.tdEx,
+.license .table td.tdEx {
+  display: block;
+  width: 100%;
+  padding: 0 0.5rem;
+  position: absolute;
+  left: 0;
+  bottom: 0.5rem;
+  -moz-transition: all 0.3s ease-out;
+  -ms-transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+  opacity: 0;
 }

 .menuAction {
--- a/dictation_client/src/styles/app.module.scss.d.ts
+++ b/dictation_client/src/styles/app.module.scss.d.ts
@ -64,6 +64,7 @@ declare const classNames: {
  readonly pgHomeLinks: "pgHomeLinks";
  readonly buttonIcon: "buttonIcon";
  readonly user: "user";
+  readonly license: "license";
  readonly isSelected: "isSelected";
  readonly menuAction: "menuAction";
  readonly menuLink: "menuLink";
--- a/dictation_client/src/translation/de.json
+++ b/dictation_client/src/translation/de.json
@ -127,5 +127,14 @@
      "transcriptionist": "(de)Transcriptionist",
      "none": "(de)None"
    }
+  },
+  "LicensePage": {
+    "label": {
+      "title": "(de)License",
+      "subTitle": "(de)EFGI Legal",
+      "orderLicense": "(de)Order License",
+      "orderHistory": "(de)Order History",
+      "importLicenseKey": "(de)Import License Key"
+    }
  }
 }
--- a/dictation_client/src/translation/en.json
+++ b/dictation_client/src/translation/en.json
@ -127,5 +127,14 @@
      "transcriptionist": "Transcriptionist",
      "none": "None"
    }
+  },
+  "LicensePage": {
+    "label": {
+      "title": "License",
+      "subTitle": "EFGI Legal",
+      "orderLicense": "Order License",
+      "orderHistory": "Order History",
+      "importLicenseKey": "Import License Key"
+    }
  }
 }
--- a/dictation_client/src/translation/es.json
+++ b/dictation_client/src/translation/es.json
@ -127,5 +127,14 @@
      "transcriptionist": "(es)Transcriptionist",
      "none": "(es)None"
    }
+  },
+  "LicensePage": {
+    "label": {
+      "title": "(es)License",
+      "subTitle": "(es)EFGI Legal",
+      "orderLicense": "(es)Order License",
+      "orderHistory": "(es)Order History",
+      "importLicenseKey": "(es)Import License Key"
+    }
  }
 }
--- a/dictation_client/src/translation/fr.json
+++ b/dictation_client/src/translation/fr.json
@ -127,5 +127,14 @@
      "transcriptionist": "(fr)Transcriptionist",
      "none": "(fr)None"
    }
+  },
+  "LicensePage": {
+    "label": {
+      "title": "(fr)License",
+      "subTitle": "(fr)EFGI Legal",
+      "orderLicense": "(fr)Order License",
+      "orderHistory": "(fr)Order History",
+      "importLicenseKey": "(fr)Import License Key"
+    }
  }
 }