Lab/Imaging: new data structure (wip)

resources/views/app/patient/prescriptions-popup/imaging-form.blade.php

@@ -1,25 +1,56 @@
-<div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="pp-prescription-popup-IMAGING">
-    <form method="POST" action="">
+<div class="stag-popup stag-popup-md mcp-theme-1" stag-popup-key="pp-prescription-popup-IMAGING">
+    <form method="POST" action="" class="overflow-visible">
         <h3 class="stag-popup-title mb-2">
             <span>Imaging Prescription</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">Test</label>
-            <input type="text" class="form-control form-control-sm min-width-unset"
-                   v-model="currentPrescription_IMAGING.clinicalDetailJson.test">
+
+        <div class="d-flex align-items-baseline">
+            <span class="font-weight-bold mr-3">Test Sets</span>
+            <a href="#" v-on:click.prevent="addTestSet()">Add Test Set</a>
         </div>
-        <div class="mb-2">
-            <label class="text-sm text-secondary mb-1">ICDS</label>
-            <input type="text" class="form-control form-control-sm min-width-unset"
-                   v-model="currentPrescription_IMAGING.clinicalDetailJson.icds">
-        </div>
-        <div class="mb-2">
-            <label class="text-sm text-secondary mb-1">Memo</label>
-            <input type="text" class="form-control form-control-sm min-width-unset"
-                   v-model="currentPrescription_IMAGING.clinicalDetailJson.memo">
+
+        <div v-for="(item, itemIndex) in currentPrescription_IMAGING.clinicalDetailJson.items" class="border bg-light px-2 pt-2 pb-1 my-2">
+            <div class="row">
+                <div class="col-6 pr-2">
+                    <div class="d-flex align-items-baseline mb-1">
+                        <span class="text-secondary mr-3">Tests</span>
+                        <a href="#" v-on:click.prevent="addTest(item)">Add Test</a>
+                    </div>
+                    <div v-for="(test, testIndex) in item.tests" class="d-flex align-items-baseline mb-1">
+                        <div class="position-relative flex-grow-1">
+                            <input type="text" class="min-width-unset form-control form-control-sm" v-model="test.desc">
+                        </div>
+                        <a href="#" v-if="item.tests && item.tests.length > 1" v-on:click.prevent="deleteTest(item, testIndex)" class="pl-2">
+                            <i class="fa fa-trash-alt text-danger on-hover-opaque"></i>
+                        </a>
+                        <span v-if="item.tests && item.tests.length === 1" class="pl-2">
+                            <i class="fa fa-trash-alt text-secondary on-hover-opaque"></i>
+                        </span>
+                    </div>
+                </div>
+                <div class="col-6 pl-2 border-left">
+                    <div class="d-flex align-items-baseline mb-1">
+                        <span class="text-secondary mr-3">ICDs</span>
+                        <a href="#" v-on:click.prevent="addICD(item)">Add ICD</a>
+                    </div>
+                    <div v-for="(icd, icdIndex) in item.icds" class="d-flex align-items-baseline mb-1">
+                        <input type="text" class="min-width-unset form-control form-control-sm width-100px mr-2"
+                               data-field="icd" :data-item-index="itemIndex" :data-icd-index="icdIndex" data-category="IMAGING"
+                               v-model="icd.code">
+                        <input type="text" class="min-width-unset form-control form-control-sm flex-grow-1" v-model="icd.desc">
+                        <a href="#" v-if="item.icds && item.icds.length > 1" v-on:click.prevent="deleteICD(item, icdIndex)" class="pl-2">
+                            <i class="fa fa-trash-alt text-danger on-hover-opaque"></i>
+                        </a>
+                        <span v-if="item.icds && item.icds.length === 1" class="pl-2">
+                            <i class="fa fa-trash-alt text-secondary on-hover-opaque"></i>
+                        </span>
+                    </div>
+                </div>
+            </div>
         </div>
+
         <div class="d-flex align-items-center justify-content-center mt-3">
             <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="savePrescription()">Submit
             </button>

resources/views/app/patient/prescriptions-popup/lab-form.blade.php

@@ -1,25 +1,67 @@
-<div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="pp-prescription-popup-LAB">
-    <form method="POST" action="">
+<div class="stag-popup stag-popup-md mcp-theme-1" stag-popup-key="pp-prescription-popup-LAB">
+    <form method="POST" action="" class="overflow-visible">
         <h3 class="stag-popup-title mb-2">
             <span>Lab Prescription</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">Test</label>
