RX autocomplete in Medications page

resources/views/app/patient/medications.blade.php

@@ -9,14 +9,19 @@
                 <form url="/api/clientInfoLine/create">
                     <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
                     <input type="hidden" name="category" value="rx">
-                    <div class="mb-2"><input type="text" class="form-control form-control-sm" name="contentText" value="" placeholder="Medication"></div>
+                    <div class="mb-2">
+                        <input type="text" class="form-control form-control-sm" name="contentText" value="" placeholder="Medication">
+                    </div>
+                    <div class="mb-2">
+                        <input type="text" class="form-control form-control-sm" name="strength" value="" placeholder="Strength/Form">
+                    </div>
                     <div class="d-flex align-items-center">
-                        <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                        <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                        <button class="btn btn-sm btn-primary mr-2" type="button" submit>Save</button>
+                        <button class="btn btn-sm btn-default mr-2 border" type="button" cancel>Cancel</button>
                     </div>
                 </form>
             </div>
-		&nbsp;|&nbsp; 
+		&nbsp;|&nbsp;
 	    <div moe>
 		<a start show class="">Add Multiple</a>
 		<form url="/api/clientInfoLine/createMultiple">
@@ -30,10 +35,11 @@
 		</form>
             </div>
         </div>
-        <table class="table table-striped table-sm table-bordered">
+        <table class="table table-striped table-sm table-bordered mb-0">
             <thead>
             <tr>
                 <th class="px-2 text-secondary">Medication</th>
+                <th class="px-2 text-secondary">Strength / Form</th>
                 <th class="px-2 text-secondary">Created By</th>
                 <th class="px-2 text-secondary">Created At</th>
                 <th class="px-2 text-secondary delete-column">&nbsp;</th>
@@ -43,10 +49,31 @@
             @foreach($infoLines as $line)
                 <tr>
                     <td class="px-2">{{$line->content_text}}</td>
+                    <td class="px-2">{{isset($line->contentDetail()->strength) ? $line->contentDetail()->strength : '-' }}</td>
                     <td class="px-2">{{$line->createdBySession && $line->createdBySession->pro ? $line->createdBySession->pro->displayName() : '-'}}</td>
                     <td class="px-2">{{ friendly_date_time($line->created_at) }}</td>
                     <td class="px-2 text-center delete-column">
-                        <div moe relative>
+                        <span moe relative class="mr-2">
+                            <a class="on-hover-opaque" start show title="Edit">
+                                <i class="font-size-11 fa fa-edit"></i>
+                            </a>
+                            <form url="/api/clientInfoLine/updateContent" right>
+                                <input type="hidden" name="uid" value="{{ $line->uid }}">
+                                <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
+                                <input type="hidden" name="category" value="rx">
+                                <div class="mb-2">
+                                    <input type="text" class="form-control form-control-sm" name="contentText" value="{{$line->content_text}}" placeholder="Medication">
+                                </div>
+                                <div class="mb-2">
+                                    <input type="text" class="form-control form-control-sm" name="strength" value="{{isset($line->contentDetail()->strength) ? $line->contentDetail()->strength : '' }}" placeholder="Strength/Form">
+                                </div>
+                                <div class="d-flex align-items-center">
+                                    <button class="btn btn-sm btn-primary mr-2" type="button" submit>Save</button>
+                                    <button class="btn btn-sm btn-default mr-2 border" type="button" cancel>Cancel</button>
+                                </div>
+                            </form>
+                        </span>
+                        <span moe relative>
                             <a start show class="on-hover-opaque"><i class="fa fa-trash-alt text-danger"></i></a>
                             <form url="/api/clientInfoLine/remove" right>
                                 <input type="hidden" name="uid" value="{{ $line->uid }}">
@@ -56,11 +83,35 @@
                                     <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
                                 </div>
                             </form>
-                        </div>
+                        </span>
                     </td>
                 </tr>
             @endforeach
             </tbody>
         </table>
     </div>
+    <script>
+        (function() {
+            function init() {
+                $('input[type="text"][name="contentText"]').each(function() {
+                    var elem = this, dynID = 'rx-' + Math.ceil(Math.random() * 1000000);
+                    $(elem).attr('id', dynID);
+                    var strengthElem = $(elem).closest('form').find('[name="strength"]')[0],
+                        dynStrengthsID = 'rx-' + Math.ceil(Math.random() * 1000000) + '-strengths';
+                    $(strengthElem).attr('id', dynStrengthsID);
+                    new window.Def.Autocompleter.Prefetch(dynStrengthsID, []);
+                    new window.Def.Autocompleter.Search(dynID,
+                        'https://clinicaltables.nlm.nih.gov/api/rxterms/v3/search?ef=STRENGTHS_AND_FORMS');
+                    window.Def.Autocompleter.Event.observeListSelections(dynID, function() {
+                        var autocomp = elem.autocomp;
+                        var strengths =
+                            autocomp.getSelectedItemData()[0].data['STRENGTHS_AND_FORMS'];
+                        if (strengths)
+                            strengthElem.autocomp.setListAndField(strengths, '');
+                    });
+                });
+            }
+            addMCInitializer('patient-rx-list', init);
+        })();
+    </script>
 @endsection