[DCJ-56] Screen for DAA creation (#2609)

DataBiosphere · Jul 17, 2024 · 27c2bbc · 27c2bbc
1 parent 742b1f4
commit 27c2bbc
Show file tree

Hide file tree

Showing 14 changed files with 888 additions and 100 deletions.
diff --git a/src/Routes.jsx b/src/Routes.jsx
@@ -44,6 +44,7 @@ import {checkEnv, envGroups} from './utils/EnvironmentUtils';
 import { DatasetUpdateForm } from './pages/DatasetUpdateForm';
 import DatasetSearch from './pages/DatasetSearch';
 import { StudyUpdateForm } from './pages/StudyUpdateForm';
+import EditDac from './pages/manage_dac/EditDac';
 
 const Routes = (props) => (
   <Switch>
@@ -72,6 +73,9 @@ const Routes = (props) => (
     <AuthenticatedRoute path="/admin_edit_user/:userId" component={AdminEditUser} props={props} rolesAllowed={[USER_ROLES.admin]} />
     <AuthenticatedRoute path="/manage_dac" component={ManageDac} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />
     <AuthenticatedRoute path="/manage_edit_dac/:dacId" component={ManageEditDac} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />
+    <AuthenticatedRoute path="/manage_add_dac" component={ManageEditDac} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />
+    {checkEnv(envGroups.DEV) && <AuthenticatedRoute path="/manage_edit_dac_daa/:dacId" component={EditDac} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />}
+    {checkEnv(envGroups.DEV) &&  <AuthenticatedRoute path="/manage_add_dac_daa" component={EditDac} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />}
     <AuthenticatedRoute path="/admin_manage_institutions" component={AdminManageInstitutions} props={props} rolesAllowed={[USER_ROLES.admin]} />
     <AuthenticatedRoute path="/researcher_console" component={ResearcherConsole} props={props} rolesAllowed={[USER_ROLES.researcher]}/>
     <AuthenticatedRoute path="/dar_collection/:collectionId" component={DarCollectionReview} props={props} rolesAllowed={[USER_ROLES.researcher, USER_ROLES.chairperson, USER_ROLES.member, USER_ROLES.signingOfficial]}/>

diff --git a/src/assets/DUOS_Uniform_Data_Access_Agreement.pdf b/src/assets/DUOS_Uniform_Data_Access_Agreement.pdf
diff --git a/src/components/SimpleTable.jsx b/src/components/SimpleTable.jsx
@@ -96,7 +96,7 @@ const DataRows = ({rowData, baseStyle, columnHeaders, rowWrapper = ({renderedRow
     const id = rowData[index][0].id;
     const mapKey = id || `noId-index-${index}`;
     if (rowData[index][0].striped) {
-      baseStyle.backgroundColor = index % 2 === 0 ? 'white' : '#e2e8f4';
+      baseStyle.backgroundColor = index % 2 === 0 ? 'white' : '#F7F8F9';
     }
     const renderedRow = (
       <div style={Object.assign({borderTop: '1px solid #f3f6f7'}, baseStyle)} key={`row-data-${mapKey}`} role="row" className={`row-data-${index}`}>

diff --git a/src/components/manage_dac_table/ManageDacTable.jsx b/src/components/manage_dac_table/ManageDacTable.jsx
@@ -149,22 +149,19 @@ export const ManageDacTable = function ManageDacTable(props) {
     setShowDatasetsModal,
     setShowMembersModal,
     setShowConfirmationModal,
-    setIsEditMode,
     setSelectedDac,
     setSelectedDatasets
   } = props;
 
   const editDac = useCallback((selectedDac) => {
     setShowEditPage(true);
     setSelectedDac(selectedDac);
-    setIsEditMode(true);
-  }, [setShowEditPage, setSelectedDac, setIsEditMode]);
+  }, [setShowEditPage, setSelectedDac]);
 
   const deleteDac = useCallback((selectedDac) => {
     setShowConfirmationModal(true);
     setSelectedDac(selectedDac);
-    setIsEditMode(false);
-  }, [setShowConfirmationModal, setSelectedDac, setIsEditMode]);
+  }, [setShowConfirmationModal, setSelectedDac]);
 
   const viewMembers = useCallback((selectedDac) => {
     setShowMembersModal(true);

diff --git a/src/components/manage_dac_table/ManageDacTableCellData.jsx b/src/components/manage_dac_table/ManageDacTableCellData.jsx
@@ -6,6 +6,7 @@ import {Styles} from '../../libs/theme';
 import {Delete} from '@mui/icons-material';
 import {Link} from 'react-router-dom';
 import editPencilIcon from '../../images/edit_pencil.svg';
+import { checkEnv, envGroups } from '../../utils/EnvironmentUtils';
 
 export function nameCellData({name = '- -', dac, viewMembers, dacId, label= 'dac-name'}) {
   return {
@@ -65,7 +66,7 @@ export function actionsCellData({dac, deleteDac, userRole}) {
       <div style={{ paddingTop: '5px' }}>
         <Link
           to={{
-            pathname: `/manage_edit_dac/${dac.dacId}`,
+            pathname: checkEnv(envGroups.DEV) ? `/manage_edit_dac_daa/${dac.dacId}` : `/manage_edit_dac/${dac.dacId}`,
             state: { userRole: userRole }
           }}
           data-tip={`Edit ${dac.name}`}

diff --git a/src/components/modals/UploadDaaModal.jsx b/src/components/modals/UploadDaaModal.jsx
@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import { Styles } from '../../libs/theme';
+import CloseIconComponent from '../CloseIconComponent';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import UploadFileRoundedIcon from '@mui/icons-material/UploadFileRounded';
+import Dropzone from 'react-dropzone';
+import Modal from 'react-modal';
+import styles from '../../pages/manage_dac/ManageDac.module.css';
+
+const getInitialState = () => {
+  return {
+    attachment: '',
+    validAttachment: true
+  };
+};
+
+export const UploadDaaModal = (props) => {
+  const [modalState, setModalState] = useState(getInitialState);
+
+  const okHandler = async () => {
+    props.onAttachmentChange(modalState.attachment);
+    props.onCloseRequest();
+  };
+
+  const closeHandler = () => {
+    props.onCloseRequest();
+  };
+
+  const attachmentChangeHandler = (e) => {
+    setModalState({
+      ...modalState,
+      attachment: e
+    });
+  };
+
+  const attachmentCancel = () => {
+    setModalState({
+      ...modalState,
+      attachment: ''
+    });
+  };
+
+  const iconStyle = {
+    verticalAlign: 'middle',
+    height: 40,
+    width: 30,
+    paddingLeft: '1rem',
+  };
+
+  return (
+    <Modal
+      isOpen={props.showModal}
+      onRequestClose={closeHandler}
+      color='common'
+      title='Upload a file'
+      action={{
+        label: 'Save',
+        handler: okHandler
+      }}
+      style={{
+        content: { ...Styles.MODAL.CONTENT },
+        overlay: {
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        }
+      }}
+    >
+      <div style={Styles.MODAL.CONTENT}>
+        <CloseIconComponent closeFn={closeHandler}/>
+        <div style={Styles.MODAL.TITLE_HEADER}>
+          Upload a file
+        </div>
+        <div style={{ borderBottom: '1px solid #1FB50' }} />
+        <Dropzone onDrop={(acceptedFiles) => attachmentChangeHandler(acceptedFiles)} maxFiles={1} multiple={false}>
+          {({ isDragActive, getRootProps, getInputProps }) => (
+            <div className={styles['upload-daa-dropzone']} style={{
+              backgroundColor: modalState.attachment.length !== 0 ? '#eef0f5' : (isDragActive ? '#6898c1' : '#eef0f5'),
+              borderStyle: modalState.attachment.length === 0 ? 'dashed' : 'none',
+              borderWidth: modalState.attachment.length === 0 ? '5px' : 'none',
+            }}>
+              {
+                modalState.attachment.length === 0 && (
+                  <div>
+                    <UploadFileRoundedIcon style={{fill:'#4d72aa', scale: '5'}}/>
+                  </div>
+                )
+              }
+              <div {...getRootProps()}>
+                <input {...getInputProps()} />
+                <b style={{color: '#4d72aa'}}>
+                  {modalState.attachment.length === 0 ? 'Drag and drop a file to upload or click to browse files' : modalState.attachment[0].name}
+                </b>
+                {
+                  modalState.attachment.length !== 0 && (
+                    <button
+                      style={{
+                        background: 'transparent',
+                        border: 'none',
+                        outline: 'none',
+                      }}
+                      onClick={attachmentCancel}
+                    >
+                      <HighlightOffIcon fill={'#275c91'} style={iconStyle} />
+                    </button>
+                  )
+                }
+              </div>
+            </div>
+          )}
+        </Dropzone>
+        {
+          modalState.attachment.length !== 0 && (
+            <strong style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: '20px', fontSize: '1.6rem', textDecoration: 'underline'}}>Clicking Save will create this new Data Access Agreement and associate it with this DAC.</strong>
+          )
+        }
+        <div className='inline-block' style={{paddingBottom: '20px', marginTop:'20px'}}>
+          <button
+            id='btn_save'
+            onClick={okHandler}
+            className='f-right btn-primary common-background'
+          >
+            Save
+          </button>
+          <div style={{ marginLeft: '100px' }}>
+            <button
+              id='btn_cancel'
+              onClick={closeHandler}
+              className='f-right btn-secondary'
+            >
+            Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
diff --git a/src/libs/ajax/DAA.js b/src/libs/ajax/DAA.js
@@ -1,6 +1,7 @@
 import fileDownload from 'js-file-download';
 import { getApiUrl } from '../ajax';
 import { Config } from '../config';
+import { isFileEmpty } from '../utils';
 import axios from 'axios';
 
 
@@ -64,4 +65,43 @@ export const DAA = {
       fileDownload(response.data, daaFileName);
     });
   },
-};
+
+  createDaa: async (file, dacId) => {
+    if (isFileEmpty(file)) {
+      return Promise.resolve({ data: null });
+    } else {
+      let authOpts = Config.authOpts();
+      authOpts.headers['Content-Type'] = 'multipart/form-data';
+      let formData = new FormData();
+      formData.append('file', file);
+      const url = `${await getApiUrl()}/api/daa/dac/${dacId}`;
+      return axios.post(url, formData, authOpts);
+    }
+  },
+
+  addDaaToDac: async (daaId, dacId) => {
+    const url = `${await getApiUrl()}/api/daa/${daaId}/dac/${dacId}`;
+    const res = await axios.put(url, {}, Config.authOpts());
+    return res.status;
+  },
+
+  deleteDaa: async (daaId) => {
+    const url = `${await getApiUrl()}/api/daa/${daaId}`;
+    const res = await axios.delete(url, Config.authOpts());
+    return res;
+  },
+
+  deleteDacDaaRelationship: async (daaId, dacId) => {
+    const url = `${await getApiUrl()}/api/daa/${daaId}/dac/${dacId}`;
+    const res = await axios.delete(url, Config.authOpts());
+    return res;
+  },
+
+  // NOTE: In the future, this functionality should be handled in the backend and should not be
+  // dependent on the UI.
+  sendDaaUpdateEmails: async (dacId, oldDaaId, newDaaName) => {
+    const url = `${await getApiUrl()}/api/daa/${dacId}/updated/${oldDaaId}/${newDaaName}`;
+    const res = await axios.post(url, {}, Config.authOpts());
+    return res.status;
+  }
+};
diff --git a/src/libs/models.js b/src/libs/models.js
@@ -6,7 +6,8 @@ export const Models = {
     createDate: null,
     updateDate: null,
     chairpersons: [],
-    members: []
+    members: [],
+    associatedDaa: null
   },
   dar: {
     researcherProperties: [],