Merge pull request cds-hooks#152 from cqframework/order-sign-support

Support for order-sign Hook

src/actions/action-types.js

@@ -58,6 +58,10 @@ export const STORE_MED_DOSAGE_AMOUNT = 'STORE_MED_DOSAGE_AMOUNT';
 export const STORE_DATE = 'STORE_DATE';
 export const TOGGLE_DATE = 'TOGGLE_DATE';
 
+// Medication Order on RxSign
+export const STORE_DISPENSE_REQUEST = 'STORE_DISPENSE_REQUEST';
+export const ORDER_SIGN_BUTTON_PRESS = 'ORDER_SIGN_BUTTON_PRESS';
+
 // Order Imaging
 export const APPLY_PAMA_RATING = 'APPLY_PAMA_RATING';
 export const UPDATE_STUDY = 'UPDATED_STUDY';

src/actions/medication-sign-actions.js

@@ -0,0 +1,94 @@
+import * as types from './action-types';
+
+/**
+ * Sets the user input from the medication select input box
+ * @param {*} input - User input string
+ */
+export function storeUserMedInput(input) {
+  return {
+    type: types.STORE_USER_MED_INPUT,
+    input,
+  };
+}
+
+/**
+ * Sets the specific medication from the medication select input box
+ * @param {*} medication - String of the medication ID
+ */
+export function storeUserChosenMedication(medication) {
+  return {
+    type: types.STORE_USER_CHOSEN_MEDICATION,
+    medication,
+  };
+}
+
+/**
+ * Sets the medication amount and frequency set on the UI in the store
+ * @param {*} amount - Dosage amount of the medication to take
+ * @param {*} frequency - String dosage frequency of the medication
+ */
+export function storeMedDosageAmount(amount, frequency) {
+  return {
+    type: types.STORE_MED_DOSAGE_AMOUNT,
+    amount,
+    frequency,
+  };
+}
+
+/**
+ * Sets the dispense request on the UI in the store
+ * @param {*} supplyDuration - Duration of the expected supply dispense
+ */
+export function storeDispenseRequest(supplyDuration) {
+  return {
+    type: types.STORE_DISPENSE_REQUEST,
+    supplyDuration,
+  };
+}
+
+/**
+ * Sets the date for the medication to be taken at a specific time (range)
+ * @param {*} range - String stating the date is the 'start' or 'end' date
+ * @param {*} date - String of the date
+ */
+export function storeDate(range, date) {
+  return {
+    type: types.STORE_DATE,
+    range,
+    date,
+  };
+}
+
+/**
+ * Toggle the start or end date so that it is either included or excluded from the MedicationOrder FHIR object in the request
+ * @param {*} range - String stating the date is the 'start' or 'end' date
+ */
+export function toggleDate(range) {
+  return {
+    type: types.TOGGLE_DATE,
+    range,
+  };
+}
+
+/**
+ * Call service when sign order button is selected
+ */
+export function signOrder(event) {
+  return {
+    type: types.ORDER_SIGN_BUTTON_PRESS,
+    event,
+  };
+}
+
+/**
+ * Takes action on the user-clicked suggestion from a card. The suggestion will be the suggestion chosen
+ * from the CDS service response (exact format from specification).
+ *
+ * @param {*} suggestion - Object containing the suggestion chosen from the user (see format here: https://cds-hooks.org/specification/current/#suggestion)
+ */
+export function takeSuggestion(suggestion) {
+  return {
+    type: types.TAKE_SUGGESTION,
+    suggestion,
+  };
+}

src/components/CardDemo/card-demo.jsx

