Merge pull request #54 from PuraJuniper/show-dosage-info-on-card-prev…

…iew-SAGE-291 new display page formatting and fixed dosage problem
TopologyHealth · Mar 28, 2022 · eb7a04a · eb7a04a
2 parents 1b61868 + a81b843
commit eb7a04a
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 18 deletions.
diff --git a/public/app.css b/public/app.css
@@ -825,3 +825,19 @@ a {
   text-decoration-line: underline;
   text-decoration-style: dotted;
 }
+.display-page-title{
+  font-size: large;
+  margin: 0;
+  font-weight: bold;
+}
+.display-page-dosage-small{
+  margin: 0;
+  flex: 0 0 15%;
+}
+.display-page-dosage-medium{
+  margin: 0;
+  flex: 0 0 25%;
+}
+.display-page-productRefernce{
+  flex: 0 0 35%;
+}
diff --git a/src/simplified/cardEditor.tsx b/src/simplified/cardEditor.tsx
@@ -7,12 +7,13 @@ import hypertensionLibraryJson from "../../public/samples/hypertension-library.j
 import * as SageUtils from "../helpers/sage-utils";
 import * as SchemaUtils from "../helpers/schema-utils";
 import State, { SageNodeInitializedFreezerNode } from "../state";
-import { OuterCardForm, textBoxProps, cardLayout } from "./outerCardForm";
+import { OuterCardForm, textBoxProps, cardLayout, displayBoxProps } from "./outerCardForm";
 import { ACTIVITY_DEFINITION, allFormElems, convertFormElementToObject, formElemtoResourceProp, FriendlyResourceFormElement, FriendlyResourceProps, getFormElementListForResource, PLAN_DEFINITION, profileToFriendlyResourceListEntry } from "./nameHelpers";
 import { MedicationRequestForm, SageCondition } from "./medicationRequestForm";
 import { buildEditableStateFromCondition, WizardState } from "./cql-wizard/wizardLogic";
 import { generateCqlFromConditions, makeCQLtoELMRequest } from "./cql-wizard/cql-generator";
 import { buildFredId } from "../helpers/bundle-utils";
+import { fhirToFriendly } from '../simplified/nameHelpers';
 
 
 
