Merge pull request #49 from mcode/resubmit-ui

restructure ui alert

src/App.jsx

@@ -38,6 +38,7 @@ export default class App extends Component {
       response: null,
       priorAuthClaim: null,
       specialtyRxBundle: null,
+      remsAdminResponse: null,
       cqlPrepopulationResults: null,
       orderResource: null,
       bundle: null,
@@ -392,6 +393,10 @@ export default class App extends Component {
     this.setState({ specialtyRxBundle: specialtyRxBundleParam });
   }
 
+  setRemsAdminResponse(remsAdminResponse) {
+    this.setState({remsAdminResponse})
+  }
+
   getQuestionByName(question) {
       //question should be the HTML node
       const temp = question.getElementsByClassName("lf-item-code ng-hide")[0].innerText.trim();
@@ -637,8 +642,8 @@ export default class App extends Component {
           >
 
           </div>
-          {this.state.specialtyRxBundle ? (
-            <RemsInterface specialtyRxBundle={this.state.specialtyRxBundle} />
+          {this.state.specialtyRxBundle && this.state.remsAdminResponse ? (
+            <RemsInterface specialtyRxBundle={this.state.specialtyRxBundle} remsAdminResponse={this.state.remsAdminResponse}/>
           ) : (
             <QuestionnaireForm
               qform={this.state.questionnaire}
@@ -653,6 +658,7 @@ export default class App extends Component {
               priorAuthReq={this.props.priorAuthReq === "true" ? true : false}
               setPriorAuthClaim={this.setPriorAuthClaim.bind(this)}
               setSpecialtyRxBundle={this.setSpecialtyRxBundle.bind(this)}
+              setRemsAdminResponse={this.setRemsAdminResponse.bind(this)}
               fhirVersion={this.fhirVersion.toUpperCase()}
               smart={this.smart}
               renderButtons={this.renderButtons}

src/components/QuestionnaireForm/AlertDialog.jsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Dialog, DialogContent, DialogContentText, DialogTitle, DialogActions, Button } from '@material-ui/core';
+
+export default function AlertDialog(props) {
+  const { title, rxAlert, setRxAlert } = props;
+
+  const handleClose = () => {
+    setRxAlert({ open: false });
+  };
+  return (
+    <div>
+      <Dialog
+        open={rxAlert.open}
+        onClose={handleClose}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle id="alert-dialog-title">
+          {title}
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            {rxAlert.description}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>Close</Button>
+          {rxAlert.callback ?
+            <Button onClick={rxAlert.callback} autoFocus>
+              Yes
+            </Button>
+            :
+            null}
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+}

src/components/QuestionnaireForm/QuestionnaireForm.jsx

@@ -8,6 +8,8 @@ import ConfigData from "../../config.json";
 import ReactDOM from 'react-dom'
 
 import retrieveQuestions, { buildNextQuestionRequest } from "../../util/retrieveQuestions";
+import axios from "axios";
+import AlertDialog from "./AlertDialog";
 
 // NOTE: need to append the right FHIR version to have valid profile URL
 var DTRQuestionnaireResponseURL = "http://hl7.org/fhir/us/davinci-dtr/StructureDefinition/dtr-questionnaireresponse-";
@@ -32,7 +34,8 @@ export default class QuestionnaireForm extends Component {
       popupOptions: [],
       popupFinalOption: "Cancel",
       formFilled: true,
-      formValidationErrors: []
+      formValidationErrors: [],
+      showRxAlert: {open: false}
     };
 
     this.outputResponse = this.outputResponse.bind(this);
@@ -1362,7 +1365,25 @@ export default class QuestionnaireForm extends Component {
 
 
         this.props.setPriorAuthClaim(priorAuthBundle);
-        this.props.setSpecialtyRxBundle(specialtyRxBundle);
+        const options = {
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json"
+          }
+        }
+        axios.post("http://localhost:8090/etasu/met", specialtyRxBundle, options).then((response) => {
+          const proceedToRems = () => {
+            this.props.setSpecialtyRxBundle(specialtyRxBundle);
+            this.props.setRemsAdminResponse(response)
+          }
+          if(response.status == 201) {
+            proceedToRems()
+          } else if(response.status == 200) {
+            this.setState({showRxAlert: {response: response, rxBundle: specialtyRxBundle, description: "Form was already submitted previously. View current case?", open: true, callback: proceedToRems}})
+          }
+        }).catch((e)=>{
+          this.setState({showRxAlert: {description: "Encountered an error", open:true}})
+        })
       } else {
         alert("Prior Auth Bundle is not available or does not contain enough resources for Prior Auth. Can't submit to prior auth.")
       }
@@ -1564,6 +1585,7 @@ export default class QuestionnaireForm extends Component {
             />
             ) : null
           }
+          <AlertDialog title="Alert" rxAlert={this.state.showRxAlert} setRxAlert={(e)=>{this.setState({showRxAlert: e})}}></AlertDialog>
           {
             isAdaptiveForm ? (
               <div className="form-message-panel">

src/components/RemsInterface/RemsInterface.jsx

@@ -58,7 +58,7 @@ export default class RemsInterface extends Component {
         <div>
           <div className={"resource-entry etasu-container"}>
             <div className={"resource-entry-text"}  >{metReq.requirementName}</div>
-              <div className={"resource-entry-icon"}>{metReq.completed ? "✅"  : "❌"}</div>
+            <div className={"resource-entry-icon"}>{metReq.completed ? "✅" : "❌"}</div>
             <div className={"resource-entry-hover"}>{metReq.requirementDescription}</div>
           </div>
         </div>
@@ -80,14 +80,13 @@ export default class RemsInterface extends Component {
     }
     return null;
   }
-  
+
   async sendRemsMessage() {
-    const remsAdminResponse = await axios.post("http://localhost:8090/etasu/met", this.props.specialtyRxBundle, this.getAxiosOptions());
-    console.log(remsAdminResponse)    
+    const remsAdminResponse = this.props.remsAdminResponse
     this.setState({ remsAdminResponse });
-    
+
     //  Will not send post request to PIS if only for patient enrollment
-    if(this.state.remsAdminResponse?.data?.case_number){
+    if (this.state.remsAdminResponse?.data?.case_number) {
 
       // extract params and questionnaire response identifier
       let params = this.getResource(this.props.specialtyRxBundle, this.props.specialtyRxBundle.entry[0].resource.focus.parameters.reference);
@@ -157,31 +156,31 @@ export default class RemsInterface extends Component {
 
   refreshPisBundle() {
     this.setState({ spinPis: true });
-    
+
     let params = this.getResource(this.props.specialtyRxBundle, this.props.specialtyRxBundle.entry[0].resource.focus.parameters.reference);
 
-      // stakeholder and medication references
-      let prescriptionReference = "";
-      let patientReference = "";
-      for (let param of params.parameter) {
-        if (param.name === "prescription") {
-          prescriptionReference = param.reference;
-        }
-        else if (param.name === "source-patient") {
-          patientReference = param.reference;
-        }
+    // stakeholder and medication references
+    let prescriptionReference = "";
+    let patientReference = "";
+    for (let param of params.parameter) {
+      if (param.name === "prescription") {
+        prescriptionReference = param.reference;
+      }
+      else if (param.name === "source-patient") {
+        patientReference = param.reference;
       }
+    }
 
-      // obtain drug information from database
-      let presciption = this.getResource(this.props.specialtyRxBundle, prescriptionReference);
-      let prescriptionDisplay = presciption.medicationCodeableConcept.coding[0].display.split(" ")[0];
-      let patient = this.getResource(this.props.specialtyRxBundle, patientReference);
-      let patientName = patient.name[0].given[0] + ' ' + patient.name[0].family;
+    // obtain drug information from database
+    let presciption = this.getResource(this.props.specialtyRxBundle, prescriptionReference);
+    let prescriptionDisplay = presciption.medicationCodeableConcept.coding[0].display.split(" ")[0];
+    let patient = this.getResource(this.props.specialtyRxBundle, patientReference);
+    let patientName = patient.name[0].given[0] + ' ' + patient.name[0].family;
 
     axios.get(`http://localhost:5051/doctorOrders/api/getRx/patient/${patientName}/drug/${prescriptionDisplay}`)
-    .then((response) => {
-      this.setState({ response: response });
-    })
+      .then((response) => {
+        this.setState({ response: response });
+      })
   }
 
   refreshBundle() {
@@ -212,14 +211,11 @@ export default class RemsInterface extends Component {
     }
 
     // Checking if REMS Request (pt enrollment) || Met Requirments (prescriber Form)
-    let hasRemsResponse = this.state.remsAdminResponse?.data ? true : false
     let hasRemsCase = this.state.remsAdminResponse?.data?.case_number ? true : false;
 
     return (
       <div>
-        {
-          hasRemsResponse ?
-          <div>
+        <div>
           {hasRemsCase ?
             <div>
               <div className="container left-form">
@@ -235,7 +231,7 @@ export default class RemsInterface extends Component {
                   <div className="bundle-entry">
                     <Button variant="contained" onClick={this.toggleBundle}>View Bundle</Button>
                     <Button variant="contained" onClick={this.toggleResponse}>View ETASU</Button>
-  
+
                     {this.state.remsAdminResponse?.data?.case_number ?
                       <AutorenewIcon
                         className={this.state.spin === true ? "refresh" : "renew-icon"}
@@ -244,9 +240,9 @@ export default class RemsInterface extends Component {
                       />
                       : ""
                     }
-  
+
                   </div>
-  
+
                 </Paper>
                 {this.state.viewResponse ?
                   <div className="bundle-view">
@@ -261,9 +257,9 @@ export default class RemsInterface extends Component {
                   <h3>Bundle</h3>
                   {this.renderBundle(this.props.specialtyRxBundle)}
                 </div> : ""}
-  
+
               </div>
-  
+
               <div className="right-form">
                 <h1>Pharmacy Status</h1>
                 <Paper style={{ paddingBottom: "5px" }}>
@@ -285,7 +281,7 @@ export default class RemsInterface extends Component {
                       : ""
                     }
                   </div>
-  
+
                 </Paper>
                 {this.state.viewPisBundle ? <div className="bundle-view">
                   <br></br>
@@ -305,7 +301,7 @@ export default class RemsInterface extends Component {
                   </div>
                   <div className="bundle-entry">
                     <Button variant="contained" onClick={this.toggleBundle}>View Bundle</Button>
-  
+
                     {this.state.remsAdminResponse?.data?.case_number ?
                       <AutorenewIcon
                         className={this.state.spin === true ? "refresh" : "renew-icon"}
@@ -315,24 +311,18 @@ export default class RemsInterface extends Component {
                       : ""
                     }
                   </div>
-  
+
                 </Paper>
                 {this.state.viewBundle ? <div className="bundle-view">
                   <br></br>
                   <h3>Bundle</h3>
                   {this.renderBundle(this.props.specialtyRxBundle)}
                 </div> : ""}
-  
+
               </div>
             </div>
           }
-          </div>
-          :
-          <div>
-            No response - form has already been submitted previously....
-          </div>
-        }
-
+        </div>
       </div>
     )
   }