rename study (#103)

Allow to rename study

Signed-off-by: AbdelHedhili <[email protected]>

Co-authored-by: ChamseddineBhd <[email protected]>

Author: AbdelHedhili

src/components/study-manager.js

@@ -32,7 +32,7 @@ import {ReactComponent as UcteLogo} from '../images/ucte_logo.svg';
 import {ReactComponent as IeeeLogo} from '../images/ieee_logo.svg';
 
 import {loadStudiesSuccess} from '../redux/actions';
-import {deleteStudy, fetchStudies} from '../utils/rest-api';
+import {fetchStudies, deleteStudy, renameStudy} from '../utils/rest-api';
 import CreateStudyForm from "./create-study-form";
 
 import {CardHeader} from "@material-ui/core";
@@ -46,6 +46,9 @@ import withStyles from "@material-ui/core/styles/withStyles";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
 import DeleteIcon from '@material-ui/icons/Delete';
+import SwapIcon from '@material-ui/icons/SwapHoriz';
+import TextField from "@material-ui/core/TextField";
+import InputLabel from "@material-ui/core/InputLabel";
 import Box from "@material-ui/core/Box";
 
 const useStyles = makeStyles((theme) => ({
@@ -89,7 +92,8 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const StudyCard = ({study, onClick}) => {
-    const [open, setOpen] = React.useState(false);
+    const [openDeleteDialog, setOpenDelete] = React.useState(false);
+    const [openRenameDialog, setOpenRename]  = React.useState(false);
     const dispatch = useDispatch();
     const classes = useStyles();
 
@@ -141,7 +145,7 @@ const StudyCard = ({study, onClick}) => {
 
     const handleDeleteStudy = () => {
         setAnchorEl(null);
-        setOpen(true);
+        setOpenDelete(true);
     };
 
     const handleDeleteStudyConfirmed = () => {
@@ -152,12 +156,35 @@ const StudyCard = ({study, onClick}) => {
         });
     };
 
-    const handleCloseDialog = () => {
-        setOpen(false);
+    const handleCloseDeleteDialog = () => {
+        setOpenDelete(false);
     };
 
     const handleCancelDelete = () => {
-        setOpen(false);
+        setOpenDelete(false);
+    };
+
+    const handleRenameStudy = () => {
+        setAnchorEl(null);
+        setOpenRename(true);
+    };
+
+    const handleRenameStudyConfirmed = (newStudyNameValue) => {
+        renameStudy(study.studyName, newStudyNameValue)
+            .then(() => {
+                fetchStudies().then(studies => {
+                    dispatch(loadStudiesSuccess(studies));
+                });
+                setOpenRename(false);
+            });
+    };
+
+    const handleCancelRename = () => {
+        setOpenRename(false);
+    };
+
+    const handleCloseRenameDialog = () => {
+        setOpenDelete(false);
     };
 
     const [expanded, setExpanded] = React.useState(false);
@@ -218,6 +245,14 @@ const StudyCard = ({study, onClick}) => {
                             </ListItemIcon>
                             <ListItemText primary={<FormattedMessage id="delete"/>} />
                         </MenuItem>
+
+                        <MenuItem onClick={handleRenameStudy}>
+                            <ListItemIcon>
+                                <SwapIcon fontSize="small"/>
+                            </ListItemIcon>
+                            <ListItemText primary={<FormattedMessage id="rename"/>} />
+                        </MenuItem>
+
                     </StyledMenu>
                 </CardActions>
                 <Collapse in={expanded} timeout="auto" unmountOnExit>
@@ -237,8 +272,8 @@ const StudyCard = ({study, onClick}) => {
                     </CardContent>
                 </Collapse>
             </Card>
-            <Dialog open={open} onClose={handleCloseDialog} aria-labelledby="form-dialog-title">
-                <DialogTitle id="form-dialog-title"><FormattedMessage id="deleteStudy"/></DialogTitle>
+            <Dialog open={openDeleteDialog} onClose={handleCloseDeleteDialog} aria-labelledby="dialog-title-delete">
+                <DialogTitle id="dialog-title-delete"><FormattedMessage id="deleteStudy"/></DialogTitle>
                 <DialogContent>
                     <DialogContentText>
                         <FormattedMessage id="deleteStudyMsg"/>
@@ -253,10 +288,47 @@ const StudyCard = ({study, onClick}) => {
                     </Button>
                 </DialogActions>
             </Dialog>
+            <RenameDialog studyName={study.studyName}
+                          openRenameDialog={openRenameDialog}
+                          handleCloseDialog={handleCloseRenameDialog}
+                          handleCancel={handleCancelRename}
+                          handleConfirm={handleRenameStudyConfirmed}/>
         </div>
     );
 };
 
+const RenameDialog = (props) => {
+
+    const [newStudyNameValue, setNewStudyNameValue] = React.useState(props.studyName);
+
+    const updateStudyNameValue= (event) => {
+        setNewStudyNameValue(event.target.value);
+    };
+
+    const handleClick = () => {
+        console.debug("newStudyName : " + newStudyNameValue);
+        props.handleConfirm(newStudyNameValue);
+    };
+
+    return (
+        <Dialog open={props.openRenameDialog} onClose={props.handleCloseDialog} aria-labelledby="dialog-title-rename">
+            <DialogTitle id="dialog-title-rename"><FormattedMessage id="renameStudy"/></DialogTitle>
+            <DialogContent>
+                <InputLabel htmlFor="newStudyName"><FormattedMessage id="renameStudyMsg"/></InputLabel>
+                <TextField id="newStudyName" value={newStudyNameValue} required={true} onChange={updateStudyNameValue}></TextField>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={props.handleCancel} color="primary">
+                    <FormattedMessage id="cancel"/>
+                </Button>
+                <Button onClick={handleClick} color="primary">
+                    <FormattedMessage id="rename"/>
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
 const StudyManager = ({onStudyClick}) => {
     const dispatch = useDispatch();
 

src/translations/en.json

@@ -10,6 +10,7 @@
   "uploadMessage" : " No file selected",
   "cancel" : "CANCEL",
   "create" : "CREATE",
+  "rename" : "Rename",
   "delete" : "Delete",
   "filter" : "Filter",
 
@@ -24,6 +25,9 @@
   "studyNameDidNotMatchMsg" : "The given study name did not match with ",
   "studyDeletedSuccessMsg" : "Study deleted",
 
+  "renameStudyMsg" : "New study name:",
+  "renameStudy" : "Rename study",
+
   "studyNameErrorMsg" : "Study name should not be empty",
   "caseNameErrorMsg" : "Please select the case name",
   "caseDataErrorMsg" : "An error occured when importing the case",

src/translations/fr.json

@@ -10,6 +10,7 @@
   "uploadMessage" : " Aucun fichier sélectionné",
   "cancel" : "ANNULER",
   "create" : "CRÉER",
+  "rename" : "Renommer",
   "delete" : "Supprimer",
   "filter" : "Filtre",
 
@@ -23,6 +24,9 @@
   "studyNameDidNotMatchMsg" : "Le nom d'étude donné ne correspond pas à ",
   "studyDeletedSuccessMsg" : "Étude supprimée",
 
+  "renameStudyMsg" : "Nouveau nom de l'étude :",
+  "renameStudy" : "Renommer l'étude",
+
   "studyNameErrorMsg" : "Le nom de l'étude ne doit pas être vide",
   "caseNameErrorMsg" : "Veuillez sélectionner le nom de la situation",
   "caseDataErrorMsg" : "Une erreur s'est produite lors de l'importation du fichier",

src/utils/rest-api.js

@@ -93,3 +93,17 @@ export function deleteStudy(studyName) {
     return fetch(deleteStudyUrl, {method:'delete'});
 }
 
+export function renameStudy(studyName, newStudyName) {
+    console.info("Renaming study " + studyName);
+    const renameStudiesUrl = process.env.REACT_APP_API_STUDY_SERVER + "/v1/studies/" + studyName + "/rename";
+    console.debug(renameStudiesUrl);
+    return fetch(renameStudiesUrl, {
+        method : 'POST',
+        headers : {
+            'Accept' : 'application/json',
+            'Content-Type' : 'application/json'
+        },
+        body : JSON.stringify({newStudyName: newStudyName})
+    }).then(response => response.json());
+}
+