Manage eRx (wip)

app/Http/Controllers/PatientController.php

@@ -438,6 +438,17 @@ class PatientController extends Controller
         return view('app.patient.prescriptions.index', compact('patient', 'type', 'currentErx'));
     }
 
+    public function prescriptionsPopup(Request $request, Client $patient, String $type = '', String $currentErx = '') {
+        if(!!$currentErx) {
+            $currentErx = Erx::where('uid', $currentErx)->first();
+        }
+        $note = null;
+        if($request->input('noteUid')) {
+            $note = Note::where('uid', $request->input('noteUid'))->first();
+        }
+        return view('app.patient.prescriptions.list-popup', compact('patient', 'type', 'currentErx', 'note'));
+    }
+
     public function prescriptionsList(Request $request, Client $patient, String $type = '', String $currentErx = '') {
         if(!!$currentErx) {
             $currentErx = Erx::where('uid', $currentErx)->first();

public/css/style.css

@@ -1046,8 +1046,11 @@ body .node input[type="number"] {
 .stag-popup.min-height-unset>form {
     min-height: unset !important;
 }
+.stag-popup.medium>form, .stag-popup.medium>.stag-popup-content {
+    width: calc(80vw - 4rem);
+}
 .stag-popup.wide>form, .stag-popup.wide>.stag-popup-content {
-    width: calc(100% - 4rem);
+    width: calc(100vw - 4rem);
 }
 .stag-popup.tall>form, .stag-popup.tall>.stag-popup-content {
     height: 100%;

resources/views/app/patient/medications-center.blade.php

@@ -556,19 +556,36 @@ $medications = $points;
 
             $('.additionReasonCategory_ui').trigger('change');
 
+            // custom buttons on title bar
+            let buttonContainer = $('<div/>').addClass('ml-auto mr-3');
+            let titleElem = $('#medications-center-{{$note->id}}').closest('.stag-popup').find('.stag-popup-title>span');
+            titleElem.next().removeClass('ml-auto');
+            titleElem.parent().addClass('align-items-baseline');
+
             // add button for "reconcile active medications"
             if($('.active-record').length) {
-                let titleElem = $('#medications-center-{{$note->id}}').closest('.stag-popup').find('.stag-popup-title>span');
-                titleElem.next().removeClass('ml-auto');
                 $('.btn-reconcile-active').remove();
                 $('<a ' +
                     'href="/medications-reconcile/{{$patient->uid}}/{{$note->uid}}" ' +
                     'title="Reconcile Active Medications" ' +
                     'open-in-stag-popup ' +
                     'popup-style="stag-popup-md" ' +
-                    'class="btn-reconcile-active ml-auto mr-3 btn btn-sm btn-info text-white font-weight-bold">Reconcile Active Medications</a>').insertAfter(titleElem);
-                titleElem.parent().addClass('align-items-baseline');
+                    'class="btn-reconcile-active btn btn-sm mr-2 btn-info text-white font-weight-bold">Reconcile Active Medications</a>')
+                    .appendTo(buttonContainer);
             }
+
+            // add button for "eRx"
+            $('.btn-manage-erx').remove();
+            $('<a ' +
+                'href="/patients/view/{{$patient->uid}}/prescriptions-popup?note_uid={{$note->uid}}&erx_category=DRUG" ' +
+                'title="Manage eRx" ' +
+                'open-in-stag-popup ' +
+                'mc-initer="prescriptions-popup-{{$patient->id}}" ' +
+                'popup-style="medium" ' +
+                'class="btn-manage-erx btn btn-sm mr-2 btn-info text-white font-weight-bold">Manage eRx</a>')
+                .appendTo(buttonContainer);
+
+            buttonContainer.insertAfter(titleElem);
         }
         addMCInitializer('medications-center-{{$note->id}}', init, '#medications-center-{{$note->id}}')
     }).call(window);

resources/views/app/patient/prescriptions/index-popup.blade.php

@@ -0,0 +1,5 @@
+@extends ('layouts.patient')
+
+@section('inner-content')
+    @include('app.patient.prescriptions.list-popup')
+@endsection

resources/views/app/patient/prescriptions/list-popup.blade.php