-            <input type="text" class="form-control form-control-sm min-width-unset"
-                   v-model="currentPrescription_LAB.clinicalDetailJson.test">
+
+        <div class="d-flex align-items-baseline">
+            <span class="font-weight-bold mr-3">Test Sets</span>
+            <a href="#" v-on:click.prevent="addTestSet()">Add Test Set</a>
         </div>
-        <div class="mb-2">
-            <label class="text-sm text-secondary mb-1">ICDS</label>
-            <input type="text" class="form-control form-control-sm min-width-unset"
-                   v-model="currentPrescription_LAB.clinicalDetailJson.icds">
-        </div>
-        <div class="mb-2">
-            <label class="text-sm text-secondary mb-1">Memo</label>
-            <input type="text" class="form-control form-control-sm min-width-unset"
-                   v-model="currentPrescription_LAB.clinicalDetailJson.memo">
+
+        <div v-for="(item, itemIndex) in currentPrescription_LAB.clinicalDetailJson.items" class="border bg-light px-2 pt-2 pb-1 my-2">
+            <div class="row">
+                <div class="col-6 pr-2">
+                    <div class="d-flex align-items-baseline mb-1">
+                        <span class="text-secondary mr-3">Tests</span>
+                        <a href="#" v-on:click.prevent="addTest(item)">Add Test</a>
+                    </div>
+                    <div v-for="(test, testIndex) in item.tests" class="d-flex align-items-baseline mb-1">
+                        <div class="position-relative flex-grow-1">
+                            <input type="text" class="min-width-unset form-control form-control-sm" data-option-list v-model="test.desc">
+                            <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>
+                        </div>
+                        <a href="#" v-if="item.tests && item.tests.length > 1" v-on:click.prevent="deleteTest(item, testIndex)" class="pl-2">
+                            <i class="fa fa-trash-alt text-danger on-hover-opaque"></i>
+                        </a>
+                        <span v-if="item.tests && item.tests.length === 1" class="pl-2">
+                            <i class="fa fa-trash-alt text-secondary on-hover-opaque"></i>
+                        </span>
+                    </div>
+                </div>
+                <div class="col-6 pl-2 border-left">
+                    <div class="d-flex align-items-baseline mb-1">
+                        <span class="text-secondary mr-3">ICDs</span>
+                        <a href="#" v-on:click.prevent="addICD(item)">Add ICD</a>
+                    </div>
+                    <div v-for="(icd, icdIndex) in item.icds" class="d-flex align-items-baseline mb-1">
+                        <input type="text" class="min-width-unset form-control form-control-sm width-100px mr-2"
+                               data-field="icd" :data-item-index="itemIndex" :data-icd-index="icdIndex" data-category="LAB"
+                               v-model="icd.code">
+                        <input type="text" class="min-width-unset form-control form-control-sm flex-grow-1" v-model="icd.desc">
+                        <a href="#" v-if="item.icds && item.icds.length > 1" v-on:click.prevent="deleteICD(item, icdIndex)" class="pl-2">
+                            <i class="fa fa-trash-alt text-danger on-hover-opaque"></i>
+                        </a>
+                        <span v-if="item.icds && item.icds.length === 1" class="pl-2">
+                            <i class="fa fa-trash-alt text-secondary on-hover-opaque"></i>
+                        </span>
+                    </div>
+                </div>
+            </div>
         </div>
+
         <div class="d-flex align-items-center justify-content-center mt-3">
             <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="savePrescription()">Submit
             </button>

resources/views/app/patient/prescriptions/imaging-form.blade.php

@@ -1,44 +1,56 @@
-<div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="prescription-popup-IMAGING">
-    <form method="POST" action="">
+<div class="stag-popup stag-popup-md mcp-theme-1" stag-popup-key="prescription-popup-IMAGING">
+    <form method="POST" action="" class="overflow-visible">
         <h3 class="stag-popup-title mb-2">
             <span>Imaging Prescription</span>
             <a href="#" class="ml-auto text-secondary"
                onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
         </h3>
