ERx - multiple line items support

public/css/style.css

@@ -1122,6 +1122,9 @@ body .node input[type="number"] {
     border-color: #e24848;
     box-shadow: 0 0 2px #c10707 !important;
 }
+.erx-line-item:nth-child(2n+1) {
+    background: #f0f8ffbb
+}
 
 .no-scroll {
     overflow: hidden;

resources/views/app/patient/tickets.blade.php

@@ -244,6 +244,13 @@
                             else {
                                 this.loadingFaxes = false;
                             }
+
+                            // empty additional items
+                            if((!this[_type + 'PopupItem'].data.items || !this[_type + 'PopupItem'].data.items.length) ||
+                                (!_item && _type === 'erx' && this[_type + 'PopupItem'].data.items.length === 1)) {
+                                this[_type + 'PopupItem'].data.items = [];
+                            }
+
                         },
                         reinitProSuggest: function() {
                             $('#ticketsApp [pro-suggest-initialized]').removeAttr('pro-suggest-initialized');
@@ -602,8 +609,18 @@
                                     randPart = Math.ceil(Math.random() * 1000000),
                                     dynID = 'rx-' + randPart;
                                 $(elem).attr('id', dynID);
-                                var strengthElem = $(elem).closest('.stag-popup').find('[data-field="strength"]')[0],
-                                    dynStrengthsID = 'rx-' + randPart + '-strengths';
+                                var dynStrengthsID = 'rx-' + randPart + '-strengths';
+                                var strengthElem = null;
+                                if($(elem).closest('.erx-line-item').length) {
+                                    strengthElem = $(elem).closest('.erx-line-item').find('[data-field="strength"]')[0]
+                                }
+                                else {
+                                    strengthElem = $(elem).closest('.stag-popup').find('[data-field="strength"]')[0]
+                                }
+                                var lineItemIndex = -1;
+                                if($(elem).is('[data-index]')) {
+                                    lineItemIndex = $(elem).attr('data-index');
+                                }
                                 $(strengthElem).attr('id', dynStrengthsID);
                                 $(strengthElem).attr('rx-id', dynID);
                                 new window.Def.Autocompleter.Prefetch(dynStrengthsID, [], {matchListValue: false});
@@ -615,11 +632,21 @@
                                     if (strengths) {
                                         strengthElem.autocomp.setListAndField(strengths, '');
                                     }
-                                    self.erxPopupItem.data.medication = $(elem).val();
+                                    if(lineItemIndex === -1) {
+                                        self.erxPopupItem.data.medication = $(elem).val();
+                                    }
+                                    else {
+                                        self.erxPopupItem.data.items[lineItemIndex].medication = $(elem).val();
+                                    }
                                 });
                                 window.Def.Autocompleter.Event.observeListSelections(dynStrengthsID, function() {
                                     var autocomp = elem.autocomp, acData = autocomp.getSelectedItemData();
-                                    self.erxPopupItem.data.strength = $(strengthElem).val();
+                                    if(lineItemIndex === -1) {
+                                        self.erxPopupItem.data.strength = $(strengthElem).val();
+                                    }
+                                    else {
+                                        self.erxPopupItem.data.items[lineItemIndex].strength = $(strengthElem).val();
+                                    }
                                 });
                                 $(elem).attr('ac-initialized', 1);
                                 $(strengthElem).attr('ac-initialized', 1);
@@ -642,7 +669,7 @@
                             $('#ticketsApp [stag-popup-key="erx-popup"] input[type="text"][data-field="icd"]:not([ac-initialized])').each(function() {
                                 var elem = this,
                                     dynID = 'icd-' + Math.ceil(Math.random() * 1000000),
-                                    vueIndex = $(this).attr('data-index');
+                                    vueIndex = $(this).is('[data-index]') ? $(this).attr('data-index') : -1;
                                 $(elem).attr('id', dynID);
                                 new window.Def.Autocompleter.Search(dynID,
                                     'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?sf=code,name&ef=name', {
@@ -653,7 +680,12 @@
                                 );
                                 window.Def.Autocompleter.Event.observeListSelections(dynID, function() {
                                     let autocomp = elem.autocomp, acData = autocomp.getSelectedItemData();
-                                    self.erxPopupItem.data.purpose = acData[0].code + ' - ' + acData[0].data.name;
+                                    if(vueIndex === -1) {
+                                        self.erxPopupItem.data.purpose = acData[0].code + ' - ' + acData[0].data.name;
+                                    }
+                                    else {
+                                        self.erxPopupItem.data.items[vueIndex].purpose = acData[0].code + ' - ' + acData[0].data.name;
+                                    }
                                     return false;
                                 });
                                 $(elem).attr('ac-initialized', 1);
@@ -703,6 +735,25 @@
                                 $(elem).attr('ac-initialized', 1);
                             });
                         },