@@ -0,0 +1,969 @@
+<div id="prescriptions-popup-{{$patient->id}}" v-cloak class="mt-3 p-3 border-top">
+    <div class="d-flex align-items-baseline pb-2">
+        <h6 class="my-0 font-weight-bold text-secondary font-size-14">Prescriptions</h6>
+        @if(!request()->input('erx_category') || request()->input('erx_category') === 'DRUG')
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
+            <a href="#" v-on:click.prevent="newERx()">+ New eRx</a>
+        @endif
+        @if(!request()->input('erx_category') || request()->input('erx_category') === 'LAB')
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
+            <a href="#" v-on:click.prevent="newPrescription('LAB')">+ Lab</a>
+        @endif
+        @if(!request()->input('erx_category') || request()->input('erx_category') === 'IMAGING')
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
+            <a href="#" v-on:click.prevent="newPrescription('IMAGING')">+ Imaging</a>
+        @endif
+        @if(!request()->input('erx_category') || request()->input('erx_category') === 'REFERRAL')
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
+            <a href="#" v-on:click.prevent="newPrescription('REFERRAL')">+ Referral</a>
+        @endif
+        @if(!request()->input('erx_category') || request()->input('erx_category') === 'SUPPLY')
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
+            <a href="#" v-on:click.prevent="newPrescription('SUPPLY')">+ Supply</a>
+        @endif
+        @if(!request()->input('erx_category') || request()->input('erx_category') === 'OTHER')
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
+            <a href="#" v-on:click.prevent="newPrescription('OTHER')">+ Other</a>
+        @endif
+    </div>
+    <div class="d-flex align-items-start">
+        <table class="table table-striped table-sm table-bordered mb-0 flex-grow-1">
+            <thead>
+            <tr>
+                <th class="px-2 text-secondary border-bottom-0">Created</th>
+                @if(!request()->input('erx_category'))
+                <th class="px-2 text-secondary border-bottom-0">Type</th>
+                @endif
+                <th class="px-2 text-secondary border-bottom-0 w-50">Clinical</th>
+                <th class="px-2 text-secondary border-bottom-0">Prescriber</th>
+                <th class="px-2 text-secondary border-bottom-0" v-if="!currentPrescription">Sign</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="(prescription, index) in prescriptions" :class="currentPrescription && currentPrescription.id === prescription.id ? 'bg-aliceblue' : ''">
+                <td class="px-2">
+                    <a href="#" v-on:click.prevent="currentPrescription=prescription"
+                       :class="currentPrescription && currentPrescription.id === prescription.id ? 'font-weight-bold' : ''">@{{prescription.created_at_friendly_short}}</a>
+                    @if(@$note)
+                        <div v-if="prescription.note_id === {{$note->id}}" class="text-info mt-1">* Create on this note</div>
+                    @endif
+                </td>
+                @if(!request()->input('erx_category'))
+                <td class="px-2">@{{prescription.erx_category}}</td>
+                @endif
+                <td class="px-2">
+                    <div class="d-flex align-items-baseline">
+                        {{--
+                        <a v-if="!prescription.has_hcp_pro_signed" class="mr-2" href="#" v-on:click.prevent="editClinicalDetails(prescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
+                        <span v-else class="mr-2" title="Cannot edit. Prescription already signed."><i class="fa fa-edit on-hover-opaque text-secondary"></i></span>
+                        --}}
+                        <div v-if="prescription.clinical_detail_json" class="d-inline-flex align-items-baseline">
+                            <div class="" v-if="prescription.erx_category === 'DRUG'">
+                                <div class="d-flex align-items-baseline mb-1" v-for="drug in prescription.clinical_detail_json.items">
+                                    <b class="mr-2">@{{drug.medication ?? '-'}}</b>
+                                    <span class="text-secondary mr-1">@{{drug.frequency ?? ''}}</span>
+                                </div>
+                            </div>
+                            <div class="d-flex align-items-baseline" v-if="prescription.erx_category === 'LAB' || prescription.erx_category === 'IMAGING'">
+                                <b class="mr-2">@{{prescription.clinical_detail_json.test ?? '-'}}</b>
+                                <span class="text-secondary mr-1">@{{prescription.clinical_detail_json.icds ?? '-'}}</span>
+                            </div>
+                            <div class="d-flex align-items-baseline" v-if="prescription.erx_category === 'REFERRAL'">
+                                <b class="mr-2">@{{prescription.clinical_detail_json.to ?? '-'}}</b>
+                                <span class="text-secondary mr-1">@{{prescription.clinical_detail_json.memo ?? '-'}}</span>
+                            </div>
+                            <div class="d-flex align-items-baseline" v-if="prescription.erx_category === 'SUPPLY'">
+                                <b class="mr-2">@{{prescription.clinical_detail_json.item ?? '-'}}</b>
+                                <span class="text-secondary mr-1">@{{prescription.clinical_detail_json.quantity ?? '-'}}</span>
+                            </div>
+                            <div class="d-flex align-items-baseline" v-if="prescription.erx_category === 'OTHER'">
+                                <b class="mr-2">@{{prescription.clinical_detail_json.title ?? '-'}}</b>
+                                <span class="text-secondary mr-1">@{{prescription.clinical_detail_json.memo ?? '-'}}</span>
+                            </div>
+                        </div>
+                        <div v-else>-</div>
+                    </div>
+                </td>
+                <td class="px-2">
+                    <div class="d-flex align-items-baseline">
+                        {{--
+                        <a v-if="!prescription.has_hcp_pro_signed" class="mr-2" href="#" v-on:click.prevent="editHcpPro(prescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
+                        <span v-else class="mr-2" title="Cannot edit. Prescription already signed."><i class="fa fa-edit on-hover-opaque text-secondary"></i></span>
+                        --}}
+                        <div>@{{prescription.hcpProDisplayName}}</div>
+                    </div>
+                </td>
+                <td class="px-2" v-if="!currentPrescription">
+                    <div v-if="prescription.has_hcp_pro_signed" class="d-flex align-items-baseline">
+                        <i class="text-secondary fa fa-check mr-1"></i>
+                        <span class="text-secondary">Signed</span>
+                    </div>
+                    {{--
+                    <div v-else>
+                        <a v-if="prescription.hcp_pro_id === {{$pro->id}}"
+                           href="#"
+                           v-on:click.prevent="signAsHcpPro(prescription)">Sign</a>
+                        <span v-else>-</span>
+                    </div>
+                    --}}
+                </td>
+            </tr>
+            </tbody>
+        </table>
+        <div v-if="currentPrescription" class="min-width-500px ml-2 border align-self-stretch p-3">
+            <div class="d-flex align-items-center">
+                <h3 class="font-size-16 m-0">
+                    <span class="mr-1 font-size-16">@{{ currentPrescription.erx_category }} / @{{ currentPrescription.created_at_friendly_short }}</span>
+                </h3>
+                <a class="ml-auto" href="#" v-on:click.prevent="currentPrescription=null">
+                    <i class="fa fa-times-circle on-hover-opaque"></i>
+                </a>
+            </div>
+            <hr class="my-3">
+            <div class="pb-2 d-flex align-items-start">
+                <span class="min-width-140px text-secondary text-sm">Created</span>
+                <div>
+                    <span>@{{currentPrescription.created_at_friendly}}</span>
+                    @if(@$note)
+                        <div v-if="currentPrescription.note_id === {{$note->id}}" class="text-info mt-1 font-weight-bold">* Create on this note</div>
+                    @endif
+                </div>
+            </div>
+            <div class="pb-2 d-flex align-items-center">
+                <span class="min-width-140px text-secondary text-sm">Type</span>
+                <span>@{{currentPrescription.erx_category}}</span>
+            </div>
+            <div class="pb-2 d-flex align-items-baseline" v-if="currentPrescription.erx_category !== 'DRUG'">
+                <span class="min-width-140px text-secondary text-sm">Clinical</span>
+                <div class="d-inline-flex align-items-baseline flex-grow-1">
+                    <a v-if="!currentPrescription.has_hcp_pro_signed" class="mr-2" href="#" v-on:click.prevent="editClinicalDetails(currentPrescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
+                    <span v-else class="mr-2" title="Cannot edit. Prescription already signed."><i class="fa fa-edit on-hover-opaque text-secondary"></i></span>
+                    <div v-if="currentPrescription.clinical_detail_json" class="d-inline-flex align-items-baseline">
+                        <div class="" v-if="currentPrescription.erx_category === 'DRUG'">
+                            <div class="d-flex align-items-baseline mb-1" v-for="drug in currentPrescription.clinical_detail_json.items">
+                                <b class="mr-2">@{{drug.medication ?? '-'}}</b>
+                                <span class="text-secondary mr-1">@{{drug.frequency ?? ''}}</span>
+                            </div>
+                        </div>
+                        <div class="d-flex align-items-baseline" v-if="currentPrescription.erx_category === 'LAB' || currentPrescription.erx_category === 'IMAGING'">
+                            <b class="mr-2">@{{currentPrescription.clinical_detail_json.test ?? '-'}}</b>
+                            <span class="text-secondary mr-1">@{{currentPrescription.clinical_detail_json.icds ?? '-'}}</span>
+                        </div>
+                        <div class="d-flex align-items-baseline" v-if="currentPrescription.erx_category === 'REFERRAL'">
+                            <b class="mr-2">@{{currentPrescription.clinical_detail_json.to ?? '-'}}</b>
+                            <span class="text-secondary mr-1">@{{currentPrescription.clinical_detail_json.memo ?? '-'}}</span>
+                        </div>
+                        <div class="d-flex align-items-baseline" v-if="currentPrescription.erx_category === 'SUPPLY'">
+                            <b class="mr-2">@{{currentPrescription.clinical_detail_json.item ?? '-'}}</b>
+                            <span class="text-secondary mr-1">@{{currentPrescription.clinical_detail_json.quantity ?? '-'}}</span>
+                        </div>
+                        <div class="d-flex align-items-baseline" v-if="currentPrescription.erx_category === 'OTHER'">
+                            <b class="mr-2">@{{currentPrescription.clinical_detail_json.title ?? '-'}}</b>
+                            <span class="text-secondary mr-1">@{{currentPrescription.clinical_detail_json.memo ?? '-'}}</span>
+                        </div>
+                    </div>
+                    <div v-else>-</div>
+                </div>
+            </div>
+            <div class="pb-2 d-flex align-items-baseline" v-if="currentPrescription.erx_category === 'DRUG'">
+                <span class="min-width-140px text-secondary text-sm">Medications</span>
+                <div class="flex-grow-1">
+
+                    <div v-if="currentPrescription.clinical_detail_json">
+                        <div class="d-flex align-items-baseline mb-1" v-for="drug in currentPrescription.clinical_detail_json.items">
+                            <a v-if="!currentPrescription.has_hcp_pro_signed" class="mr-2" href="#"
+                               v-on:click.prevent="removeDrugFromERx(drug.medication)">
+                                <i class="fa fa-trash-alt text-danger on-hover-opaque"></i>
+                            </a>
+                            <b class="mr-2">@{{drug.medication ?? '-'}}</b>
+                            <span class="text-secondary mr-1">@{{drug.frequency ?? ''}}</span>
+                        </div>
+                    </div>
+
+                    <div class="d-flex align-items-baseline">
+                        <a href="#" v-on:click.prevent="addDrugToErxMode='existing'">+ Existing Medication</a>
+                        <span class="mx-2">|</span>
+                        <a href="#" v-on:click.prevent="addDrugToErxMode='new'">+ New Medication</a>
+                    </div>
+                </div>
+            </div>
+
+            <div v-if="addDrugToErxMode === 'existing'" class="border border-info p-2 bg-aliceblue mb-2 rounded">
+                <div class="d-flex align-items-baseline mb-2">
+                    <label for="" class="text-secondary font-weight-bold m-0">Existing Medications</label>
+                    <a href="#" v-on:click.prevent="addDrugToErxMode = ''" class="ml-auto">Close</a>
+                </div>
+                <table class="m-0 table table-sm border bg-white table-hover">
+                    <tr>
+                        <th>Medication</th>
+                        <th>Dispense</th>
+                        <th>Refills</th>
+                        <th>&nbsp;</th>
+                    </tr>
+                    <tr v-for="drug in existingDrugs" v-if="notAlreadyAdded(drug.data.name)">
+                        <td class="width-200px">@{{ drug.data.name }}</td>
+                        <td class="width-70px"><input type="text" class="form-control form-control-sm min-width-unset" v-model="drug.data.dispense"></td>
+                        <td class="width-70px"><input type="text" class="form-control form-control-sm min-width-unset" v-model="drug.data.refills"></td>
+                        <td class="text-right">
+                            <a href="#" v-on:click.prevent="addExistingDrugToERx(drug.uid)" class="text-nowrap">Add to eRx</a>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+
+            <div v-if="addDrugToErxMode === 'new'" class="border border-info p-2 bg-aliceblue mb-2">
+                Add new form
+            </div>
+
+            <div class="pb-2 d-flex align-items-center">
+                <span class="min-width-140px text-secondary text-sm">Logistics</span>
+                <div class="d-inline-flex align-items-baseline flex-grow-1">
+                    <a class="mr-2" href="#" v-on:click.prevent="editLogisticsDetails(currentPrescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
+                    <div v-if="currentPrescription.logistics_detail_json" class="d-flex align-items-baseline">
+                        <div class="d-flex align-items-baseline">
+                            <b class="mr-2">@{{currentPrescription.logistics_detail_json.facilityName ?? '-'}}</b>
+                            <span class="text-secondary mr-1">@{{currentPrescription.logistics_detail_json.facilityCity ?? '-'}}</span>
+                            <span class="text-secondary mr-1">@{{currentPrescription.logistics_detail_json.facilityState ?? '-'}}</span>
+                        </div>
+                    </div>
+                    <div v-else>-</div>
+                </div>
+            </div>
+            <div class="pb-2 d-flex align-items-center">
+                <span class="min-width-140px text-secondary text-sm">HCP Pro</span>
+                <div class="d-inline-flex align-items-baseline flex-grow-1">
+                    <a v-if="!currentPrescription.has_hcp_pro_signed" class="mr-2" href="#" v-on:click.prevent="editHcpPro(currentPrescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
+                    <span v-else class="mr-2" title="Cannot edit. Prescription already signed."><i class="fa fa-edit on-hover-opaque text-secondary"></i></span>
+                    <div>@{{currentPrescription.hcpProDisplayName}}</div>
+                </div>
+            </div>
+            <div class="pb-2 d-flex align-items-center">
+                <span class="min-width-140px text-secondary text-sm">Sign</span>
+                <div v-if="currentPrescription.has_hcp_pro_signed" class="d-inline-flex align-items-baseline">
+                    <i class="text-secondary fa fa-check mr-1"></i>
+                    <span class="text-secondary">Signed</span>
+                </div>
+                <div v-else>
+                    <a v-if="currentPrescription.hcp_pro_id === {{$pro->id}}"
+                       href="#"
+                       v-on:click.prevent="signAsHcpPro(currentPrescription)">Sign</a>
+                    <span v-else>-</span>
+                </div>
+            </div>
+            <div class="pb-2 d-flex align-items-center">
+                <span class="min-width-140px text-secondary text-sm">Pro Status</span>
+                <div class="d-inline-flex align-items-baseline">
+                    <a class="mr-2" href="#" v-on:click.prevent="editProStatus(currentPrescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
+                    <div v-if="currentPrescription.pro_declared_status" class="d-flex align-items-baseline">
+                        @{{ sanitizeStatus(currentPrescription.pro_declared_status) }}
+                    </div>
+                    <div v-else>-</div>
+                </div>
+            </div>
+            <div class="pb-2 d-flex align-items-center">
+                <span class="min-width-140px text-secondary text-sm">Client Status</span>
+                <div class="d-inline-flex align-items-baseline">
+                    <a class="mr-2" href="#" v-on:click.prevent="editClientStatus(currentPrescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
+                    <div v-if="currentPrescription.client_declared_status" class="d-flex align-items-baseline">
+                        @{{ sanitizeStatus(currentPrescription.client_declared_status) }}
+                    </div>
+                    <div v-else>-</div>
+                </div>
+            </div>
+            <div class="pb-2 d-flex align-items-center">
+                <span class="min-width-140px text-secondary text-sm">PDF</span>
+                <div class="d-inline-flex align-items-baseline">
+                    <a class="pdf-viewer-trigger" native target="_blank"
+                       :href="'/prescription-download-as-pdf/' + currentPrescription.uid">View</a>
+                    <span class="mx-2 text-secondary">|</span>
+                    <a native target="_blank"
+                       :href="'/prescription-download-as-pdf/' + currentPrescription.uid">Download</a>
+                    <span class="mx-2 text-secondary">|</span>
+                    <a href="#" v-on:click.prevent="transmit(currentPrescription)">Transmit</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    @include('app.patient.prescriptions.drug-form')
+    @include('app.patient.prescriptions.lab-form')
+    @include('app.patient.prescriptions.imaging-form')
+    @include('app.patient.prescriptions.referral-form')
+    @include('app.patient.prescriptions.supply-form')
+    @include('app.patient.prescriptions.other-form')
+    @include('app.patient.prescriptions.logistics-form')
+    @include('app.patient.prescriptions.hcp-pro-form')
+    @include('app.patient.prescriptions.sign-as-hcp-form')
+    @include('app.patient.prescriptions.pro-status-form')
+    @include('app.patient.prescriptions.client-status-form')
+    @include('app.patient.prescriptions.transmit-form')
+</div>
+<script>
+    (function() {
+
+        <?php
+        $prescriptions = $patient->prescriptions;
+        $currentPrescription = null;
+        foreach ($prescriptions as $prescription) {
+            if($prescription->clinical_detail_json) {
+                $prescription->clinical_detail_json = json_decode($prescription->clinical_detail_json);
+            }
+            if($prescription->logistics_detail_json) {
+                $prescription->logistics_detail_json = json_decode($prescription->logistics_detail_json);
+            }
+            $prescription->created_at_friendly = friendlier_date_time($prescription->created_at);
+            $prescription->created_at_friendly_short = friendlier_date_time($prescription->created_at, false);
+            $prescription->hcpProDisplayName = $prescription->hcpPro ? $prescription->hcpPro->displayName() : '-';
+            $prescription->hcpProUid = $prescription->hcpPro ? $prescription->hcpPro->uid : '';
+
+            if(!!@$currentErx && $currentErx->uid === $prescription->uid) {
+                $currentPrescription = $prescription;
+            }
+        }
+
+        if(!!request()->input('erx_category')) {
+            $prescriptions = $prescriptions->filter(function($_p) {
+                return $_p->erx_category === request()->input('erx_category');
+            });
+        }
+
+        $existingActiveDrugs = \App\Models\Point
+            ::where('client_id', $patient->id)
+            ->where('category', 'MEDICATION')
+            ->where('is_removed_due_to_entry_error', false)
+            ->where('is_removed', false)
+            ->orderBy('created_at')
+            ->get();
+        foreach ($existingActiveDrugs as $point) {
+            if ($point->data) {
+                $point->data = json_decode($point->data);
+            }
+        }
+
+        ?>
+
+        function init() {
+
+            window.eRxApp = new Vue({
+                el: '#prescriptions-popup-{{$patient->id}}',
+                delimiters: ['@{{', '}}'],
+                data: {
+
+                    prescriptions: <?= json_encode($prescriptions) ?>,
+
+                    currentPrescriptionAction: '',
+                    currentPrescriptionType: '',
+
+                    addDrugToErxMode: '',
+                    existingDrugs: <?= json_encode($existingActiveDrugs) ?>,
+                    existingDrugToAddUid: '',
+
+                    // selected
+                    currentPrescription:  <?= $currentPrescription ? json_encode($currentPrescription) : 'null' ?>,
+
+                    // for editing clinical details
+                    currentPrescription_DRUG: {
+                        noteUid: '{{ @$note ? $note->uid : '' }}',
+                        clientUid: '{{ $patient->uid }}',
+                        replacesCancelledErxUid: null, // TODO: step-2 support UI to mark a new one as replacing a cancelled one
+                        hcpProUid: '{{$pro->uid}}',
+                        erxCategory: 'DRUG',
+                        clinicalDetailJson: {
+                            items: [
+                                {
+                                    medication: '',
+                                    frequency: '',
+                                    dispense: '',
+                                    refills: '',
+                                    purpose: ''
+                                }
+                            ]
+                        }
+                    },
+                    currentPrescription_LAB: {
+                        noteUid: '{{ @$note ? $note->uid : '' }}',
+                        clientUid: '{{ $patient->uid }}',
+                        replacesCancelledErxUid: null, // TODO: step-2 support UI to mark a new one as replacing a cancelled one
+                        hcpProUid: '{{$pro->uid}}',
+                        erxCategory: 'LAB',
+                        clinicalDetailJson: {
+                            test: '',
+                            icds: '',
+                            memo: '',
+                        }
+                    },
+                    currentPrescription_IMAGING: {
+                        noteUid: '{{ @$note ? $note->uid : '' }}',
+                        clientUid: '{{ $patient->uid }}',
+                        replacesCancelledErxUid: null, // TODO: step-2 support UI to mark a new one as replacing a cancelled one
+                        hcpProUid: '{{$pro->uid}}',
+                        erxCategory: 'IMAGING',
+                        clinicalDetailJson: {
+                            test: '',
+                            icds: '',
+                            memo: '',
+                        }
+                    },
+                    currentPrescription_REFERRAL: {
+                        noteUid: '{{ @$note ? $note->uid : '' }}',
+                        clientUid: '{{ $patient->uid }}',
+                        replacesCancelledErxUid: null, // TODO: step-2 support UI to mark a new one as replacing a cancelled one
+                        hcpProUid: '{{$pro->uid}}',
+                        erxCategory: 'REFERRAL',
+                        clinicalDetailJson: {
+                            to: '',
+                            memo: '',
+                        }
+                    },
+                    currentPrescription_SUPPLY: {
+                        noteUid: '{{ @$note ? $note->uid : '' }}',
+                        clientUid: '{{ $patient->uid }}',
+                        replacesCancelledErxUid: null, // TODO: step-2 support UI to mark a new one as replacing a cancelled one
+                        hcpProUid: '{{$pro->uid}}',
+                        erxCategory: 'SUPPLY',
+                        clinicalDetailJson: {
+                            item: '',
+                            quantity: '',
+                            memo: '',
+                        }
+                    },
+                    currentPrescription_OTHER: {
+                        noteUid: '{{ @$note ? $note->uid : '' }}',
+                        clientUid: '{{ $patient->uid }}',
+                        replacesCancelledErxUid: null, // TODO: step-2 support UI to mark a new one as replacing a cancelled one
+                        hcpProUid: '{{$pro->uid}}',
+                        erxCategory: 'OTHER',
+                        clinicalDetailJson: {
+                            title: '',
+                            memo: '',
+                        }
+                    },
+
+                    // for editing logistics - common
+                    currentPrescriptionLogistics: {
+                        uid: '',
+                        logisticsDetailJson: {
+                            facilityName: '',
+                            facilityCity: '',
+                            facilityState: '',
+                            facilityAddressMemo: '',
+                            facilityPhone: '',
+                            facilityFax: '',
+                            facilityZip: '',
+                        }
+                    },
+
+                    // for editing hcp, sign, pro status & client status - common
+                    currentPrescriptionHcpPro: {
+                        uid: '',
+                        newHcpProUid: '',
+                    },
+                    currentPrescriptionSign: {
+                        uid: '',
+                        declaredVersionNumber: '',
+                    },
+                    currentPrescriptionProStatus: {
+                        uid: '',
+                        status: '',
+                        memo: '',
+                    },
+                    currentPrescriptionClientStatus: {
+                        uid: '',
+                        status: '',
+                        memo: '',
+                    },
+                    currentPrescriptionTransmit: {
+                        uid: '',
+                        logistics: '',
+                        toWho: '',
+                        toEmail: '',
+                        toFaxNumber: '',
+                        toFaxNumberAttentionLine: '',
+                        toFaxNumberCoverSheetMemo: '',
+                        copyToPatient: false,
+                        copyToPatientFaxNumber: '',
+                        copyToPatientEmail: '',
+                    }
+                },
+                methods: {
+
+                    // new eRx (only for popup-list)
+                    newERx: function() {
+                        let payload = {
+                            noteUid: '{{ @$note ? $note->uid : '' }}',
+                            clientUid: '{{$patient->uid}}',
+                            hcpProUid: '{{$pro->uid}}',
+                            erxCategory: 'DRUG'
+                        };
+                        $.post('/api/erx/create', payload, _data => {
+                            if(!hasResponseError(_data)) {
+                                refreshDynamicStagPopup();
+                            }
+                        }, 'json');
+                        return false;
+                    },
+
+                    // new/edit/save-clinical
+                    newPrescription: function(_type) {
+                        this.currentPrescriptionAction = 'ADD';
+                        this.currentPrescriptionType = _type;
+                        switch (_type) {
+                            case 'DRUG':
+                                this.currentPrescription_DRUG = {
+                                    noteUid: '{{ @$note ? $note->uid : '' }}',
+                                    clientUid: '{{ $patient->uid }}',
+                                    replacesCancelledErxUid: null, // TODO: step-2 support UI to mark a new one as replacing a cancelled one
+                                    hcpProUid: '{{$pro->uid}}',
+                                    erxCategory: _type,
+                                    clinicalDetailJson: {
+                                        items: [
+                                            {
+                                                medication: '',
+                                                frequency: '',
+                                                dispense: '',
+                                                refills: '',
+                                                purpose: ''
+                                            }
+                                        ]
+                                    }
+                                };
+                                break;
+                            case 'LAB':
+                            case 'IMAGING':
+                                this.currentPrescription_LAB = {
+                                    noteUid: '{{ @$note ? $note->uid : '' }}',
+                                    clientUid: '{{ $patient->uid }}',
+                                    replacesCancelledErxUid: null, // TODO: step-2 support UI to mark a new one as replacing a cancelled one
+                                    hcpProUid: '{{$pro->uid}}',
+                                    erxCategory: _type,
+                                    clinicalDetailJson: {
+                                        test: '',
+                                        icds: '',
+                                        memo: '',
+                                    }
+                                };
+                                break;
+                            case 'REFERRAL':
+                                this.currentPrescription_LAB = {
+                                    noteUid: '{{ @$note ? $note->uid : '' }}',
+                                    clientUid: '{{ $patient->uid }}',
+                                    replacesCancelledErxUid: null, // TODO: step-2 support UI to mark a new one as replacing a cancelled one
+                                    hcpProUid: '{{$pro->uid}}',
+                                    erxCategory: _type,
+                                    clinicalDetailJson: {
+                                        to: '',
+                                        memo: '',
+                                    }
+                                };
+                                break;
+                            case 'SUPPLY':
+                                this.currentPrescription_LAB = {
+                                    noteUid: '{{ @$note ? $note->uid : '' }}',
+                                    clientUid: '{{ $patient->uid }}',
+                                    replacesCancelledErxUid: null, // TODO: step-2 support UI to mark a new one as replacing a cancelled one
+                                    hcpProUid: '{{$pro->uid}}',
+                                    erxCategory: _type,
+                                    clinicalDetailJson: {
+                                        item: '',
+                                        quantity: '',
+                                        memo: '',
+                                    }
+                                };
+                                break;
+                            case 'OTHER':
+                                this.currentPrescription_LAB = {
+                                    noteUid: '{{ @$note ? $note->uid : '' }}',
+                                    clientUid: '{{ $patient->uid }}',
+                                    replacesCancelledErxUid: null, // TODO: step-2 support UI to mark a new one as replacing a cancelled one
+                                    hcpProUid: '{{$pro->uid}}',
+                                    erxCategory: _type,
+                                    clinicalDetailJson: {
+                                        title: '',
+                                        memo: '',
+                                    }
+                                };
+                                break;
+                        }
+                        Vue.nextTick(() => {
+                            showStagPopup('prescription-popup-' + this.currentPrescriptionType, true);
+                            if(_type === 'DRUG') {
+                                $('[stag-suggest][stag-suggest-initialized]').removeAttr('stag-suggest-initialized');
+                                initStagSuggest();
+                                this.initFdbMedSuggest();
+                            }
+                        });
+                    },
+                    editClinicalDetails: function(_prescription) {
+                        this.currentPrescriptionAction = 'EDIT_CLINICAL';
+                        this.currentPrescriptionType = _prescription.erx_category;
+                        this['currentPrescription_' + this.currentPrescriptionType] = {
+                            uid: _prescription.uid,
+                            clinicalDetailJson: JSON.parse(JSON.stringify(_prescription.clinical_detail_json))
+                        };
+                        Vue.nextTick(() => {
+                            showStagPopup('prescription-popup-' + this.currentPrescriptionType, true);
+                            if(this.currentPrescriptionType === 'DRUG') {
+                                $('[stag-suggest][stag-suggest-initialized]').removeAttr('stag-suggest-initialized');
+                                initStagSuggest();
+                                this.initFdbMedSuggest();
+
+                                // re-populate drug fields
+                                /*console.log(this.currentPrescription_DRUG);
+                                let parentSegment = $('#prescriptions-popup-{{$patient->id}} [stag-popup-key="prescription-popup-DRUG"]>form').first();
+                                parentSegment.find('input.prescription-medication').val(this.currentPrescription_DRUG.clinicalDetailJson.medication);
+                                parentSegment.find('select.prescription-route')
+                                    .empty()
+                                    .append($('<option/>').attr('value', 1).text(this.currentPrescription_DRUG.clinicalDetailJson.route))
+                                    .val(1);
+                                parentSegment.find('select.prescription-dose')
+                                    .empty()
+                                    .append($('<option/>').attr('value', 1).text(this.currentPrescription_DRUG.clinicalDetailJson.dose))
+                                    .val(1);
+                                parentSegment.find('select.prescription-strength')
+                                    .empty()
+                                    .append($('<option/>').attr('value', 1).text(this.currentPrescription_DRUG.clinicalDetailJson.strength))
+                                    .val(1);*/
+                            }
+                        });
+                    },
+                    savePrescription: function() {
+                        let payload = JSON.parse(JSON.stringify(this['currentPrescription_' + this.currentPrescriptionType]));
+                        payload.clinicalDetailJson = JSON.stringify(payload.clinicalDetailJson);
+                        switch (this.currentPrescriptionAction) {
+                            case 'ADD':
+                                $.post('/api/erx/create', payload, _data => {
+                                    if(!hasResponseError(_data)) {
+                                        toastr.success('Prescription added');
+                                        closeStagPopup();
+                                        @if(@$note)
+                                        fastReload();
+                                        @else
+                                        fastLoad('/patients/view/{{$patient->uid}}/prescriptions/' + this.currentPrescriptionType.toLowerCase() + '/' + _data.data);
+                                        @endif
+                                    }
+                                }, 'json');
+                                break;
+                            case 'EDIT_CLINICAL':
+                                $.post('/api/erx/updateClinicalDetail', payload, _data => {
+                                    if(!hasResponseError(_data)) {
+                                        toastr.success('Prescription updated');
+                                        closeStagPopup();
+                                        fastReload();
+                                    }
+                                }, 'json');
+                                break;
+                        }
+                    },
+
+                    // edit logistics
+                    editLogisticsDetails: function(_prescription) {
+                        this.currentPrescriptionAction = 'EDIT_LOGISTICS';
+                        this.currentPrescriptionLogistics = {
+                            uid: _prescription.uid,
+                            logisticsDetailJson: _prescription.logistics_detail_json ? JSON.parse(JSON.stringify(_prescription.logistics_detail_json)) : {
+                                facilityName: '',
+                                facilityCity: '',
+                                facilityState: '',
+                                facilityAddressMemo: '',
+                                facilityPhone: '',
+                                facilityFax: '',
+                                facilityZip: '',
+                            }
+                        }
+                        Vue.nextTick(() => {
+                            showStagPopup('logistics-popup', true);
+                        });
+                    },
+                    saveLogistics: function() {
+                        let payload = JSON.parse(JSON.stringify(this.currentPrescriptionLogistics));
+                        payload.logisticsDetailJson = JSON.stringify(payload.logisticsDetailJson);
+                        $.post('/api/erx/updateLogisticsDetail', payload, _data => {
+                            if(!hasResponseError(_data)) {
+                                toastr.success('Logistics updated');
+                                closeStagPopup();
+                                fastReload();
+                            }
+                        }, 'json');
+                    },
+
+                    // edit hcp (ordering) pro
+                    editHcpPro: function(_prescription) {
+                        this.currentPrescriptionAction = 'EDIT_HCP_PRO';
+                        this.currentPrescriptionType = _prescription.erx_category;
+                        this.currentPrescriptionHcpPro = {
+                            uid: _prescription.uid,
+                            newHcpProUid: _prescription.hcpProUid
+                        };
+                        Vue.nextTick(() => {
+                            showStagPopup('hcp-pro-popup', true);
+                            $('.erx-hcp-pro-select').removeAttr('pro-suggest-initialized');
+                            initProSuggest();
+                        });
+                    },
+                    saveHcpPro: function() {
+                        let payload = JSON.parse(JSON.stringify(this.currentPrescriptionHcpPro));
+                        $.post('/api/erx/updateHcpPro', payload, _data => {
+                            if(!hasResponseError(_data)) {
+                                toastr.success('HCP Pro updated');
+                                closeStagPopup();
+                                fastReload();
+                            }
+                        }, 'json');
+                    },
+
+                    // sign
+                    signAsHcpPro: function(_prescription) {
+                        this.currentPrescriptionAction = 'SIGN_AS_HCP';
+                        this.currentPrescriptionType = _prescription.erx_category;
+                        this.currentPrescriptionSign = {
+                            uid: _prescription.uid,
+                            declaredVersionNumber: _prescription.version_number
+                        };
+                        Vue.nextTick(() => {
+                            showStagPopup('sign-as-hcp-popup', true);
+                        });
+                    },
+                    saveSignAsHcpPro: function() {
+                        let payload = JSON.parse(JSON.stringify(this.currentPrescriptionSign));
+                        $.post('/api/erx/signAsHcp', payload, _data => {
+                            if(!hasResponseError(_data)) {
+                                toastr.success('Signed');
+                                closeStagPopup();
+                                fastReload();
+                            }
+                        }, 'json');
+                    },
+
+                    // edit pro status
+                    editProStatus: function(_prescription) {
+                        this.currentPrescriptionAction = 'EDIT_PRO_DECLARED_STATUS';
+                        this.currentPrescriptionType = _prescription.erx_category;
+                        this.currentPrescriptionProStatus = {
+                            uid: _prescription.uid,
+                            status: _prescription.pro_declared_status,
+                            memo: _prescription.pro_declared_status_memo,
+                        };
+                        Vue.nextTick(() => {
+                            showStagPopup('pro-status-popup', true);
+                        });
+                    },
+                    saveProStatus: function() {
+                        let payload = JSON.parse(JSON.stringify(this.currentPrescriptionProStatus));
+                        $.post('/api/erx/updateProDeclaredStatus', payload, _data => {
+                            if(!hasResponseError(_data)) {
+                                toastr.success('Pro declared status updated');
+                                closeStagPopup();
+                                fastReload();
+                            }
+                        }, 'json');
+                    },
+
+                    // edit client status
+                    editClientStatus: function(_prescription) {
+                        this.currentPrescriptionAction = 'EDIT_CLIENT_DECLARED_STATUS';
+                        this.currentPrescriptionType = _prescription.erx_category;
+                        this.currentPrescriptionClientStatus = {
+                            uid: _prescription.uid,
+                            status: _prescription.client_declared_status,
+                            memo: _prescription.client_declared_status_memo,
+                        };
+                        Vue.nextTick(() => {
+                            showStagPopup('client-status-popup', true);
+                        });
+                    },
+                    saveClientStatus: function() {
+                        let payload = JSON.parse(JSON.stringify(this.currentPrescriptionClientStatus));
+                        $.post('/api/erx/updateClientDeclaredStatus', payload, _data => {
+                            if(!hasResponseError(_data)) {
+                                toastr.success('Client declared status updated');
+                                closeStagPopup();
+                                fastReload();
+                            }
+                        }, 'json');
+                    },
+
+                    // sane display status
+                    sanitizeStatus: function(_s) {
+                        _s = _s.toLowerCase().replaceAll('_', ' ');
+                        _s = _s[0].toUpperCase() + _s.substr(1);
+                        return _s;
+                    },
+
+                    // transmit
+                    transmit: function(_prescription) {
+                        this.currentPrescriptionTransmit = {
+                            uid: _prescription.uid,
+                            toWho: _prescription.logistics_detail_json ? _prescription.logistics_detail_json.facilityName : '',
+                            toEmail: '',
+                            toFaxNumber: _prescription.logistics_detail_json ? _prescription.logistics_detail_json.facilityFax : '',
+                            toFaxNumberAttentionLine: '',
+                            toFaxNumberCoverSheetMemo: '',
+                            copyToPatient: false,
+                            copyToPatientFaxNumber: '{{$patient->cell_number}}',
+                            copyToPatientEmail: '{{$patient->email_address}}',
+                            _token: '{{csrf_token()}}'
+                        };
+                        Vue.nextTick(() => {
+                            showStagPopup('transmit-popup');
+                            this.transmitModalPDFPreview();
+                        });
+                    },
+                    transmitModalPDFPreview: function() {
+
+                        let _loadedPDF = null, _numPages = 1, _page = 1;
+
+                        function _load(_url) {
+
+                            _loadedPDF = null;
+                            _numPages = 1;
+                            _page = 1;
+
+                            $('#transmit-pdf-preview>canvas').remove();
+
+                            let url = _url;
+                            let pdfjsLib = window['pdfjs-dist/build/pdf'];
+                            pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
+                            let loadingTask = pdfjsLib.getDocument(url);
+                            loadingTask.promise.then(function (pdf) {
+                                _numPages = pdf.numPages;
+                                _loadedPDF = pdf;
+                                _page = 1;
+                                _render();
+                            }, function (reason) {
+                                // reason.message;
+                            });
+                        }
+                        function _render() {
+
+                            _loadedPDF.getPage(_page).then(function (page) {
+
+                                // create canvas
+                                let canvasElement = $('<canvas/>')
+                                    .addClass('pdf-viewer-page pdf-preview-page')
+                                    .appendTo('#transmit-pdf-preview');
+
+                                let canvas = canvasElement[0];
+                                let viewport = page.getViewport({scale: 0.75});
+                                let context = canvas.getContext('2d');
+                                canvas.height = viewport.height;
+                                canvas.width = viewport.width;
+                                const $canvas = $(canvas);
+                                let renderContext = {
+                                    canvasContext: context,
+                                    viewport: viewport
+                                };
+                                let renderTask = page.render(renderContext);
+                                renderTask.promise.then(function () {
+                                    if(_page < _numPages) {
+                                        _page++;
+                                        _render();
+                                    }
+                                });
+                            });
+                        }
+
+                        _load('/prescription-download-as-pdf/' + this.currentPrescriptionTransmit.uid);
+                    },
+                    doTransmit: function (_item) {
+                        let payload = JSON.parse(JSON.stringify(this.currentPrescriptionTransmit));
+                        $.post('/prescription-transmit/' + payload.uid, payload, _data => {
+                            if(!hasResponseError(_data)) {
+                                toastr.success('Transmission initiated');
+                                closeStagPopup();
+                                fastReload();
+                            }
+                        }, 'json');
+                        closeStagPopup();
+                    },
+
+                    // cancel, etc.
+
+                    initFdbMedSuggest: function() {
+
+                        let self = this;
+
+                        let parentSegment = $('#prescriptions-popup-{{$patient->id}} [stag-popup-key="prescription-popup-DRUG"]>form').first();
+
+                        parentSegment.find('input.prescription-medication').off('stag-suggest-selected');
+                        parentSegment.find('input.prescription-medication').on('stag-suggest-selected', (_e, _input, _data) => {
+
+                            // _input is the textbox
+                            // _data is {med_name_id: "50567", text: "Children's Tylenol"}
+
+                            // set vue values
+                            // self.currentPrescription_DRUG.clinicalDetailJson.medication = _data.text;
+
+                        });
+                    },
+                    notAlreadyAdded: function(_name) {
+                        if(!this.currentPrescription || !this.currentPrescription.clinical_detail_json) return true;
+                        for (let i = 0; i < this.currentPrescription.clinical_detail_json.items.length; i++) {
+                            if(this.currentPrescription.clinical_detail_json.items[i].medication === _name) {
+                                return false;
+                            }
+                        }
+                        return true;
+                    },
+                    addExistingDrugToERx: function(_uid) {
+                        if(!this.currentPrescription.clinical_detail_json) {
+                            this.currentPrescription.clinical_detail_json = {};
+                        }
+                        if(!this.currentPrescription.clinical_detail_json.items) {
+                            this.currentPrescription.clinical_detail_json.items = [];
+                        }
+                        let existing = this.existingDrugs.filter(_x => {
+                            return _x.uid === _uid;
+                        });
+                        if(!existing || !existing.length) return false;
+                        existing = existing[0];
+                        this.currentPrescription.clinical_detail_json.items.push({
+                            medication: existing.data.name,
+                            frequency: existing.data.frequency,
+                            dispense: existing.data.dispense,
+                            refills: existing.data.refills,
+                        });
+                        this.currentPrescription.clinical_detail_json.items = JSON.parse(JSON.stringify(this.currentPrescription.clinical_detail_json.items));
+                        let temp = this.currentPrescription;
+                        this.currentPrescription = null;
+                        this.currentPrescription = temp;
+
+                        // save erx
+                        $.post('/api/erx/updateClinicalDetail', {
+                            uid: this.currentPrescription.uid,
+                            clinicalDetailJson: JSON.stringify(this.currentPrescription.clinical_detail_json)
+                        }, _data => {
+                            if(!hasResponseError(_data)) {
+                                // nothing to do
+                            }
+                        }, 'json');
+                    },
+                    removeDrugFromERx: function(_name) {
+                        this.currentPrescription.clinical_detail_json.items = this.currentPrescription.clinical_detail_json.items.filter(_x => {
+                            return _x.medication !== _name;
+                        });
+                        let temp = this.currentPrescription;
+                        this.currentPrescription = null;
+                        this.currentPrescription = temp;
+
+                        // save erx
+                        $.post('/api/erx/updateClinicalDetail', {
+                            uid: this.currentPrescription.uid,
+                            clinicalDetailJson: JSON.stringify(this.currentPrescription.clinical_detail_json)
+                        }, _data => {
+                            if(!hasResponseError(_data)) {
+                                // nothing to do
+                            }
+                        }, 'json');
+                    }
+                },
+                mounted: function() {
+                    let self = this;
+                    $(document).on('pro-changed', '.erx-hcp-pro-select', function() {
+                        self.currentPrescriptionHcpPro.newHcpProUid = this.value;
+                    });
+                }
+            });
+
+        }
+        addMCInitializer('prescriptions-popup-{{$patient->id}}', init, '#prescriptions-popup-{{$patient->id}}')
+    }).call(window);
+</script>

