Feat : FormatChooseDialog(#236)

업로드를 하기 전에 Dicom으로 할지 파일로 할 지 결정하는
FormatChooseDialog 코드를 추가하였습니다. 선택지에 따라
DicomUploadDialog.js와 FileUploadDialog.tsx 중 하나를
적절히 고르도록 적용할 예정입니다.

client/src/api/StorageAPI.ts

@@ -0,0 +1,29 @@
+import axios from 'axios'
+const URL_HEADER='Storage'
+const SUCCESS_MSG="success"
+
+const openFile=(filename: string,callBack:(file: Blob)=>{})=>{
+
+}
+
+export const uploadFile=(file : File,dummy=true) : string=>{
+    if(dummy){
+        return SUCCESS_MSG
+    }
+    else{
+        //TODO Not Yet Implemented
+    }
+    return "this is never called"
+}
+
+export const downloadFile=(filename: string,callbackListener=(file : Blob)=>{},dummy=true): Blob | null=>{
+    if(dummy){
+        const blob: Blob=new Blob()
+        return blob
+    }
+    else{
+        //TODO Not Yet Implemented
+    }
+    return null
+}
+

client/src/component/Toolbar/Upload/FileUploadDialog/FileUploadDialog.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react'
+export default function FileUploadDialog(){
+    return(<div></div>)
+}

client/src/component/Toolbar/Upload/FormatChooseDialog/FormatChooseDialog.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import {Button, Dialog, DialogActions, DialogContent, DialogTitle} from "@mui/material";
+import {useDispatch, useSelector} from "react-redux";
+import {RootState} from "../../../../store";
+import {FORMAT_TYPE, FormatChooseAction} from "./FormatChooseDialogReducer";
+import FileUploadDialog from "../FileUploadDialog/FileUploadDialog";
+
+const FormatChooseDialog = ()=>{
+    const open: boolean=useSelector((state : RootState )=>state.FormatChooseReducer.open)
+    const selectedFormat : FORMAT_TYPE | null = useSelector((state: RootState)=>state.FormatChooseReducer.selectedFormat)
+    const dispatch=useDispatch()
+    const handleButtonClick=(format : FORMAT_TYPE)=>()=>{
+        dispatch(FormatChooseAction.selectFormat(format))
+        dispatch(FormatChooseAction.closeDialog())
+    }
+    const handleClose=()=>{
+        dispatch(FormatChooseAction.closeDialog())
+    }
+    if (selectedFormat==null){
+        return(
+            <Dialog
+                open={open}
+                onClose={handleClose}
+            >
+                <DialogTitle>
+                    {"Choose Upload Format"}
+                </DialogTitle>
+                <DialogContent>
+                    <Button onClick={handleButtonClick(FORMAT_TYPE.DICOM)}>Dicom</Button>
+                    <Button onClick={handleButtonClick(FORMAT_TYPE.IMAGE)}>Image</Button>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handleClose}>취소</Button>
+                </DialogActions>
+            </Dialog>)
+    }
+    else if(selectedFormat==FORMAT_TYPE.DICOM){
+        alert("dicom!")
+        return(
+            <div/>
+        )
+    }
+    else{
+        alert("image!")
+        return(
+            <FileUploadDialog/>
+        )
+    }
+}
+export default FormatChooseDialog

client/src/component/Toolbar/Upload/FormatChooseDialog/FormatChooseDialogReducer.ts

@@ -0,0 +1,45 @@
+
+export enum FORMAT_TYPE{
+    DICOM,
+    IMAGE
+}
+type FormatChooseDialogState={
+    open : boolean,
+    selectedFormat : FORMAT_TYPE | null
+}
+
+const init_state: FormatChooseDialogState={
+    open : false,
+    selectedFormat : null
+}
+
+const HEADER='FormatChooseDialog'
+export const TYPE={
+    OPEN_DIALOG: `${HEADER}/open` as const,
+    CLOSE_DIALOG : `${HEADER}/close` as const,
+    SELECT_FORMAT : `${HEADER}/format_choose` as const
+}
+
+export const FormatChooseAction={
+    openDialog : ()=>({type : TYPE.OPEN_DIALOG}),
+    closeDialog : ()=>({type : TYPE.CLOSE_DIALOG}),
+    selectFormat : (format : FORMAT_TYPE)=>({type : TYPE.SELECT_FORMAT,payload : format})
+}
+
+type FormatChooseActionType=
+    ReturnType<typeof FormatChooseAction.openDialog> |
+    ReturnType<typeof FormatChooseAction.closeDialog> |
+    ReturnType<typeof FormatChooseAction.selectFormat>
+
+export default function FormatChooseReducer(state : FormatChooseDialogState=init_state,action: FormatChooseActionType): FormatChooseDialogState{
+    switch (action.type) {
+        case TYPE.OPEN_DIALOG:
+            return {...state,open: true}
+        case TYPE.CLOSE_DIALOG:
+            return {...state,open:false}
+        case TYPE.SELECT_FORMAT:
+            return {...state,selectedFormat : action.payload}
+        default:
+            return state;
+    }
+}

