Lab option-list and icd auto-complete

public/css/style.css

@@ -131,6 +131,9 @@ body.stag_rhs_collapsed .app-right-panel {
 .mcp-theme-1 .opacity-60 {
     opacity: .6;
 }
+.mcp-theme-1 .overflow-visible {
+    overflow: visible;
+}
 .mcp-theme-1 .text-secondary-light {
     color: #c9ddef !important;
 }

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

@@ -17,8 +17,8 @@
         <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" 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('lab-popup', item)">Edit</a>
@@ -29,19 +29,54 @@
         </tbody>
     </table>
     <div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="lab-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 Lab Order Item' : 'Edit Lab 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">
-                    <label class="text-sm text-secondary mb-1">Tests</label>
-                    <input type="text" v-model="popupItem.tests" class="form-control form-control-sm">
+                <div class="d-flex align-items-center mb-1">
+                    <label class="text-sm text-secondary mb-0">Tests</label>
+                    <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><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>
+                    </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">
-                <label class="text-sm text-secondary mb-1">ICDs</label>
-                <input type="text" v-model="popupItem.icds" class="form-control form-control-sm">
+                <div class="d-flex align-items-center mb-1">
+                    <label class="text-sm text-secondary mb-0">ICDs</label>
+                    <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">
                 <label class="text-sm text-secondary mb-1">Memo</label>
@@ -79,8 +114,8 @@
                     popupItem: {
                         uid: '',
                         is_open: true,
-                        tests: '',
-                        icds: '',
+                        tests: [''],
+                        icds: [''],
                         memo: '',
                     },
                 },
@@ -91,11 +126,15 @@
                         this.popupItem = _item ? JSON.parse(JSON.stringify(_item)) : {
                             uid: '',
                             is_open: true,
-                            tests: '',
-                            icds: '',
+                            tests: [''],
+                            icds: [''],
                             memo: '',
                         };
-                        showStagPopup('lab-popup');
+                        let self = this;
+                        Vue.nextTick(function() {
+                            self.initICDAutoSuggest();
+                            showStagPopup('lab-popup', true);
+                        });
                     },
                     savePopupItem: function() {
                         let form = $('#labApp form').first();
@@ -146,10 +185,32 @@
                         }, function(_data) {
                             fastReload();
                         });
-                    }
+                    },
+                    initICDAutoSuggest: function() {
+                        let self = this;
+                        $('#labApp 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();
                 }
             })
         }