Prescriptions - fdb med suggest (wip)

resources/views/app/patient/prescriptions/drug-form.blade.php

@@ -7,38 +7,47 @@
         </h3>
         <div class="mb-2">
             <label class="text-sm text-secondary mb-1">Drug</label>
-            <input type="text" class="form-control form-control-sm min-width-unset"
-                   v-model="currentPrescription_DRUG.clinicalDetailJson.medication">
+            <input type="text" class="form-control form-control-sm min-width-unset prescription-medication"
+                   stag-suggest
+                   stag-suggest-ep="/fdb-med-suggest/json">
         </div>
         <div class="row">
             <div class="col-6 pr-0">
                 <div class="mb-2">
-                    <label class="text-sm text-secondary mb-1">Strength</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset"
-                           v-model="currentPrescription_DRUG.clinicalDetailJson.strength">
+                    <label class="text-sm text-secondary mb-1">Route</label>
+                    <select class="form-control form-control-sm min-width-unset prescription-route"
+                            disabled>
+                    </select>
                 </div>
             </div>
             <div class="col-6">
                 <div class="mb-2">
-                    <label class="text-sm text-secondary mb-1">Amount</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset"
-                           v-model="currentPrescription_DRUG.clinicalDetailJson.amount">
+                    <label class="text-sm text-secondary mb-1">Dosage</label>
+                    <select class="form-control form-control-sm min-width-unset prescription-dose"
+                            disabled>
+                    </select>
                 </div>
             </div>
         </div>
         <div class="row">
             <div class="col-6 pr-0">
                 <div class="mb-2">
-                    <label class="text-sm text-secondary mb-1">Route</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset"
-                           v-model="currentPrescription_DRUG.clinicalDetailJson.route">
+                    <label class="text-sm text-secondary mb-1">Strength</label>
+                    <select class="form-control form-control-sm min-width-unset prescription-strength"
+                            disabled>
+                    </select>
                 </div>
             </div>
             <div class="col-6">
                 <div class="mb-2">
                     <label class="text-sm text-secondary mb-1">Frequency</label>
                     <input type="text" class="form-control form-control-sm min-width-unset"
+                           data-option-list="frequency-options" data-field="frequency"
                            v-model="currentPrescription_DRUG.clinicalDetailJson.frequency">
+                    <div id="frequency-options" class="data-option-list">
+                        <div>Once a day</div>
+                        <div>Twice a day</div>
+                    </div>
                 </div>
             </div>
         </div>

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

@@ -145,8 +145,8 @@
                             <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.amount ?? '-'}}</span>
-                                <span class="text-secondary mr-1">@{{currentPrescription.clinical_detail_json.route ?? '-'}}</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>
                             <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>
@@ -297,13 +297,20 @@
                             erxCategory: 'DRUG',
                             clinicalDetailJson: {
                                 medication: '',
-                                strength: '',
-                                amount: '',
                                 route: '',
+                                dose: '',
+                                strength: '',
                                 frequency: '',
                                 dispense: '',
                                 refills: '',
                                 purpose: '',
+
+                                // fdb specific
+                                medNameID: '',
+                                routedMedID: '',
+                                dosageFormMedID: '',
+                                gcnSeqno: '',
+                                medId: '',
                             }
                         },
                         currentPrescription_LAB: {
@@ -427,13 +434,20 @@
                                         erxCategory: _type,
                                         clinicalDetailJson: {
                                             medication: '',
-                                            strength: '',
-                                            amount: '',
                                             route: '',
+                                            dose: '',
+                                            strength: '',
                                             frequency: '',
                                             dispense: '',
                                             refills: '',
                                             purpose: '',
+
+                                            // fdb specific
+                                            medNameID: '',
+                                            routedMedID: '',
+                                            dosageFormMedID: '',
+                                            gcnSeqno: '',
+                                            medId: '',
                                         }
                                     };
                                     break;