resources/views/app/patient/prescriptions/list.blade.php

@@ -1,18 +1,30 @@
 <div id="prescriptions-{{$patient->id}}" v-cloak>
     <div class="d-flex align-items-baseline py-2">
         <h6 class="my-0 font-weight-bold text-secondary font-size-14">Prescriptions</h6>
-        <span class="mx-2 text-secondary on-hover-opaque">|</span>
-        <a href="#" v-on:click.prevent="newPrescription('DRUG')">+ Drug</a>
-        <span class="mx-2 text-secondary on-hover-opaque">|</span>
-        <a href="#" v-on:click.prevent="newPrescription('LAB')">+ Lab</a>
-        <span class="mx-2 text-secondary on-hover-opaque">|</span>
-        <a href="#" v-on:click.prevent="newPrescription('IMAGING')">+ Imaging</a>
-        <span class="mx-2 text-secondary on-hover-opaque">|</span>
-        <a href="#" v-on:click.prevent="newPrescription('REFERRAL')">+ Referral</a>
-        <span class="mx-2 text-secondary on-hover-opaque">|</span>
-        <a href="#" v-on:click.prevent="newPrescription('SUPPLY')">+ Supply</a>
-        <span class="mx-2 text-secondary on-hover-opaque">|</span>
-        <a href="#" v-on:click.prevent="newPrescription('OTHER')">+ Other</a>
+        @if(!request()->input('erx_category') || request()->input('erx_category') === 'DRUG')
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
+            <a href="#" v-on:click.prevent="newPrescription('DRUG')">+ Drug</a>
+        @endif
+        @if(!request()->input('erx_category') || request()->input('erx_category') === 'LAB')
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
+            <a href="#" v-on:click.prevent="newPrescription('LAB')">+ Lab</a>
+        @endif
+        @if(!request()->input('erx_category') || request()->input('erx_category') === 'IMAGING')
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
+            <a href="#" v-on:click.prevent="newPrescription('IMAGING')">+ Imaging</a>
+        @endif
+        @if(!request()->input('erx_category') || request()->input('erx_category') === 'REFERRAL')
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
+            <a href="#" v-on:click.prevent="newPrescription('REFERRAL')">+ Referral</a>
+        @endif
+        @if(!request()->input('erx_category') || request()->input('erx_category') === 'SUPPLY')
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
+            <a href="#" v-on:click.prevent="newPrescription('SUPPLY')">+ Supply</a>
+        @endif
+        @if(!request()->input('erx_category') || request()->input('erx_category') === 'OTHER')
+            <span class="mx-2 text-secondary on-hover-opaque">|</span>
+            <a href="#" v-on:click.prevent="newPrescription('OTHER')">+ Other</a>
+        @endif
     </div>
     <div class="d-flex align-items-start">
         <table class="table table-striped table-sm table-bordered mb-0 flex-grow-1">
