FDB Playground - fix vue quirkiness

resources/views/app/fdb-pg/fdb-rx.blade.php

@@ -30,7 +30,7 @@
                         <tr v-for="(item, index) in allergies">
                             <td class="p-0 position-relative">
                                 <input type="text" class="rounded-0 border-0 form-control form-control-sm min-width-unset"
-                                       fdb-allergy-suggest-search :fdb-suggest-group="index" :data-index="index">
+                                       fdb-allergy-suggest-search :fdb-suggest-group="index">
                             </td>
                             <td class="text-center">
                                 <a href="#" v-on:click.prevent="allergies.splice(index, 1)"><i class="fa fa-trash-alt text-danger"></i></a>
@@ -57,7 +57,7 @@
                         <tr v-for="(item, index) in dx">
                             <td class="p-0 position-relative">
                                 <input type="text" class="rounded-0 border-0 form-control form-control-sm min-width-unset"
-                                       fdb-dx-suggest-search :fdb-suggest-group="index" :data-index="index">
+                                       fdb-dx-suggest-search :fdb-suggest-group="index">
                             </td>
                             <td class="text-center">
                                 <a href="#" v-on:click.prevent="dx.splice(index, 1)"><i class="fa fa-trash-alt text-danger"></i></a>
@@ -91,7 +91,7 @@
                 <tr v-for="(item, index) in rx">
                     <td class="p-0 position-relative">
                         <input type="text" class="rounded-0 border-0 form-control form-control-sm min-width-unset"
-                               fdb-med-suggest-search :fdb-suggest-group="index" :data-index="index">
+                               fdb-med-suggest-search :fdb-suggest-group="index">
                     </td>
                     <td class="p-0 position-relative">
                         <select class="rounded-0 border-0 form-control form-control-sm min-width-unset"
@@ -448,8 +448,8 @@
                             input.trigger('change');
 
                             // vue value
-                            vueApp.rx[input.attr('data-index')].rx = label;
-                            vueApp.rx[input.attr('data-index')].med_name_id = medNameID;
+                            vueApp.rx[group].rx = label;
+                            vueApp.rx[group].med_name_id = medNameID;
 
                             $(document).trigger('fdb-med-changed', [group]);
 
@@ -474,8 +474,8 @@
                             input.trigger('change');
 
                             // vue value
-                            vueApp.dx[input.attr('data-index')].problem = label;
-                            vueApp.dx[input.attr('data-index')].dxid = dxID;
+                            vueApp.dx[group].problem = label;
+                            vueApp.dx[group].dxid = dxID;
 
                             $(document).trigger('fdb-dx-changed', [group]);
 
@@ -502,9 +502,9 @@
                             input.trigger('change');
 
                             // vue value
-                            vueApp.allergies[input.attr('data-index')].allergen = label;
-                            vueApp.allergies[input.attr('data-index')].dam_concept_id = damConceptID;
-                            vueApp.allergies[input.attr('data-index')].dam_concept_id_typ = damConceptIDTyp;
+                            vueApp.allergies[group].allergen = label;
+                            vueApp.allergies[group].dam_concept_id = damConceptID;
+                            vueApp.allergies[group].dam_concept_id_typ = damConceptIDTyp;
 
                             $(document).trigger('fdb-allergy-changed', [group]);
 
@@ -514,6 +514,13 @@
                         // med changed, update routes
                         $(document).off('fdb-med-changed');
                         $(document).on('fdb-med-changed', function(e, group) {
+
+                            // clear vue values
+                            vueApp.rx[group].routed_med_id = null;
+                            vueApp.rx[group].routed_dosage_form_med_id = null;
+                            vueApp.rx[group].medid = null;
+                            vueApp.rx[group].gcn_seqno = null;
+
                             let routeSelect = $('[fdb-med-suggest-route][fdb-suggest-group='+group+']').empty().prop('disabled', true);
                             let dosageSelect = $('[fdb-med-suggest-dosage][fdb-suggest-group='+group+']').empty().prop('disabled', true);
                             let strengthSelect = $('[fdb-med-suggest-strength][fdb-suggest-group='+group+']').empty().prop('disabled', true);
@@ -527,6 +534,7 @@
                                 }
                                 routeSelect.prop('disabled', false);
                                 if(_data.length === 1) {
+                                    vueApp.rx[group].routed_med_id = _data[0].routed_med_id;
                                     routeSelect.val(_data[0].routed_med_id).trigger('change');
                                 }
                             }, 'json');
@@ -537,6 +545,12 @@
                         $(document).off('change', '[fdb-med-suggest-route]');
                         $(document).on('change', '[fdb-med-suggest-route]', function () {
                             let group = $(this).attr('fdb-suggest-group');
+
+                            // clear vue values
+                            vueApp.rx[group].routed_dosage_form_med_id = null;
+                            vueApp.rx[group].medid = null;
+                            vueApp.rx[group].gcn_seqno = null;
+
                             let dosageSelect = $('[fdb-med-suggest-dosage][fdb-suggest-group='+group+']').empty().prop('disabled', true);
                             let strengthSelect = $('[fdb-med-suggest-strength][fdb-suggest-group='+group+']').empty().prop('disabled', true);
                             let routedMedID = $('[fdb-med-suggest-route][fdb-suggest-group='+$(this).attr('fdb-suggest-group')+']').val();
@@ -549,6 +563,7 @@
                                 }
                                 dosageSelect.prop('disabled', false);
                                 if(_data.length === 1) {
+                                    vueApp.rx[group].routed_dosage_form_med_id = _data[0].routed_dosage_form_med_id;
                                     dosageSelect.val(_data[0].routed_dosage_form_med_id).trigger('change');
                                 }
                             }, 'json');
@@ -558,6 +573,10 @@
                         $(document).off('change', '[fdb-med-suggest-dosage]');
                         $(document).on('change', '[fdb-med-suggest-dosage]', function () {
                             let group = $(this).attr('fdb-suggest-group');
+
+                            vueApp.rx[group].medid = null;
+                            vueApp.rx[group].gcn_seqno = null;
+
                             let strengthSelect = $('[fdb-med-suggest-strength][fdb-suggest-group='+group+']').empty().prop('disabled', true);
                             let dosageFormMedID = $('[fdb-med-suggest-dosage][fdb-suggest-group='+$(this).attr('fdb-suggest-group')+']').val();
                             $.get('/fdb-meds?dosage-form-med-id=' + dosageFormMedID, _data => {
@@ -569,6 +588,8 @@
                                 }
                                 strengthSelect.prop('disabled', false);
                                 if(_data.length === 1) {
+                                    vueApp.rx[group].medid = _data[0].medid;
+                                    vueApp.rx[group].gcn_seqno = _data[0].gcn_seqno;
                                     strengthSelect.val(_data[0].gcn_seqno).trigger('change');
                                 }
                             }, 'json');