@@ -495,6 +509,11 @@
                             }
                             Vue.nextTick(() => {
                                 showStagPopup('prescription-popup-' + this.currentPrescriptionType, true);
+                                $('[stag-suggest][stag-suggest-initialized]').removeAttr('stag-suggest-initialized');
+                                if(_type === 'DRUG') {
+                                    initStagSuggest();
+                                    this.initFdbMedSuggest();
+                                }
                             });
                         },
                         editClinicalDetails: function(_prescription) {
@@ -756,6 +775,110 @@
 
                         // cancel, etc.
 
+                        initFdbMedSuggest: function() {
+
+                            let self = this;
+
+                            let parentSegment = $('#prescriptions-{{$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;
+                                self.currentPrescription_DRUG.clinicalDetailJson.medNameID = _data.med_name_id;
+
+                                let routeSelect = parentSegment.find('.prescription-route').empty().prop('disabled', true);
+                                let dosageSelect = parentSegment.find('.prescription-dose').empty().prop('disabled', true);
+                                let strengthSelect = parentSegment.find('.prescription-strength').empty().prop('disabled', true);
+
+                                $.get('/fdb-routed-meds?med-name-id=' + _data.med_name_id, _data => {
+                                    routeSelect
+                                        .empty()
+                                        .append('<option value="">-- select --</option>');
+                                    for (let i = 0; i < _data.length; i++) {
+                                        routeSelect.append('<option value="' + _data[i].routed_med_id + '">' + _data[i].med_routed_med_id_desc + '</option>')
+                                    }
+                                    routeSelect.prop('disabled', false);
+                                    if (_data.length === 1) {
+                                        routeSelect.val(_data[0].routed_med_id).trigger('change');
+                                    }
+                                }, 'json');
+                            });
+
+                            // on route selection
+                            parentSegment.find('select.prescription-route').off('change');
+                            parentSegment.find('select.prescription-route').on('change', function () {
+
+                                let elem = $(this);
+
+                                // set vue values
+                                self.currentPrescription_DRUG.clinicalDetailJson.routedMedID = elem.val();
+                                self.currentPrescription_DRUG.clinicalDetailJson.route = elem.find('option:selected').text();
+
+                                // clear
+                                let dosageSelect = parentSegment.find('.prescription-dose').empty().prop('disabled', true);
+                                let strengthSelect = parentSegment.find('.prescription-strength').empty().prop('disabled', true);
+
+                                $.get('/fdb-routed-dosages?routed-med-id=' + self.currentPrescription_DRUG.clinicalDetailJson.routedMedID, _data => {
+                                    dosageSelect
+                                        .empty()
+                                        .append('<option value="">-- select --</option>');
+                                    for (let i = 0; i < _data.length; i++) {
+                                        dosageSelect.append('<option value="' + _data[i].routed_dosage_form_med_id + '">' + _data[i].med_routed_df_med_id_desc + '</option>')
+                                    }
+                                    dosageSelect.prop('disabled', false);
+                                    if(_data.length === 1) {
+                                        dosageSelect.val(_data[0].routed_dosage_form_med_id).trigger('change');
+                                    }
+                                }, 'json');
+                            });
+
+                            // on dosage selection
+                            parentSegment.find('select.prescription-dose').off('change');
+                            parentSegment.find('select.prescription-dose').on('change', function () {
+
+                                let elem = $(this);
+
+                                // set vue values
+                                self.currentPrescription_DRUG.clinicalDetailJson.dosageFormMedID = elem.val();
+                                self.currentPrescription_DRUG.clinicalDetailJson.dose = elem.find('option:selected').text();
+
+                                // clear
+                                let strengthSelect = parentSegment.find('.prescription-strength').empty().prop('disabled', true);
+
+                                $.get('/fdb-meds?dosage-form-med-id=' + self.currentPrescription_DRUG.clinicalDetailJson.dosageFormMedID, _data => {
+                                    strengthSelect
+                                        .empty()
+                                        .append('<option value="">-- select --</option>');
+                                    for (let i = 0; i < _data.length; i++) {
+                                        strengthSelect.append('<option data-medid="' + _data[i].medid + '" value="' + _data[i].gcn_seqno + '">' + _data[i].med_medid_desc + '</option>')
+                                    }
+                                    strengthSelect.prop('disabled', false);
+                                    if(_data.length === 1) {
+                                        strengthSelect.val(_data[0].gcn_seqno).trigger('change');
+                                    }
+                                }, 'json');
+                            });
+
+                            // on strength (medid) selection
+                            parentSegment.find('select.prescription-strength').off('change');
+                            parentSegment.find('select.prescription-strength').on('change', function () {
+
+                                let elem = $(this);
+
+                                // set vue values
+                                self.currentPrescription_DRUG.clinicalDetailJson.gcnSeqno = $(this).val();
+                                self.currentPrescription_DRUG.clinicalDetailJson.medId = $(this).find('option:selected').attr('data-medid');
+                                self.currentPrescription_DRUG.clinicalDetailJson.strength = $(this).find('option:selected').text();
+
+                                console.log(self.currentPrescription_DRUG.clinicalDetailJson);
+
+                            });
+                        }
                     },
                     mounted: function() {
                         let self = this;