OCLOMRS-340: Disable buttons after making a request (#256)

openmrs · Dec 7, 2018 · dcee939 · dcee939
1 parent 8ece4de
commit dcee939
Show file tree

Hide file tree

Showing 18 changed files with 78 additions and 43 deletions.
diff --git a/src/components/bulkConcepts/addBulkConcepts.jsx b/src/components/bulkConcepts/addBulkConcepts.jsx
@@ -74,7 +74,9 @@ export class AddBulkConcepts extends Component {
       },
       cielConcepts,
       language,
+      isFetching,
     } = this.props;
+    const disableButton = ((this.state.cielConcepts.length === 0) || isFetching);
     const { conceptLimit } = this.state;
     return (
       <div className="container-fluid add-bulk-concepts custom-max-width">
@@ -145,7 +147,7 @@ export class AddBulkConcepts extends Component {
           </Link>
           {' '}
           {this.state.cielConcepts.length === 0 ? (
-            <button type="button" className="btn btn-primary" id="btn-add-all" disabled>
+            <button type="button" className="btn btn-primary" id="btn-add-all" disabled={disableButton}>
               <i className="fa fa-plus" /> Add All Selected
             </button>
           ) : (
@@ -154,6 +156,7 @@ export class AddBulkConcepts extends Component {
               className="btn btn-primary btn-add-all"
               id="btn-add-all"
               onClick={this.handleAddAll}
+              disabled={disableButton}
             >
               <i className="fa fa-plus" /> Add All Selected
             </button>

diff --git a/src/components/bulkConcepts/component/ActionButtons.jsx b/src/components/bulkConcepts/component/ActionButtons.jsx
@@ -24,6 +24,7 @@ export class ActionButtons extends Component {
     super(props);
     this.state = {
       open: false,
+      disableButton: false,
     };
   }
 
@@ -47,6 +48,7 @@ export class ActionButtons extends Component {
   };
 
   addConceptButton = (id, url, display_name) => {
+    this.setState({ disableButton: true });
     notify.show('Adding...', 'warning', 800);
 
     this.fetchPreview(id);
@@ -57,6 +59,7 @@ export class ActionButtons extends Component {
   };
 
   render() {
+    const { disableButton } = this.state;
     return (
       <React.Fragment>
         <button
@@ -69,6 +72,7 @@ export class ActionButtons extends Component {
             this.props.preview.display_name,
           )
           }
+          disabled={disableButton}
         >
           Add concept
         </button>

diff --git a/src/components/dashboard/components/dictionary/DictionaryContainer.jsx b/src/components/dashboard/components/dictionary/DictionaryContainer.jsx
@@ -228,6 +228,7 @@ export class DictionaryOverview extends Component {
                 showVersionModal={this.showVersionModal}
                 openVersionModal={this.state.openVersionModal}
                 handleChange={this.handleChange}
+                disableButton={loader}
                 handleCreateVersion={this.handleCreateVersion}
                 versionId={this.state.versionId}
                 versionDescription={this.state.versionDescription}

diff --git a/src/components/dashboard/components/dictionary/DictionaryDetailCard.jsx b/src/components/dashboard/components/dictionary/DictionaryDetailCard.jsx
@@ -39,6 +39,7 @@ const DictionaryDetailCard = (props) => {
     openVersionModal,
     handleCreateVersion,
     handleChange,
+    disableButton,
     versionDescription,
     versionId,
     inputLength,
@@ -255,6 +256,7 @@ Browse in traditional OCL
         click={hideVersionModal}
         handleCreateVersion={handleCreateVersion}
         handleChange={handleChange}
+        disableButton={disableButton}
         versionId={versionId}
         versionDescription={versionDescription}
         inputLength={inputLength}
@@ -292,6 +294,7 @@ DictionaryDetailCard.propTypes = {
   download: PropTypes.func.isRequired,
   versionDescription: PropTypes.string.isRequired,
   versionId: PropTypes.string.isRequired,
+  disableButton: PropTypes.bool.isRequired,
 };
 
 export default DictionaryDetailCard;
diff --git a/src/components/dashboard/components/dictionary/common/DictionaryModal.jsx b/src/components/dashboard/components/dictionary/common/DictionaryModal.jsx
@@ -31,6 +31,7 @@ export class DictionaryModal extends React.Component {
       },
       errors: {},
       supportedLocalesOptions: [],
+      disableButton: false,
     };
   }
 
@@ -150,6 +151,11 @@ export class DictionaryModal extends React.Component {
     return errors;
   };
 
+  addDictionary = (e) => {
+    this.setState({ disableButton: true });
+    this.onSubmit(e);
+  }
+
   hideModal = () => {
     this.setState({
       data: {
@@ -196,7 +202,7 @@ export class DictionaryModal extends React.Component {
   }
 
   render() {
-    const { data, errors } = this.state;
+    const { data, errors, disableButton } = this.state;
     const {
       organizations, dictionary,
       isEditingDictionary,
@@ -425,7 +431,8 @@ export class DictionaryModal extends React.Component {
             <Button
               className="btn btn-outline-info"
               id="addDictionary"
-              onClick={this.onSubmit}
+              onClick={this.addDictionary}
+              disabled={disableButton}
             >
               {this.props.buttonname}
               {' '}
@@ -434,6 +441,7 @@ export class DictionaryModal extends React.Component {
               className="btn btn-outline-danger test-btn-cancel"
               id="cancel"
               onClick={this.hideModal}
+              disabled={disableButton}
             >
               Cancel
             </Button>

diff --git a/src/components/dashboard/components/dictionary/common/ReleaseVersionModal.jsx b/src/components/dashboard/components/dictionary/common/ReleaseVersionModal.jsx
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 
 const ReleaseVersionModal = (props) => {
   const {
-    show, click, handleCreateVersion, handleChange, versionId, versionDescription, inputLength,
+    show, click, handleCreateVersion, handleChange, versionId, versionDescription, inputLength, disableButton,
   } = props;
   return (
     <div className="modal-container">
@@ -46,23 +46,15 @@ const ReleaseVersionModal = (props) => {
         </ModalBody>
 
         <ModalFooter>
-          {inputLength > 0
-            ? (
-              <Button
-                className="btn-sm btn-outline-info version"
-                id="saveReleaseVersion"
-                onClick={handleCreateVersion}
-              >
-               Release
-              </Button>
-            ) : (
-              <Button
-                className="btn-sm btn-outline-info version-disabled"
-                disabled
-              >
-               Release
-              </Button>
-            )}
+          <Button
+            className="btn-sm btn-outline-info version"
+            id="saveReleaseVersion"
+            onClick={handleCreateVersion}
+            disabled={inputLength === 0 || disableButton}
+          >
+            Release
+          </Button>
+
           <Button
             className="btn-sm btn-outline-danger test-btn-cancel"
             id="sub-cancel"
@@ -84,6 +76,7 @@ ReleaseVersionModal.propTypes = {
   versionId: PropTypes.string,
   versionDescription: PropTypes.string,
   inputLength: PropTypes.number.isRequired,
+  disableButton: PropTypes.bool.isRequired,
 };
 
 ReleaseVersionModal.defaultProps = {

diff --git a/src/components/dictionaryConcepts/components/ConceptTable.jsx b/src/components/dictionaryConcepts/components/ConceptTable.jsx
@@ -35,6 +35,7 @@ const ConceptTable = ({
           conceptUrl={url}
           conceptType={locationPath.type}
           handleDelete={handleDelete}
+          disableButton={loading}
           openDeleteModal={openDeleteModal}
           closeDeleteModal={closeDeleteModal}
         />

diff --git a/src/components/dictionaryConcepts/components/CreateConceptForm.jsx b/src/components/dictionaryConcepts/components/CreateConceptForm.jsx
@@ -175,11 +175,11 @@ const CreateConceptForm = props => (
         </div>
       </div>
       <div className="submit-button text-left">
-        <button className="btn btn-sm bg-blue col-2 mr-1" type="submit">
+        <button className="btn btn-sm bg-blue col-2 mr-1" type="submit" disabled={props.disableButton}>
           {props.isEditConcept ? 'Update' : 'Create' }
         </button>
         <Link to={props.path} className="collection-name small-text">
-          <button className="btn btn-sm  col-2 btn-danger" type="submit">
+          <button className="btn btn-sm  col-2 btn-danger" type="submit" disabled={props.disableButton}>
             Cancel
           </button>
         </Link>
@@ -200,6 +200,7 @@ CreateConceptForm.propTypes = {
   path: PropTypes.string.isRequired,
   toggleUUID: PropTypes.func.isRequired,
   handleChange: PropTypes.func.isRequired,
+  disableButton: PropTypes.bool.isRequired,
   handleSubmit: PropTypes.func.isRequired,
   editable: PropTypes.bool.isRequired,
   isEditConcept: PropTypes.bool,

diff --git a/src/components/dictionaryConcepts/components/RemoveConcept.jsx b/src/components/dictionaryConcepts/components/RemoveConcept.jsx
@@ -3,16 +3,16 @@ import { Button, Modal, ModalHeader, ModalFooter } from 'reactstrap';
 import PropTypes from 'prop-types';
 
 const removeConcept = (props) => {
-  const { handleDelete, openDeleteModal, closeDeleteModal } = props;
+  const { handleDelete, openDeleteModal, closeDeleteModal, disableButton } = props;
   return (
     <div>
       <Modal isOpen={openDeleteModal} toggle={closeDeleteModal}>
         <ModalHeader toggle={closeDeleteModal}>
         Are you sure you want to Remove this Concept?
         </ModalHeader>
         <ModalFooter>
-          <Button color="danger" onClick={handleDelete}>Remove concept</Button>{' '}
-          <Button color="secondary" onClick={closeDeleteModal}>Cancel</Button>
+          <Button color="danger" onClick={handleDelete} disabled={disableButton}>Remove concept</Button>{' '}
+          <Button color="secondary" onClick={closeDeleteModal} disabled={disableButton}>Cancel</Button>
         </ModalFooter>
       </Modal>
     </div>
@@ -23,6 +23,7 @@ removeConcept.propTypes = {
   handleDelete: PropTypes.func.isRequired,
   closeDeleteModal: PropTypes.func.isRequired,
   openDeleteModal: PropTypes.bool,
+  disableButton: PropTypes.bool.isRequired,
 };
 
 removeConcept.defaultProps = {

diff --git a/src/components/dictionaryConcepts/containers/CreateConcept.jsx b/src/components/dictionaryConcepts/containers/CreateConcept.jsx
@@ -48,6 +48,7 @@ export class CreateConcept extends Component {
     addNewAnswer: PropTypes.func.isRequired,
     removeAnswer: PropTypes.func.isRequired,
     answer: PropTypes.array.isRequired,
+    loading: PropTypes.bool.isRequired,
   };
 
   constructor(props) {
@@ -228,6 +229,7 @@ export class CreateConcept extends Component {
           conceptType, dictionaryName,
         },
       },
+      loading,
     } = this.props;
     const concept = conceptType ? ` ${conceptType}` : '';
     const path = localStorage.getItem('dictionaryPathName');
@@ -262,6 +264,7 @@ Concept
                 path={path}
                 state={this.state}
                 handleChange={this.handleChange}
+                disableButton={loading}
                 handleSelections={this.handleNameLocale}
                 handleDescription={this.handleDescriptionLocale}
                 handleSubmit={this.handleSubmit}
@@ -288,6 +291,7 @@ export const mapStateToProps = state => ({
   newConcept: state.concepts.newConcept,
   addedConcept: state.concepts.addConceptToDictionary,
   answer: state.concepts.answer,
+  loading: state.concepts.loading,
 });
 export default connect(
   mapStateToProps,

diff --git a/src/components/dictionaryConcepts/containers/EditConcept.jsx b/src/components/dictionaryConcepts/containers/EditConcept.jsx
@@ -50,6 +50,7 @@ export class EditConcept extends Component {
     answer: PropTypes.array.isRequired,
     addNewAnswer: PropTypes.func.isRequired,
     removeAnswer: PropTypes.func.isRequired,
+    loading: PropTypes.bool.isRequired,
   };
 
   constructor(props) {
@@ -222,6 +223,7 @@ export class EditConcept extends Component {
         },
       },
       existingConcept,
+      loading,
     } = this.props;
     const concept = conceptType ? ` ${conceptType}` : '';
     const path = localStorage.getItem('dictionaryPathName');
@@ -268,6 +270,7 @@ Concept
                 existingConcept={existingConcept}
                 isEditConcept={this.state.isEditConcept}
                 answer={this.props.answer}
+                disableButton={loading}
                 addDataFromAnswer={this.addDataFromAnswer}
                 addAnswer={this.addNewAnswer}
                 removeAnswer={this.removeAnswer}
@@ -289,6 +292,7 @@ export const mapStateToProps = state => ({
   addedConcept: state.concepts.addConceptToDictionary,
   existingConcept: state.concepts.existingConcept,
   answer: state.concepts.answer,
+  loading: state.concepts.loading,
 });
 export default connect(
   mapStateToProps,

diff --git a/src/redux/actions/concepts/dictionaryConcepts.js b/src/redux/actions/concepts/dictionaryConcepts.js
@@ -137,16 +137,15 @@ export const fetchDictionaryConcepts = (
     const response = await instance.get(url);
     dispatch(getDictionaryConcepts(response.data, FETCH_DICTIONARY_CONCEPT));
     dispatch(paginateConcepts(response.data));
-    dispatch(isFetching(false));
     if (query === '' && filterByClass.length === 0 && filterBySource.length === 0) {
       dispatch(populateSidenav());
     }
   } catch (error) {
     if (error.response) {
       dispatch(isErrored(error.response.data, FETCH_DICTIONARY_CONCEPT));
-      dispatch(isFetching(false));
     }
   }
+  dispatch(isFetching(false));
 };
 
 export const filterBySource = (
@@ -182,10 +181,10 @@ export const addConceptToDictionary = (id, dataUrl) => async (dispatch) => {
   try {
     const response = await instance.put(url, data);
     dispatch(isSuccess(response.data, ADD_CONCEPT_TO_DICTIONARY));
-    dispatch(isFetching(false));
   } catch (error) {
     notify.show('an error occurred', 'error', 3000);
   }
+  dispatch(isFetching(false));
 };
 
 export const createNewConcept = (data, dataUrl) => async (dispatch) => {
@@ -205,8 +204,7 @@ export const createNewConcept = (data, dataUrl) => async (dispatch) => {
 } for ${
   Object.keys(error.response.data).toString()
 }`, 'error', 3000);
-      dispatch(isFetching(false));
-      return dispatch(isErrored(error.response.data, CREATE_NEW_CONCEPT));
+      dispatch(isErrored(error.response.data, CREATE_NEW_CONCEPT));
     }
   }
   return dispatch(isFetching(false));
@@ -223,9 +221,9 @@ export const fetchExistingConcept = conceptUrl => async (dispatch) => {
     notify.show('Could not retrieve concept details', 'error', 3000);
     if (error.response) {
       dispatch(isErrored(error.response.data, FETCH_EXISTING_CONCEPT_ERROR));
-      dispatch(isFetching(false));
     }
   }
+  dispatch(isFetching(false));
 };
 
 export const updateConcept = (conceptUrl, data, history) => async (dispatch) => {
@@ -245,8 +243,8 @@ export const updateConcept = (conceptUrl, data, history) => async (dispatch) =>
   Object.keys(error.response.data).toString()
 }`, 'error', 3000);
       dispatch(isErrored(error.response.data, FETCH_EXISTING_CONCEPT_ERROR));
-      return dispatch(isFetching(false));
     }
+    dispatch(isFetching(false));
   }
   return history.goBack();
 };

diff --git a/src/styles/dictionary_modal.scss b/src/styles/dictionary_modal.scss
@@ -160,3 +160,8 @@ legend {
   #inline-error{
       color: #cc0000;
   }
+
+button:disabled{
+    cursor: not-allowed;
+    background: #e9ecef !important;
+}