Labs and imaging - ICD autocomplete

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

@@ -20,11 +20,18 @@
             <div class="d-flex align-items-baseline">
                 <label class="text-sm text-secondary mb-0">ICDs</label>
                 <span class="mx-2 text-secondary text-sm"></span>
-                <a href="#" class="text-sm" v-on:click.prevent="currentPrescription_IMAGING.clinicalDetailJson.icds.push('')">+ Add</a>
+                <a href="#" class="text-sm" v-on:click.prevent="addICD('IMAGING')">+ Add</a>
             </div>
-            <div v-for="(icd, icdIndex) in currentPrescription_IMAGING.clinicalDetailJson.icds">
-                <input type="text" class="form-control form-control-sm min-width-unset mb-1"
+            <div v-for="(icd, icdIndex) in currentPrescription_IMAGING.clinicalDetailJson.icds" class="d-flex align-items-center">
+                <input type="text" class="form-control form-control-sm min-width-unset mb-1 flex-grow-1"
+                       data-field="icd" :data-index="icdIndex" data-category="IMAGING"
                        v-model="currentPrescription_IMAGING.clinicalDetailJson.icds[icdIndex]">
+                <a v-if="icdIndex>0"
+                   href="#"
+                   class="px-2"
+                   v-on:click.prevent="currentPrescription_IMAGING.clinicalDetailJson.icds.splice(icdIndex, 1)">
+                    <i class="fa fa-trash-alt text-danger on-hover-opaque"></i>
+                </a>
             </div>
         </div>
         <div class="mb-2">

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

@@ -20,11 +20,18 @@
             <div class="d-flex align-items-baseline">
                 <label class="text-sm text-secondary mb-0">ICDs</label>
                 <span class="mx-2 text-secondary text-sm"></span>
-                <a href="#" class="text-sm" v-on:click.prevent="currentPrescription_LAB.clinicalDetailJson.icds.push('')">+ Add</a>
+                <a href="#" class="text-sm" v-on:click.prevent="addICD('LAB')">+ Add</a>
             </div>
-            <div v-for="(icd, icdIndex) in currentPrescription_LAB.clinicalDetailJson.icds">
-                <input type="text" class="form-control form-control-sm min-width-unset mb-1"
+            <div v-for="(icd, icdIndex) in currentPrescription_LAB.clinicalDetailJson.icds" class="d-flex align-items-center">
+                <input type="text" class="form-control form-control-sm min-width-unset mb-1 flex-grow-1"
+                       data-field="icd" :data-index="icdIndex" data-category="LAB"
                        v-model="currentPrescription_LAB.clinicalDetailJson.icds[icdIndex]">
+                <a v-if="icdIndex>0"
+                   href="#"
+                   class="px-2"
+                   v-on:click.prevent="currentPrescription_LAB.clinicalDetailJson.icds.splice(icdIndex, 1)">
+                    <i class="fa fa-trash-alt text-danger on-hover-opaque"></i>
+                </a>
             </div>
         </div>
         <div class="mb-2">

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

@@ -695,6 +695,9 @@
                                     .append($('<option/>').attr('value', 1).text(this.currentPrescription_DRUG.clinicalDetailJson.strength))
                                     .val(1);*/
                             }
+                            else if(this.currentPrescriptionType === 'LAB' || this.currentPrescriptionType === 'IMAGING') {
+                                this.initICDAutoSuggest();
+                            }
                         });
                     },
                     savePrescription: function() {
@@ -1137,7 +1140,39 @@
 
                             });
                         }
-                    }
+                    },
+                    addICD: function(_category) {
+                        this['currentPrescription_' + _category].clinicalDetailJson.icds.push('');
+                        Vue.nextTick(() => {
+                            this.initICDAutoSuggest();
+                        });
+                    },
+                    initICDAutoSuggest: function() {
+                        let self = this;
+                        let parentSegment = $('#prescriptions-{{$patient->id}}');
+                        parentSegment.find('input[type="text"][data-field="icd"]:not([ac-initialized])').each(function() {
+                            var elem = this,
+                                dynID = 'icd-' + Math.ceil(Math.random() * 1000000),
+                                vueIndex = $(this).attr('data-index'),
+                                category = $(this).attr('data-category');
+                            $(elem).attr('id', dynID);
+                            new window.Def.Autocompleter.Search(dynID,
+                                'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?sf=code,name&ef=name', {
+                                    tableFormat: true,
+                                    valueCols: [0],
+                                    colHeaders: ['Code', 'Name'],
+                                }
+                            );
+                            window.Def.Autocompleter.Event.observeListSelections(dynID, function() {
+                                let autocomp = elem.autocomp, acData = autocomp.getSelectedItemData();
+                                // self.data['next_cc']['list'][vueIndex].icd = acData[0].code;
+                                // self.data['next_cc']['list'][vueIndex].memo = acData[0].data['name'];
+                                self['currentPrescription_' + category].clinicalDetailJson.icds[vueIndex] = acData[0].code;
+                                return false;
+                            });
+                            $(elem).attr('ac-initialized', 1);
+                        });
+                    },
                 },
                 mounted: function() {
                     let self = this;