From ebfc05040bdaed219d5139b19268773fc4e437c9 Mon Sep 17 00:00:00 2001 From: "maruyama.t" Date: Tue, 5 Dec 2023 05:04:25 +0000 Subject: [PATCH] =?UTF-8?q?Merged=20PR=20604:=20=E7=94=BB=E9=9D=A2?= =?UTF-8?q?=E5=AE=9F=E8=A3=85=EF=BC=88=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB?= =?UTF-8?q?=E6=83=85=E5=A0=B1=E3=83=9D=E3=83=83=E3=83=97=E3=82=A2=E3=83=83?= =?UTF-8?q?=E3=83=97=E7=94=BB=E9=9D=A2=E5=AE=9F=E8=A3=85=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 概要 [Task3195: 画面実装（ファイル情報ポップアップ画面実装）](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/3195) - 影響範囲（他の機能にも影響があるか） 画面実装のみのため、なし ## レビューポイント - 表示される値はDictationタブの表示のされ方と同じだが問題ないか （拡張子やサイズなど） ## UIの変更 - Before/Afterのスクショなど - スクショ置き場 https://ndstokyo.sharepoint.com/sites/Piranha/Shared%20Documents/Forms/AllItems.aspx?csf=1&web=1&e=hzPw9b&cid=f9d17150%2D1d33%2D49da%2D8bd4%2Df5a27cbbed66&FolderCTID=0x012000C0DCEE65AC2177479C3C761CD137C9C9&id=%2Fsites%2FPiranha%2FShared%20Documents%2FGeneral%2FOMDS%2F%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%2FTask3195&viewid=786a81cf%2Dd15f%2D4dc2%2D9e55%2Dc7a729fbc72f ## 動作確認状況 - ローカルで確認 ## 補足 - 相談、参考資料などがあれば --- .../src/features/dictation/dictationSlice.ts | 5 + .../src/features/dictation/selectors.ts | 3 + .../src/features/dictation/state.ts | 1 + .../pages/DictationPage/filePropertyPopup.tsx | 126 ++++++++++++++++++ .../src/pages/DictationPage/index.tsx | 21 ++- dictation_client/src/styles/app.module.scss | 10 +- dictation_client/src/translation/de.json | 5 +- dictation_client/src/translation/en.json | 5 +- dictation_client/src/translation/es.json | 5 +- dictation_client/src/translation/fr.json | 5 +- 10 files changed, 175 insertions(+), 11 deletions(-) create mode 100644 dictation_client/src/pages/DictationPage/filePropertyPopup.tsx diff --git a/dictation_client/src/features/dictation/dictationSlice.ts b/dictation_client/src/features/dictation/dictationSlice.ts index c51fd3d..c434639 100644 --- a/dictation_client/src/features/dictation/dictationSlice.ts +++ b/dictation_client/src/features/dictation/dictationSlice.ts @@ -131,6 +131,10 @@ export const dictationSlice = createSlice({ }); state.domain.backup.tasks = tasks; }, + openFilePropertyInfo: (state, action: PayloadAction<{ task: Task }>) => { + const { task } = action.payload; + state.apps.selectedFileTask = task; + }, }, extraReducers: (builder) => { builder.addCase(listTasksAsync.pending, (state) => { @@ -225,6 +229,7 @@ export const { changeAssignee, changeBackupTaskChecked, changeBackupTaskAllCheched, + openFilePropertyInfo, } = dictationSlice.actions; export default dictationSlice.reducer; diff --git a/dictation_client/src/features/dictation/selectors.ts b/dictation_client/src/features/dictation/selectors.ts index 12cda85..3b6f494 100644 --- a/dictation_client/src/features/dictation/selectors.ts +++ b/dictation_client/src/features/dictation/selectors.ts @@ -34,6 +34,9 @@ export const selectParamName = (state: RootState) => export const selectSelectedTask = (state: RootState) => state.dictation.apps.selectedTask; +export const selectSelectedFileTask = (state: RootState) => + state.dictation.apps.selectedFileTask; + export const selectSelectedTranscriptionists = (state: RootState) => state.dictation.apps.assignee.selected; diff --git a/dictation_client/src/features/dictation/state.ts b/dictation_client/src/features/dictation/state.ts index f8243ef..2f3e288 100644 --- a/dictation_client/src/features/dictation/state.ts +++ b/dictation_client/src/features/dictation/state.ts @@ -26,6 +26,7 @@ export interface Apps { direction: DirectionType; paramName: SortableColumnType; selectedTask?: Task; + selectedFileTask?: Task; assignee: { selected: Assignee[]; pool: Assignee[]; diff --git a/dictation_client/src/pages/DictationPage/filePropertyPopup.tsx b/dictation_client/src/pages/DictationPage/filePropertyPopup.tsx new file mode 100644 index 0000000..639d264 --- /dev/null +++ b/dictation_client/src/pages/DictationPage/filePropertyPopup.tsx @@ -0,0 +1,126 @@ +import React, { useCallback } from "react"; +import styles from "styles/app.module.scss"; +import { useSelector } from "react-redux"; +import { selectSelectedFileTask, selectIsLoading } from "features/dictation"; +import { getTranslationID } from "translation"; +import { useTranslation } from "react-i18next"; +import close from "../../assets/images/close.svg"; +import lock from "../../assets/images/lock.svg"; + +interface FilePropertyPopupProps { + onClose: (isChanged: boolean) => void; + isOpen: boolean; +} + +export const FilePropertyPopup: React.FC = (props) => { + const { onClose, isOpen } = props; + const [t] = useTranslation(); + const isLoading = useSelector(selectIsLoading); + + // ポップアップを閉じる処理 + const closePopup = useCallback(() => { + onClose(false); + }, [onClose]); + const selectedFileTask = useSelector(selectSelectedFileTask); + + return ( +
+
+