-        <div class="mb-2">
-            <div class="d-flex align-items-baseline">
-                <label class="text-sm text-secondary mb-0">Tests</label>
-                <span class="mx-2 text-secondary text-sm"></span>
-                <a href="#" class="text-sm" v-on:click.prevent="currentPrescription_IMAGING.clinicalDetailJson.tests.push('')">+ Add</a>
-            </div>
-            <div v-for="(test, testIndex) in currentPrescription_IMAGING.clinicalDetailJson.tests">
-                <input type="text" class="form-control form-control-sm min-width-unset mb-1"
-                       v-model="currentPrescription_IMAGING.clinicalDetailJson.tests[testIndex]">
-            </div>
+
+        <div class="d-flex align-items-baseline">
+            <span class="font-weight-bold mr-3">Test Sets</span>
+            <a href="#" v-on:click.prevent="addTestSet()">Add Test Set</a>
         </div>
-        <div class="mb-2">
-            <div class="d-flex align-items-baseline">
-                <label class="text-sm text-secondary mb-0">ICDs</label>
-                <span class="mx-2 text-secondary text-sm"></span>
-                <a href="#" class="text-sm" v-on:click.prevent="addICD('IMAGING')">+ Add</a>
+
+        <div v-for="(item, itemIndex) in currentPrescription_IMAGING.clinicalDetailJson.items" class="border bg-light px-2 pt-2 pb-1 my-2">
+            <div class="row">
+                <div class="col-6 pr-2">
+                    <div class="d-flex align-items-baseline mb-1">
+                        <span class="text-secondary mr-3">Tests</span>
+                        <a href="#" v-on:click.prevent="addTest(item)">Add Test</a>
+                    </div>
+                    <div v-for="(test, testIndex) in item.tests" class="d-flex align-items-baseline mb-1">
+                        <div class="position-relative flex-grow-1">
+                            <input type="text" class="min-width-unset form-control form-control-sm" v-model="test.desc">
+                        </div>
+                        <a href="#" v-if="item.tests && item.tests.length > 1" v-on:click.prevent="deleteTest(item, testIndex)" class="pl-2">
+                            <i class="fa fa-trash-alt text-danger on-hover-opaque"></i>
+                        </a>
+                        <span v-if="item.tests && item.tests.length === 1" class="pl-2">
+                            <i class="fa fa-trash-alt text-secondary on-hover-opaque"></i>
+                        </span>
+                    </div>
+                </div>
+                <div class="col-6 pl-2 border-left">
+                    <div class="d-flex align-items-baseline mb-1">
+                        <span class="text-secondary mr-3">ICDs</span>
+                        <a href="#" v-on:click.prevent="addICD(item)">Add ICD</a>
+                    </div>
+                    <div v-for="(icd, icdIndex) in item.icds" class="d-flex align-items-baseline mb-1">
+                        <input type="text" class="min-width-unset form-control form-control-sm width-100px mr-2"
+                               data-field="icd" :data-item-index="itemIndex" :data-icd-index="icdIndex" data-category="IMAGING"
+                               v-model="icd.code">
+                        <input type="text" class="min-width-unset form-control form-control-sm flex-grow-1" v-model="icd.desc">
+                        <a href="#" v-if="item.icds && item.icds.length > 1" v-on:click.prevent="deleteICD(item, icdIndex)" class="pl-2">
+                            <i class="fa fa-trash-alt text-danger on-hover-opaque"></i>
+                        </a>
+                        <span v-if="item.icds && item.icds.length === 1" class="pl-2">
+                            <i class="fa fa-trash-alt text-secondary on-hover-opaque"></i>
+                        </span>
+                    </div>
+                </div>
             </div>
-            <div v-for="(icd, icdIndex) in currentPrescription_IMAGING.clinicalDetailJson.icds" class="d-flex align-items-center">
-                <input type="text" class="form-control form-control-sm min-width-unset mb-1 flex-grow-1"
-                       data-field="icd" :data-index="icdIndex" data-category="IMAGING"
-                       v-model="currentPrescription_IMAGING.clinicalDetailJson.icds[icdIndex]">
-                <a v-if="icdIndex>0"
-                   href="#"
-                   class="px-2"
-                   v-on:click.prevent="currentPrescription_IMAGING.clinicalDetailJson.icds.splice(icdIndex, 1)">
-                    <i class="fa fa-trash-alt text-danger on-hover-opaque"></i>
-                </a>
-            </div>
-        </div>
-        <div class="mb-2">
-            <label class="text-sm text-secondary mb-1">Memo</label>
-            <input type="text" class="form-control form-control-sm min-width-unset"
-                   v-model="currentPrescription_IMAGING.clinicalDetailJson.memo">
         </div>
