Rx <-> ERx link (wip)

public/css/style.css

@@ -1070,13 +1070,17 @@ body .node input[type="number"] {
 .tickets-table tbody tr.current {
     background-color: aliceblue;
 }
-.stag-slide input.form-control:not(:focus) {
+.stag-slide input.form-control:not(:focus),
+.stag-slide select.form-control:not(:focus) {
     border-color: transparent;
     background-color: transparent;
     cursor: pointer;
     font-weight: bold;
     padding-left: 0;
 }
+.stag-slide select.form-control:not(:focus) {
+    appearance: none;
+}
 .stag-slide input.form-control {
     box-shadow: none !important;
 }
@@ -1134,10 +1138,12 @@ body .node input[type="number"] {
     transition: opacity 0.3s ease;
     opacity: 0.5;
 }
-.stag-slide input[type="text"]:invalid {
+.stag-slide select.form-control:invalid,
+.stag-slide input[type="text"].form-control:invalid {
     background-color: #f8ecec;
     padding-left: 0.5rem;
 }
+.stag-slide select:focus:invalid,
 .stag-slide input[type="text"]:focus:invalid {
     background: #fff;
     border-color: #e24848;

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

@@ -173,6 +173,18 @@
                         <?php for ($i=0; $i<count($categories); $i++) { ?>
                             {{ $categories[$i] }}AutoSave: null,
                         <?php } ?>
+
+                        <?php
+                            $contentData = false;
+                            if ($patient->canvas_data) {
+                                $canvasData = json_decode($patient->canvas_data, true);
+                                if (isset($canvasData['rx'])) {
+                                    $contentData = $canvasData['rx'];
+                                }
+                            }
+                        ?>
+
+                        patientRx: <?= json_encode($contentData['items']) ?>,
                     },
                     computed: {
                         numAll: function() {
@@ -212,6 +224,31 @@
                     },
                     methods: {
 
+                        // auto fill strength on choosing medication
+                        onMedicationChange: function(_parent) {
+                            for(let i = 0; i < this.patientRx.length; i++) {
+                                if(this.patientRx[i].title === _parent.medication) {
+                                    _parent.strength = this.patientRx[i].strength;
+                                    break;
+                                }
+                            }
+                        },
+                        isRxAlreadyUsed: function(_title, _index) { // _index will be -1 for main row, 0, 1 etc. for data.items
+                            let usedInMain = (this.erxPopupItem.data.medication === _title), usedInData = false;
+                            if(this.erxPopupItem.data && this.erxPopupItem.data.items && this.erxPopupItem.data.items.length) {
+                                for(let i = 0; i < this.erxPopupItem.data.items.length; i++) {
+                                    if(this.erxPopupItem.data.items[i].medication === _title) {
+                                        usedInData = i;
+                                        break;
+                                    }
+                                }
+                            }
+                            if(_index === -1) {
+                                return usedInData !== false;
+                            }
+                            return usedInMain || (usedInData !== _index && usedInData !== false);
+                        },
+
                         // common show popup
                         preparePopup: function(_type, _item) {
                             this.preparing = true;

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

@@ -34,32 +34,12 @@
                         <div class="flex-grow-1 d-inline-flex ml-2 flex-wrap align-items-center">
                             <span class="font-weight-bold text-dark font-size-13">@{{item.data.medication}}</span>
                             <span class="d-inline-flex align-items-center" v-if="item.data.strength">
-                                    <span class="mx-2 text-secondary">•</span>
-                                    <span>@{{item.data.strength}}</span>
-                                </span>
-                            <!--                                <span class="d-inline-flex align-items-center" v-if="item.data.route">
-                                                                <span class="mx-2 text-secondary">•</span>
-                                                                <span>@{{item.data.route}}</span>
-                                                            </span>
-                                                            <span class="d-inline-flex align-items-center" v-if="item.data.frequency">
-                                                                <span class="mx-2 text-secondary">•</span>
-                                                                <span>@{{item.data.frequency}}</span>
-                                                            </span>-->
-                            <!--
-                            <span class="d-inline-flex align-items-center" v-if="item.data.dispense">
                                 <span class="mx-2 text-secondary">•</span>
-                                <span>Dispense:</span> @{{item.data.dispense}}
-                                <span class="text-secondary ml-1" v-html="inWords(item.data.dispense)"></span>
+                                <span>@{{item.data.strength}}</span>
                             </span>
-                            <span class="d-inline-flex align-items-center" v-if="item.data.refills">
-                                <span class="mx-2 text-secondary">•</span>
-                                <span><span>Refills:</span> @{{item.data.refills}}</span>
-                            </span>
-                            <span class="d-inline-flex align-items-center" v-if="item.data.purpose">
-                                <span class="mx-2 text-secondary">•</span>
-                                <span><span>Purpose:</span> @{{item.data.purpose}}</span>
+                            <span v-if="item.data.items && item.data.items.length" class="mx-2 text-info text-sm">
+                                +@{{ item.data.items.length }}
                             </span>
-                            -->
                             <span class="text-nowrap ml-4 text-secondary" v-html="pharmacy(item.data)"></span>
                             <span class="ml-3 font-weight-bold" v-if="item.data.attachments && item.data.attachments.length">
                                 <i class="fa fa-paperclip"></i>
@@ -70,12 +50,6 @@
                             </span>
                         </div>
                     </div>
-                    <!--
-                    <div>
-                        <span class="text-secondary text-sm mt-1">Created:</span>
-                        @{{ item.created_at }}
-                    </div>
-                    -->
                 </td>
 
             </tr>
@@ -94,7 +68,7 @@
 
             <div class="px-3 pt-3">
                 <div class="row mb-2">
-                    <div class="col-12 d-flex align-items-center">
+                    <div class="col-12 d-flex align-items-baseline">
                         <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>
@@ -110,17 +84,22 @@
                     <div class="col-9">
                         <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
+                            Medication (<i>from Patient Rx</i>)
                         </label>
-                        <input type="hidden" v-model="erxPopupItem.data.medication">
-                        <input required type="text" data-field="medication" placeholder="Medication"
-                               v-model="erxPopupItem.data.medication"
-                               class="form-control form-control-sm">
+                        <select required class="form-control form-control-sm"
+                                v-model="erxPopupItem.data.medication" v-on:change="onMedicationChange(erxPopupItem.data)">
+                            <option value="">(choose one)</option>
+                            <option v-for="(item, index) in patientRx"
+                                    :value="item.title"
+                                    :disabled="isRxAlreadyUsed(item.title, -1)">
+                                @{{item.title}}
+                            </option>
+                        </select>
                     </div>
                     <div class="col-3 pl-0">
                         <label class="text-sm text-secondary mb-1">Strength</label>
                         <input type="hidden" v-model="erxPopupItem.data.strength">
-                        <input type="text" data-field="strength" placeholder="Strength"
+                        <input readonly type="text" data-field="strength" placeholder="Strength"
                                :value="erxPopupItem.data.strength"
                                class="form-control form-control-sm min-width-unset">
                     </div>
@@ -181,19 +160,24 @@
                     <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
+                            Medication (<i>from Patient Rx</i>)
                             <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">
+                        <select required class="form-control form-control-sm"
+                                v-model="item.medication" v-on:change="onMedicationChange(item)">
+                            <option value="">(choose one)</option>
+                            <option v-for="(item, index) in patientRx"
+                                    :value="item.title"
+                                    :disabled="isRxAlreadyUsed(item.title, itemIndex)">
+                                @{{item.title}}
+                            </option>
+                        </select>
                     </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"
+                        <input readonly type="text" data-field="strength" placeholder="Strength"
                                :value="item.strength"
                                class="form-control form-control-sm min-width-unset">
                     </div>