Canvas based Dx - integrate ICD auto-complete

resources/views/app/patient/canvas-sections/canvas-editor-modal.blade.php

@@ -16,8 +16,8 @@
         @include("app.patient.canvas-sections.{$key}.form")
 
         <div class="form-group m-0 d-flex">
-            <button class="btn btn-sm btn-primary mr-2" onclick="return submitStagPopup($(this).closest('form'))">Submit</button>
-            <button class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>
+            <button type="button" class="btn btn-sm btn-primary mr-2" onclick="return submitStagPopup($(this).closest('form'))">Submit</button>
+            <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>
         </div>
     </form>
 </div>

resources/views/app/patient/canvas-sections/dx/form.blade.php

@@ -28,8 +28,8 @@ $formID = rand(0, 100000);
     <table class="table table-sm table-bordered mb-2 table-edit-sheet">
         <thead>
         <tr class="bg-light">
-            <th class="px-2 text-secondary border-bottom-0">Title</th>
             <th class="px-2 text-secondary border-bottom-0">ICD</th>
+            <th class="px-2 text-secondary border-bottom-0">Title</th>
             <th class="px-2 text-secondary border-bottom-0">Chr/Act.</th>
             <th class="px-2 text-secondary border-bottom-0 w-35">Detail</th>
             <th class="px-2 text-secondary border-bottom-0 w-35">Plan</th>
@@ -38,8 +38,16 @@ $formID = rand(0, 100000);
         </thead>
         <tbody>
         <tr v-for="(item, index) in items">
-            <td><input type="text" class="form-control form-control-sm canvas-dx-title" v-model="item.title"></td>
-            <td><input type="text" class="form-control form-control-sm" v-model="item.icd"></td>
+            <td>
+                <input type="text" :data-index="index"
+                       class="form-control form-control-sm"
+                       data-field="icd" v-model="item.icd">
+            </td>
+            <td>
+                <input type="text" :data-index="index"
+                       class="form-control form-control-sm canvas-dx-title"
+                       data-field="title" v-model="item.title">
+            </td>
             <td>
                 <select v-model="item.coa" class="form-control form-control-sm pl-1" required>
                     <option value="">-- select --</option>
@@ -66,7 +74,7 @@ $formID = rand(0, 100000);
     </table>
 
     <div class="form-group my-2">
-    <button class="btn btn-sm btn-default text-primary border border-primary mr-2"
+    <button type="button" class="btn btn-sm btn-default text-primary border border-primary mr-2"
             v-on:click.prevent="addItem()"
     >+ New Entry</button>
     </div>
@@ -82,6 +90,7 @@ $formID = rand(0, 100000);
                 },
                 mounted: function() {
                     this.initRTE();
+                    this.initICDAutoSuggest();
                 },
                 watch: {
                     $data: {
@@ -105,6 +114,7 @@ $formID = rand(0, 100000);
                         });
                         Vue.nextTick(function() {
                             self.initRTE();
+                            self.initICDAutoSuggest();
                             $('.canvas-dx-title').last().focus();
                         });
                     },
@@ -163,7 +173,8 @@ $formID = rand(0, 100000);
                             var toolbar = $(qe.container).prev('.ql-toolbar');
 
                             // add button for new shortcut
-                            var newSCButton = $('<button class="btn bg-white btn-sm btn-default text-primary w-auto px-2 border py-0 ' +
+                            var newSCButton = $('<button type="button" tabindex="-1" ' +
+                                'class="btn bg-white btn-sm btn-default text-primary w-auto px-2 border py-0 ' +
                                 'text-sm add-shortcut" data-editor-id="' + editorID + '">+ Shortcut</button>');
                             toolbar.append(newSCButton);
 
@@ -179,6 +190,29 @@ $formID = rand(0, 100000);
 
                         });
                     },
+                    initICDAutoSuggest: function() {
+                        let self = this;
+                        $('#dxSection 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');
+                            $(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.items[vueIndex].icd = acData[0].code;
+                                self.items[vueIndex].title = acData[0].data['name'];
+                                return false;
+                            });
+                            $(elem).attr('ac-initialized', 1);
+                        });
+                    }
                 }
             });
         }