+
         <div class="d-flex align-items-center justify-content-center mt-3">
             <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="savePrescription()">Submit
             </button>

resources/views/app/patient/prescriptions/lab-form.blade.php

@@ -1,44 +1,67 @@
-<div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="prescription-popup-LAB">
-    <form method="POST" action="">
+<div class="stag-popup stag-popup-md mcp-theme-1" stag-popup-key="prescription-popup-LAB">
+    <form method="POST" action="" class="overflow-visible">
         <h3 class="stag-popup-title mb-2">
             <span>Lab Prescription</span>
             <a href="#" class="ml-auto text-secondary"
                onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
         </h3>
-        <div class="mb-2">
-            <div class="d-flex align-items-baseline">
-                <label class="text-sm text-secondary mb-0">Tests</label>
-                <span class="mx-2 text-secondary text-sm"></span>
-                <a href="#" class="text-sm" v-on:click.prevent="currentPrescription_LAB.clinicalDetailJson.tests.push('')">+ Add</a>
-            </div>
-            <div v-for="(test, testIndex) in currentPrescription_LAB.clinicalDetailJson.tests">
-                <input type="text" class="form-control form-control-sm min-width-unset mb-1"
-                       v-model="currentPrescription_LAB.clinicalDetailJson.tests[testIndex]">
-            </div>
+
+        <div class="d-flex align-items-baseline">
+            <span class="font-weight-bold mr-3">Test Sets</span>
+            <a href="#" v-on:click.prevent="addTestSet()">Add Test Set</a>
         </div>
-        <div class="mb-2">
-            <div class="d-flex align-items-baseline">
-                <label class="text-sm text-secondary mb-0">ICDs</label>
-                <span class="mx-2 text-secondary text-sm"></span>
-                <a href="#" class="text-sm" v-on:click.prevent="addICD('LAB')">+ Add</a>
+
+        <div v-for="(item, itemIndex) in currentPrescription_LAB.clinicalDetailJson.items" class="border bg-light px-2 pt-2 pb-1 my-2">
+            <div class="row">
+                <div class="col-6 pr-2">
+                    <div class="d-flex align-items-baseline mb-1">
+                        <span class="text-secondary mr-3">Tests</span>
+                        <a href="#" v-on:click.prevent="addTest(item)">Add Test</a>
+                    </div>
+                    <div v-for="(test, testIndex) in item.tests" class="d-flex align-items-baseline mb-1">
+                        <div class="position-relative flex-grow-1">
+                            <input type="text" class="min-width-unset form-control form-control-sm" data-option-list v-model="test.desc">
+                            <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>
+                        </div>
+                        <a href="#" v-if="item.tests && item.tests.length > 1" v-on:click.prevent="deleteTest(item, testIndex)" class="pl-2">
+                            <i class="fa fa-trash-alt text-danger on-hover-opaque"></i>
+                        </a>
+                        <span v-if="item.tests && item.tests.length === 1" class="pl-2">
+                            <i class="fa fa-trash-alt text-secondary on-hover-opaque"></i>
+                        </span>
+                    </div>
+                </div>
+                <div class="col-6 pl-2 border-left">
+                    <div class="d-flex align-items-baseline mb-1">
+                        <span class="text-secondary mr-3">ICDs</span>
+                        <a href="#" v-on:click.prevent="addICD(item)">Add ICD</a>
+                    </div>
+                    <div v-for="(icd, icdIndex) in item.icds" class="d-flex align-items-baseline mb-1">
+                        <input type="text" class="min-width-unset form-control form-control-sm width-100px mr-2"
+                               data-field="icd" :data-item-index="itemIndex" :data-icd-index="icdIndex" data-category="LAB"
+                               v-model="icd.code">
+                        <input type="text" class="min-width-unset form-control form-control-sm flex-grow-1" v-model="icd.desc">
+                        <a href="#" v-if="item.icds && item.icds.length > 1" v-on:click.prevent="deleteICD(item, icdIndex)" class="pl-2">
+                            <i class="fa fa-trash-alt text-danger on-hover-opaque"></i>
+                        </a>
+                        <span v-if="item.icds && item.icds.length === 1" class="pl-2">
+                            <i class="fa fa-trash-alt text-secondary on-hover-opaque"></i>
+                        </span>
+                    </div>
+                </div>
             </div>