client/src/component/Toolbar/Upload/UploadButton.js

@@ -1,20 +1,25 @@
 import * as React from 'react';
 import { Button, Snackbar,CircularProgress,IconButton } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
-import UploadDialog from './UploadDialog/UploadDialog';
+import DicomUploadDialog from './UploadDialog/DicomUploadDialog';
 import CircularProgressWithLabel from './UploadDialog/CircularProgressWithLabel';
 import ColumnTypeDecisionDialog from "./MetadataColumnTypeDecision/ColumnTypeDesicionDialog";
+import FormatChooseDialog from "./FormatChooseDialog/FormatChooseDialog";
+import {useDispatch} from "react-redux";
+import {FormatChooseAction} from "./FormatChooseDialog/FormatChooseDialogReducer";
 
 let fileHandler;
 export default function  UploadButton({projects,getMetaData,metaData}){
     const [open, setOpen] = React.useState(false);
     const [snackbarInfo,setSnackBarInfo]=React.useState({});
+    const dispatch=useDispatch()
     const handleClickOpen = () => {
         if(snackbarInfo.open){
             alert('업로드 과정이 진행중입니다.')
         }
         else if(projects.projectId){
-            setOpen(true);
+            //setOpen(true);
+            dispatch(FormatChooseAction.openDialog())
         }
         else{
             alert('프로젝트를 선택해주세요.')
@@ -41,16 +46,17 @@ export default function  UploadButton({projects,getMetaData,metaData}){
     return(
         <div>
             <Button  onClick={handleClickOpen} variant="outlined">Upload</Button>
-            <UploadDialog 
-                open={open} 
-                setOpen={setOpen}
-                snackbarInfo={snackbarInfo}
-                setSnackBarInfo={setSnackBarInfo}
-                fileHandler={fileHandler}
-                projects={projects}
-                getMetaData={getMetaData}
-                metaData={metaData}
-            />
+            {/*<DicomUploadDialog */}
+            {/*    open={open} */}
+            {/*    setOpen={setOpen}*/}
+            {/*    snackbarInfo={snackbarInfo}*/}
+            {/*    setSnackBarInfo={setSnackBarInfo}*/}
+            {/*    fileHandler={fileHandler}*/}
+            {/*    projects={projects}*/}
+            {/*    getMetaData={getMetaData}*/}
+            {/*    metaData={metaData}*/}
+            {/*/>*/}
+            <FormatChooseDialog/>
             <Snackbar
                 key='DataLoadingMessenger'
                 open={snackbarInfo.open}

client/src/component/Toolbar/Upload/UploadDialog/UploadDialog.js → client/src/component/Toolbar/Upload/UploadDialog/DicomUploadDialog.js

@@ -13,7 +13,7 @@ import {useDispatch} from "react-redux";
 const dialogContentDescrptionText = "메타데이터는 csv의 'PatientID' 속성에는 업로드하려는 Dicom 파일의 ID가 존재해야 합니다. "
 const dicomUploadErrorMsg = "업로드한 Dicom 파일을 확인해주세요 "
 
-export default function UploadDialog({
+export default function DicomUploadDialog({
                                          open,
                                          setOpen,
                                          snackbarInfo,

client/src/store.tsx

@@ -4,12 +4,14 @@ import ColumnTypeDecisionDialogReducer
 import ParticipantInfoReducer from "./component/Toolbar/ProjectParticipant/ParticipantInfoReducer";
 import SamplingReducer from "./component/Toolbar/Sampling/SamplingReducer";
 import MLReducer from "./component/Toolbar/MachineLearning/MLReducer";
+import FormatChooseReducer from "./component/Toolbar/Upload/FormatChooseDialog/FormatChooseDialogReducer";
 
 const rootReducer=combineReducers({
     ColumnTypeDecisionDialogReducer,
     ParticipantInfoReducer,
     SamplingReducer,
-    MLReducer
+    MLReducer,
+    FormatChooseReducer
 })
 
 export default rootReducer;