Dx UI updates

public/css/style.css

@@ -110,6 +110,9 @@ body.stag_rhs_collapsed .app-right-panel {
 .mcp-theme-1 .font-size-13 {
     font-size: 13px;
 }
+.mcp-theme-1 .font-size-14 {
+    font-size: 14px;
+}
 .mcp-theme-1 .font-size-16 {
     font-size: 16px;
 }

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

@@ -35,9 +35,8 @@ $formID = rand(0, 100000);
                     <span>All</span>
                 </label>
             </th>
-            <th class="px-2 text-secondary border-bottom-0 w-150">ICD</th>
-            <th class="px-2 text-secondary border-bottom-0 w-25">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">Title</th>
+            <th class="px-2 text-secondary border-bottom-0">ICD</th>
             <th class="px-2 text-secondary border-bottom-0 w-25">Detail</th>
             <th class="px-2 text-secondary border-bottom-0 w-25">Plan</th>
             <th class="px-2 text-secondary border-bottom-0"></th>
@@ -54,15 +53,13 @@ $formID = rand(0, 100000);
             </td>
             <td>
                 <input type="text" :data-index="index"
-                       class="form-control form-control-sm canvas-dx-title"
-                       data-field="icd" v-model="item.icd">
+                       class="form-control form-control-sm font-weight-bold font-size-14"
+                       data-field="title" placeholder="Title" v-model="item.title">
             </td>
             <td>
                 <input type="text" :data-index="index"
-                       class="form-control form-control-sm"
-                       data-field="title" v-model="item.title">
-            </td>
-            <td>
+                       class="form-control form-control-sm canvas-dx-title"
+                       data-field="icd" placeholder="ICD" v-model="item.icd">
                 <select v-model="item.coa" class="form-control form-control-sm pl-1" required>
                     <option value="">-- select --</option>
                     <option value="Chronic" selected>Chronic</option>
@@ -110,7 +107,7 @@ $formID = rand(0, 100000);
                         this.inclusion[i] = this.items[i].included;
                     }
                     this.initRTE();
-                    this.initICDAutoSuggest();
+                    this.initTitleAutoSuggest();
                 },
                 watch: {
                     items: {
@@ -158,7 +155,7 @@ $formID = rand(0, 100000);
                         this.inclusion.push(true);
                         Vue.nextTick(function() {
                             self.initRTE();
-                            self.initICDAutoSuggest();
+                            self.initTitleAutoSuggest();
                             $('.canvas-dx-title').last().focus();
                         });
                     },
@@ -258,6 +255,29 @@ $formID = rand(0, 100000);
                             });
                             $(elem).attr('ac-initialized', 1);
                         });
+                    },
+                    initTitleAutoSuggest: function() {
+                        let self = this;
+                        $('#dxSection input[type="text"][data-field="title"]:not([ac-initialized])').each(function() {
+                            var elem = this,
+                                dynID = 'title-' + 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: [1],
+                                    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);
+                        });
                     }
                 }
             });