Merged PR 604: 画面実装（ファイル情報ポップアップ画面実装）

## 概要
[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

## 動作確認状況
- ローカルで確認

## 補足
- 相談、参考資料などがあれば

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;

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;
 

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[];

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<FilePropertyPopupProps> = (props) => {
+  const { onClose, isOpen } = props;
+  const [t] = useTranslation();
+  const isLoading = useSelector(selectIsLoading);
+
+  // ポップアップを閉じる処理
+  const closePopup = useCallback(() => {
+    onClose(false);
+  }, [onClose]);
+  const selectedFileTask = useSelector(selectSelectedFileTask);
+
+  return (
+    <div className={`${styles.modal} ${isOpen ? styles.isShow : ""}`}>
+      <div className={styles.modalBox}>
+        <p className={styles.modalTitle}>
+          {t(getTranslationID("dictationPage.label.fileProperty"))}
+          <button
+            type="button"
+            onClick={closePopup}
+            style={{ pointerEvents: isLoading ? "none" : "auto" }}
+          >
+            <img src={close} className={styles.modalTitleIcon} alt="close" />
+          </button>
+        </p>
+        <dl className={`${styles.formList} ${styles.property} ${styles.hasbg}`}>
+          <dt className={styles.formTitle}>
+            {t(getTranslationID("dictationPage.label.general"))}
+          </dt>
+          <dt>{t(getTranslationID("dictationPage.label.fileName"))}</dt>
+          <dd>{selectedFileTask?.fileName.replace(".zip", "") ?? ""}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.fileSize"))}</dt>
+          <dd>{selectedFileTask?.fileSize ?? ""}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.fileLength"))}</dt>
+          <dd>{selectedFileTask?.audioDuration ?? ""}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.authorId"))}</dt>
+          <dd>{selectedFileTask?.authorId ?? ""}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.workType"))}</dt>
+          <dd>{selectedFileTask?.workType ?? ""}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.priority"))}</dt>
+          <dd>{selectedFileTask?.priority ?? ""}</dd>
+          <dt>
+            {t(getTranslationID("dictationPage.label.recordingStartedDate"))}
+          </dt>
+          <dd>{selectedFileTask?.audioCreatedDate ?? ""}</dd>
+          <dt>
+            {t(getTranslationID("dictationPage.label.recordingFinishedDate"))}
+          </dt>
+          <dd>{selectedFileTask?.audioFinishedDate ?? ""}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.uploadDate"))}</dt>
+          <dd>{selectedFileTask?.audioUploadedDate ?? ""}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.encryption"))}</dt>
+          <dd>
+            {selectedFileTask?.isEncrypted ? (
+              <img src={lock} alt="encrypted" />
+            ) : (
+              ""
+            )}
+          </dd>
+          <dt>{t(getTranslationID("dictationPage.label.optionItem1"))}</dt>
+          <dd>{selectedFileTask?.optionItemList[0].optionItemValue}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.optionItem2"))}</dt>
+          <dd>{selectedFileTask?.optionItemList[1].optionItemValue}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.optionItem3"))}</dt>
+          <dd>{selectedFileTask?.optionItemList[2].optionItemValue}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.optionItem4"))}</dt>
+          <dd>{selectedFileTask?.optionItemList[3].optionItemValue}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.optionItem5"))}</dt>
+          <dd>{selectedFileTask?.optionItemList[4].optionItemValue}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.optionItem6"))}</dt>
+          <dd>{selectedFileTask?.optionItemList[5].optionItemValue}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.optionItem7"))}</dt>
+          <dd>{selectedFileTask?.optionItemList[6].optionItemValue}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.optionItem8"))}</dt>
+          <dd>{selectedFileTask?.optionItemList[7].optionItemValue}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.optionItem9"))}</dt>
+          <dd>{selectedFileTask?.optionItemList[8].optionItemValue}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.optionItem10"))}</dt>
+          <dd>{selectedFileTask?.optionItemList[9].optionItemValue}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.comment"))}</dt>
+          <dd>{selectedFileTask?.comment ?? ""}</dd>
+          <dt className={styles.formTitle}>
+            {t(getTranslationID("dictationPage.label.job"))}
+          </dt>
+          <dt>{t(getTranslationID("dictationPage.label.jobNumber"))}</dt>
+          <dd>{selectedFileTask?.jobNumber ?? ""}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.status"))}</dt>
+          <dd>{selectedFileTask?.status ?? ""}</dd>
+          <dt>
+            {t(
+              getTranslationID("dictationPage.label.transcriptionStartedDate")
+            )}
+          </dt>
+          <dd>{selectedFileTask?.transcriptionStartedDate ?? ""}</dd>
+          <dt>
+            {t(
+              getTranslationID("dictationPage.label.transcriptionFinishedDate")
+            )}
+          </dt>
+          <dd>{selectedFileTask?.transcriptionFinishedDate ?? ""}</dd>
+          <dt>{t(getTranslationID("dictationPage.label.transcriptionist"))}</dt>
+          <dd>{selectedFileTask?.typist?.name ?? ""}</dd>
+          <dd className={`${styles.full} ${styles.alignRight}`}>
+            <a href="" className={`${styles.buttonText}`}>
+              <img src={close} className={styles.modalTitleIcon} alt="close" />
+              {t(getTranslationID("dictationPage.label.close"))}
+            </a>
+          </dd>
+        </dl>
+      </div>
+    </div>
+  );
+};

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 (
     <>
       <BackupPopup isOpen={isBackupPopupOpen} onClose={onCloseBackupPopup} />
+      <FilePropertyPopup
+        isOpen={isFilePropertyPopupOpen}
+        onClose={onCloseFilePropertyPopup}
+      />
       <ChangeTranscriptionistPopup
         isOpen={isChangeTranscriptionistPopupOpen}
         onClose={onClosePopup}
@@ -1080,7 +1098,8 @@ const DictationPage: React.FC = (): JSX.Element => {
                                 </a>
                               </li>
                               <li>
-                                <a>
+                                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+                                <a onClick={() => onClickFileProperty(x)}>
                                   {t(
                                     getTranslationID(
                                       "dictationPage.label.fileProperty"

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
+  background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left center;
-    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
+  background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat right
-    right center;
+    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
+  background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left center;
-    center;
   background-size: 1.3rem;
 }
 .formChange ul.chooseMember li input:checked + label,

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": {

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": {

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": {

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": {