Tickets v1 (wip) - collab edit section

public/css/style.css

@@ -1029,6 +1029,29 @@ body .node input[type="number"] {
 .tickets-table tbody tr:hover {
     background-color: rgba(0,0,0,.04);
 }
+.stag-slide input.form-control:not(:focus) {
+    border-color: transparent;
+    background-color: transparent;
+    cursor: pointer;
+    font-weight: bold;
+    padding-left: 0;
+}
+.stag-slide input.form-control:not(:focus):hover {
+    text-decoration: underline;
+}
+.stag-slide ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: #bbb !important;
+    font-weight: normal !important;
+    opacity: 1; /* Firefox */
+}
+.stag-slide :-ms-input-placeholder { /* Internet Explorer 10-11 */
+    color: #bbb !important;
+    font-weight: normal !important;
+}
+.stag-slide ::-ms-input-placeholder { /* Microsoft Edge */
+    color: #bbb !important;
+    font-weight: normal !important;
+}
 
 .no-scroll {
     overflow: hidden;

public/js/pro-suggest.js

@@ -21,11 +21,11 @@
         var term = elem.val();
         if (!!term && lastTerm !== term) {
             $.get('/pro-suggest?term=' + $.trim(term), function (_data) {
-                $('.suggestions-outer.pro-suggestions').html(_data).removeClass('d-none');
+                suggestionsOuter.html(_data).removeClass('d-none');
             });
             lastTerm = term;
         } else {
-            $('.suggestions-outer.pro-suggestions').addClass('d-none');
+            suggestionsOuter.addClass('d-none');
         }
     }, 250);
 
@@ -88,13 +88,15 @@
         }
     }
 
-    function init() {
+    window.initProSuggest = function() {
 
         // make select[provider-search] hidden & insert a textbox with pro-suggest
         $('select[provider-search]:not([pro-suggest-initialized])').each(function() {
             let elem = $(this);
+            elem.next('.pro-suggest-input').remove();
+            elem.next('.pro-suggestions-container').remove();
             let input = $('<input type="text" placeholder="Pro">').addClass('pro-suggest-input form-control form-control-sm').insertAfter(elem);
-            $('<div class="position-relative"><div class="suggestions-outer pro-suggestions position-absolute d-none"></div></div>').insertAfter(input);
+            $('<div class="pro-suggestions-container position-relative"><div class="suggestions-outer pro-suggestions position-absolute d-none"></div></div>').insertAfter(input);
             elem.hide();
 
             if(!!elem.attr('data-pro-uid')) {
@@ -103,16 +105,19 @@
                     elem.empty().append($('<option value="' + elem.attr('data-pro-uid') + '" selected/>').text(_data));
                 });
             }
+            else {
+                input.val(elem.attr('data-pro-name'));
+            }
 
             input
                 .off('keydown.pro-suggest')
                 .on('keydown.pro-suggest', function (e) {
-                    suggestionsOuter = $(this).next('.suggestions-outer');
+                    suggestionsOuter = $(this).next('.pro-suggestions-container').find('>.suggestions-outer');
                     return handleKeydown($(this), e);
                 })
                 .off('keypress.pro-suggest')
                 .on('keypress.pro-suggest', function (e) {
-                    suggestionsOuter = $(this).next('.suggestions-outer');
+                    suggestionsOuter = $(this).next('.pro-suggestions-container').find('>.suggestions-outer');
                     return handleKeypress($(this), e);
                 });
 
@@ -144,7 +149,7 @@
         });
 
     }
-    addMCInitializer('pro-suggest', init);
+    addMCInitializer('pro-suggest', initProSuggest);
 })();
 
 

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

@@ -145,108 +145,181 @@
             </table>
             </div>
             <div class="stag-popup stag-popup-sm stag-slide mcp-theme-1" stag-popup-key="erx-popup">
-                <form method="POST" action="">
-                    <h3 class="stag-popup-title mb-2">
-                        <span>@{{ erxPopupMode === 'add' ? 'Add ERx Item' : 'Edit ERx Item' }}</span>
+                <form method="POST" action="" class="p-0">
+                    <h3 class="stag-popup-title mb-0 p-3 bg-light">
+                        <span>@{{ erxPopupMode === 'add' ? 'Add ERx Ticket' : 'Edit ERx Ticket' }}</span>
                         <a href="#" class="ml-auto text-secondary"
                            onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
                     </h3>
