OCLOMRS-311: Implement delete/retire mapping functionality

openmrs · Dec 6, 2018 · 082f805 · 082f805
1 parent 27a8460
commit 082f805
Show file tree

Hide file tree

Showing 18 changed files with 433 additions and 37 deletions.
diff --git a/src/components/dictionaryConcepts/components/ActionButtons.jsx b/src/components/dictionaryConcepts/components/ActionButtons.jsx
@@ -5,7 +5,7 @@ import AddMapping from './AddMapping';
 import ViewConceptMappings from './ViewConceptMappings';
 
 const ActionButtons = ({
-  actionButtons, id, concept_class, showDeleteModal, version_url, mappings, source, mappingLimit, display_name,
+  actionButtons, id, concept_class, showDeleteModal, version_url, mappings, source, mappingLimit, display_name, showDeleteMappingModal, handleDeleteMapping,
 }) => {
   const dictionaryPathName = localStorage.getItem('dictionaryPathName');
   let showExtra;
@@ -33,6 +33,8 @@ const ActionButtons = ({
             displayName={display_name}
             mappingLimit={mappingLimit}
             source={source}
+            showDeleteMappingModal={showDeleteMappingModal}
+            handleDeleteMapping={handleDeleteMapping}
           />
 
           )
@@ -57,6 +59,9 @@ ActionButtons.propTypes = {
   concept_class: PropTypes.string.isRequired,
   showDeleteModal: PropTypes.func.isRequired,
   version_url: PropTypes.string.isRequired,
+  handleDeleteMapping: PropTypes.func.isRequired,
+  showDeleteMappingModal: PropTypes.func.isRequired,
+  display_name: PropTypes.string.isRequired,
 };
 
 export default ActionButtons;
diff --git a/src/components/dictionaryConcepts/components/ConceptTable.jsx b/src/components/dictionaryConcepts/components/ConceptTable.jsx
@@ -22,6 +22,8 @@ const ConceptTable = ({
   closeDeleteModal,
   openDeleteModal,
   filterConcept,
+  showDeleteMappingModal,
+  handleDeleteMapping,
 }) => {
   const filter = { filterMethod: filterConcept, filterAll: true };
   if (concepts.length > 0) {
@@ -68,7 +70,9 @@ const ConceptTable = ({
                 const props = {
                   showDeleteModal,
                   handleDelete,
+                  handleDeleteMapping,
                   mappingLimit: conceptLimit,
+                  showDeleteMappingModal,
                 };
                 const renderButtons = username === concept.owner || (
                   concept.owner === org.name && org.userIsMember
@@ -104,6 +108,8 @@ ConceptTable.propTypes = {
   openDeleteModal: PropTypes.bool,
   closeDeleteModal: PropTypes.func.isRequired,
   filterConcept: PropTypes.func.isRequired,
+  handleDeleteMapping: PropTypes.func.isRequired,
+  showDeleteMappingModal: PropTypes.func.isRequired,
 };
 ConceptTable.defaultProps = {
   openDeleteModal: false,

diff --git a/src/components/dictionaryConcepts/components/RemoveMappings.jsx b/src/components/dictionaryConcepts/components/RemoveMappings.jsx
@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import RemoveMappingsModal from './RemoveMappingsModal';
+
+class RemoveMappings extends Component {
+  state = {
+    modal: false,
+  };
+
+  handleToggle = () => {
+    const { modal } = this.state;
+    this.setState({
+      modal: !modal,
+    });
+  };
+
+  render() {
+    const { modal } = this.state;
+    const { url, retired, handleDeleteMapping, showDeleteMappingModal } = this.props;
+    return (
+      <React.Fragment>
+        { !retired ? (
+          <button
+            type="button"
+            className="btn btn-sm mb-1 actionButtons"
+            onClick={() => {
+              this.handleToggle();
+              showDeleteMappingModal(url);
+            }
+        }
+          >
+          Remove
+            <RemoveMappingsModal
+              modal={modal}
+              handleToggle={this.handleToggle}
+              handleDeleteMapping={handleDeleteMapping}
+              url={url}
+            />
+          </button>) : (
+            <button
+              type="button"
+              className="btn btn-sm mb-1 actionButtons disabled"
+            >
+              Retired
+            </button>
+        )
+      }
+      </React.Fragment>
+    );
+  }
+}
+
+RemoveMappings.propTypes = {
+  handleDeleteMapping: PropTypes.func.isRequired,
+  showDeleteMappingModal: PropTypes.func.isRequired,
+  url: PropTypes.string.isRequired,
+  retired: PropTypes.bool.isRequired,
+};
+
+export default RemoveMappings;
diff --git a/src/components/dictionaryConcepts/components/RemoveMappingsModal.jsx b/src/components/dictionaryConcepts/components/RemoveMappingsModal.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  Button, Modal, ModalHeader, ModalFooter,
+} from 'reactstrap';
+import PropTypes from 'prop-types';
+
+const removeMapping = (props) => {
+  const {
+    handleDeleteMapping,
+    modal,
+    handleToggle,
+    url,
+  } = props;
+  return (
+    <div>
+      <Modal isOpen={modal} toggle={handleToggle}>
+        <ModalHeader toggle={handleToggle}>
+          Are you sure you want to Remove this Mapping?
+        </ModalHeader>
+        <ModalFooter>
+          <Button id="retireMapping" color="danger" onClick={() => { handleDeleteMapping(url); handleToggle(); }}>Remove Mapping</Button>
+          {' '}
+          <Button color="secondary" onClick={handleToggle}>Cancel</Button>
+        </ModalFooter>
+      </Modal>
+    </div>
+  );
+};
+
+removeMapping.propTypes = {
+  handleDeleteMapping: PropTypes.func.isRequired,
+  modal: PropTypes.bool.isRequired,
+  handleToggle: PropTypes.func.isRequired,
+  url: PropTypes.string.isRequired,
+};
+
+export default removeMapping;
diff --git a/src/components/dictionaryConcepts/components/ViewConceptMappings.jsx b/src/components/dictionaryConcepts/components/ViewConceptMappings.jsx
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import ViewMappingsModal from './ViewMappingsModal';
 
 class ViewConceptMappings extends Component {
@@ -15,7 +16,9 @@ class ViewConceptMappings extends Component {
 
   render() {
     const { modal } = this.state;
-    const { mappings, displayName, source } = this.props;
+    const {
+      mappings, displayName, showDeleteMappingModal, handleDeleteMapping, source,
+    } = this.props;
     return (
       <React.Fragment>
         <button
@@ -24,11 +27,25 @@ class ViewConceptMappings extends Component {
           onClick={this.handleToggle}
         >
           View mappings
-          <ViewMappingsModal mappings={mappings} source={source} displayName={displayName} modal={modal} handleToggle={this.handleToggle} />
+          <ViewMappingsModal
+            mappings={mappings}
+            displayName={displayName}
+            source={source}
+            modal={modal}
+            handleDeleteMapping={handleDeleteMapping}
+            handleToggle={this.handleToggle}
+            showDeleteMappingModal={showDeleteMappingModal}
+          />
         </button>
       </React.Fragment>
     );
   }
 }
 
+ViewConceptMappings.propTypes = {
+  displayName: PropTypes.string.isRequired,
+  handleDeleteMapping: PropTypes.func.isRequired,
+  showDeleteMappingModal: PropTypes.func.isRequired,
+};
+
 export default ViewConceptMappings;
diff --git a/src/components/dictionaryConcepts/components/ViewMappingsModal.jsx b/src/components/dictionaryConcepts/components/ViewMappingsModal.jsx
@@ -8,6 +8,7 @@ import {
 import { conceptsProps } from '../proptypes';
 import AddMapping from './AddMapping';
 import { editMapping } from '../../../redux/actions/dictionaries/dictionaryActionCreators';
+import RemoveMappings from './RemoveMappings';
 
 export const ViewMappingsModal = ({
   handleToggle,
@@ -18,6 +19,8 @@ export const ViewMappingsModal = ({
   source,
   editMapping,
   concepts,
+  handleDeleteMapping,
+  showDeleteMappingModal,
 }) => (
   <div className="col-9">
     <Modal isOpen={modal} className="modal-lg">
@@ -55,17 +58,25 @@ export const ViewMappingsModal = ({
                 id: 'row',
                 filterable: false,
                 sortable: false,
-                Cell: row => (
-                  <AddMapping
-                    buttonName="Edit mapping"
-                    to_concept_url={mappings[row.index].to_concept_url}
-                    url={mappings[row.index].url}
-                    map_type={mappings[row.index].map_type}
-                    to_concept_name={mappings[row.index].to_concept_name}
-                    source={source}
-                    editMapping={editMapping}
-                    concepts={concepts}
-                  />
+                Cell: ({ original: mapping }) => (
+                  <React.Fragment>
+                    <AddMapping
+                      buttonName="Edit"
+                      to_concept_url={mapping.to_concept_url}
+                      url={mapping.url}
+                      map_type={mapping.map_type}
+                      to_concept_name={mapping.to_concept_name}
+                      source={source}
+                      editMapping={editMapping}
+                      concepts={concepts}
+                    />
+                    <RemoveMappings
+                      handleToggle={handleToggle}
+                      showDeleteMappingModal={showDeleteMappingModal}
+                      handleDeleteMapping={handleDeleteMapping}
+                      {...mapping}
+                    />
+                  </React.Fragment>
                 ),
               },
             ]}
@@ -86,6 +97,8 @@ ViewMappingsModal.propTypes = {
   modal: PropTypes.bool.isRequired,
   handleToggle: PropTypes.func.isRequired,
   mappings: conceptsProps.mappings.isRequired,
+  showDeleteMappingModal: PropTypes.func.isRequired,
+  handleDeleteMapping: PropTypes.func.isRequired,
 };
 
 export const mapStateToProps = state => ({

diff --git a/src/components/dictionaryConcepts/containers/DictionaryConcepts.jsx b/src/components/dictionaryConcepts/containers/DictionaryConcepts.jsx
@@ -15,7 +15,7 @@ import {
   filterByClass,
   paginateConcepts,
 } from '../../../redux/actions/concepts/dictionaryConcepts';
-import { removeDictionaryConcept } from '../../../redux/actions/dictionaries/dictionaryActionCreators';
+import { removeDictionaryConcept, removeConceptMapping } from '../../../redux/actions/dictionaries/dictionaryActionCreators';
 import { fetchMemberStatus } from '../../../redux/actions/user/index';
 
 export class DictionaryConcepts extends Component {
@@ -41,6 +41,7 @@ export class DictionaryConcepts extends Component {
     fetchMemberStatus: PropTypes.func.isRequired,
     userIsMember: PropTypes.bool.isRequired,
     removeDictionaryConcept: PropTypes.func.isRequired,
+    removeConceptMapping: PropTypes.func.isRequired,
   };
 
   constructor(props) {
@@ -150,6 +151,17 @@ export class DictionaryConcepts extends Component {
     this.setState({ openDeleteModal: false });
   }
 
+  handleDeleteMapping = () => {
+    const { data } = this.state;
+    this.props.removeConceptMapping(data);
+  }
+
+  handleShowDeleteMapping = (url) => {
+    this.setState({
+      data: { references: [url] },
+    });
+  };
+
   filterCaseInsensitive = (filter, rows) => {
     const id = filter.pivotId || filter.id;
     return matchSorter(rows, filter.value, { keys: [id] });
@@ -210,8 +222,10 @@ export class DictionaryConcepts extends Component {
               org={org}
               locationPath={this.props.match.params}
               showDeleteModal={this.handleShowDelete}
+              showDeleteMappingModal={this.handleShowDeleteMapping}
               url={this.state.versionUrl}
               handleDelete={this.handleDelete}
+              handleDeleteMapping={this.handleDeleteMapping}
               openDeleteModal={openDeleteModal}
               closeDeleteModal={this.closeDeleteModal}
               filterConcept={this.filterCaseInsensitive}
@@ -243,5 +257,6 @@ export default connect(
     paginateConcepts,
     fetchMemberStatus,
     removeDictionaryConcept,
+    removeConceptMapping,
   },
 )(DictionaryConcepts);
diff --git a/src/redux/actions/dictionaries/dictionaryActionCreators.js b/src/redux/actions/dictionaries/dictionaryActionCreators.js
@@ -7,6 +7,7 @@ import {
   dictionaryIsSuccess,
   isErrored,
   removeConcept,
+  removeMapping,
   fetchingVersions,
   dictionaryConceptsIsSuccess,
   realisingHeadSuccess,
@@ -119,6 +120,23 @@ export const removeDictionaryConcept = (data, type, owner, collectionId) => disp
       });
     };
 
+export const removeConceptMapping = (data) => dispatch => {
+  return api.dictionaries
+    .removeConceptMapping(data)
+    .then(
+      () => {
+        dispatch(removeMapping(data.references[0]));
+        notify.show(
+          'Successfully removed mapping from concept',
+          'success', 1000
+        );
+      }
+    )
+    .catch((error) => {
+      notify.show("Network Error. Please try again later!",'error', 6000)
+    });
+};
+
 export const fetchVersions = data => (dispatch) => {
   return api.dictionaries
     .fetchingVersions(data)

diff --git a/src/redux/actions/dictionaries/dictionaryActions.js b/src/redux/actions/dictionaries/dictionaryActions.js
@@ -11,6 +11,7 @@ import {
   FETCH_DICTIONARY_CONCEPT,
   EDIT_DICTIONARY_SUCCESS,
   REMOVE_CONCEPT,
+  REMOVE_MAPPING,
   CREATING_RELEASED_VERSION,
   CREATING_RELEASED_VERSION_FAILED,
   RELEASING_HEAD_VERSION,
@@ -71,6 +72,11 @@ export const removeConcept = payload => ({
   payload,
 });
 
+export const removeMapping = payload => ({
+  type: REMOVE_MAPPING,
+  payload,
+});
+
 export const fetchingVersions = payload => ({
   type: FETCHING_VERSIONS,
   payload,

diff --git a/src/redux/actions/types.js b/src/redux/actions/types.js
@@ -16,6 +16,7 @@ export const CLEAR_DICTIONARIES = '[dictionaries] clear dictionaries';
 export const FETCHING_DICTIONARY = '[dictionary] fetch dictionary';
 export const CLEAR_DICTIONARY = '[dictionary] clear dictionary';
 export const REMOVE_CONCEPT = '[concepts] remove concept';
+export const REMOVE_MAPPING = '[mappings] remove mapping';
 export const FETCHING_VERSIONS = '[dictionary] fetch versions of a dictionary';
 export const RELEASING_HEAD_VERSION = '[dictionary] releasing HEAD version of a dictionary';
 export const EDIT_DICTIONARY_SUCCESS = '[dictionary] edit dictionary success';

diff --git a/src/redux/api.js b/src/redux/api.js
@@ -42,7 +42,12 @@ export default {
       instance
         .delete(`/${type}/${owner}/collections/${collectionId}/references/`, {data:data})
         .then(response => response.data),
-
+
+    removeConceptMapping: (data) =>
+      instance
+        .delete(data.references[0], { data: data })
+        .then(response => response.data),
+
     fetchingVersions: (data) =>
       instance
       .get(`${data}`)