@@ -47,6 +48,7 @@ export interface pageThreeProps {
 export interface ICardForm {
     resourceType: FriendlyResourceProps;
     textBoxFields: Map<string, textBoxProps>;
+    displayBoxFields: Map<string, displayBoxProps>;
     dropdownFields: Map<string, string[]>;
     resourceFields: string[];
     cardFieldLayout: cardLayout;
@@ -143,24 +145,39 @@ const createDropdownElement = (fieldKey: string, fieldFriendlyName: string, fiel
     );
 }
 
-const createDisplayElement = (fieldHandlers: any, friendlyFields: any, i: number): JSX.Element => {
+const createDisplayElement = ( displayProps: displayBoxProps,friendlyFields: any,fieldHandlers: any, i: number): JSX.Element => {
     let friendly;
     for (let j = 0; j < friendlyFields.length; j++) {
-        if (friendlyFields[j].FHIR === fieldHandlers[i][0]) friendly = friendlyFields[j].FRIENDLY
+        if(friendlyFields[j].SELF.FHIR === fieldHandlers[i][0]){
+            friendly = friendlyFields[j].SELF.FRIENDLY
+        }
     }
-    return (
-        <Form.Group key={fieldHandlers[i][0] + "-fromGroup"} as={Col} controlId={fieldHandlers[i][0]}>
-            <Form.Label key={fieldHandlers[i][0] + "-label"}>{friendly} {fieldHandlers[i][1]}</Form.Label>
-        </Form.Group>
-    )
+    if (displayProps.displayFieldTitle === true){
+        return (
+            <Form.Group key={fieldHandlers[i][0] + "-fromGroup"} as={Col} controlId={fieldHandlers[i][0]} className = {displayProps.className}>
+                <Form.Label key={fieldHandlers[i][0] + "-label"} > <b>{friendly}</b> {fieldHandlers[i][1]}</Form.Label>
+            </Form.Group>
+        )
+    }
+    else{
+        return (
+            <Form.Group key={fieldHandlers[i][0] + "-fromGroup"} as={Col} controlId={fieldHandlers[i][0]}>
+                <Form.Label key={fieldHandlers[i][0] + "-label"} className = {displayProps.className}>{fieldHandlers[i][1]}</Form.Label>
+            </Form.Group>
+        )
+    }
+
 }
 
-const createDisplayElementList = (fieldHandlers: any, resourceType: FriendlyResourceProps): JSX.Element[] => {
+const createDisplayElementList = (innerCardForm: ICardForm,fieldHandlers: any, resourceType: FriendlyResourceProps): JSX.Element[] => {
     const friendlyFields = getFormElementListForResource(resourceType.FHIR);
-    const list: JSX.Element[] = [];
+    const flattenFriendlyFields = allFormElems(friendlyFields);
+    const defaultBoxProps: displayBoxProps = {className: "", displayFieldTitle: true }
 
+    const list: JSX.Element[] = [];
     for (let i = 0; i < fieldHandlers.length; i++) {
-        list[i] = createDisplayElement(fieldHandlers, friendlyFields, i);
+        list[i] = createDisplayElement(innerCardForm.displayBoxFields.get(fieldHandlers[i][0])?? defaultBoxProps,
+        flattenFriendlyFields,fieldHandlers, i);
     }
 
     return list;
@@ -317,7 +334,7 @@ export const CardEditor = (props: CardEditorProps) => {
                     generateNewCondition={generateEditableCondition}
                     resourceType={actResourceType}
                     elementList={fieldElementListForType(innerCardForm, getFormElementListForResource(innerCardForm.resourceType.FHIR), fieldHandlers, actNode)}
-                    displayList={createDisplayElementList(fieldHandlers, actResourceType)}
+                    displayList={createDisplayElementList(innerCardForm,fieldHandlers, actResourceType)}
                     innerCardForm={innerCardForm}
                     handleSaveResource={handleSaveResource}
                     handleDeleteResource={props.handleDeleteResource}

diff --git a/src/simplified/medicationRequestForm.tsx b/src/simplified/medicationRequestForm.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Col, Form, ListGroup, Row, Button, Card, InputGroup } from "react-bootstrap";
 import { EditableStateForCondition, ICardForm, AggregateType, WizExprAggregate } from "./cardEditor";
 import { FriendlyResourceProps } from "./nameHelpers";
-import { textBoxProps } from "./outerCardForm";
+import { textBoxProps, displayBoxProps } from "./outerCardForm";
 import { CqlWizardModal } from "./cql-wizard/cqlWizardModal"
 import { PlanDefinitionActionCondition } from "fhir/r4";
 import { CodeFilterType, DateFilterType, saveEditableStateForConditionId, WizardState } from "./cql-wizard/wizardLogic";
@@ -76,6 +76,12 @@ export class MedicationRequestForm implements ICardForm {
             isReadOnly: false,
             isLink: false,
             caption: ""
+        }],
+        ['productReference', {
+            boxSize: 1,
+            isReadOnly: false,
+            isLink: false,
+            caption: ""
 
         }]
     ]);
@@ -85,13 +91,55 @@ export class MedicationRequestForm implements ICardForm {
             ['active', 'on-hold', 'cancelled', 'completed', 'entered-in-error', 'stopped', 'draft', 'unknown']],
         ['intent',
             ['proposal', 'plan', 'order', 'original-order', 'reflex-order', 'filler-order', 'instance-order', 'option']],
-        ['productReference',
-            ['proposal', 'plan', 'order', 'original-order', 'reflex-order', 'filler-order', 'instance-order', 'option']],
         ['periodUnit',
             ['s', 'min', 'h', 'd', 'wk', 'mo', 'a']],
         ['type',
             ['documentation', 'justification', 'citation', 'predecessor', 'successor', 'derived-from', 'depends-on', 'composed-of']]
     ]);
+    displayBoxFields = new Map<string, displayBoxProps>([
+        ['title', {
+            className: "display-page-title",
+            displayFieldTitle: false,
+        }],
+        ['description', {
+            className: "",
+            displayFieldTitle: false,
+        }],
+        ['resource', {
+            className: "",
+            displayFieldTitle: true,
+        }],
+        ['text', {
+            className: "",
+            displayFieldTitle: true,
+
+        }],
+        ['frequency', {
+            className: "display-page-dosage-small",
+            displayFieldTitle: true,
+        }],
+        ['period', {
+            className: "display-page-dosage-small",
+            displayFieldTitle: true,
+        }],
+        ['value', {
+            className: "display-page-dosage-medium",
+            displayFieldTitle: true,
+        }],
+        ['unit', {
+            className: "display-page-dosage-small",
+            displayFieldTitle: true,
+        }],
+        ['productDescription', {
+            className: "",
+            displayFieldTitle: true,
+        }],
+        ['productReference', {
+            className: "display-page-productRefernce",
+            displayFieldTitle: true,
+        }],
+    ]);
+
 
     resourceFields = ['dosage', 'timing', 'repeat', 'relatedArtifact', 'doseAndRate', 'doseQuantity'];
 
@@ -117,9 +165,10 @@ export class MedicationRequestForm implements ICardForm {
         cardColumns: [
             ['title'],
             ['description'],
-            ['relatedArtifact'],
-            ['productReference'],
-            ['text']
+            ['productReference','productDescription'],
+            ['value','unit','frequency','period','periodUnit'],
+            ['resource'],
+            ['text'],
         ]
 
     };

diff --git a/src/simplified/outerCardForm.tsx b/src/simplified/outerCardForm.tsx
@@ -22,6 +22,10 @@ export type textBoxProps = {
     isLink: boolean;
     caption: string;
 }
+export type displayBoxProps = {
+    className: string;
+    displayFieldTitle: boolean;
+}
 export interface CardFormState {
     step: number;
 }