@@ -42,9 +54,11 @@
                         <span v-else class="mr-2" title="Cannot edit. Prescription already signed."><i class="fa fa-edit on-hover-opaque text-secondary"></i></span>
                         --}}
                         <div v-if="prescription.clinical_detail_json" class="d-inline-flex align-items-baseline">
-                            <div class="d-flex align-items-baseline" v-if="prescription.erx_category === 'DRUG'">
-                                <b class="mr-2">@{{prescription.clinical_detail_json.medication ?? '-'}}</b>
-                                <span class="text-secondary mr-1">@{{prescription.clinical_detail_json.frequency ?? ''}}</span>
+                            <div class="" v-if="prescription.erx_category === 'DRUG'">
+                                <div class="d-flex align-items-baseline mb-1" v-for="drug in prescription.clinical_detail_json.items">
+                                    <b class="mr-2">@{{drug.medication ?? '-'}}</b>
+                                    <span class="text-secondary mr-1">@{{drug.frequency ?? ''}}</span>
+                                </div>
                             </div>
                             <div class="d-flex align-items-baseline" v-if="prescription.erx_category === 'LAB' || prescription.erx_category === 'IMAGING'">
                                 <b class="mr-2">@{{prescription.clinical_detail_json.test ?? '-'}}</b>
@@ -96,11 +110,8 @@
             <div class="d-flex align-items-center">
                 <h3 class="font-size-16 m-0">
                     <div v-if="currentPrescription.clinical_detail_json" class="d-inline-flex align-items-baseline">
