浏览代码

Tickets v1 (wip) - Mega logic fixes

Vijayakrishnan 4 年之前
父节点
当前提交
15b1715a8e

+ 335 - 8
resources/views/app/patient/tickets.blade.php

@@ -186,10 +186,280 @@
                     },
                     },
                     methods: {
                     methods: {
 
 
-                        @include('app.patient.tickets.methods', ['category' => 'erx'])
-                        @include('app.patient.tickets.methods', ['category' => 'lab'])
-                        @include('app.patient.tickets.methods', ['category' => 'imaging'])
-                        @include('app.patient.tickets.methods', ['category' => 'equipment'])
+                        erxShowPopup: function(_item) {
+                            this.erxPopupMode = _item ? 'edit' : 'add';
+                            this.erxPopupItem = _item ? JSON.parse(JSON.stringify(_item)) : JSON.parse(JSON.stringify(this.erxModel));
+                            this.erxPopupItem.assigned_pro_uid = '';
+                            this.erxPopupItem.ordering_pro_uid = '';
+                            if(!this.erxPopupItem.comments) this.erxPopupItem.comments = [];
+                            this.comment = '';
+                            showStagPopup('erx-popup', true);
+                            Vue.nextTick(() => {
+                                $('#ticketsApp [pro-suggest-initialized]').removeAttr('pro-suggest-initialized');
+                                initProSuggest();
+                                if (_item) {
+                                    this.currentCategory = 'erx';
+                                    this.currentItemUid = _item.uid;
+                                }
+                            });
+                        },
+                        erxSavePopupItem: function(_autoSave = false) {
+                            let form = $('#ticketsApp [stag-popup-key="erx-popup"] form').first();
+                            if(!_autoSave) {
+                                if(!form[0].checkValidity()) {
+                                    form[0].reportValidity();
+                                    return false;
+                                }
+                            }
+                            if(!_autoSave) showMask();
+                            let payload = {};
+                            if(this.erxPopupMode === 'add') {
+                                payload.clientUid = 'd5de7592-14f1-4df8-aed3-988b1e50afb2';
+                                payload.category = 'erx';
+                                payload.assignedProUid = 'f71fb60d-ab0a-4754-9cf0-89bfcfeac4b2';
+                                payload.managerProUid = 'f71fb60d-ab0a-4754-9cf0-89bfcfeac4b2';
+                                payload.orderingProUid = 'f71fb60d-ab0a-4754-9cf0-89bfcfeac4b2';
+                                payload.initiatingProUid = 'f71fb60d-ab0a-4754-9cf0-89bfcfeac4b2';
+                                payload.data = JSON.stringify(this.erxPopupItem.data);
+                            }
+                            else {
+                                payload.uid = this.erxPopupItem.uid;
+                                payload.newData = JSON.stringify(this.erxPopupItem.data);
+                            }
+                            $.post(
+                                '/api/ticket/' + (this.erxPopupMode === 'add' ? 'create' : 'updateData'),
+                                payload,
+                                (_data) => {
+                                    console.log(_data);
+                                    if(!_autoSave) {
+                                        fastReload();
+                                    }
+                                    else {
+                                        this.reloadPopupItem('erx');
+                                    }
+                                },
+                                'json');
+                            return false;
+                        },
+                        erxSaveComment: function() {
+                            if(!this.comment) return;
+                            let comment = {
+                                pro_id: this.own_pro_id,
+                                created_at: new Date().toLocaleString(),
+                                message: this.comment
+                            };
+                            if(!this.erxPopupItem.data.comments) {
+                                this.erxPopupItem.data.comments = [];
+                            }
+                            this.erxPopupItem.data.comments.push(comment);
+                            this.erxAutoSave();
+                        },
+                        labShowPopup: function(_item) {
+                            this.labPopupMode = _item ? 'edit' : 'add';
+                            this.labPopupItem = _item ? JSON.parse(JSON.stringify(_item)) : JSON.parse(JSON.stringify(this.labModel));
+                            this.labPopupItem.assigned_pro_uid = '';
+                            this.labPopupItem.ordering_pro_uid = '';
+                            if(!this.labPopupItem.comments) this.labPopupItem.comments = [];
+                            this.comment = '';
+                            showStagPopup('lab-popup', true);
+                            Vue.nextTick(() => {
+                                $('#ticketsApp [pro-suggest-initialized]').removeAttr('pro-suggest-initialized');
+                                initProSuggest();
+                                this.labInitICDAutoSuggest();
+                                if (_item) {
+                                    this.currentCategory = 'lab';
+                                    this.currentItemUid = _item.uid;
+                                }
+                            });
+                        },
+                        labSavePopupItem: function(_autoSave = false) {
+                            let form = $('#ticketsApp [stag-popup-key="lab-popup"] form').first();
+                            if(!_autoSave) {
+                                if(!form[0].checkValidity()) {
+                                    form[0].reportValidity();
+                                    return false;
+                                }
+                            }
+                            if(!_autoSave) showMask();
+                            let payload = {};
+                            if(this.labPopupMode === 'add') {
+                                payload.clientUid = 'd5de7592-14f1-4df8-aed3-988b1e50afb2';
+                                payload.category = 'lab';
+                                payload.assignedProUid = 'f71fb60d-ab0a-4754-9cf0-89bfcfeac4b2';
+                                payload.managerProUid = 'f71fb60d-ab0a-4754-9cf0-89bfcfeac4b2';
+                                payload.orderingProUid = 'f71fb60d-ab0a-4754-9cf0-89bfcfeac4b2';
+                                payload.initiatingProUid = 'f71fb60d-ab0a-4754-9cf0-89bfcfeac4b2';
+                                payload.data = JSON.stringify(this.labPopupItem.data);
+                            }
+                            else {
+                                payload.uid = this.labPopupItem.uid;
+                                payload.newData = JSON.stringify(this.labPopupItem.data);
+                            }
+                            $.post(
+                                '/api/ticket/' + (this.labPopupMode === 'add' ? 'create' : 'updateData'),
+                                payload,
+                                (_data) => {
+                                    console.log(_data);
+                                    if(!_autoSave) {
+                                        fastReload();
+                                    }
+                                    else {
+                                        this.reloadPopupItem('lab');
+                                    }
+                                },
+                                'json');
+                            return false;
+                        },
+                        labSaveComment: function() {
+                            if(!this.comment) return;
+                            let comment = {
+                                pro_id: this.own_pro_id,
+                                created_at: new Date().toLocaleString(),
+                                message: this.comment
+                            };
+                            if(!this.labPopupItem.data.comments) {
+                                this.labPopupItem.data.comments = [];
+                            }
+                            this.labPopupItem.data.comments.push(comment);
+                            this.labAutoSave();
+                        },
+                        imagingShowPopup: function(_item) {
+                            this.imagingPopupMode = _item ? 'edit' : 'add';
+                            this.imagingPopupItem = _item ? JSON.parse(JSON.stringify(_item)) : JSON.parse(JSON.stringify(this.imagingModel));
+                            this.imagingPopupItem.assigned_pro_uid = '';
+                            this.imagingPopupItem.ordering_pro_uid = '';
+                            if(!this.imagingPopupItem.comments) this.imagingPopupItem.comments = [];
+                            this.comment = '';
+                            showStagPopup('imaging-popup', true);
+                            Vue.nextTick(() => {
+                                $('#ticketsApp [pro-suggest-initialized]').removeAttr('pro-suggest-initialized');
+                                initProSuggest();
+                                this.imagingInitICDAutoSuggest();
+                                if (_item) {
+                                    this.currentCategory = 'imaging';
+                                    this.currentItemUid = _item.uid;
+                                }
+                            });
+                        },
+                        imagingSavePopupItem: function(_autoSave = false) {
+                            let form = $('#ticketsApp [stag-popup-key="imaging-popup"] form').first();
+                            if(!_autoSave) {
+                                if(!form[0].checkValidity()) {
+                                    form[0].reportValidity();
+                                    return false;
+                                }
+                            }
+                            if(!_autoSave) showMask();
+                            let payload = {};
+                            if(this.imagingPopupMode === 'add') {
+                                payload.clientUid = 'd5de7592-14f1-4df8-aed3-988b1e50afb2';
+                                payload.category = 'imaging';
+                                payload.assignedProUid = 'f71fb60d-ab0a-4754-9cf0-89bfcfeac4b2';
+                                payload.managerProUid = 'f71fb60d-ab0a-4754-9cf0-89bfcfeac4b2';
+                                payload.orderingProUid = 'f71fb60d-ab0a-4754-9cf0-89bfcfeac4b2';
+                                payload.initiatingProUid = 'f71fb60d-ab0a-4754-9cf0-89bfcfeac4b2';
+                                payload.data = JSON.stringify(this.imagingPopupItem.data);
+                            }
+                            else {
+                                payload.uid = this.imagingPopupItem.uid;
+                                payload.newData = JSON.stringify(this.imagingPopupItem.data);
+                            }
+                            $.post(
+                                '/api/ticket/' + (this.imagingPopupMode === 'add' ? 'create' : 'updateData'),
+                                payload,
+                                (_data) => {
+                                    console.log(_data);
+                                    if(!_autoSave) {
+                                        fastReload();
+                                    }
+                                    else {
+                                        this.reloadPopupItem('imaging');
+                                    }
+                                },
+                                'json');
+                            return false;
+                        },
+                        imagingSaveComment: function() {
+                            if(!this.comment) return;
+                            let comment = {
+                                pro_id: this.own_pro_id,
+                                created_at: new Date().toLocaleString(),
+                                message: this.comment
+                            };
+                            if(!this.imagingPopupItem.data.comments) {
+                                this.imagingPopupItem.data.comments = [];
+                            }
+                            this.imagingPopupItem.data.comments.push(comment);
+                            this.imagingAutoSave();
+                        },
+                        equipmentShowPopup: function(_item) {
+                            this.equipmentPopupMode = _item ? 'edit' : 'add';
+                            this.equipmentPopupItem = _item ? JSON.parse(JSON.stringify(_item)) : JSON.parse(JSON.stringify(this.equipmentModel));
+                            this.equipmentPopupItem.assigned_pro_uid = '';
+                            this.equipmentPopupItem.ordering_pro_uid = '';
+                            if(!this.equipmentPopupItem.comments) this.equipmentPopupItem.comments = [];
+                            this.comment = '';
+                            showStagPopup('equipment-popup', true);
+                            Vue.nextTick(() => {
+                                $('#ticketsApp [pro-suggest-initialized]').removeAttr('pro-suggest-initialized');
+                                initProSuggest();
+                                if (_item) {
+                                    this.currentCategory = 'equipment';
+                                    this.currentItemUid = _item.uid;
+                                }
+                            });
+                        },
+                        equipmentSavePopupItem: function(_autoSave = false) {
+                            let form = $('#ticketsApp [stag-popup-key="equipment-popup"] form').first();
+                            if(!_autoSave) {
+                                if(!form[0].checkValidity()) {
+                                    form[0].reportValidity();
+                                    return false;
+                                }
+                            }
+                            if(!_autoSave) showMask();
+                            let payload = {};
+                            if(this.equipmentPopupMode === 'add') {
+                                payload.clientUid = 'd5de7592-14f1-4df8-aed3-988b1e50afb2';
+                                payload.category = 'equipment';
+                                payload.assignedProUid = 'f71fb60d-ab0a-4754-9cf0-89bfcfeac4b2';
+                                payload.managerProUid = 'f71fb60d-ab0a-4754-9cf0-89bfcfeac4b2';
+                                payload.orderingProUid = 'f71fb60d-ab0a-4754-9cf0-89bfcfeac4b2';
+                                payload.initiatingProUid = 'f71fb60d-ab0a-4754-9cf0-89bfcfeac4b2';
+                                payload.data = JSON.stringify(this.equipmentPopupItem.data);
+                            }
+                            else {
+                                payload.uid = this.equipmentPopupItem.uid;
+                                payload.newData = JSON.stringify(this.equipmentPopupItem.data);
+                            }
+                            $.post(
+                                '/api/ticket/' + (this.equipmentPopupMode === 'add' ? 'create' : 'updateData'),
+                                payload,
+                                (_data) => {
+                                    console.log(_data);
+                                    if(!_autoSave) {
+                                        fastReload();
+                                    }
+                                    else {
+                                        this.reloadPopupItem('equipment');
+                                    }
+                                },
+                                'json');
+                            return false;
+                        },
+                        equipmentSaveComment: function() {
+                            if(!this.comment) return;
+                            let comment = {
+                                pro_id: this.own_pro_id,
+                                created_at: new Date().toLocaleString(),
+                                message: this.comment
+                            };
+                            if(!this.equipmentPopupItem.data.comments) {
+                                this.equipmentPopupItem.data.comments = [];
+                            }
+                            this.equipmentPopupItem.data.comments.push(comment);
+                            this.equipmentAutoSave();
+                        },
 
 
                         // common
                         // common
                         reloadPopupItem: function(_type) {
                         reloadPopupItem: function(_type) {
@@ -255,9 +525,21 @@
                                 $(strengthElem).attr('ac-initialized', 1);
                                 $(strengthElem).attr('ac-initialized', 1);
                             });
                             });
                         },
                         },