@@ -175,7 +175,7 @@ export class CardDemo extends Component {
               value={this.props.tempUserJson || exampleCode}
               ref={(el) => { this.cm = el; }}
               onChange={this.updateCard}
-              style={{ 'fontFamily': 'Inconsolata, Menlo, Consolas, monospace !important' }}
+              style={{ fontFamily: 'Inconsolata, Menlo, Consolas, monospace !important' }}
               options={options}
             />
           </div>

src/components/ConfigureServices/configure-services.jsx

@@ -39,10 +39,11 @@ export class ConfigureServices extends Component {
     this.handleCloseModal = this.handleCloseModal.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.isOpen !== nextProps.isOpen) {
-      this.setState({ isOpen: nextProps.isOpen });
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.isOpen !== prevState.isOpen) {
+      return ({ isOpen: nextProps.isOpen });
     }
+    return null;
   }
 
   handleCloseModal() {

src/components/FhirServerEntry/fhir-server-entry.jsx

@@ -77,10 +77,11 @@ export class FhirServerEntry extends Component {
     this.handleResetDefaultServer = this.handleResetDefaultServer.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.isOpen !== nextProps.isOpen) {
-      this.setState({ isOpen: nextProps.isOpen });
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.isOpen !== prevState.isOpen) {
+      return ({ isOpen: nextProps.isOpen });
     }
+    return null;
   }
 
   handleCloseModal() {

src/components/Header/header.jsx

@@ -159,7 +159,7 @@ export class Header extends Component {
           // If the tab is clicked again, make sure the Sandbox is qualified to call out to EHR's based
           // on current context (i.e. for the Rx View, ensure a medication has been prescribed before
           // re-invoking the services on that hook if the Rx View tab is clicked multiple times)
-          if (hook === 'order-select') {
+          if (hook === 'order-select' || hook === 'order-sign') {
             const medicationPrescribed = state.medicationState.decisions.prescribable
               && state.medicationState.medListPhase === 'done';
             if (medicationPrescribed) {
@@ -293,6 +293,7 @@ export class Header extends Component {
         <div className={styles['nav-container']}>
           <button className={this.getNavClasses('patient-view')} onClick={() => this.switchHook('patient-view')}>Patient View</button>
           <button className={this.getNavClasses('rx-view')} onClick={() => this.switchHook('order-select', 'rx-view')}>Rx View</button>
+          <button className={this.getNavClasses('rx-sign')} onClick={() => this.switchHook('order-sign', 'rx-sign')}>Rx Sign</button>
           <button className={this.getNavClasses('pama')} onClick={() => this.switchHook('order-select', 'pama')}>PAMA Imaging</button>
         </div>
       </div>

src/components/MainView/main-view.jsx

@@ -13,6 +13,7 @@ import styles from './main-view.css';
 import Header from '../Header/header';
 import PatientView from '../PatientView/patient-view';
 import RxView from '../RxView/rx-view';
+import RxSign from '../RxSign/rx-sign';
 import Pama from '../Pama/pama';
 import ContextView from '../ContextView/context-view';
 import FhirServerEntry from '../FhirServerEntry/fhir-server-entry';
@@ -111,7 +112,7 @@ export class MainView extends Component {
   async componentDidMount() {
     // Set the loading spinner face-up
     this.props.setLoadingStatus(true);
-    const validHooks = ['patient-view', 'order-select'];
+    const validHooks = ['patient-view', 'order-select', 'order-sign'];
     let parsedHook = this.getQueryParam('hook');
     const parsedScreen = this.getQueryParam('screen');
     if (validHooks.indexOf(parsedHook) < 0) {
@@ -215,6 +216,7 @@ export class MainView extends Component {
     const hookView = {
       'patient-view': <PatientView />,
       'rx-view': <RxView />,
+      'rx-sign': <RxSign />,
       pama: <Pama />,
     }[this.props.screen];
 

src/components/PatientEntry/patient-entry.jsx

@@ -70,10 +70,11 @@ export class PatientEntry extends Component {
     this.handleChange = this.handleChange.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.isOpen !== nextProps.isOpen) {
-      this.setState({ isOpen: nextProps.isOpen });
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.isOpen !== prevState.isOpen) {
+      return ({ isOpen: nextProps.isOpen });
     }
+    return null;
   }
 
   handleCloseModal() {

src/components/RxSign/rx-sign.css

@@ -0,0 +1,47 @@
+.rx-sign {
+    height: auto;
+    display: inline-block;
+    padding: 30px;
+    margin: 0 0 20px;
+    vertical-align: top;
+    width: 100%;
+}
+
+.half-view {
+    width: 50%;
+}
+
+.view-title {
+    padding: 0 0 10px;
+    margin: 0 0 10px;
+    font-size: 1.5em;
+    letter-spacing: -0.025em;
+    color: #384E77; /* $color-primary */
+    border-bottom: 2px solid #eee;
+}
+
+.dose-instruction {
+    border: 1px solid #ddd;
+    padding: 5px 5px 0 10px;
+}
+
+.dosage-amount {
+    margin-right: 3em;
+}
+
+.dosage-timing {
+    margin-top: 1em;
+}
+
+@media (max-width: 975px) {
+    .rx-sign {
+        padding: 10px;
+        display: inline-block;
+        position: relative;
+    }
+
+    .half-view {
+        width: 100%;
+        display: inline-block;
+    }
+}