-            <div v-for="(icd, icdIndex) in currentPrescription_LAB.clinicalDetailJson.icds" class="d-flex align-items-center">
-                <input type="text" class="form-control form-control-sm min-width-unset mb-1 flex-grow-1"
-                       data-field="icd" :data-index="icdIndex" data-category="LAB"
-                       v-model="currentPrescription_LAB.clinicalDetailJson.icds[icdIndex]">
-                <a v-if="icdIndex>0"
-                   href="#"
-                   class="px-2"
-                   v-on:click.prevent="currentPrescription_LAB.clinicalDetailJson.icds.splice(icdIndex, 1)">
-                    <i class="fa fa-trash-alt text-danger on-hover-opaque"></i>
-                </a>
-            </div>
-        </div>
-        <div class="mb-2">
-            <label class="text-sm text-secondary mb-1">Memo</label>
-            <input type="text" class="form-control form-control-sm min-width-unset"
-                   v-model="currentPrescription_LAB.clinicalDetailJson.memo">
         </div>
+
         <div class="d-flex align-items-center justify-content-center mt-3">
             <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="savePrescription()">Submit
             </button>

resources/views/app/patient/prescriptions/list.blade.php

@@ -26,7 +26,7 @@
             <a href="#" v-on:click.prevent="newERx('OTHER')">+ Other</a>
         @endif
     </div>
-    <div class="d-flex align-items-start">
+    <div class="d-flex align-items-start bg-white">
         <table class="table table-striped table-sm table-bordered mb-0 flex-grow-1">
             <thead>
             <tr>
@@ -147,15 +147,26 @@
                 <div class="d-inline-flex align-items-baseline flex-grow-1">
                     <a v-if="!currentPrescription.has_hcp_pro_signed" class="mr-2" href="#" v-on:click.prevent="editClinicalDetails(currentPrescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
                     <span v-else class="mr-2" title="Cannot edit. Prescription already signed."><i class="fa fa-edit on-hover-opaque text-secondary"></i></span>
-                    <div v-if="currentPrescription.clinical_detail_json" class="d-inline-flex align-items-baseline">
+                    <div v-if="currentPrescription.clinical_detail_json" class="d-inline-flex align-items-baseline flex-grow-1">
                         <div class="" v-if="currentPrescription.erx_category === 'DRUG'">
                             <div class="d-flex align-items-baseline mb-1" v-for="drug in currentPrescription.clinical_detail_json.items">
                                 <b class="mr-2">@{{drug.medication ?? '-'}}</b>
                             </div>
                         </div>
-                        <div class="d-flex align-items-baseline" v-if="currentPrescription.erx_category === 'LAB' || currentPrescription.erx_category === 'IMAGING'">
-                            <div class="d-flex align-items-baseline mb-1" v-for="test in currentPrescription.clinical_detail_json.tests">
-                                <b class="mr-2">@{{test ?? '-'}}</b>
+                        <div v-if="currentPrescription.erx_category === 'LAB' || currentPrescription.erx_category === 'IMAGING'" class="flex-grow-1">
+                            <div class="border bg-light mb-1 px-2 py-1 flex-grow-1" v-for="item in currentPrescription.clinical_detail_json.items">
+                                <div class="d-flex align-items-baseline mb-1">
+                                    <span class="text-secondary mr-2">Tests:</span>
+                                    <span class="flex-grow-1">
+                                        <b v-for="test in item.tests" class="mr-2">@{{ test.desc }}</b>
+                                    </span>
+                                </div>
+                                <div class="d-flex align-items-baseline">
+                                    <span class="text-secondary mr-2">ICDs:</span>
+                                    <span class="flex-grow-1">
+                                        <b v-for="icd in item.icds" class="mr-2">@{{ icd.code }}</b>
+                                    </span>
+                                </div>
                             </div>
                         </div>
                         <div class="d-flex align-items-baseline" v-if="currentPrescription.erx_category === 'REFERRAL'">