-                    <div class="row mb-2">
-                        <div class="col-6">
-                            <label class="text-sm text-secondary mb-1">Medication</label>
-                            <input required type="text" data-field="medication"
-                                   v-model="erxPopupItem.data.medication" class="form-control form-control-sm">
+
+                    <!-- common - only applicable for edit -->
+                    <div v-if="erxPopupMode === 'edit'" class="p-3 border-bottom">
+
+                        <div class="row mb-2">
+                            <div class="col-3 d-inline-flex align-items-center">
+                                <label class="text-secondary m-0">Assignee Pro</label>
+                            </div>
+                            <div class="col-9">
+                                <select provider-search
+                                        :data-pro-name="[erxPopupItem.assigned_pro.name_last, erxPopupItem.assigned_pro.name_first].filter(Boolean).join(', ')"
+                                        class="form-control form-control-sm">
+                                    <option value=""> --select--</option>
+                                </select>
+                            </div>
                         </div>
-                        <div class="col-3 pl-0">
-                            <label class="text-sm text-secondary mb-1">Strength</label>
-                            <input type="text" data-field="strength"
-                                   v-model="erxPopupItem.data.strength" class="form-control form-control-sm min-width-unset">
+
+                        <div class="row">
+                            <div class="col-3 d-inline-flex align-items-center">
+                                <label class="text-secondary m-0">Ordering Pro</label>
+                            </div>
+                            <div class="col-9">
+                                <select provider-search
+                                        :data-pro-name="[erxPopupItem.ordering_pro.name_last, erxPopupItem.ordering_pro.name_first].filter(Boolean).join(', ')"
+                                        class="form-control form-control-sm">
+                                    <option value=""> --select--</option>
+                                </select>
+                            </div>
                         </div>
-                        <div class="col-3 pl-0">
-                            <label class="text-sm text-secondary mb-1">Frequency</label>
-                            <input type="text" v-model="erxPopupItem.data.frequency" class="form-control form-control-sm min-width-unset"
-                                   data-option-list="frequency-options">
-                            <div id="frequency-options" class="data-option-list">
-                                <div>Once a day</div>
-                                <div>Twice a day</div>
+
+<!--                        <div class="row mb-2">
+                            <div class="col-3 d-inline-flex align-items-center">
+                                <label class="text-secondary m-0">Manager Pro</label>
+                            </div>
+                            <div class="col-9">
+                                <select provider-search
+                                        :data-pro-name="[erxPopupItem.manager_pro.name_last, erxPopupItem.manager_pro.name_first].filter(Boolean).join(', ')"
+                                        class="form-control form-control-sm">
+                                    <option value=""> &#45;&#45;select&#45;&#45;</option>
+                                </select>
                             </div>
                         </div>
+
+                        <div class="row">
+                            <div class="col-3 d-inline-flex align-items-center">
+                                <label class="text-secondary m-0">Initiating Pro</label>
+                            </div>
+                            <div class="col-9">
+                                <select provider-search
+                                        :data-pro-name="[erxPopupItem.initiating_pro.name_last, erxPopupItem.initiating_pro.name_first].filter(Boolean).join(', ')"
+                                        class="form-control form-control-sm">
+                                    <option value=""> &#45;&#45;select&#45;&#45;</option>
+                                </select>
+                            </div>
+                        </div>-->
+
+
                     </div>
-                    <div class="row mb-2">
-                        <div class="col-6">
-                            <label class="text-sm text-secondary mb-1">Route</label>
-                            <input required type="text" v-model="erxPopupItem.data.route" class="form-control form-control-sm min-width-unset"
-                                   data-option-list="route-options">
-                            <div id="route-options" class="data-option-list">
-                                <div>PO (by mouth)</div>
-                                <div>PR (per rectum)</div>
-                                <div>IM (intramuscular)</div>
-                                <div>IV (intravenous)</div>
-                                <div>ID (intradermal)</div>
-                                <div>IN (intranasal)</div>
-                                <div>TP (topical)</div>
-                                <div>SL (sublingual)</div>
-                                <div>BUCC (buccal)</div>
-                                <div>IP (intraperitoneal)</div>
+
+                    <div class="p-3 border-bottom">
+
+                        <div class="row mb-2">
+                            <div class="col-12">
+                                <label class="text-secondary mb-0 font-weight-bold font-size-13">ERx</label>
                             </div>
                         </div>
