Merge pull request #137 from NIH-NCPI/FD-1792/assign-mappings-button

FD-1792 - Preferred Terminology Mapping Via Table Button

src/components/Projects/Terminologies/AssignMappingsViaButton.jsx

@@ -0,0 +1,137 @@
+import { useContext, useEffect, useState } from 'react';
+import { Form, message, Modal, notification } from 'antd';
+import { AssignMappingsCheckboxes } from '../../Manager/MappingsFunctions/AssignMappingsCheckboxes';
+import { myContext } from '../../../App';
+import { SearchContext } from '../../../Contexts/SearchContext';
+import { MappingContext } from '../../../Contexts/MappingContext';
+import { ModalSpinner } from '../../Manager/Spinner';
+
+export const AssignMappingsViaButton = ({
+  assignMappingsViaButton,
+  setAssignMappingsViaButton,
+  terminology,
+}) => {
+  const [form] = Form.useForm();
+
+  const { vocabUrl, user } = useContext(myContext);
+  const { prefTerminologies, setApiResults } = useContext(SearchContext);
+  const { setMapping } = useContext(MappingContext);
+  const [terminologiesToMap, setTerminologiesToMap] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [mappingProp, setMappingProp] = useState('');
+  const [selectedBoxes, setSelectedBoxes] = useState([]);
+
+  const onClose = () => {
+    setApiResults([]);
+  };
+  const fetchTerminologies = () => {
+    setLoading(true);
+    const fetchPromises = prefTerminologies?.map(pref =>
+      fetch(`${vocabUrl}/${pref?.reference}`).then(response => response.json())
+    );
+
+    Promise.all(fetchPromises)
+      .then(results => {
+        // Once all fetch calls are resolved, set the combined data
+        setTerminologiesToMap(results);
+      })
+      .catch(error => {
+        notification.error({
+          message: 'Error',
+          description: 'An error occurred. Please try again.',
+        });
+      })
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    fetchTerminologies();
+  }, [assignMappingsViaButton]);
+
+  const handleSubmit = values => {
+    setLoading(true);
+    const selectedMappings = selectedBoxes?.map(item => ({
+      code: item.code,
+      display: item.display,
+      description: Array.isArray(item.description)
+        ? item.description[0]
+        : item.description,
+      system: item.system,
+    }));
+    const mappingsDTO = {
+      mappings: selectedMappings,
+      editor: user.email,
+    };
+
+    fetch(
+      `${vocabUrl}/Terminology/${terminology.id}/mapping/${assignMappingsViaButton.code}`,
+      {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(mappingsDTO),
+      }
+    )
+      .then(res => {
+        if (res.ok) {
+          return res.json();
+        } else {
+          throw new Error('An unknown error occurred.');
+        }
+      })
+      .then(data => {
+        setMapping(data.codes);
+        form.resetFields();
+        setAssignMappingsViaButton(false);
+        message.success('Changes saved successfully.');
+      })
+      .finally(() => setLoading(false));
+  };
+
+  return (
+    <Modal
+      open={!!assignMappingsViaButton}
+      width={'60%'}
+      onOk={() => {
+        form.validateFields().then(values => {
+          handleSubmit(values);
+          onClose();
+        });
+      }}
+      onCancel={() => {
+        form.resetFields();
+        onClose();
+        setAssignMappingsViaButton(false);
+      }}
+      styles={{
+        body: {
+          minHeight: '55vh',
+          maxHeight: '55vh',
+          overflowY: 'auto',
+        },
+      }}
+      closeIcon={false}
+      maskClosable={false}
+      destroyOnClose={true}
+      cancelButtonProps={{ disabled: loading }}
+      okButtonProps={{ disabled: loading }}
+    >
+      {loading ? (
+        <ModalSpinner />
+      ) : (
+        <AssignMappingsCheckboxes
+          form={form}
+          terminologiesToMap={terminologiesToMap}
+          selectedBoxes={selectedBoxes}
+          setSelectedBoxes={setSelectedBoxes}
+          searchProp={
+            assignMappingsViaButton?.display
+              ? assignMappingsViaButton.display
+              : assignMappingsViaButton?.code
+          }
+        />
+      )}
+    </Modal>
+  );
+};

src/components/Projects/Terminologies/Terminology.jsx

@@ -28,6 +28,7 @@ import { PreferredTerminology } from './PreferredTerminology';
 import { SearchContext } from '../../../Contexts/SearchContext';
 import { FilterSelect } from '../../Manager/MappingsFunctions/FilterSelect';
 import { cleanedName } from '../../Manager/Utilitiy';
+import { AssignMappingsViaButton } from './AssignMappingsViaButton';
 
 export const Terminology = () => {
   const [form] = Form.useForm();
@@ -43,12 +44,12 @@ export const Terminology = () => {
     setGetMappings,
     mapping,
     setMapping,
-    setAssignMappings,
   } = useContext(MappingContext);
 
   const [pageSize, setPageSize] = useState(
     parseInt(localStorage.getItem('pageSize'), 10) || 10
   );
+  const [assignMappingsViaButton, setAssignMappingsViaButton] = useState(false);
   const handleTableChange = (current, size) => {
     setPageSize(size);
   };
@@ -121,12 +122,21 @@ It then shows the mappings as table data and alows the user to delete a mapping
   const noMapping = variable => (
     <Button
       onClick={() => {
-        setGetMappings({ display: variable.display, code: variable.code });
+        prefTerminologies.length > 0
+          ? setAssignMappingsViaButton({
+              display: variable.display,
+              code: variable.code,
+            })
+          : setGetMappings({
+              display: variable.display,
+              code: variable.code,
+            });
       }}
     >
-      Get Mappings
+      {prefTerminologies?.length > 0 ? 'Assign Mappings' : 'Get Mappings'}
     </Button>
   );
+
   const matchCode = variable => {
     if (!mapping?.length) {
       return noMapping(variable);
@@ -140,7 +150,9 @@ It then shows the mappings as table data and alows the user to delete a mapping
       return variableMappings.mappings.map(code => (
         <div className="mapping" key={code.display}>
           <span className="mapping-display">
-            <Tooltip title={code.code}>{code.display}</Tooltip>
+            <Tooltip title={code.code}>
+              {code.display ? code.display : code.code}
+            </Tooltip>
           </span>
           <span
             className="remove-mapping"
@@ -184,7 +196,7 @@ It then shows the mappings as table data and alows the user to delete a mapping
 
   useEffect(() => {
     setDataSource(tableData(terminology));
-  }, [terminology, mapping]);
+  }, [terminology, mapping, prefTerminologies]);
 
   // Fetches the terminology using the terminologyId param and sets 'terminology' to the response.
   // Fetches the mappings for the terminology and sets the response to 'mapping'
@@ -433,6 +445,11 @@ It then shows the mappings as table data and alows the user to delete a mapping
             terminology={terminology}
             setTerminology={setTerminology}
           />
+          <AssignMappingsViaButton
+            assignMappingsViaButton={assignMappingsViaButton}
+            setAssignMappingsViaButton={setAssignMappingsViaButton}
+            terminology={terminology}
+          />
         </div>
       )}
     </>