Tickets v1 (wip) - Highlight current item in table

public/css/style.css

@@ -1033,6 +1033,9 @@ body .node input[type="number"] {
 .tickets-table tbody tr:hover {
     background-color: rgba(0,0,0,.04);
 }
+.tickets-table tbody tr.current {
+    background-color: aliceblue;
+}
 .stag-slide input.form-control:not(:focus) {
     border-color: transparent;
     background-color: transparent;

public/js/stag-popup.js

@@ -27,6 +27,7 @@ function closeStagPopup() {
     $('.stag-popup').removeClass('show');
     $('html, body').removeClass('no-scroll');
     $(window.top.document.body).find('#stag_mcp_lhs').removeClass('no-scroll');
+    $(document).trigger('stag-popup-closed');
     return false;
 }
 (function() {

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

@@ -50,7 +50,7 @@
     <link href="/select2/select2.min.css" rel="stylesheet" />
     <script src="/select2/select2.min.js"></script>
     <div id="ticketsApp" v-cloak>
-        <div class="d-flex align-items-end pb-3">
+        <div class="d-flex align-items-end pb-0">
             <h4 class="font-weight-bold m-0 font-size-14">Tickets</h4>
             <select class="ml-auto max-width-300px form-control form-control-sm pr-2"
                     v-model="statusFilter">
@@ -61,13 +61,13 @@
         </div>
 
         <div class="my-4">
-            <div class="d-flex align-items-center pb-2">
-                <h4 class="font-weight-bold m-0 text-secondary font-size-14">ERx
+            <div class="d-flex align-items-end pb-2">
+                <h4 class="font-weight-bold m-0 text-secondary font-size-16">ERx
                     <span v-if="statusFilter === 'open'" class="text-secondary font-weight-normal">(@{{ erxNumOpen }} open)</span>
                     <span v-if="statusFilter === 'closed'" class="text-secondary font-weight-normal">(@{{ erxNumClosed }} closed)</span>
                     <span v-if="statusFilter === 'all'" class="text-secondary font-weight-normal">(@{{ erxNumOpen }} open, @{{ erxNumClosed }} closed)</span>
                 </h4>
-                <a class="py-0 font-weight-normal c-pointer btn btn-sm btn-info text-white rounded-0 mx-4"
+                <a class="py-1 px-3 c-pointer btn btn-sm btn-primary text-white mx-4 font-weight-bold"
                    v-on:click.prevent="showErxPopup()">Add</a>
                 <a class="py-0 font-weight-normal c-pointer flex-grow-1 text-right pr-2"
                    v-if="!erxCollapsed"
@@ -85,7 +85,7 @@
                 <tbody>
                 <tr v-for="(item, index) in ticketsByType.erx"
                     v-if="statusFilter === 'all' || (statusFilter === 'open' && item.is_open) || (statusFilter === 'closed' && !item.is_open)"
-                    :class="item.is_open ? '' : 'opacity-60 bg-light'">
+                    :class="(item.is_open ? ' ' : 'opacity-60 bg-light ') + (currentItemUid === item.uid ? 'current' : '')">
                     <td class="px-2 py-2 c-pointer" v-on:click.prevent="showErxPopup(item)">
                         <div class="d-flex align-items-center">
                             <div class="pro-initials text-uppercase"
@@ -432,6 +432,7 @@
                         },
 
                         // common
+                        currentItemUid: '',
                         allPros: {!! json_encode($allPros) !!},
                         allProsFlat: {!! json_encode($allProsFlat) !!},
                         proToUpdate: '',
@@ -462,7 +463,9 @@
 
                         // erx
                         showErxPopup: function(_item) {
-                            closeStagPopup();
+                            if (_item) {
+                                this.currentItemUid = _item.uid;
+                            }
                             this.erxPopupMode = _item ? 'edit' : 'add';
                             this.erxPopupItem = _item ? JSON.parse(JSON.stringify(_item)) : {
                                 uid: '',
@@ -620,7 +623,7 @@
                                 $(elem).attr('ac-initialized', 1);
                             });
                         },
-                        initProChangeEvents: function() {
+                        initDomElementEvents: function() {
                             let self = this;
                             $(document).off('pro-changed', '#ticketsApp select[provider-search]')
                             $(document).on('pro-changed', '#ticketsApp select[provider-search]', function() {
@@ -651,6 +654,11 @@
                                     }
                                 }
                             });
+
+                            $(document).off('stag-popup-closed')
+                            $(document).on('stag-popup-closed', function() {
+                                self.currentItemUid = '';
+                            });
                         },
                         inWords: function (num) {
                             try {
@@ -689,7 +697,7 @@
                         this.initICDAutoSuggest();
                         initFastLoad($('#ticketsApp'));
                         this.initPharmacySearch();
-                        this.initProChangeEvents();
+                        this.initDomElementEvents();
                     }
                 })
             }