-                        initICDAutoSuggest: function() {
+                        labAddICD: function() {
+                            this.labPopupItem.data.icds.push('');
+                            Vue.nextTick(() => {
+                                this.labInitICDAutoSuggest();
+                            });
+                        },
+                        imagingAddICD: function() {
+                            this.imagingPopupItem.data.icds.push('');
+                            Vue.nextTick(() => {
+                                this.imagingInitICDAutoSuggest();
+                            });
+                        },
+                        erxInitICDAutoSuggest: function() {
                             let self = this;
                             let self = this;
-                            $('#ticketsApp input[type="text"][data-field="icd"]:not([ac-initialized])').each(function() {
+                            $('#ticketsApp [stag-popup-key="erx-popup"] input[type="text"][data-field="icd"]:not([ac-initialized])').each(function() {
                                 var elem = this,
                                 var elem = this,
                                     dynID = 'icd-' + Math.ceil(Math.random() * 1000000),
                                     dynID = 'icd-' + Math.ceil(Math.random() * 1000000),
                                     vueIndex = $(this).attr('data-index');
                                     vueIndex = $(this).attr('data-index');
@@ -277,6 +559,50 @@
                                 $(elem).attr('ac-initialized', 1);
                                 $(elem).attr('ac-initialized', 1);
                             });
                             });
                         },
                         },
