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 ## 動作確認状況 - ローカルで確認 ## 補足 - 相談、参考資料などがあれば
This commit is contained in:
maruyama.t
parent
40da605780
commit
ebfc05040b
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -26,6 +26,7 @@ export interface Apps {
|
||||
direction: DirectionType;
|
||||
paramName: SortableColumnType;
|
||||
selectedTask?: Task;
|
||||
selectedFileTask?: Task;
|
||||
assignee: {
|
||||
selected: Assignee[];
|
||||
pool: Assignee[];
|
||||
|
||||
126
dictation_client/src/pages/DictationPage/filePropertyPopup.tsx
Normal file
126
dictation_client/src/pages/DictationPage/filePropertyPopup.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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"
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user