+ {t(getTranslationID("dictationPage.label.fileProperty"))} + +

+
+
+ {t(getTranslationID("dictationPage.label.general"))} +
+
{t(getTranslationID("dictationPage.label.fileName"))}
+
{selectedFileTask?.fileName.replace(".zip", "") ?? ""}
+
{t(getTranslationID("dictationPage.label.fileSize"))}
+
{selectedFileTask?.fileSize ?? ""}
+
{t(getTranslationID("dictationPage.label.fileLength"))}
+
{selectedFileTask?.audioDuration ?? ""}
+
{t(getTranslationID("dictationPage.label.authorId"))}
+
{selectedFileTask?.authorId ?? ""}
+
{t(getTranslationID("dictationPage.label.workType"))}
+
{selectedFileTask?.workType ?? ""}
+
{t(getTranslationID("dictationPage.label.priority"))}
+
{selectedFileTask?.priority ?? ""}
+
+ {t(getTranslationID("dictationPage.label.recordingStartedDate"))} +
+
{selectedFileTask?.audioCreatedDate ?? ""}
+
+ {t(getTranslationID("dictationPage.label.recordingFinishedDate"))} +
+
{selectedFileTask?.audioFinishedDate ?? ""}
+
{t(getTranslationID("dictationPage.label.uploadDate"))}
+
{selectedFileTask?.audioUploadedDate ?? ""}
+
{t(getTranslationID("dictationPage.label.encryption"))}
+
+ {selectedFileTask?.isEncrypted ? ( + encrypted + ) : ( + "" + )} +
+
{t(getTranslationID("dictationPage.label.optionItem1"))}
+
{selectedFileTask?.optionItemList[0].optionItemValue}
+
{t(getTranslationID("dictationPage.label.optionItem2"))}
+
{selectedFileTask?.optionItemList[1].optionItemValue}
+
{t(getTranslationID("dictationPage.label.optionItem3"))}
+
{selectedFileTask?.optionItemList[2].optionItemValue}
+
{t(getTranslationID("dictationPage.label.optionItem4"))}
+
{selectedFileTask?.optionItemList[3].optionItemValue}
+
{t(getTranslationID("dictationPage.label.optionItem5"))}
+
{selectedFileTask?.optionItemList[4].optionItemValue}
+
{t(getTranslationID("dictationPage.label.optionItem6"))}
+
{selectedFileTask?.optionItemList[5].optionItemValue}
+
{t(getTranslationID("dictationPage.label.optionItem7"))}
+
{selectedFileTask?.optionItemList[6].optionItemValue}
+
{t(getTranslationID("dictationPage.label.optionItem8"))}
+
{selectedFileTask?.optionItemList[7].optionItemValue}
+
{t(getTranslationID("dictationPage.label.optionItem9"))}
+
{selectedFileTask?.optionItemList[8].optionItemValue}
+
{t(getTranslationID("dictationPage.label.optionItem10"))}
+
{selectedFileTask?.optionItemList[9].optionItemValue}
+
{t(getTranslationID("dictationPage.label.comment"))}
+
{selectedFileTask?.comment ?? ""}
+
+ {t(getTranslationID("dictationPage.label.job"))} +
+
{t(getTranslationID("dictationPage.label.jobNumber"))}
+
{selectedFileTask?.jobNumber ?? ""}
+
{t(getTranslationID("dictationPage.label.status"))}
+
{selectedFileTask?.status ?? ""}
+
+ {t( + getTranslationID("dictationPage.label.transcriptionStartedDate") + )} +
+
{selectedFileTask?.transcriptionStartedDate ?? ""}
+
+ {t( + getTranslationID("dictationPage.label.transcriptionFinishedDate") + )} +
+
{selectedFileTask?.transcriptionFinishedDate ?? ""}
+
{t(getTranslationID("dictationPage.label.transcriptionist"))}
+
{selectedFileTask?.typist?.name ?? ""}
+
+ + close + {t(getTranslationID("dictationPage.label.close"))} + +
+
+
+
+ ); +}; diff --git a/dictation_client/src/pages/DictationPage/index.tsx b/dictation_client/src/pages/DictationPage/index.tsx index 320993a..e42d557 100644 --- a/dictation_client/src/pages/DictationPage/index.tsx +++ b/dictation_client/src/pages/DictationPage/index.tsx @@ -23,6 +23,7 @@ import { changeParamName, changeDirection, changeSelectedTask, + openFilePropertyInfo, SortableColumnType, changeAssignee, listTypistsAsync, @@ -48,6 +49,7 @@ import open_in_new from "../../assets/images/open_in_new.svg"; import { DisPlayInfo } from "./displayInfo"; import { ChangeTranscriptionistPopup } from "./changeTranscriptionistPopup"; import { BackupPopup } from "./backupPopup"; +import { FilePropertyPopup } from "./filePropertyPopup"; const DictationPage: React.FC = (): JSX.Element => { const dispatch: AppDispatch = useDispatch(); @@ -63,6 +65,7 @@ const DictationPage: React.FC = (): JSX.Element => { isChangeTranscriptionistPopupOpen, setIsChangeTranscriptionistPopupOpen, ] = useState(false); + const [isFilePropertyPopupOpen, setIsFilePropertyPopupOpen] = useState(false); const [isBackupPopupOpen, setIsBackupPopupOpen] = useState(false); const onChangeTranscriptionistPopupOpen = useCallback( @@ -74,6 +77,13 @@ const DictationPage: React.FC = (): JSX.Element => { [dispatch, setIsChangeTranscriptionistPopupOpen] ); + const onClickFileProperty = useCallback( + (task: Task) => { + dispatch(openFilePropertyInfo({ task })); + setIsFilePropertyPopupOpen(true); + }, + [dispatch, setIsFilePropertyPopupOpen] + ); // 各カラムの表示/非表示 const displayColumn = useSelector(selectDisplayInfo); @@ -477,6 +487,10 @@ const DictationPage: React.FC = (): JSX.Element => { setIsBackupPopupOpen(true); }, []); + const onCloseFilePropertyPopup = useCallback(() => { + setIsFilePropertyPopupOpen(false); + }, []); + const sortIconClass = ( currentParam: SortableColumnType, currentDirection: DirectionType, @@ -532,6 +546,10 @@ const DictationPage: React.FC = (): JSX.Element => { return ( <> + {
  • - + {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */} + onClickFileProperty(x)}> {t( getTranslationID( "dictationPage.label.fileProperty" diff --git a/dictation_client/src/styles/app.module.scss b/dictation_client/src/styles/app.module.scss index a629977..f5399f2 100644 --- a/dictation_client/src/styles/app.module.scss +++ b/dictation_client/src/styles/app.module.scss @@ -2306,8 +2306,7 @@ tr.isSelected .menuInTable li a.isDisable { } .formChange ul.chooseMember li input + label:hover, .formChange ul.holdMember li input + label:hover { - background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left - center; + background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left center; background-size: 1.3rem; } .formChange ul.chooseMember li input:checked + label, @@ -2318,8 +2317,8 @@ tr.isSelected .menuInTable li a.isDisable { } .formChange ul.chooseMember li input:checked + label:hover, .formChange ul.holdMember li input:checked + label:hover { - background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat - right center; + background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat right + center; background-size: 1.3rem; } .formChange > p { @@ -2472,8 +2471,7 @@ tr.isSelected .menuInTable li a.isDisable { } .formChange ul.chooseMember li input + label:hover, .formChange ul.holdMember li input + label:hover { - background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left - center; + background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left center; background-size: 1.3rem; } .formChange ul.chooseMember li input:checked + label, diff --git a/dictation_client/src/translation/de.json b/dictation_client/src/translation/de.json index fc8ab14..b5d2a21 100644 --- a/dictation_client/src/translation/de.json +++ b/dictation_client/src/translation/de.json @@ -251,7 +251,10 @@ "poolTranscriptionist": "Transkriptionsliste", "fileBackup": "(de)File Backup", "downloadForBackup": "(de)Download for backup", - "cancelDictation": "(de)Cancel Dictation" + "cancelDictation": "(de)Cancel Dictation", + "general": "(de)General", + "job": "(de)Job", + "close": "(de)Close" } }, "cardLicenseIssuePopupPage": { diff --git a/dictation_client/src/translation/en.json b/dictation_client/src/translation/en.json index 7ab63f4..a4e04bf 100644 --- a/dictation_client/src/translation/en.json +++ b/dictation_client/src/translation/en.json @@ -251,7 +251,10 @@ "poolTranscriptionist": "Transcription List", "fileBackup": "File Backup", "downloadForBackup": "Download for backup", - "cancelDictation": "Cancel Dictation" + "cancelDictation": "Cancel Dictation", + "general": "General", + "job": "Job", + "close": "Close" } }, "cardLicenseIssuePopupPage": { diff --git a/dictation_client/src/translation/es.json b/dictation_client/src/translation/es.json index f495bcb..7d60f61 100644 --- a/dictation_client/src/translation/es.json +++ b/dictation_client/src/translation/es.json @@ -251,7 +251,10 @@ "poolTranscriptionist": "Lista de transcriptor", "fileBackup": "(es)File Backup", "downloadForBackup": "(es)Download for backup", - "cancelDictation": "(es)Cancel Dictation" + "cancelDictation": "(es)Cancel Dictation", + "general": "(es)General", + "job": "(es)Job", + "close": "(es)Close" } }, "cardLicenseIssuePopupPage": { diff --git a/dictation_client/src/translation/fr.json b/dictation_client/src/translation/fr.json index ca66c3f..0bcf9fb 100644 --- a/dictation_client/src/translation/fr.json +++ b/dictation_client/src/translation/fr.json @@ -251,7 +251,10 @@ "poolTranscriptionist": "Liste de transcriptionniste", "fileBackup": "(fr)File Backup", "downloadForBackup": "(fr)Download for backup", - "cancelDictation": "(fr)Cancel Dictation" + "cancelDictation": "(fr)Cancel Dictation", + "general": "(fr)General", + "job": "(fr)Job", + "close": "(fr)Close" } }, "cardLicenseIssuePopupPage": {