Imaging option-list and icd auto-complete

public/js/option-list.js

@@ -6,6 +6,7 @@
                 console.log(12);
                 $(this).parent().prev('input[data-option-list]').val('').focus();
                 document.execCommand('insertText', false, $(this).text());
+                return false;
             });
     }
     addMCInitializer('option-list', init);

resources/views/app/patient/partials/imaging.blade.php

@@ -15,33 +15,65 @@
         </tr>
         </thead>
         <tbody>
-            <tr v-for="(item, index) in items" :class="item.is_open ? '' : 'opacity-60'">
-                <td class="px-2">#</td>
-                <td class="px-2">@{{item.tests}}</td>
-                <td class="px-2">@{{item.icds}}</td>
-                <td class="px-2">@{{item.memo}}</td>
-                <td class="px-2 text-nowrap">
-                    <a class="mr-2 c-pointer" v-on:click.prevent="showPopup('imaging-popup', item)">Edit</a>
-                    <a class="mr-2 c-pointer" v-if="item.is_open" v-on:click.prevent="closeItem(item)">Close</a>
-                    <a class="mr-2 c-pointer" v-if="!item.is_open" v-on:click.prevent="openItem(item)">Open</a>
-                </td>
-            </tr>
+        <tr v-for="(item, index) in items" :class="item.is_open ? '' : 'opacity-60'">
+            <td class="px-2">#</td>
+            <td class="px-2" v-html="item.tests && Array.isArray(item.tests) ? item.tests.join('<br>') : item.tests"></td>
+            <td class="px-2" v-html="item.icds && Array.isArray(item.icds) ? item.icds.join('<br>') : item.icds"></td>
+            <td class="px-2">@{{item.memo}}</td>
+            <td class="px-2 text-nowrap">
+                <a class="mr-2 c-pointer" v-on:click.prevent="showPopup('imaging-popup', item)">Edit</a>
+                <a class="mr-2 c-pointer" v-if="item.is_open" v-on:click.prevent="closeItem(item)">Close</a>
+                <a class="mr-2 c-pointer" v-if="!item.is_open" v-on:click.prevent="openItem(item)">Open</a>
+            </td>
+        </tr>
         </tbody>
     </table>
     <div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="imaging-popup">
-        <form method="POST" action="/api/appointment/create">
+        <form method="POST" action="/api/appointment/create" class="overflow-visible">
             <h3 class="stag-popup-title mb-2">
                 <span>@{{ popupMode === 'add' ? 'Add Imaging Order Item' : 'Edit Imaging Order Item' }}</span>
                 <a href="#" class="ml-auto text-secondary"
                    onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
             </h3>
             <div class="mb-2">
-                    <imagingel class="text-sm text-secondary mb-1">Tests</imagingel>
-                    <input type="text" v-model="popupItem.tests" class="form-control form-control-sm">
+                <div class="d-flex align-items-center mb-1">
+                    <imagingel class="text-sm text-secondary mb-0">Tests</imagingel>
+                    <span class="text-sm mx-2 text-secondary">|</span>
+                    <a href="#" class="text-sm" v-on:click.prevent="popupItem.tests.push('')">Add</a>
+                </div>
+                <div class="d-flex align-items-center mb-2" v-for="(test, testIndex) in popupItem.tests">
+                    <div class="position-relative flex-grow-1">
+                        <input type="text" data-option-list v-model="popupItem.tests[testIndex]" class="form-control form-control-sm">
+                        <div class="data-option-list">
+                            <div>CAT Scan</div>
+                            <div>Fluoroscopy</div>
+                            <div>MRI Scan</div>
+                            <div>Mammography</div>
+                            <div>X-Ray</div>
+                            <div>PET</div>
+                            <div>PET-CT</div>
+                        </div>
+                    </div>
+                    <a v-if="popupItem.tests.length > 1" class="ml-2 text-danger" href="#" v-on:click.prevent="popupItem.tests.splice(testIndex, 1)">
+                        <i class="fa fa-trash-alt"></i>
+                    </a>
+                </div>
             </div>
             <div class="mb-2">
