Merge pull request #742 from FluxNotes/note-preview

Note preview
FluxNotes · Aug 22, 2019 · ec9a1d3 · ec9a1d3
2 parents 1b3f6ad + c5a4ce5
commit ec9a1d3
Show file tree

Hide file tree

Showing 11 changed files with 150 additions and 22 deletions.
diff --git a/src/forms/MultiChoiceButton.scss b/src/forms/MultiChoiceButton.scss
@@ -5,11 +5,15 @@
     border-color: $background;
     line-height: 0.9rem !important;
     margin: 2px !important;
-    width: 115px !important;
-    height: 47px !important;
-    border-radius: 4px !important;
-    color: $body-black !important;
-    box-shadow: 0px 0px 0px 0px #DDDDDD, 0px 0px 0px 0px #DDDDDD, 0px 0px 0px 1px #DDDDDD !important;
+
+    &.placeholder-button {
+      width: 115px !important;
+      height: 47px !important;
+      border-radius: 4px !important;
+      color: $body-black !important;
+      box-shadow: 0px 0px 0px 0px #DDDDDD, 0px 0px 0px 0px #DDDDDD, 0px 0px 0px 1px #DDDDDD !important;
+    }
+
     &.selected {
       background-color: $interface-blue !important;
       color: $background !important;

diff --git a/src/forms/SingleChoiceButton.scss b/src/forms/SingleChoiceButton.scss
@@ -6,11 +6,15 @@
     border-color: $background;
     line-height: 0.9rem !important;
     margin: .5px !important;
-    width: 115px !important;
-    height: 47px !important;
-    border-radius: 0px !important;
-    color: $body-black !important;
-    box-shadow: 0px 0px 0px 0px #DDDDDD, 0px 0px 0px 0px #DDDDDD, 0px 0px 0px 1px #DDDDDD !important;
+
+    &.placeholder-button {
+        width: 115px !important;
+        height: 47px !important;
+        border-radius: 0px !important;
+        color: $body-black !important;
+        box-shadow: 0px 0px 0px 0px #DDDDDD, 0px 0px 0px 0px #DDDDDD, 0px 0px 0px 1px #DDDDDD !important;
+    }
+
     &.selected {
         background-color: $interface-blue !important;
         color: $background !important;

diff --git a/src/notes/fillFieldComponents/ButtonSetFillFieldForPlaceholder.jsx b/src/notes/fillFieldComponents/ButtonSetFillFieldForPlaceholder.jsx
@@ -29,6 +29,7 @@ class ButtonSetFillFieldForPlaceholder extends Component {
             <div key={optionName} className="tooltip-progression-form">
                 {/* <span id={optionName} className={tooltipClass}>{optionDescription}</span> */}
                 <SingleChoiceButton
+                    className='placeholder-button'
                     buttonKey={i}
                     buttonText={optionName}
                     onClick={(e) => this.handleOptionSelection(e, i)}

diff --git a/src/notes/fillFieldComponents/MenuItemSetFillForPlaceholder.jsx b/src/notes/fillFieldComponents/MenuItemSetFillForPlaceholder.jsx
@@ -85,6 +85,7 @@ class MenuItemSetFillForPlaceholder extends Component {
             return (
                 <SingleChoiceButton
                     key={i}
+                    className='placeholder-button'
                     buttonKey={i}
                     buttonText={option.name}
                     onClick={(e) => this.handleOptionSelection(e, i)}

diff --git a/src/notes/fillFieldComponents/MultiButtonSetFillFieldForPlaceholder.jsx b/src/notes/fillFieldComponents/MultiButtonSetFillFieldForPlaceholder.jsx
@@ -23,6 +23,7 @@ class MultiButtonSetFillFieldForPlaceholder extends Component {
             <div key={optionName} className="tooltip-progression-form">
                 {/* <span id={optionName} className={tooltipClass}>{optionDescription}</span> */}
                 <MultiChoiceButton
+                    className='placeholder-button'
                     buttonKey={i}
                     buttonText={optionName}
                     onClick={(e) => this.handleOptionSelection(e, i)}

diff --git a/src/notes/fillFieldComponents/SearchableListForPlaceholder.jsx b/src/notes/fillFieldComponents/SearchableListForPlaceholder.jsx
@@ -181,6 +181,7 @@ class SearchableListForPlaceholder extends Component {
                             <div key={adverseEvent.name} className="tooltip-toxicity-form">
                                 <span id={adverseEvent.name} className={tooltipClass}>{adverseEvent.description}</span>
                                 <SingleChoiceButton
+                                    className='placeholder-button'
                                     buttonKey={i}
                                     buttonText={adverseEvent.name}
                                     onClick={(e) => this.handleAdverseEventSelection(adverseEvent.name, i)}

diff --git a/src/templates/TemplateOption.jsx b/src/templates/TemplateOption.jsx
@@ -1,13 +1,23 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import TemplateOptionPreviewButton from './TemplateOptionPreviewButton';
 import Lang from 'lodash';
+import Popover from 'material-ui/Popover';
+import FontAwesome from 'react-fontawesome';
 import "./TemplateOption.css";
 
 export default class TemplateOption extends Component {
+    constructor() {
+        super();
+        this.state = {
+            isPopoverOpen: false,
+        };
+    }
+
     // Prevent default event behavior, then insert this option's content via the insertTemplateFn
     handleTemplateSelection = (e) => {
         e.preventDefault();
+        this.handlePopoverClose();
         const { insertTemplate, content } = this.props;
         insertTemplate(content);
     }
@@ -28,6 +38,58 @@ export default class TemplateOption extends Component {
         }
     }
 
+    handleClick = () => {
+        this.setState({ isPopoverOpen: true });
+    }
+
+    handlePopoverClose = () => {
+        this.setState({ isPopoverOpen: false });
+    }
+
+    // only returns a popover if the preview has content
+    getPreviewButton = () => {
+        if (!Lang.isEqual(this.props.content, "")) {
+            return (
+                <div>
+                    <TemplateOptionPreviewButton onClick={this.handleClick} />
+                    <Popover
+                        open={this.state.isPopoverOpen}
+                        onClose={this.handlePopoverClose}
+                        classes={{ paper: 'popover-style' }}
+                    >
+                        <div className='popover-container'>
+                            <FontAwesome className='fa-times clickable close' name='close-icon' onClick={this.handlePopoverClose} />
+                            {this.formatText(this.props.content)}
+                            <div className='choose-template clickable' onClick={this.handleTemplateSelection}> choose template </div>
+                        </div>
+                    </Popover>
+                </div>
+
+            );
+        }
+        return "";
+    }
+
+    // bolds all of the lines that come after a blank line to highlight the title lines
+    formatText = (text) => {
+        let prevString = "";
+        return (
+            text.split('\n').map(function (item, key) {
+                let bold = "";
+                if (Lang.isEqual(prevString, "")) {
+                    bold = "bolded";
+                }
+                prevString = item;
+                return (
+                    <span className={bold} key={key}>
+                        {item}
+                        <br />
+                    </span>
+                );
+            })
+        );
+    }
+
     render() {
         const { title } = this.props;
         return (
@@ -36,7 +98,7 @@ export default class TemplateOption extends Component {
                     {title}
                 </div>
                 {this.renderDesignedBy()}
-                <TemplateOptionPreviewButton/>
+                {this.getPreviewButton()}
             </div>
         );
     }
@@ -47,4 +109,4 @@ TemplateOption.propTypes = {
     content: PropTypes.string.isRequired,
     insertTemplate: PropTypes.func.isRequired,
     title: PropTypes.string.isRequired,
-};
+};
diff --git a/src/templates/TemplateOption.scss b/src/templates/TemplateOption.scss
@@ -1,4 +1,4 @@
-@import '../styles/variables';
+@import "../styles/variables";
 
 .template-option {
     position: relative;
@@ -42,4 +42,45 @@
         color: $state;
         text-overflow: ellipsis;
     }
-}
+}
+
+.popover-style {
+    background-color: $background !important;
+    border-radius: 5px;
+    width: 50% !important;
+    height: 35% !important;
+    left: 41% !important;
+    top: 50% !important;
+    padding: 20px 20px 25px 20px;
+    margin: 5px;
+    overflow-y: auto !important;
+    font-size: $size-s;
+    .popover-container {
+        position: relative !important;
+        height: 100%;
+        overflow-y: auto;
+        .bolded {
+            font-weight: bold;
+        }
+        .close {
+            color: $interface-blue;
+            position: fixed;
+            top: 2%;
+            right: 2%;
+        }
+
+        .clickable {
+            cursor: pointer;
+        }
+
+        .choose-template {
+            color: $interface-blue;
+            position: fixed;
+            bottom: 2%;
+            right: 2%;
+        }
+    }
+    >   ::-webkit-scrollbar-track {
+        background-color: $background;
+    }
+}
diff --git a/src/templates/TemplateOptionPreviewButton.jsx b/src/templates/TemplateOptionPreviewButton.jsx
@@ -1,12 +1,18 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import RemoveRedEye from 'material-ui-icons/RemoveRedEye';
 import "./TemplateOptionPreviewButton.css";
 
 export default class TemplateOptionPreviewButton extends Component {
+    handleClick = (e) => {
+        // stops note from opening and instead only shows note preview popover
+        e.stopPropagation();
+        this.props.onClick();
+    }
+
     render() {
         return (
-            <div className="template-preview-button">
-                <RemoveRedEye/>
+            <div className="template-preview-button" onClick={this.handleClick}>
+                <RemoveRedEye />
             </div>
         );
     }

diff --git a/src/templates/TemplateOptionPreviewButton.scss b/src/templates/TemplateOptionPreviewButton.scss
@@ -10,7 +10,14 @@
     border-top-left-radius: 5px;
     border-bottom: 0px;
     border-right: 0px;
-    * { 
+    svg > * {
         fill: $icons-gray;
     }
-}
+    &:hover {
+        cursor: pointer;
+        background-color: $interface-blue;
+        svg > * {
+            fill: $background;
+        }
+    }
+}
diff --git a/src/templates/TemplateSelectionView.jsx b/src/templates/TemplateSelectionView.jsx
@@ -15,7 +15,7 @@ export default class TemplateSelectionView extends Component {
             {
                 name: 'Physical exam',
                 author: 'Dr. Mona341 Brown483',
-                content: 'Vitals: @vitals\nSkin:\nLymph:'
+                content: 'VITALS:\n @vitals\n\nSKIN:\n\nLYMPH:'
             },
             {
                 name: 'Follow-up',
@@ -30,7 +30,7 @@ export default class TemplateSelectionView extends Component {
             {
                 name: 'Testing template',
                 author: 'Dr. Mona341 Brown483',
-                content: 'FOLLOW UP:\nPatient is showing signs of @condition @ONCOHIST @condition @ONCOHIST\n\nMEDICATIONS:\n@medication\n\nProcedures:\n@procedure'
+                content: 'FOLLOW UP:\nPatient is showing signs of @condition @ONCOHIST @condition @ONCOHIST\n\nMEDICATIONS:\n@medication\n\nPROCEDURES:\n@procedure'
             }
         ];
         // TODO: Make the generation of this fuse dynamic once templates are moved into app/user preferences