@@ -472,9 +483,21 @@ GROUP BY erx_category");
                         hcpProUid: '{{$pro->uid}}',
                         erxCategory: 'LAB',
                         clinicalDetailJson: {
-                            test: '',
-                            icds: '',
-                            memo: '',
+                            items: [
+                                {
+                                    tests: [
+                                        {
+                                            desc: '',
+                                        }
+                                    ],
+                                    icds: [
+                                        {
+                                            code: '',
+                                            desc: '',
+                                        }
+                                    ]
+                                }
+                            ]
                         }
                     },
                     currentPrescription_IMAGING: {
@@ -484,9 +507,21 @@ GROUP BY erx_category");
                         hcpProUid: '{{$pro->uid}}',
                         erxCategory: 'IMAGING',
                         clinicalDetailJson: {
-                            test: '',
-                            icds: '',
-                            memo: '',
+                            items: [
+                                {
+                                    tests: [
+                                        {
+                                            desc: '',
+                                        }
+                                    ],
+                                    icds: [
+                                        {
+                                            code: '',
+                                            desc: '',
+                                        }
+                                    ]
+                                }
+                            ]
                         }
                     },
                     currentPrescription_REFERRAL: {
@@ -606,6 +641,100 @@ GROUP BY erx_category");
                         }, 'json');
                         return false;
                     },
