From 375e3a5a3bd45f35b2298276dfd98e31dac9958e Mon Sep 17 00:00:00 2001 From: "saito.k" Date: Thu, 26 Oct 2023 06:35:59 +0000 Subject: [PATCH] =?UTF-8?q?Merged=20PR=20524:=20=E7=94=BB=E9=9D=A2?= =?UTF-8?q?=E5=AE=9F=E8=A3=85=EF=BC=88=E4=BB=A3=E8=A1=8C=E6=93=8D=E4=BD=9C?= =?UTF-8?q?=E4=B8=AD=E8=A1=A8=E7=A4=BA=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?= =?UTF-8?q?=E3=83=8D=E3=83=B3=E3=83=88=EF=BC=8B=E4=BB=A3=E8=A1=8C=E6=93=8D?= =?UTF-8?q?=E4=BD=9C=E4=B8=AD=E3=81=AB=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B?= =?UTF-8?q?=E7=94=BB=E9=9D=A2=E3=81=AE=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3?= =?UTF-8?q?=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 概要 [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 ## 動作確認状況 - ローカルで確認 ## 補足 - 相談、参考資料などがあれば --- .../src/components/delegate/index.tsx | 36 +++++++++++++++++++ .../src/features/auth/authSlice.ts | 9 ++++- .../src/features/auth/selectors.ts | 4 +++ dictation_client/src/features/auth/state.ts | 2 ++ .../pages/LicensePage/licenseOrderHistory.tsx | 13 ++++++- .../src/pages/LicensePage/licenseSummary.tsx | 17 ++++++++- .../src/pages/TemplateFilePage/index.tsx | 17 ++++++++- .../pages/TypistGroupSettingPage/index.tsx | 18 ++++++++-- .../src/pages/UserListPage/index.tsx | 17 ++++++++- .../src/pages/WorkTypeIdSettingPage/index.tsx | 17 ++++++++- .../src/pages/WorkflowPage/index.tsx | 18 ++++++++-- dictation_client/src/translation/de.json | 1 + dictation_client/src/translation/en.json | 1 + dictation_client/src/translation/es.json | 1 + dictation_client/src/translation/fr.json | 1 + 15 files changed, 162 insertions(+), 10 deletions(-) create mode 100644 dictation_client/src/components/delegate/index.tsx diff --git a/dictation_client/src/components/delegate/index.tsx b/dictation_client/src/components/delegate/index.tsx new file mode 100644 index 0000000..264facc --- /dev/null +++ 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 = ( + porps +): JSX.Element => { + const { delegatedCompanyName } = porps; + const { t } = useTranslation(); + + return ( +
+ report +

+ {t(getTranslationID("common.label.operationInsteadOf"))} + {delegatedCompanyName} +

+ Exit +
+ ); +}; diff --git a/dictation_client/src/features/auth/authSlice.ts b/dictation_client/src/features/auth/authSlice.ts index a35be42..a9c5dc5 100644 --- 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> + action: PayloadAction< + Omit< + AuthState, + "configuration" | "delegatedAccessToken" | "delegatedRefreshToken" + > + > ) => { const { accessToken, refreshToken } = action.payload; if (accessToken && refreshToken) { diff --git a/dictation_client/src/features/auth/selectors.ts b/dictation_client/src/features/auth/selectors.ts index db5f6a9..db20981 100644 --- 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; diff --git a/dictation_client/src/features/auth/state.ts b/dictation_client/src/features/auth/state.ts index 8fbfd8a..1d8d82d 100644 --- 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; } diff --git a/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx b/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx index e20c9f1..4ccc949 100644 --- 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 = ( 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 = ( }, [dispatch, currentPage]); return ( -
+
+ { + // 代行操作中の場合は、代行操作バーを表示する + // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで） + delegatedAccessToken && + }
diff --git a/dictation_client/src/pages/LicensePage/licenseSummary.tsx b/dictation_client/src/pages/LicensePage/licenseSummary.tsx index 8700902..85b0fd0 100644 --- 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 = ( 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 = ( /> )} {!islicenseOrderHistoryOpen && ( -
+
+ { + // 代行操作中の場合は、代行操作バーを表示する + // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで） + delegatedAccessToken && ( + + ) + }
diff --git a/dictation_client/src/pages/TemplateFilePage/index.tsx b/dictation_client/src/pages/TemplateFilePage/index.tsx index 117ba01..17959c0 100644 --- 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 = () => { }} /> )} -
+
+ { + // 代行操作中の場合は、代行操作バーを表示する + // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで） + delegatedAccessToken && ( + + ) + }
diff --git a/dictation_client/src/pages/TypistGroupSettingPage/index.tsx b/dictation_client/src/pages/TypistGroupSettingPage/index.tsx index 6b1ff06..d6958ef 100644 --- 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} /> -
+
+ { + // 代行操作中の場合は、代行操作バーを表示する + // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで） + delegatedAccessToken && ( + + ) + }
diff --git a/dictation_client/src/pages/UserListPage/index.tsx b/dictation_client/src/pages/UserListPage/index.tsx index cd875a6..d5dc966 100644 --- 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); }} /> -
+
+ { + // 代行操作中の場合は、代行操作バーを表示する + // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで） + delegatedAccessToken && ( + + ) + }
diff --git a/dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx b/dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx index 0f4c03f..c1502fe 100644 --- 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} /> -
+
+ { + // 代行操作中の場合は、代行操作バーを表示する + // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで） + delegatedAccessToken && ( + + ) + }
diff --git a/dictation_client/src/pages/WorkflowPage/index.tsx b/dictation_client/src/pages/WorkflowPage/index.tsx index 16f5c49..49bfced 100644 --- 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(false); // 編集Popupの表示制御 const [isShowEditPopup, setIsShowEditPopup] = useState(false); - + // 代行操作用のトークンを取得する + const delegatedAccessToken = useSelector(selectDelegatedAccessToken); const workflows = useSelector(selectWorkflows); const isLoading = useSelector(selectIsLoading); @@ -70,7 +73,18 @@ const WorkflowPage: React.FC = (): JSX.Element => { }} /> )} -
+
+ { + // 代行操作中の場合は、代行操作バーを表示する + // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで） + delegatedAccessToken && ( + + ) + }
diff --git a/dictation_client/src/translation/de.json b/dictation_client/src/translation/de.json index 55ce9ea..d821ebc 100644 --- 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", diff --git a/dictation_client/src/translation/en.json b/dictation_client/src/translation/en.json index 1958181..f11c1ad 100644 --- 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", diff --git a/dictation_client/src/translation/es.json b/dictation_client/src/translation/es.json index 6bd2dbb..b96b55d 100644 --- 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", diff --git a/dictation_client/src/translation/fr.json b/dictation_client/src/translation/fr.json index e236a8b..750cfbf 100644 --- 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",