-                        <div class="d-flex align-items-baseline" v-if="currentPrescription.erx_category === 'DRUG'">
-                            <b class="mr-2 font-size-16">@{{currentPrescription.clinical_detail_json.medication ?? '-'}}</b>
-                            <!--<span class="text-secondary mr-1 font-size-16">@{{currentPrescription.clinical_detail_json.strength ?? '-'}}</span>
-                            <span class="text-secondary mr-1 font-size-16">@{{currentPrescription.clinical_detail_json.amount ?? '-'}}</span>
-                            <span class="text-secondary mr-1 font-size-16">@{{currentPrescription.clinical_detail_json.route ?? '-'}}</span>-->
+                        <div class="" v-if="currentPrescription.erx_category === 'DRUG'">
+                            <span class="mr-1 font-size-16">Drug Prescription</span>
                         </div>
                         <div class="d-flex align-items-baseline" v-if="currentPrescription.erx_category === 'LAB' || currentPrescription.erx_category === 'IMAGING'">
                             <b class="mr-2 font-size-16">@{{currentPrescription.clinical_detail_json.test ?? '-'}}</b>
@@ -139,17 +150,17 @@
                 <span class="min-width-140px text-secondary text-sm">Type</span>
                 <span>@{{currentPrescription.erx_category}}</span>
             </div>