-                        <div class="col-3 pl-0">
-                            <label class="text-sm text-secondary mb-1">Dispense Amount</label>
-                            <input required type="number" v-model="erxPopupItem.data.dispense" class="form-control form-control-sm min-width-unset">
+                        <div class="row mb-2">
+                            <div class="col-6">
+                                <label class="text-sm text-secondary mb-1">Medication</label>
+                                <input required type="text" data-field="medication" placeholder="Medication"
+                                       v-model="erxPopupItem.data.medication" class="form-control form-control-sm">
+                            </div>
+                            <div class="col-3 pl-0">
+                                <label class="text-sm text-secondary mb-1">Strength</label>
+                                <input type="text" data-field="strength" placeholder="Strength"
+                                       v-model="erxPopupItem.data.strength" class="form-control form-control-sm min-width-unset">
+                            </div>
+                            <div class="col-3 pl-0">
+                                <label class="text-sm text-secondary mb-1">Frequency</label>
+                                <input type="text" placeholder="Frequency"
+                                       v-model="erxPopupItem.data.frequency" class="form-control form-control-sm min-width-unset"
+                                       data-option-list="frequency-options">
+                                <div id="frequency-options" class="data-option-list">
+                                    <div>Once a day</div>
+                                    <div>Twice a day</div>
+                                </div>
+                            </div>
                         </div>
-                        <div class="col-3 pl-0">
-                            <label class="text-sm text-secondary mb-1">Refills</label>
-                            <input type="number" v-model="erxPopupItem.data.refills" class="form-control form-control-sm min-width-unset">
+                        <div class="row mb-2">
+                            <div class="col-6">
+                                <label class="text-sm text-secondary mb-1">Route</label>
+                                <input required type="text" placeholder="Route"
+                                       v-model="erxPopupItem.data.route" class="form-control form-control-sm min-width-unset"
+                                       data-option-list="route-options">
+                                <div id="route-options" class="data-option-list">
+                                    <div>PO (by mouth)</div>
+                                    <div>PR (per rectum)</div>
+                                    <div>IM (intramuscular)</div>
+                                    <div>IV (intravenous)</div>
+                                    <div>ID (intradermal)</div>
+                                    <div>IN (intranasal)</div>
+                                    <div>TP (topical)</div>
+                                    <div>SL (sublingual)</div>
+                                    <div>BUCC (buccal)</div>
+                                    <div>IP (intraperitoneal)</div>
+                                </div>
+                            </div>
+                            <div class="col-3 pl-0">
+                                <label class="text-sm text-secondary mb-1">Dispense Amount</label>
+                                <input required type="number" placeholder="Dispense Amount"
+                                       v-model="erxPopupItem.data.dispense" class="form-control form-control-sm min-width-unset">
+                            </div>
+                            <div class="col-3 pl-0">
+                                <label class="text-sm text-secondary mb-1">Refills</label>
+                                <input type="number" placeholder="Refills"
+                                       v-model="erxPopupItem.data.refills" class="form-control form-control-sm min-width-unset">
+                            </div>
                         </div>
-                    </div>
-                    <div class="row mb-2">
-                        <div class="col-12">
-                            <label class="text-sm text-secondary mb-1">Purpose</label>
-                            <input required type="text" data-field="icd" v-model="erxPopupItem.data.purpose" class="form-control form-control-sm">
+                        <div class="row">
+                            <div class="col-12">
+                                <label class="text-sm text-secondary mb-1">Purpose</label>
+                                <input required type="text"  placeholder="Purpose"
+                                       data-field="icd" v-model="erxPopupItem.data.purpose" class="form-control form-control-sm">
+                            </div>
                         </div>
-                    </div>
 
-                    <div class="row mb-2">
-                        <div class="col-12">
-                            <label class="text-secondary mt-2 mb-0 font-weight-bold font-size-13">Preferred Pharmacy</label>
-                        </div>
                     </div>
-                    <div class="row mb-2">
-                        <div class="col-12">
-                            <label class="text-sm text-secondary mb-1">Business Name</label>
-                            <input type="text" autocomplete="donotdoit" id="pharmacy-search" v-model="erxPopupItem.data.pharmacyName" class="form-control form-control-sm">
-                            <div class="suggestions-outer pharmacy-suggestions position-absolute d-none"></div>
-                        </div>
-                    </div>
-                    <div class="row mb-2">
-                        <div class="col-4">
-                            <label class="text-sm text-secondary mb-1">City</label>
-                            <input type="text" v-model="erxPopupItem.data.pharmacyCity" class="form-control form-control-sm min-width-unset">
-                        </div>
-                        <div class="col-2 pl-0">
-                            <label class="text-sm text-secondary mb-1">State</label>
-                            <input type="text" v-model="erxPopupItem.data.pharmacyState" class="form-control form-control-sm min-width-unset">
+                    <div class="p-3 border-bottom">
+                        <div class="row mb-2">
+                            <div class="col-12">
+                                <label class="text-secondary mb-0 font-weight-bold font-size-13">Preferred Pharmacy</label>
+                            </div>
                         </div>