+                        addERxLineItem: function() {
+                            this.erxPopupItem.data.items.push({
+                                medication: '',
+                                strength: '',
+                                amount: '',
+                                route: '',
+                                frequency: '',
+                                dispense: '',
+                                refills: '',
+                                purpose: '',
+                            });
+                            Vue.nextTick(() => {
+                                this.initRxAutoSuggest();
+                                this.erxInitICDAutoSuggest();
+                            });
+                        },
+                        removeERxLineItem: function(_index) {
+                            this.erxPopupItem.data.items.splice(_index, 1);
+                        },
                         initDomElementEvents: function() {
                             let self = this;
                             $(document).off('pro-changed', '#ticketsApp select[provider-search]')

resources/views/app/patient/tickets/erx-data.blade.php

@@ -16,6 +16,16 @@ erxModel: {
         dispense: '',
         refills: '',
         purpose: '',
+        items: [{
+            medication: '',
+            strength: '',
+            amount: '',
+            route: '',
+            frequency: '',
+            dispense: '',
+            refills: '',
+            purpose: '',
+        }],
         pharmacyName: '',
         pharmacyCity: '',
         pharmacyState: '',
@@ -44,6 +54,16 @@ erxPopupItem: {
         dispense: '',
         refills: '',
         purpose: '',
+        items: [{
+            medication: '',
+            strength: '',
+            amount: '',
+            route: '',
+            frequency: '',
+            dispense: '',
+            refills: '',
+            purpose: '',
+        }],
         pharmacyName: '',
         pharmacyCity: '',
         pharmacyState: '',

resources/views/app/patient/tickets/erx.blade.php

@@ -92,16 +92,24 @@
             <!-- common - only applicable for edit -->
             @include('app.patient.tickets.common-fields', ['category' => 'erx'])
 
-            <div class="p-3 border-bottom">
-
+            <div class="px-3 pt-3">
                 <div class="row mb-2">
-                    <div class="col-12">
+                    <div class="col-12 d-flex align-items-center">
                         <label class="text-secondary mb-0 font-weight-normal font-size-16">ERx</label>
+                        <span class="text-secondary mx-2">|</span>
+                        <a href="#" v-on:click.prevent="addERxLineItem()">Add</a>
                     </div>
                 </div>
+            </div>
+
+            <div class="px-3 pb-3 border-bottom">
+
                 <div class="row mb-2">
                     <div class="col-9">
-                        <label class="text-sm text-secondary mb-1">Medication</label>
+                        <label class="text-sm text-secondary mb-1">
+                            <div class="pro-initials pro-initials-sm bg-info text-white font-size-13 mr-1 font-weight-bold">1</div>
+                            Medication
+                        </label>
                         <input type="hidden" v-model="erxPopupItem.data.medication">
                         <input required type="text" data-field="medication" placeholder="Medication"
                                v-model="erxPopupItem.data.medication"
@@ -165,8 +173,80 @@
 
             </div>
 
-            @include('app.patient.tickets.pharmacy', ['label' => 'Pharmacy', 'category' => 'erx'])
+            <div class="p-3 border-bottom erx-line-item" v-for="(item, itemIndex) in erxPopupItem.data.items">
 
+                <div class="row mb-2">
+                    <div class="col-9">
+                        <label class="text-sm text-secondary mb-1 d-flex align-items-center">
+                            <div class="pro-initials pro-initials-sm bg-info text-white font-size-13 mr-1 font-weight-bold" v-html="itemIndex + 2"></div>
+                            Medication
+                            <span class="text-secondary mx-2">|</span>
+                            <a href="#" v-on:click.prevent="removeERxLineItem(itemIndex)" class="text-danger font-size-11">Remove</a>
+                        </label>
+                        <input type="hidden" v-model="item.medication">
+                        <input required type="text" data-field="medication" :data-index="itemIndex" placeholder="Medication"
+                               v-model="item.medication"
+                               class="form-control form-control-sm">
+                    </div>
+                    <div class="col-3 pl-0">
+                        <label class="text-sm text-secondary mb-1">Strength</label>
+                        <input type="hidden" v-model="item.strength">
+                        <input type="text" data-field="strength" placeholder="Strength"
+                               :value="item.strength"
+                               class="form-control form-control-sm min-width-unset">
+                    </div>
+                </div>
+                <div class="row mb-2">
+                    <div class="col-3">
+                        <label class="text-sm text-secondary mb-1">Frequency</label>
+                        <input type="text" placeholder="Frequency"
+                               v-model="item.frequency" class="form-control form-control-sm min-width-unset"
+                               data-option-list="frequency-options">
+                        <div id="frequency-options" class="data-option-list">
+                            <div>Once a day</div>
+                            <div>Twice a day</div>
+                        </div>
+                    </div>
+                    <div class="col-3 pl-0">
+                        <label class="text-sm text-secondary mb-1">Route</label>
+                        <input required type="text" placeholder="Route"
+                               v-model="item.route" class="form-control form-control-sm min-width-unset"
+                               data-option-list="route-options">
+                        <div id="route-options" class="data-option-list">
+                            <div>PO (by mouth)</div>
+                            <div>PR (per rectum)</div>
+                            <div>IM (intramuscular)</div>
+                            <div>IV (intravenous)</div>
+                            <div>ID (intradermal)</div>
+                            <div>IN (intranasal)</div>
+                            <div>TP (topical)</div>
+                            <div>SL (sublingual)</div>
+                            <div>BUCC (buccal)</div>
+                            <div>IP (intraperitoneal)</div>
+                        </div>
+                    </div>
+                    <div class="col-3 pl-0">
+                        <label class="text-sm text-secondary mb-1">Dispense Amount</label>
+                        <input required type="number" placeholder="Dispense Amount"
+                               v-model="item.dispense" class="form-control form-control-sm min-width-unset">
+                    </div>
+                    <div class="col-3 pl-0">
+                        <label class="text-sm text-secondary mb-1">Refills</label>
+                        <input type="number" placeholder="Refills"
+                               v-model="item.refills" class="form-control form-control-sm min-width-unset">
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12">
+                        <label class="text-sm text-secondary mb-1">Purpose</label>
+                        <input required type="text"  placeholder="Purpose" data-field="icd" :data-index="itemIndex"
+                               v-model="item.purpose" class="form-control form-control-sm">
+                    </div>
+                </div>
+
+            </div>
+
+            @include('app.patient.tickets.pharmacy', ['label' => 'Pharmacy', 'category' => 'erx'])
 
             <div v-if="erxPopupMode === 'add'" class="d-flex align-items-center justify-content-start mt-3 p-3 border-bottom">
                 <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="erxSavePopupItem()">Submit</button>