-            <div class="pb-2 d-flex align-items-center">
+            <div class="pb-2 d-flex align-items-baseline">
                 <span class="min-width-140px text-secondary text-sm">Clinical</span>
                 <div class="d-inline-flex align-items-baseline flex-grow-1">
                     <a v-if="!currentPrescription.has_hcp_pro_signed" class="mr-2" href="#" v-on:click.prevent="editClinicalDetails(currentPrescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
                     <span v-else class="mr-2" title="Cannot edit. Prescription already signed."><i class="fa fa-edit on-hover-opaque text-secondary"></i></span>
                     <div v-if="currentPrescription.clinical_detail_json" class="d-inline-flex align-items-baseline">
-                        <div class="d-flex align-items-baseline" v-if="currentPrescription.erx_category === 'DRUG'">
-                            <b class="mr-2">@{{currentPrescription.clinical_detail_json.medication ?? '-'}}</b>
-                            <!--<span class="text-secondary mr-1">@{{currentPrescription.clinical_detail_json.strength ?? '-'}}</span>
-                            <span class="text-secondary mr-1">@{{currentPrescription.clinical_detail_json.dispense ?? '-'}}</span>
-                            <span class="text-secondary mr-1">@{{currentPrescription.clinical_detail_json.refills ?? '-'}}</span>-->
+                        <div class="" v-if="currentPrescription.erx_category === 'DRUG'">
+                            <div class="d-flex align-items-baseline mb-1" v-for="drug in currentPrescription.clinical_detail_json.items">
+                                <b class="mr-2">@{{drug.medication ?? '-'}}</b>
+                                <span class="text-secondary mr-1">@{{drug.frequency ?? ''}}</span>
+                            </div>
                         </div>
                         <div class="d-flex align-items-baseline" v-if="currentPrescription.erx_category === 'LAB' || currentPrescription.erx_category === 'IMAGING'">
                             <b class="mr-2">@{{currentPrescription.clinical_detail_json.test ?? '-'}}</b>