+                        labInitICDAutoSuggest: function() {
+                            let self = this;
+                            $('#ticketsApp [stag-popup-key="lab-popup"] 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.labPopupItem.data.icds[vueIndex] = acData[0].code;
+                                    return false;
+                                });
+                                $(elem).attr('ac-initialized', 1);
+                            });
+                        },
+                        imagingInitICDAutoSuggest: function() {
+                            let self = this;
+                            $('#ticketsApp [stag-popup-key="imaging-popup"] 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.imagingPopupItem.data.icds[vueIndex] = acData[0].code;
+                                    return false;
+                                });
+                                $(elem).attr('ac-initialized', 1);
+                            });
+                        },
                         initDomElementEvents: function() {
                         initDomElementEvents: function() {
                             let self = this;
                             let self = this;
                             $(document).off('pro-changed', '#ticketsApp select[provider-search]')
                             $(document).off('pro-changed', '#ticketsApp select[provider-search]')
@@ -323,6 +649,7 @@
                                 .off('changeDate')
                                 .off('changeDate')
                                 .on('changeDate', function() {
                                 .on('changeDate', function() {
                                     self[self.currentCategory + 'PopupItem'].data.due_date = $(this).val();
                                     self[self.currentCategory + 'PopupItem'].data.due_date = $(this).val();
+                                    self[self.currentCategory + 'SavePopupItem'].call(self, true);
                                 });
                                 });
 
 
                             $(document).off('focus', '#ticketsApp input.form-control');
                             $(document).off('focus', '#ticketsApp input.form-control');
@@ -364,13 +691,13 @@
                     },
                     },
                     mounted: function () {
                     mounted: function () {
                         this.initRxAutoSuggest();
                         this.initRxAutoSuggest();
-                        this.initICDAutoSuggest();
+                        this.erxInitICDAutoSuggest();
+                        this.labInitICDAutoSuggest();
                         initFastLoad($('#ticketsApp'));
                         initFastLoad($('#ticketsApp'));
                         this.initPharmacySearch();
                         this.initPharmacySearch();
                         this.initDomElementEvents();
                         this.initDomElementEvents();
 
 
                         <?php for ($i=0; $i<count($categories); $i++) { ?>
                         <?php for ($i=0; $i<count($categories); $i++) { ?>
-                            {{ $categories[$i] }}AutoSave: null,
                             this.{{ $categories[$i] }}AutoSave = debounce(() => {
                             this.{{ $categories[$i] }}AutoSave = debounce(() => {
                                 this.{{ $categories[$i] }}SavePopupItem(true);
                                 this.{{ $categories[$i] }}SavePopupItem(true);
                             }, 1000);
                             }, 1000);

+ 49 - 3
resources/views/app/patient/tickets/imaging.blade.php

@@ -55,7 +55,9 @@
     <div class="stag-popup stag-popup-sm stag-slide mcp-theme-1" stag-popup-key="imaging-popup">
     <div class="stag-popup stag-popup-sm stag-slide mcp-theme-1" stag-popup-key="imaging-popup">
         <form method="POST" action="" class="p-0">
         <form method="POST" action="" class="p-0">
             <h3 class="stag-popup-title mb-0 p-3 bg-light">
             <h3 class="stag-popup-title mb-0 p-3 bg-light">
-                <span class="flex-grow-1 text-nowrap overflow-hidden text-ellipsis mr-3">@{{ imagingPopupMode === 'add' ? 'Add Imaging Ticket' : imagingPopupItem.data.medication + '  •  ' + imagingPopupItem.data.strength }}</span>
+                <span v-if="imagingPopupMode === 'add'" class="flex-grow-1 text-nowrap overflow-hidden text-ellipsis mr-3">Add Imaging Ticket</span>
+                <span v-if="imagingPopupMode === 'edit'" class="flex-grow-1 text-nowrap overflow-hidden text-ellipsis mr-3"
+                      v-html="imagingPopupItem.data.tests && Array.isArray(imagingPopupItem.data.tests) ? imagingPopupItem.data.tests.join(', ') : 'Edit Imaging Ticket'"></span>
                 <div v-if="imagingPopupMode === 'edit'" class="ml-auto mr-3">
                 <div v-if="imagingPopupMode === 'edit'" class="ml-auto mr-3">
                     <a v-if="imagingPopupItem.is_open" href="#"
                     <a v-if="imagingPopupItem.is_open" href="#"
                        class="btn btn-sm btn-default border bg-white text-dark text-nowrap shadow-none"
                        class="btn btn-sm btn-default border bg-white text-dark text-nowrap shadow-none"
@@ -151,9 +153,53 @@
                         <label class="text-secondary mb-0 font-weight-normal font-size-16">Imaging</label>
                         <label class="text-secondary mb-0 font-weight-normal font-size-16">Imaging</label>
                     </div>
                     </div>
                 </div>
                 </div>
-                <div class="row mb-2">
-                    TODO
+
+                <div class="mb-2">
+                    <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="imagingPopupItem.data.tests.push('')">Add</a>
+                    </div>
+                    <div class="d-flex align-items-center mb-2" v-for="(test, testIndex) in imagingPopupItem.data.tests">
+                        <div class="position-relative flex-grow-1">
+                            <input required type="text" data-option-list v-model="imagingPopupItem.data.tests[testIndex]" class="form-control form-control-sm" placeholder="Test">
+                            <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="imagingPopupItem.data.tests.length > 1" class="ml-2 text-danger" href="#" v-on:click.prevent="imagingPopupItem.data.tests.splice(testIndex, 1)">
+                            <i class="fa fa-trash-alt"></i>
+                        </a>
+                    </div>
                 </div>
                 </div>
+                <div class="mb-2">
+                    <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="imagingAddICD()">Add</a>
+                    </div>
+                    <div class="d-flex align-items-center mb-2" v-for="(icd, icdIndex) in imagingPopupItem.data.icds">
+                        <div class="position-relative flex-grow-1">
+                            <input required type="text" data-field="icd" :data-index="icdIndex" placeholder="ICD"
+                                   v-model="imagingPopupItem.data.icds[icdIndex]" class="form-control form-control-sm">
+                        </div>
+                        <a v-if="imagingPopupItem.data.icds.length > 1" class="ml-2 text-danger" href="#" v-on:click.prevent="imagingPopupItem.data.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>
+                    <input type="text" v-model="imagingPopupItem.data.memo" class="form-control form-control-sm">
+                </div>
+
+
                 <div v-if="imagingPopupMode === 'add'" class="d-flex align-items-center justify-content-start mt-3">
                 <div v-if="imagingPopupMode === 'add'" class="d-flex align-items-center justify-content-start mt-3">
                     <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="saveimagingPopupItem()">Submit</button>
                     <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="saveimagingPopupItem()">Submit</button>
                     <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>
                     <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>

+ 54 - 3
resources/views/app/patient/tickets/lab.blade.php

@@ -55,7 +55,10 @@
     <div class="stag-popup stag-popup-sm stag-slide mcp-theme-1" stag-popup-key="lab-popup">
     <div class="stag-popup stag-popup-sm stag-slide mcp-theme-1" stag-popup-key="lab-popup">
         <form method="POST" action="" class="p-0">
         <form method="POST" action="" class="p-0">
             <h3 class="stag-popup-title mb-0 p-3 bg-light">
             <h3 class="stag-popup-title mb-0 p-3 bg-light">
-                <span class="flex-grow-1 text-nowrap overflow-hidden text-ellipsis mr-3">@{{ labPopupMode === 'add' ? 'Add Lab Ticket' : labPopupItem.data.medication + '  •  ' + labPopupItem.data.strength }}</span>
+
+                <span v-if="labPopupMode === 'add'" class="flex-grow-1 text-nowrap overflow-hidden text-ellipsis mr-3">Add Lab Ticket</span>
+                <span v-if="labPopupMode === 'edit'" class="flex-grow-1 text-nowrap overflow-hidden text-ellipsis mr-3"
+                      v-html="labPopupItem.data.tests && Array.isArray(labPopupItem.data.tests) ? labPopupItem.data.tests.join(', ') : 'Edit Lab Ticket'"></span>
                 <div v-if="labPopupMode === 'edit'" class="ml-auto mr-3">
                 <div v-if="labPopupMode === 'edit'" class="ml-auto mr-3">
                     <a v-if="labPopupItem.is_open" href="#"
                     <a v-if="labPopupItem.is_open" href="#"
                        class="btn btn-sm btn-default border bg-white text-dark text-nowrap shadow-none"
                        class="btn btn-sm btn-default border bg-white text-dark text-nowrap shadow-none"
@@ -151,9 +154,57 @@
                         <label class="text-secondary mb-0 font-weight-normal font-size-16">Lab</label>
                         <label class="text-secondary mb-0 font-weight-normal font-size-16">Lab</label>
                     </div>
                     </div>
                 </div>
                 </div>
-                <div class="row mb-2">
-                    TODO
+
+
+                <div class="mb-2">
+                    <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="labPopupItem.data.tests.push('')">Add</a>
+                    </div>
+                    <div class="d-flex align-items-center mb-2" v-for="(test, testIndex) in labPopupItem.data.tests">
+                        <div class="position-relative flex-grow-1">
+                            <input required type="text" data-option-list v-model="labPopupItem.data.tests[testIndex]" class="form-control form-control-sm" placeholder="Test">
+                            <div class="data-option-list">
+                                <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="labPopupItem.data.tests.length > 1" class="ml-2 text-danger" href="#" v-on:click.prevent="labPopupItem.data.tests.splice(testIndex, 1)">
+                            <i class="fa fa-trash-alt"></i>
+                        </a>
+                    </div>
                 </div>
                 </div>
+                <div class="mb-2">
+                    <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="labAddICD()">Add</a>
+                    </div>
+                    <div class="d-flex align-items-center mb-2" v-for="(icd, icdIndex) in labPopupItem.data.icds">
+                        <div class="position-relative flex-grow-1">
+                            <input required type="text" data-field="icd" :data-index="icdIndex" placeholder="ICD"
+                                   v-model="labPopupItem.data.icds[icdIndex]" class="form-control form-control-sm">
+                        </div>
+                        <a v-if="labPopupItem.data.icds.length > 1" class="ml-2 text-danger" href="#" v-on:click.prevent="labPopupItem.data.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>
+                    <input type="text" v-model="labPopupItem.data.memo" class="form-control form-control-sm">
+                </div>
+
+
                 <div v-if="labPopupMode === 'add'" class="d-flex align-items-center justify-content-start mt-3">
                 <div v-if="labPopupMode === 'add'" class="d-flex align-items-center justify-content-start mt-3">
                     <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="labSavePopupItem()">Submit</button>
                     <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="labSavePopupItem()">Submit</button>
                     <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>
                     <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>