Structured Data ES6

by Simon Gamester

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title"><b>Create Clinical Statement</b></h3>
  </div>
  <div class="panel-body">
    <div class="panel-body-inner">
      <form class="form">

        <div class="row">

          <div class="col-xs-6">
            <div class="form-group search-group">
              <label for="noteType" class="control-label">Search</label>
              <div class="input-group" id="tag-search">
                <span class="input-group-btn">
                  <button id="tag" class="btn btn-secondary btn-success btn-sm" type="button"></button>
                </span>
                <input type="text" class="form-control input-sm">
              </div>
              <input type="text" class="form-control input-sm" id="tagless-search">
              <div class="list-group" id="results"></div>
            </div>
            
          </div>
          <div class="col-xs-6">
            <div class="form-group">
              <label for="notes" class="control-label">Clinical Note</label>
              <div class="input-holder">
                <div class="form-control input-sm" id="notes" contenteditable="true"></div>
              </div>
            </div>
          </div>
        </div>

          <div class="form-group form-group-sm">
            <label for="author" class="control-label">Author</label>
            <div class="input-holder">
              <input type="text" class="form-control input-sm" id="author" name="author">
            </div>
          </div>
          
          <div...

SCSS

#results {
  height:     250px;
  overflow-y: auto;
}

#notes {
  height: 280px;
  input {
    width: 50px;
  }
}

JavaScript

const TEMPLATE_REGEX = /\{.*\}/;

const TAG_NAMES = [
  "PC", "XM", "Ix", "Vitals", "Rx", "Ortho", "Dx", "Meds", "MH", "HA", "Shoulder"
]

const CLINICAL_STATEMENTS = [
  "The pain began gradually",
  "The pain has lasted for {3} days",
  "Patient has not had pain like this before",
  "There is a history of migraines",
  "The pain is throbbing",
  "Return {3} weeks for recheck, sooner prn",
  "{1} sinus(es) tender",
  "Heart: RR, no murmurs, no rubs, no gallops",
  "Neck: Supple, no masses, no thyromegaly, no bruits",
  "Pain is of {6} months duration",
  "Onset is from a fall",
  "Pain is {Right} side",
  "Movement is restricted",
  "Abduction to {45} degree",
  "Internal Rotation to {45} degrees",
  "External Rotation to {10} degrees",
  "Xray shows early OsteoArthritis change",
  "UltraSound shows rotator cuff tear",
  "Plan is physio x {3} sessions",
  "If doent improve will need laparscopic surgical exploration +/- repair",
  "To review in {8} weeks time"
];

const PROCESS_TEMPLATE = (input) => {
  let match = TEMPLATE_REGEX.exec(input);
  if(match) {
    return match.input.replace(match[0], '<input type="text" value="' + match[0].substring(1, match[0].length - 1) + '"></input>')
  }
  else {
    return input;
  }
}

const PROCESS_SEARCH = (input) => {
  let tag = _.find(TAG_NAMES, t => input.startsWith(t + ' '));
  let query = (tag) ? input.substring(tag.length) : input;
  return { tag, query }
}

const SHOW_TAGGED_SEARCH = (tagged) => {
  let types = {
    hide: (tagged) ? '#tagless-search' : '#tag-search',
    show: (tagged) ? '#tag-search' : '#tagless-search',
    focus: (tagged) ? '#tag-search input' : '#tagless-search'
  }
  $(types.hide).hide();
  $(types.show).show();
  $(types.focus).focus();
}

// Handle data entry in search box
$('.search-group input').on('input', function(){
  let search = PROCESS_SEARCH($(this).val().replace(/^\s+/,""));
  $(this).val(search.query);
  
  if(search.tag) {
    //Add A tag
    $('#tag').html(search.tag + ' <i...