Merged PR 524: 画面実装（代行操作中表示コンポーネント＋代行操作中に表示する画面のデザイン）

## 概要 [Task2908: 画面実装（代行操作中表示コンポーネント＋代行操作中に表示する画面のデザイン）](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2908) - 代行操作中に表示する画面に対して、代行操作中のデザインを反映 - 代行操作中に画面上部に表示するバーのコンポーネントを作成 - 代行操作用のトークンをauthStateに追加 ## レビューポイント - 代行操作バーのコンポーネントに表示する会社名をpropsとしたが良いか - このコンポーネントを表示する画面で会社名を取得して、会社名とトークンがあれば表示するという風にしたいから - 代行操作用トークンはauthStateでよいと思っているが認識会うか ## 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/Task2908?csf=1&web=1&e=Cr5NCL ## 動作確認状況 - ローカルで確認 ## 補足 - 相談、参考資料などがあれば
2023-10-26 06:35:59 +00:00 · 2023-10-26 06:35:59 +00:00 · 375e3a5a3b
commit 375e3a5a3b
parent 8474c6a4f5
15 changed files with 162 additions and 10 deletions
--- a/dictation_client/src/components/delegate/index.tsx
+++ b/dictation_client/src/components/delegate/index.tsx
@ -0,0 +1,36 @@
+// 代行操作中に表示するコンポーネント
+// ------------------------------------------------------
+import React from "react";
+import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+import styles from "../../styles/app.module.scss";
+import exit from "../../assets/images/exit.svg";
+import reportWhite from "../../assets/images/report_white.svg";
+import { getTranslationID } from "translation";
+
+interface DelegationBarProps {
+  delegatedCompanyName: string;
+}
+
+export const DelegationBar: React.FC<DelegationBarProps> = (
+  porps
+): JSX.Element => {
+  const { delegatedCompanyName } = porps;
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.manageInfo}>
+      <img src={reportWhite} className={styles.manageIcon} alt="report" />
+      <p className={styles.txNormal}>
+        {t(getTranslationID("common.label.operationInsteadOf"))}
+        <span>{delegatedCompanyName}</span>
+      </p>
+      <img
+        src={exit}
+        className={styles.manageIconClose}
+        alt="Exit"
+        title="Exit"
+      />
+    </div>
+  );
+};
--- a/dictation_client/src/features/auth/authSlice.ts
+++ b/dictation_client/src/features/auth/authSlice.ts
@ -14,6 +14,8 @@ const initialState: AuthState = {
  configuration: initialConfig(),
  accessToken: loadAccessToken(),
  refreshToken: loadRefreshToken(),
+  delegatedAccessToken: null,
+  delegatedRefreshToken: null,
 };

 export const authSlice = createSlice({
@ -22,7 +24,12 @@ export const authSlice = createSlice({
  reducers: {
    setToken: (
      state,
-      action: PayloadAction<Omit<AuthState, "configuration">>
+      action: PayloadAction<
+        Omit<
+          AuthState,
+          "configuration" | "delegatedAccessToken" | "delegatedRefreshToken"
+        >
+      >
    ) => {
      const { accessToken, refreshToken } = action.payload;
      if (accessToken && refreshToken) {
--- a/dictation_client/src/features/auth/selectors.ts
+++ b/dictation_client/src/features/auth/selectors.ts
@ -22,3 +22,7 @@ export const isTokenExpired = (state: RootState): boolean => {
  }
  return true;
 };
+
+// 代行操作用のトークンを取得する
+export const selectDelegatedAccessToken = (state: RootState): string | null =>
+  state.auth.delegatedAccessToken;
--- a/dictation_client/src/features/auth/state.ts
+++ b/dictation_client/src/features/auth/state.ts
@ -4,4 +4,6 @@ export interface AuthState {
  configuration: ConfigurationParameters;
  accessToken: string | null;
  refreshToken: string | null;
+  delegatedAccessToken: string | null;
+  delegatedRefreshToken: string | null;
 }
--- a/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx
+++ b/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx
@ -30,6 +30,8 @@ import { selectSelectedRow } from "features/license/partnerLicense";
 import undo from "../../assets/images/undo.svg";
 import history from "../../assets/images/history.svg";
 import progress_activit from "../../assets/images/progress_activit.svg";
+import { selectDelegatedAccessToken } from "features/auth/selectors";
+import { DelegationBar } from "components/delegate";

 interface LicenseOrderHistoryProps {
  onReturn: () => void;
@ -46,6 +48,8 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
  const currentPage = useSelector(selectCurrentPage);
  const isLoading = useSelector(selectIsLoading);
  const selectedRow = useSelector(selectSelectedRow);
+  // 代行操作用のトークンを取得する
+  const delegatedAccessToken = useSelector(selectDelegatedAccessToken);

  // Return押下時の処理
  const returnGui = useCallback(() => {
@ -154,7 +158,14 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
  }, [dispatch, currentPage]);

  return (
-    <div className={styles.wrap}>
+    <div
+      className={`${styles.wrap} ${delegatedAccessToken ? styles.manage : ""}`}
+    >
+      {
+        // 代行操作中の場合は、代行操作バーを表示する
+        // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで）
+        delegatedAccessToken && <DelegationBar delegatedCompanyName="XXXXXX" />
+      }
      <Header userName="XXXXXX" />

      <UpdateTokenTimer />
--- a/dictation_client/src/pages/LicensePage/licenseSummary.tsx
+++ b/dictation_client/src/pages/LicensePage/licenseSummary.tsx
@ -22,6 +22,8 @@ import { LicenseOrderPopup } from "./licenseOrderPopup";
 import { CardLicenseActivatePopup } from "./cardLicenseActivatePopup";
 // eslint-disable-next-line import/no-named-as-default
 import LicenseOrderHistory from "./licenseOrderHistory";
+import { selectDelegatedAccessToken } from "features/auth/selectors";
+import { DelegationBar } from "components/delegate";

 interface LicenseSummaryProps {
  onReturn?: () => void;
@ -33,6 +35,8 @@ export const LicenseSummary: React.FC<LicenseSummaryProps> = (
  const dispatch: AppDispatch = useDispatch();
  const [t] = useTranslation();
  const selectedRow = useSelector(selectSelectedRow);
+  // 代行操作用のトークンを取得する
+  const delegatedAccessToken = useSelector(selectDelegatedAccessToken);

  // popup制御関係
  const [islicenseOrderPopupOpen, setIslicenseOrderPopupOpen] = useState(false);
@ -96,7 +100,18 @@ export const LicenseSummary: React.FC<LicenseSummaryProps> = (
        />
      )}
      {!islicenseOrderHistoryOpen && (
-        <div className={styles.wrap}>
+        <div
+          className={`${styles.wrap} ${
+            delegatedAccessToken ? styles.manage : ""
+          }`}
+        >
+          {
+            // 代行操作中の場合は、代行操作バーを表示する
+            // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで）
+            delegatedAccessToken && (
+              <DelegationBar delegatedCompanyName="XXXXXX" />
+            )
+          }
          <Header userName="XXXXXX" />

          <UpdateTokenTimer />
--- a/dictation_client/src/pages/TemplateFilePage/index.tsx
+++ b/dictation_client/src/pages/TemplateFilePage/index.tsx
@ -15,10 +15,14 @@ import {
  selectIsLoading,
 } from "features/workflow/template";
 import { AddTemplateFilePopup } from "./addTemplateFilePopup";
+import { DelegationBar } from "components/delegate";
+import { selectDelegatedAccessToken } from "features/auth/selectors";

 export const TemplateFilePage: React.FC = () => {
  const dispatch: AppDispatch = useDispatch();
  const [t] = useTranslation();
+  // authStateに配置予定の代行操作用のトークンを取得する
+  const delegatedAccessToken = useSelector(selectDelegatedAccessToken);
  const templates = useSelector(selectTemplates);
  const isLoading = useSelector(selectIsLoading);

@ -38,7 +42,18 @@ export const TemplateFilePage: React.FC = () => {
          }}
        />
      )}
-      <div className={styles.wrap}>
+      <div
+        className={`${styles.wrap} ${
+          delegatedAccessToken ? styles.manage : ""
+        }`}
+      >
+        {
+          // 代行操作中の場合は、代行操作バーを表示する
+          // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで）
+          delegatedAccessToken && (
+            <DelegationBar delegatedCompanyName="XXXXXX" />
+          )
+        }
        <Header userName="XXXXXXXX" />
        <UpdateTokenTimer />
        <main className={styles.main}>
--- a/dictation_client/src/pages/TypistGroupSettingPage/index.tsx
+++ b/dictation_client/src/pages/TypistGroupSettingPage/index.tsx
@ -17,11 +17,14 @@ import { useTranslation } from "react-i18next";
 import { getTranslationID } from "translation";
 import { AddTypistGroupPopup } from "./addTypistGroupPopup";
 import { EditTypistGroupPopup } from "./editTypistGroupPopup";
+import { selectDelegatedAccessToken } from "features/auth/selectors";
+import { DelegationBar } from "components/delegate";

 const TypistGroupSettingPage: React.FC = (): JSX.Element => {
  const dispatch: AppDispatch = useDispatch();
  const [t] = useTranslation();
-
+  // 代行操作用のトークンを取得する
+  const delegatedAccessToken = useSelector(selectDelegatedAccessToken);
  const isLoading = useSelector(selectIsLoading);
  const typistGroup = useSelector(selectTypistGroups);

@ -60,7 +63,18 @@ const TypistGroupSettingPage: React.FC = (): JSX.Element => {
        isOpen={isEditPopupOpen}
        typistGroupId={editTypistGroupId}
      />
-      <div className={styles.wrap}>
+      <div
+        className={`${styles.wrap} ${
+          delegatedAccessToken ? styles.manage : ""
+        }`}
+      >
+        {
+          // 代行操作中の場合は、代行操作バーを表示する
+          // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで）
+          delegatedAccessToken && (
+            <DelegationBar delegatedCompanyName="XXXXXX" />
+          )
+        }
        <Header userName="XXXXXX" />
        <UpdateTokenTimer />
        <main className={styles.main}>
--- a/dictation_client/src/pages/UserListPage/index.tsx
+++ b/dictation_client/src/pages/UserListPage/index.tsx
@ -28,10 +28,14 @@ import progress_activit from "../../assets/images/progress_activit.svg";
 import { UserAddPopup } from "./popup";
 import { UserUpdatePopup } from "./updatePopup";
 import { AllocateLicensePopup } from "./allocateLicensePopup";
+import { DelegationBar } from "components/delegate";
+import { selectDelegatedAccessToken } from "features/auth/selectors";

 const UserListPage: React.FC = (): JSX.Element => {
  const dispatch: AppDispatch = useDispatch();
  const [t] = useTranslation();
+  // 代行操作用のトークンを取得する
+  const delegatedAccessToken = useSelector(selectDelegatedAccessToken);

  const [isPopupOpen, setIsPopupOpen] = useState(false);
  const [isUpdatePopupOpen, setIsUpdatePopupOpen] = useState(false);
@ -106,7 +110,18 @@ const UserListPage: React.FC = (): JSX.Element => {
          setIsAllocateLicensePopupOpen(false);
        }}
      />
-      <div className={styles.wrap}>
+      <div
+        className={`${styles.wrap} ${
+          delegatedAccessToken ? styles.manage : ""
+        }`}
+      >
+        {
+          // 代行操作中の場合は、代行操作バーを表示する
+          // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで）
+          delegatedAccessToken && (
+            <DelegationBar delegatedCompanyName="XXXXXX" />
+          )
+        }
        <Header userName="XXXXXX" />
        <UpdateTokenTimer />
        <main className={styles.main}>
--- a/dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx
+++ b/dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx
@ -24,10 +24,14 @@ import { AppDispatch } from "app/store";
 import { AddWorktypeIdPopup } from "./addWorktypeIdPopup";
 import { EditWorktypeIdPopup } from "./editWorktypeIdPopup";
 import { EditOptionItemsPopup } from "./editOptionItemsPopup";
+import { selectDelegatedAccessToken } from "features/auth/selectors";
+import { DelegationBar } from "components/delegate";

 const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
  const dispatch: AppDispatch = useDispatch();
  const [t] = useTranslation();
+  // 代行操作用のトークンを取得する
+  const delegatedAccessToken = useSelector(selectDelegatedAccessToken);
  const isLoading = useSelector(selectIsLoading);
  const worktypes = useSelector(selectWorktypes);
  const activeWorktypeId = useSelector(selectActiveWorktypeId);
@ -124,7 +128,18 @@ const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
        }}
        isOpen={isShowEditOptionItemPopup}
      />
-      <div className={styles.wrap}>
+      <div
+        className={`${styles.wrap} ${
+          delegatedAccessToken ? styles.manage : ""
+        }`}
+      >
+        {
+          // 代行操作中の場合は、代行操作バーを表示する
+          // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで）
+          delegatedAccessToken && (
+            <DelegationBar delegatedCompanyName="XXXXXX" />
+          )
+        }
        <Header userName="XXXXXXX" />
        <UpdateTokenTimer />
        <main className={styles.main}>
--- a/dictation_client/src/pages/WorkflowPage/index.tsx
+++ b/dictation_client/src/pages/WorkflowPage/index.tsx
@ -21,6 +21,8 @@ import progress_activit from "assets/images/progress_activit.svg";
 import { getTranslationID } from "translation";
 import { AddWorkflowPopup } from "./addworkflowPopup";
 import { EditWorkflowPopup } from "./editworkflowPopup";
+import { DelegationBar } from "components/delegate";
+import { selectDelegatedAccessToken } from "features/auth/selectors";

 const WorkflowPage: React.FC = (): JSX.Element => {
  const dispatch: AppDispatch = useDispatch();
@ -29,7 +31,8 @@ const WorkflowPage: React.FC = (): JSX.Element => {
  const [isShowAddPopup, setIsShowAddPopup] = useState<boolean>(false);
  // 編集Popupの表示制御
  const [isShowEditPopup, setIsShowEditPopup] = useState<boolean>(false);
-
+  // 代行操作用のトークンを取得する
+  const delegatedAccessToken = useSelector(selectDelegatedAccessToken);
  const workflows = useSelector(selectWorkflows);
  const isLoading = useSelector(selectIsLoading);

@ -70,7 +73,18 @@ const WorkflowPage: React.FC = (): JSX.Element => {
          }}
        />
      )}
-      <div className={styles.wrap}>
+      <div
+        className={`${styles.wrap} ${
+          delegatedAccessToken ? styles.manage : ""
+        }`}
+      >
+        {
+          // 代行操作中の場合は、代行操作バーを表示する
+          // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで）
+          delegatedAccessToken && (
+            <DelegationBar delegatedCompanyName="XXXXXX" />
+          )
+        }
        <Header userName="XXXXXX" />
        <UpdateTokenTimer />
        <main className={styles.main}>
--- a/dictation_client/src/translation/de.json
+++ b/dictation_client/src/translation/de.json
@ -16,6 +16,7 @@
      "save": "Speichern",
      "delete": "Löschen",
      "return": "zurückkehren",
+      "operationInsteadOf": "(de)Operation instead of:",
      "tier1": "(de)Admin",
      "tier2": "(de)BC",
      "tier3": "(de)Distributor",
--- a/dictation_client/src/translation/en.json
+++ b/dictation_client/src/translation/en.json
@ -16,6 +16,7 @@
      "save": "Save",
      "delete": "Delete",
      "return": "Return",
+      "operationInsteadOf": "Operation instead of:",
      "tier1": "Admin",
      "tier2": "BC",
      "tier3": "Distributor",
--- a/dictation_client/src/translation/es.json
+++ b/dictation_client/src/translation/es.json
@ -16,6 +16,7 @@
      "save": "Ahorrar",
      "delete": "Delete",
      "return": "Devolver",
+      "operationInsteadOf": "(es)Operation instead of:",
      "tier1": "(es)Admin",
      "tier2": "(es)BC",
      "tier3": "(es)Distributor",
--- a/dictation_client/src/translation/fr.json
+++ b/dictation_client/src/translation/fr.json
@ -16,6 +16,7 @@
      "save": "Sauvegarder",
      "delete": "Delete",
      "return": "Retour",
+      "operationInsteadOf": "(fr)Operation instead of:",
      "tier1": "(fr)Admin",
      "tier2": "(fr)BC",
      "tier3": "(fr)Distributor",