Tickets v1 - UI fixes

public/css/style.css

@@ -1101,6 +1101,15 @@ body .node input[type="number"] {
     transition: opacity 0.3s ease;
     opacity: 0.5;
 }
+.stag-slide input[type="text"]:invalid {
+    background-color: #f8ecec;
+    padding-left: 0.5rem;
+}
+.stag-slide input[type="text"]:focus:invalid {
+    background: #fff;
+    border-color: #e24848;
+    box-shadow: 0 0 2px #c10707 !important;
+}
 
 .no-scroll {
     overflow: hidden;

public/js/pro-suggest.js

@@ -96,17 +96,23 @@
             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="pro-suggestions-container 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')) {
                 $.get('/pro-display-name/' + elem.attr('data-pro-uid'), function(_data) {
-                    input.val(_data);
+                    input.val(_data).data('original', _data);
                     elem.empty().append($('<option value="' + elem.attr('data-pro-uid') + '" selected/>').text(_data));
                 });
             }
             else {
-                input.val(elem.attr('data-pro-name'));
+                input.val(elem.attr('data-pro-name')).data('original', elem.attr('data-pro-name'));
+            }
+
+            if(elem.is('[required]')) {
+                input.attr('required', 'required');
             }
 
             input
@@ -119,6 +125,13 @@
                 .on('keypress.pro-suggest', function (e) {
                     suggestionsOuter = $(this).next('.pro-suggestions-container').find('>.suggestions-outer');
                     return handleKeypress($(this), e);
+                })
+                .off('blur.pro-suggest')
+                .on('blur.pro-suggest', function (e) {
+                    window.setTimeout(() => {
+                        $(this).next('.pro-suggestions-container').find('>.suggestions-outer').addClass('d-none');
+                        $(this).val($(this).data('original'));
+                    }, 50);
                 });
 
             $(elem).attr('pro-suggest-initialized', 1);
@@ -145,6 +158,7 @@
             $(this).closest('.position-relative')
                 .prev('.pro-suggest-input')
                 .val(label)
+                .data('original', label)
                 .trigger('change');
 
             return false;

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

@@ -304,11 +304,9 @@
 
                         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(!form[0].checkValidity()) {
+                                if(!_autoSave) form[0].reportValidity();
+                                return false;
                             }
                             if(!_autoSave) showMask();
                             let payload = {};

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

@@ -54,7 +54,7 @@
     </div>
     <div v-if="!preparing" class="stag-popup stag-popup-sm stag-slide mcp-theme-1" stag-popup-key="equipment-popup">
         <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 sticky-top">
                 <span v-if="equipmentPopupMode === 'add'" class="flex-grow-1 text-nowrap overflow-hidden text-ellipsis mr-3">Add Equipment Ticket</span>
                 <span v-if="equipmentPopupMode === 'edit'" class="flex-grow-1 text-nowrap overflow-hidden text-ellipsis mr-3"
                       v-html="equipmentPopupItem.data.items && Array.isArray(equipmentPopupItem.data.items) ? equipmentPopupItem.data.items.join(', ') : 'Edit Lab Ticket'"></span>

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

@@ -81,7 +81,7 @@
     </div>
     <div v-if="!preparing" class="stag-popup stag-popup-sm stag-slide mcp-theme-1" stag-popup-key="erx-popup">
         <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 sticky-top">
                 <span class="flex-grow-1 text-nowrap overflow-hidden text-ellipsis mr-3">@{{ erxPopupMode === 'add' ? 'Add ERx Ticket' : erxPopupItem.data.medication + '  •  ' + erxPopupItem.data.strength }}</span>
                 @include('app.patient.tickets.header-end', ['category' => 'erx'])
             </h3>

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

@@ -54,7 +54,7 @@
     </div>
     <div v-if="!preparing" class="stag-popup stag-popup-sm stag-slide mcp-theme-1" stag-popup-key="imaging-popup">
         <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 sticky-top">
                 <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>

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

@@ -54,7 +54,7 @@
     </div>
     <div v-if="!preparing" class="stag-popup stag-popup-sm stag-slide mcp-theme-1" stag-popup-key="lab-popup">
         <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 sticky-top">
                 <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>