+                    addTestSet: function() {
+                        this['currentPrescription_' + this.currentPrescriptionType].clinicalDetailJson.items.push({
+                            tests: [
+                                {
+                                    desc: '',
+                                }
+                            ],
+                            icds: [
+                                {
+                                    code: '',
+                                    desc: '',
+                                }
+                            ]
+                        });
+                    },
+                    addTest: function(_item) {
+                        _item.tests.push({
+                            desc: ''
+                        });
+                        Vue.nextTick(() => {
+                            this.initICDAutoSuggest();
+                        });
+                    },
+                    addICD: function(_item) {
+                        _item.icds.push({
+                            desc: ''
+                        });
+                        Vue.nextTick(() => {
+                            this.initICDAutoSuggest();
+                        });
+                    },
+                    deleteTest: function(_item, _index) {
+                        _item.tests.splice(_index, 1);
+                    },
+                    deleteICD: function(_item, _index) {
+                        _item.icds.splice(_index, 1);
+                    },
+                    getBlankPrescriptionClinicalData: function(_type) {
+                        let data = null;
+                        switch (_type) {
+                            case 'DRUG':
+                                data = {
+                                    items: [
+                                        {
+                                            medication: '',
+                                            dispense: '',
+                                            refills: '',
+                                            purpose: ''
+                                        }
+                                    ]
+                                };
+                                break;
+                            case 'LAB':
+                            case 'IMAGING':
+                                data = {
+                                    items: [
+                                        {
+                                            tests: [
+                                                {
+                                                    desc: '',
+                                                }
+                                            ],
+                                            icds: [
+                                                {
+                                                    code: '',
+                                                    desc: '',
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                };
+                                break;
+                            case 'REFERRAL':
+                                data = {
+                                    to: '',
+                                    memo: '',
+                                };
+                                break;
+                            case 'SUPPLY':
+                                data = {
+                                    item: '',
+                                    quantity: '',
+                                    memo: '',
+                                };
+                                break;
+                            case 'OTHER':
+                                data = {
+                                    title: '',
+                                    memo: '',
+                                };
+                                break;
+                        }
+                        return data;
+                    },
 
                     // new/edit/save-clinical
                     newPrescription: function(_type) {
@@ -632,7 +761,6 @@ GROUP BY erx_category");
                                 };
                                 break;
                             case 'LAB':
-                            case 'IMAGING':
                                 this.currentPrescription_LAB = {
                                     noteUid: '{{ @$note ? $note->uid : '' }}',
                                     clientUid: '{{ $patient->uid }}',
@@ -640,14 +768,52 @@ GROUP BY erx_category");
                                     hcpProUid: '{{$pro->uid}}',
                                     erxCategory: _type,
                                     clinicalDetailJson: {
-                                        test: '',
-                                        icds: '',
-                                        memo: '',
+                                        items: [
+                                            {
+                                                tests: [
+                                                    {
+                                                        desc: '',
+                                                    }
+                                                ],
+                                                icds: [
+                                                    {
+                                                        code: '',
+                                                        desc: '',
+                                                    }
+                                                ]
+                                            }
+                                        ]
+                                    }
+                                };
+                                break;
+                            case 'IMAGING':
+                                this.currentPrescription_IMAGING = {
+                                    noteUid: '{{ @$note ? $note->uid : '' }}',
+                                    clientUid: '{{ $patient->uid }}',
+                                    replacesCancelledErxUid: null, // TODO: step-2 support UI to mark a new one as replacing a cancelled one
+                                    hcpProUid: '{{$pro->uid}}',
+                                    erxCategory: _type,
+                                    clinicalDetailJson: {
+                                        items: [
+                                            {
+                                                tests: [
+                                                    {
+                                                        desc: '',
+                                                    }
+                                                ],
+                                                icds: [
+                                                    {
+                                                        code: '',
+                                                        desc: '',
+                                                    }
+                                                ]
+                                            }
+                                        ]
                                     }
                                 };
                                 break;
                             case 'REFERRAL':
-                                this.currentPrescription_LAB = {
+                                this.currentPrescription_REFERRAL = {
                                     noteUid: '{{ @$note ? $note->uid : '' }}',
                                     clientUid: '{{ $patient->uid }}',
                                     replacesCancelledErxUid: null, // TODO: step-2 support UI to mark a new one as replacing a cancelled one
@@ -660,7 +826,7 @@ GROUP BY erx_category");
                                 };
                                 break;
                             case 'SUPPLY':
-                                this.currentPrescription_LAB = {
+                                this.currentPrescription_SUPPLY = {
                                     noteUid: '{{ @$note ? $note->uid : '' }}',
                                     clientUid: '{{ $patient->uid }}',
                                     replacesCancelledErxUid: null, // TODO: step-2 support UI to mark a new one as replacing a cancelled one
@@ -674,7 +840,7 @@ GROUP BY erx_category");
                                 };
                                 break;
                             case 'OTHER':
-                                this.currentPrescription_LAB = {
+                                this.currentPrescription_OTHER = {
                                     noteUid: '{{ @$note ? $note->uid : '' }}',
                                     clientUid: '{{ $patient->uid }}',
                                     replacesCancelledErxUid: null, // TODO: step-2 support UI to mark a new one as replacing a cancelled one
@@ -703,10 +869,7 @@ GROUP BY erx_category");
                             uid: _prescription.uid,
                             clinicalDetailJson: _prescription.clinical_detail_json ?
                                 JSON.parse(JSON.stringify(_prescription.clinical_detail_json)) :
-                                {
-                                    tests: [''],
-                                    icds: ['']
-                                }
+                                this.getBlankPrescriptionClinicalData(this.currentPrescriptionType)
                         };
                         Vue.nextTick(() => {
                             showStagPopup('prescription-popup-' + this.currentPrescriptionType, true);
@@ -1190,19 +1353,14 @@ GROUP BY erx_category");
                             });
                         }
                     },
-                    addICD: function(_category) {
-                        this['currentPrescription_' + _category].clinicalDetailJson.icds.push('');
-                        Vue.nextTick(() => {
-                            this.initICDAutoSuggest();
-                        });
-                    },
                     initICDAutoSuggest: function() {
                         let self = this;
                         let parentSegment = $('#prescriptions-{{$patient->id}}');
                         parentSegment.find('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'),
+                                itemIndex = $(this).attr('data-item-index'),
+                                icdIndex = $(this).attr('data-icd-index'),
                                 category = $(this).attr('data-category');
                             $(elem).attr('id', dynID);
                             new window.Def.Autocompleter.Search(dynID,
@@ -1214,9 +1372,8 @@ GROUP BY erx_category");
                             );
                             window.Def.Autocompleter.Event.observeListSelections(dynID, function() {
                                 let autocomp = elem.autocomp, acData = autocomp.getSelectedItemData();
-                                // self.data['next_cc']['list'][vueIndex].icd = acData[0].code;
-                                // self.data['next_cc']['list'][vueIndex].memo = acData[0].data['name'];
-                                self['currentPrescription_' + category].clinicalDetailJson.icds[vueIndex] = acData[0].code;
+                                self['currentPrescription_' + category].clinicalDetailJson.items[itemIndex].icds[icdIndex].code = acData[0].code;
+                                self['currentPrescription_' + category].clinicalDetailJson.items[itemIndex].icds[icdIndex].desc = acData[0].data['name'];
                                 return false;
                             });
                             $(elem).attr('ac-initialized', 1);