@@ -275,11 +286,17 @@
                 $currentPrescription = $prescription;
             }
         }
+
+        if(!!request()->input('erx_category')) {
+            $prescriptions = $prescriptions->filter(function($_p) {
+                return $_p->erx_category === request()->input('erx_category');
+            });
+        }
         ?>
 
         function init() {
 
-            new Vue({
+            window.eRxApp = new Vue({
                 el: '#prescriptions-{{$patient->id}}',
                 delimiters: ['@{{', '}}'],
                 data: {
@@ -300,21 +317,15 @@
                         hcpProUid: '{{$pro->uid}}',
                         erxCategory: 'DRUG',
                         clinicalDetailJson: {
-                            medication: '',
-                            route: '',
-                            dose: '',
-                            strength: '',
-                            frequency: '',
-                            dispense: '',
-                            refills: '',
-                            purpose: '',
-
-                            // fdb specific
-                            medNameID: '',
-                            routedMedID: '',
-                            dosageFormMedID: '',
-                            gcnSeqno: '',
-                            medId: '',
+                            items: [
+                                {
+                                    medication: '',
+                                    frequency: '',
+                                    dispense: '',
+                                    refills: '',
+                                    purpose: ''
+                                }
+                            ]
                         }
                     },
                     currentPrescription_LAB: {
@@ -437,21 +448,15 @@
                                     hcpProUid: '{{$pro->uid}}',
                                     erxCategory: _type,
                                     clinicalDetailJson: {
-                                        medication: '',
-                                        route: '',
-                                        dose: '',
-                                        strength: '',
-                                        frequency: '',
-                                        dispense: '',
-                                        refills: '',
-                                        purpose: '',
-
-                                        // fdb specific
-                                        medNameID: '',
-                                        routedMedID: '',
-                                        dosageFormMedID: '',
-                                        gcnSeqno: '',
-                                        medId: '',
+                                        items: [
+                                            {
+                                                medication: '',
+                                                frequency: '',
+                                                dispense: '',
+                                                refills: '',
+                                                purpose: ''
+                                            }
+                                        ]
                                     }
                                 };
                                 break;
@@ -535,7 +540,7 @@
                                 this.initFdbMedSuggest();
 
                                 // re-populate drug fields
-                                console.log(this.currentPrescription_DRUG);
+                                /*console.log(this.currentPrescription_DRUG);
                                 let parentSegment = $('#prescriptions-{{$patient->id}} [stag-popup-key="prescription-popup-DRUG"]>form').first();
                                 parentSegment.find('input.prescription-medication').val(this.currentPrescription_DRUG.clinicalDetailJson.medication);
                                 parentSegment.find('select.prescription-route')
@@ -549,7 +554,7 @@
                                 parentSegment.find('select.prescription-strength')
                                     .empty()
                                     .append($('<option/>').attr('value', 1).text(this.currentPrescription_DRUG.clinicalDetailJson.strength))
-                                    .val(1);
+                                    .val(1);*/
                             }
                         });
                     },
@@ -818,7 +823,7 @@
                             // _data is {med_name_id: "50567", text: "Children's Tylenol"}
 
                             // set vue values
-                            self.currentPrescription_DRUG.clinicalDetailJson.medication = _data.text;
+                            //self.currentPrescription_DRUG.clinicalDetailJson.medication = _data.text;
 
                         });
                     }

routes/web.php

@@ -295,6 +295,7 @@ Route::middleware('pro.auth')->group(function () {
 
             // prescriptions (new)
             Route::get('prescriptions/{type?}/{currentErx?}', 'PatientController@prescriptions')->name('patient-prescriptions');
+            Route::get('prescriptions-popup/{type?}/{currentErx?}', 'PatientController@prescriptionsPopup')->name('patient-prescriptions-popup');
             Route::get('prescriptions-list/{type?}/{currentErx?}', 'PatientController@prescriptionsList')->name('patient-prescriptions-list');
 
             // appointments