-                        <div class="col-3 pl-0">
-                            <label class="text-sm text-secondary mb-1">Phone</label>
-                            <input type="text" v-model="erxPopupItem.data.pharmacyPhone" class="form-control form-control-sm min-width-unset">
+                        <div class="row mb-2">
+                            <div class="col-12">
+                                <label class="text-sm text-secondary mb-1">Business Name</label>
+                                <input type="text" autocomplete="donotdoit" placeholder="Business Name" id="pharmacy-search" v-model="erxPopupItem.data.pharmacyName" class="form-control form-control-sm">
+                                <div class="suggestions-outer pharmacy-suggestions position-absolute d-none"></div>
+                            </div>
                         </div>
-                        <div class="col-3 pl-0">
-                            <label class="text-sm text-secondary mb-1">Fax</label>
-                            <input type="text" v-model="erxPopupItem.data.pharmacyFax" class="form-control form-control-sm min-width-unset">
+                        <div class="row mb-2">
+                            <div class="col-4">
+                                <label class="text-sm text-secondary mb-1">City</label>
+                                <input type="text" placeholder="City" v-model="erxPopupItem.data.pharmacyCity" class="form-control form-control-sm min-width-unset">
+                            </div>
+                            <div class="col-2 pl-0">
+                                <label class="text-sm text-secondary mb-1">State</label>
+                                <input type="text" placeholder="State" v-model="erxPopupItem.data.pharmacyState" class="form-control form-control-sm min-width-unset">
+                            </div>
+                            <div class="col-3 pl-0">
+                                <label class="text-sm text-secondary mb-1">Phone</label>
+                                <input type="text" placeholder="Phone" v-model="erxPopupItem.data.pharmacyPhone" class="form-control form-control-sm min-width-unset">
+                            </div>
+                            <div class="col-3 pl-0">
+                                <label class="text-sm text-secondary mb-1">Fax</label>
+                                <input type="text" placeholder="Fax" v-model="erxPopupItem.data.pharmacyFax" class="form-control form-control-sm min-width-unset">
+                            </div>
                         </div>
-                    </div>
-                    <div class="row mb-2">
-                        <div class="col-12">
-                            <label class="text-sm text-secondary mb-1">Address Memo</label>
-                            <input type="text" v-model="erxPopupItem.data.pharmacyAddressMemo" class="form-control form-control-sm">
+                        <div class="row mb-2">
+                            <div class="col-12">
+                                <label class="text-sm text-secondary mb-1">Address Memo</label>
+                                <input type="text" placeholder="Address Memo" autocomplete="donotdoit" v-model="erxPopupItem.data.pharmacyAddressMemo" class="form-control form-control-sm">
+                            </div>
                         </div>
-                    </div>
-
-                    <div class="d-flex align-items-center justify-content-center mt-3">
+                        <div 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="saveErxPopupItem()">Submit</button>
                         <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>
                     </div>
+                    </div>
                 </form>
             </div>
             @include('app.patient.partials.ticket_update_pro_form',['ticketType'=>'erx'])
@@ -270,6 +343,10 @@
             foreach ($tickets as $ticket) {
                 $ticket->data = json_decode($ticket->data);
                 $ticket->created_at = friendly_date_time($ticket->created_at);
+                $ticket->assignedPro;
+                $ticket->managerPro;
+                $ticket->orderingPro;
+                $ticket->initiatingPro;
                 $ticketsByType[$ticket->category][] = $ticket;
                 $ticketsArray[] = $ticket;
             }
@@ -381,7 +458,11 @@
                                     pharmacyFax: '',
                                 }
                             };
-                            showStagPopup('erx-popup');
+                            showStagPopup('erx-popup', true);
+                            Vue.nextTick(function() {
+                                $('#ticketsApp [pro-suggest-initialized]').removeAttr('pro-suggest-initialized');
+                                initProSuggest();
+                            });
                         },
                         saveErxPopupItem: function() {
                             let form = $('#ticketsApp form').first();