-                <imagingel class="text-sm text-secondary mb-1">ICDs</imagingel>
-                <input type="text" v-model="popupItem.icds" class="form-control form-control-sm">
+                <div class="d-flex align-items-center mb-1">
+                    <imagingel class="text-sm text-secondary mb-0">ICDs</imagingel>
+                    <span class="text-sm mx-2 text-secondary">|</span>
+                    <a href="#" class="text-sm" v-on:click.prevent="popupItem.icds.push('')">Add</a>
+                </div>
+                <div class="d-flex align-items-center mb-2" v-for="(icd, icdIndex) in popupItem.icds">
+                    <div class="position-relative flex-grow-1">
+                        <input type="text" data-field="icd" :data-index="icdIndex"
+                               v-model="popupItem.icds[icdIndex]" class="form-control form-control-sm">
+                    </div>
+                    <a v-if="popupItem.icds.length > 1" class="ml-2 text-danger" href="#" v-on:click.prevent="popupItem.icds.splice(icdIndex, 1)">
+                        <i class="fa fa-trash-alt"></i>
+                    </a>
+                </div>
             </div>
             <div class="mb-2">
                 <imagingel class="text-sm text-secondary mb-1">Memo</imagingel>
@@ -79,8 +111,8 @@
                     popupItem: {
                         uid: '',
                         is_open: true,
-                        tests: '',
-                        icds: '',
+                        tests: [''],
+                        icds: [''],
                         memo: '',
                     },
                 },
@@ -91,11 +123,15 @@
                         this.popupItem = _item ? JSON.parse(JSON.stringify(_item)) : {
                             uid: '',
                             is_open: true,
-                            tests: '',
-                            icds: '',
+                            tests: [''],
+                            icds: [''],
                             memo: '',
                         };
-                        showStagPopup('imaging-popup');
+                        let self = this;
+                        Vue.nextTick(function() {
+                            self.initICDAutoSuggest();
+                            showStagPopup('imaging-popup', true);
+                        });
                     },
                     savePopupItem: function() {
                         let form = $('#imagingApp form').first();
@@ -146,10 +182,32 @@
                         }, function(_data) {
                             fastReload();
                         });
-                    }
+                    },
+                    initICDAutoSuggest: function() {
+                        let self = this;
+                        $('#imagingApp 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.popupItem.icds[vueIndex] = acData[0].code;
+                                return false;
+                            });
+                            $(elem).attr('ac-initialized', 1);
+                        });
+                    },
                 },
                 mounted: function () {
-
+                    this.initICDAutoSuggest();
                 }
             })
         }

resources/views/app/patient/partials/lab.blade.php

@@ -45,16 +45,16 @@
                     <div class="position-relative flex-grow-1">
                         <input type="text" data-option-list v-model="popupItem.tests[testIndex]" class="form-control form-control-sm">
                         <div class="data-option-list">
-                            <div><a href="#">Complete Blood Count</a></div>
-                            <div><a href="#">Prothrombin Time</a></div>
-                            <div><a href="#">Basic Metabolic Panel</a></div>
-                            <div><a href="#">Comprehensive Metabolic Panel</a></div>
-                            <div><a href="#">Lipid Panel</a></div>
-                            <div><a href="#">Liver Panel</a></div>
-                            <div><a href="#">Thyroid Stimulating Hormone</a></div>
-                            <div><a href="#">Hemoglobin A1C</a></div>
-                            <div><a href="#">Urinalysis</a></div>
-                            <div><a href="#">Cultures</a></div>
+                            <div>Complete Blood Count</div>
+                            <div>Prothrombin Time</div>
+                            <div>Basic Metabolic Panel</div>
+                            <div>Comprehensive Metabolic Panel</div>
+                            <div>Lipid Panel</div>
+                            <div>Liver Panel</div>
+                            <div>Thyroid Stimulating Hormone</div>
+                            <div>Hemoglobin A1C</div>
+                            <div>Urinalysis</div>
+                            <div>Cultures</div>
                         </div>
                     </div>
                     <a v-if="popupItem.tests.length > 1" class="ml-2 text-danger" href="#" v-on:click.prevent="popupItem.tests.splice(testIndex, 1)">