Tickets - incoming-reports integration

public/css/style.css

@@ -1021,6 +1021,15 @@ body .node input[type="number"] {
     font-size: 10px !important;
     opacity: 0.85;
 }
+.pro-initials.pro-initials-sm {
+    height: 18px;
+    width: 18px;
+    min-height: 18px;
+    min-width: 18px;
+    max-height: 18px;
+    max-width: 18px;
+    font-size: 9px !important;
+}
 .pro-initials:hover {
     opacity: 1;
 }

public/js/stag-popup.js

@@ -1,3 +1,4 @@
+window.stagPopupsQueue = [];
 function showStagPopup(_key, _noAutoFocus) {
     /*$('html, body').addClass('no-scroll');
     $(window.top.document.body).find('#stag_mcp_lhs').addClass('no-scroll');*/
@@ -10,6 +11,7 @@ function showStagPopup(_key, _noAutoFocus) {
             stagPopup.find('input[type="text"]:not([readonly]):visible,select:visible').first().focus();
         }, 150);
     }
+    stagPopupsQueue.push(stagPopup);
     return false;
 }
 function submitStagPopup(_form) {
@@ -19,31 +21,40 @@ function submitStagPopup(_form) {
     }
     showMask();
     $.post(_form.attr('action'), _form.serialize(), function(_data) {
+        stagPopupsQueue = [];
         fastReload();
     });
     return false;
 }
 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');
+    if(!stagPopupsQueue.length) return false;
+    let popup = stagPopupsQueue[stagPopupsQueue.length - 1];
+    popup.removeClass('show');
+    stagPopupsQueue.splice(stagPopupsQueue.length - 1, 1);
+    // if all closed
+    if(!stagPopupsQueue.length) {
+        $('html, body').removeClass('no-scroll');
+        $(window.top.document.body).find('#stag_mcp_lhs').removeClass('no-scroll');
+        $(document).trigger('stag-popup-closed');
+    }
     return false;
 }
 (function() {
     window.initStagPopupEvents = function () {
-        $(document).on('click', '.stag-popup', function(_e) {
-            if($(_e.target).is('.stag-popup')) {
-                closeStagPopup();
-            }
-        });
+        $(document)
+            .off('click.stag-popup-discard', '.stag-popup')
+            .on('click.stag-popup-discard', '.stag-popup', function(_e) {
+                if($(_e.target).is('.stag-popup')) {
+                    closeStagPopup();
+                    return false;
+                }
+            });
         // catch ESC and discard any visible popups
         $(document)
             .off('keydown.stag-popup-escape')
             .on('keydown.stag-popup-escape', function (e) {
                 if(e.which === 27) {
-                    let visiblePopups = $('.stag-popup.show');
-                    if (visiblePopups.length) {
+                    if(stagPopupsQueue.length) {
                         closeStagPopup();
                         return false;
                     }

resources/views/app/patient/incoming-reports.blade.php

@@ -27,9 +27,9 @@
                                value="" placeholder="Report Date">
                     </div>
                     <div class="mb-2">
-                        <label for="" class="text-sm text-secondary mb-1">Title</label>
+                        <label for="" class="text-sm text-secondary mb-1">Title *</label>
                         <input type="text" class="form-control form-control-sm" name="title"
-                               value="" placeholder="Title">
+                               value="" placeholder="Title" required>
                     </div>
                     <div class="mb-2">
                         <label for="" class="text-sm text-secondary mb-1">File *</label>
@@ -140,9 +140,9 @@
                                                    value="{{$document->reportDate}}" placeholder="Report Date">
                                         </div>
                                         <div class="mb-2">
-                                            <label for="" class="text-sm text-secondary mb-1">Title</label>
+                                            <label for="" class="text-sm text-secondary mb-1">Title *</label>
                                             <input type="text" class="form-control form-control-sm" name="title"
-                                                   value="{{$document->title}}" placeholder="Title">
+                                                   value="{{$document->title}}" placeholder="Title" required>
                                         </div>
                                         <div class="mb-2">
                                             <label for="" class="text-sm text-secondary mb-1">File *</label>

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

@@ -103,6 +103,13 @@
                 $ticketsArray[] = $ticket;
             }
 
+            $reportsArray = [];
+            foreach ($patient->incomingReports as $report) {
+                $report->created_at = friendly_date_time($report->created_at);
+                $report->hcp;
+                $reportsArray[] = $report;
+            }
+
             $allProsFlat = [];
             $paletteIndex = 0;
             foreach ($allPros as $allPro) {
@@ -143,6 +150,8 @@
                         reloading: false,
                         comment: '',
                         preparing: false,
+                        reports: {!! json_encode($reportsArray) !!},
+                        addingReport: false,
 
                         // debounced auto-saver
                         <?php for ($i=0; $i<count($categories); $i++) { ?>
@@ -507,6 +516,35 @@
                                 this.reloadPopupItem(this.currentCategory);
                             }, 'json');
                         },
+                        toggleAddingReport: function() {
+                            this.addingReport = !this.addingReport;
+                            Vue.nextTick(() => {
+                                if(this.addingReport) {
+                                    $('[stag-popup-key="'+ this.currentCategory +'-popup"] .adding-report-section').first()[0].scrollIntoView();
+                                }
+                            });
+                        },
+                        addReportToItem: function(_item, _report) {
+                            if(!this[this.currentCategory + 'PopupItem'].data.attachments) {
+                                this[this.currentCategory + 'PopupItem'].data.attachments = [];
+                            }
+                            this[this.currentCategory + 'PopupItem'].data.attachments.push(_report);
+                            this[this.currentCategory + 'SavePopupItem'](true);
+                            this.addingReport = false;
+                            Vue.nextTick(() => {
+                                $('[stag-popup-key="'+ this.currentCategory +'-popup"] .listing-attachments-section').first()[0].scrollIntoView();
+                            });
+                        },
+                        removeAttachmentFromItem: function(_item, _attachment) {
+                            if(!this[this.currentCategory + 'PopupItem'].data.attachments) {
+                                this[this.currentCategory + 'PopupItem'].data.attachments = [];
+                            }
+                            this[this.currentCategory + 'PopupItem'].data.attachments =
+                                this[this.currentCategory + 'PopupItem'].data.attachments.filter((_x) => {
+                                    return _x.uid !== _attachment.uid;
+                                });
+                            this[this.currentCategory + 'SavePopupItem'](true);
+                        },
                         initRxAutoSuggest: function() {
                             let self = this;
                             $('#ticketsApp input[type="text"][data-field="medication"]:not([ac-initialized])').each(function() {

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

@@ -0,0 +1,63 @@
+<div class="px-3 pt-3 pb-2 bg-light">
+    <div class="row mb-2">
+        <div class="col-12">
+            <label class="text-secondary mb-0 font-weight-normal font-size-16 d-flex align-items-center">
+                Attachments
+                (<span
+                    v-html="<?=$category?>PopupItem.data.attachments && <?=$category?>PopupItem.data.attachments.length ? <?=$category?>PopupItem.data.attachments.length : '0'"></span>)
+                <a href="#" class="ml-auto" v-on:click.prevent="toggleAddingReport()">Add from Reports</a>
+            </label>
+        </div>
+    </div>
+    <div class="mb-3" v-if="addingReport">
+        <div v-for="(report) in reports" class="d-flex align-items-start py-1 border-bottom">
+            <div class="pro-initials pro-initials-sm text-uppercase mr-2"
+                 :title="allProsFlat['pro_' + report.hcp_pro_id].displayedName"
+                 :style="'background-color: ' + allProsFlat['pro_' + report.hcp_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + report.hcp_pro_id].colors.fc + ';'"
+                 v-html="allProsFlat['pro_' + report.hcp_pro_id].displayedInitials">
+            </div>
+            <div class="flex-grow-1">
+                <div class="d-flex align-items-center">
+                    <a class="pdf-viewer-trigger" native target="_blank"
+                       :href="'/api/incomingReport/download/' + report.uid"
+                       title="View">
+                        <span v-if="report.title" v-html="report.title"></span>
+                    </a>
+                    <a class="ml-auto" native target="_blank" href="#"
+                       v-if="!<?=$category?>PopupItem.data.attachments || <?=$category?>PopupItem.data.attachments.filter(_x => _x.uid === report.uid).length === 0"
+                       v-on:click.prevent="addReportToItem(<?=$category?>PopupItem, report)">Add to ticket</a>
+                    <span class="ml-auto text-secondary"
+                       v-if="<?=$category?>PopupItem.data.attachments && <?=$category?>PopupItem.data.attachments.filter(_x => _x.uid === report.uid).length !== 0"
+                       title="View">
+                        <i class="fa fa-check"></i>
+                        Added
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div class="adding-report-section"></div>
+    </div>
+    <div
+        v-if="!addingReport && <?=$category?>PopupMode === 'edit' && <?=$category?>PopupItem.data.attachments && <?=$category?>PopupItem.data.attachments.length"
+        class="py-2 bg-light">
+        <div v-for="(attachment) in <?=$category?>PopupItem.data.attachments" class="d-flex align-items-start pb-2">
+            <div class="pro-initials text-uppercase mr-2"
+                 :title="allProsFlat['pro_' + attachment.hcp_pro_id].displayedName"
+                 :style="'background-color: ' + allProsFlat['pro_' + attachment.hcp_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + attachment.hcp_pro_id].colors.fc + ';'"
+                 v-html="allProsFlat['pro_' + attachment.hcp_pro_id].displayedInitials">
+            </div>
+            <div class="flex-grow-1">
+                <div class="d-flex align-items-center">
+                    <a class="pdf-viewer-trigger" native target="_blank"
+                       :href="'/api/incomingReport/download/' + attachment.uid"
+                       title="View">
+                        <span v-if="attachment.title" v-html="attachment.title"></span>
+                    </a>
+                    <a class="text-warning-mellow ml-auto" native target="_blank" href="#"
+                       v-on:click.prevent="removeAttachmentFromItem(<?=$category?>PopupItem, attachment)">Remove from ticket</a>
+                </div>
+            </div>
+        </div>
+        <div class="listing-attachments-section"></div>
+    </div>
+</div>

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

@@ -34,6 +34,9 @@
                         <div class="flex-grow-1 d-inline-flex ml-2 flex-wrap align-items-center">
                             <span class="font-weight-bold text-dark font-size-13"
                                   v-html="item.data.items && Array.isArray(item.data.items) ? item.data.items.join(', ') : '-'"></span>
+                            <span class="ml-3 font-weight-bold" v-if="item.data.attachments && item.data.attachments.length">
+                                <i class="fa fa-paperclip"></i>
+                            </span>
                             <span class="text-nowrap ml-auto text-sm" v-if="item.data.due_date">
                                 <div title="Due Date" class="pro-initials text-uppercase text-white bg-info"><i class="fa fa-calendar-day"></i></div>
                                 <span class="text-secondary ml-1">@{{ item.data.due_date }}</span>
@@ -110,6 +113,9 @@
                 </div>
             </div>
 
+            <!-- attachments -->
+            @include('app.patient.tickets.attachments', ['category' => 'equipment'])
+
             <!-- comments -->
             @include('app.patient.tickets.comments', ['category' => 'equipment'])
 

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

@@ -61,10 +61,13 @@
                             </span>
                             -->
                             <span class="text-nowrap ml-4 text-secondary" v-html="pharmacy(item.data)"></span>
+                            <span class="ml-3 font-weight-bold" v-if="item.data.attachments && item.data.attachments.length">
+                                <i class="fa fa-paperclip"></i>
+                            </span>
                             <span class="text-nowrap ml-auto text-sm" v-if="item.data.due_date">
-                                    <div title="Due Date" class="pro-initials text-uppercase text-white bg-info"><i class="fa fa-calendar-day"></i></div>
-                                    <span class="text-secondary ml-1">@{{ item.data.due_date }}</span>
-                                </span>
+                                <div title="Due Date" class="pro-initials text-uppercase text-white bg-info"><i class="fa fa-calendar-day"></i></div>
+                                <span class="text-secondary ml-1">@{{ item.data.due_date }}</span>
+                            </span>
                         </div>
                     </div>
                     <!--
@@ -204,6 +207,9 @@
                 </div>
             </div>
 
+            <!-- attachments -->
+            @include('app.patient.tickets.attachments', ['category' => 'erx'])
+
             <!-- comments -->
             @include('app.patient.tickets.comments', ['category' => 'erx'])
 

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

@@ -34,6 +34,9 @@
                         <div class="flex-grow-1 d-inline-flex ml-2 flex-wrap align-items-center">
                             <span class="font-weight-bold text-dark font-size-13"
                                   v-html="item.data.tests && Array.isArray(item.data.tests) ? item.data.tests.join(', ') : '-'"></span>
+                            <span class="ml-3 font-weight-bold" v-if="item.data.attachments && item.data.attachments.length">
+                                <i class="fa fa-paperclip"></i>
+                            </span>
                             <span class="text-nowrap ml-auto text-sm" v-if="item.data.due_date">
                                 <div title="Due Date" class="pro-initials text-uppercase text-white bg-info"><i class="fa fa-calendar-day"></i></div>
                                 <span class="text-secondary ml-1">@{{ item.data.due_date }}</span>
@@ -125,6 +128,9 @@
                 </div>
             </div>
 
+            <!-- attachments -->
+            @include('app.patient.tickets.attachments', ['category' => 'imaging'])
+
             <!-- comments -->
             @include('app.patient.tickets.comments', ['category' => 'imaging'])
         </form>

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

@@ -34,6 +34,9 @@
                         <div class="flex-grow-1 d-inline-flex ml-2 flex-wrap align-items-center">
                             <span class="font-weight-bold text-dark font-size-13"
                                   v-html="item.data.tests && Array.isArray(item.data.tests) ? item.data.tests.join(', ') : '-'"></span>
+                            <span class="ml-3 font-weight-bold" v-if="item.data.attachments && item.data.attachments.length">
+                                <i class="fa fa-paperclip"></i>
+                            </span>
                             <span class="text-nowrap ml-auto text-sm" v-if="item.data.due_date">
                                 <div title="Due Date" class="pro-initials text-uppercase text-white bg-info"><i class="fa fa-calendar-day"></i></div>
                                 <span class="text-secondary ml-1">@{{ item.data.due_date }}</span>
@@ -129,6 +132,9 @@
                 </div>
             </div>
 
+            <!-- attachments -->
+            @include('app.patient.tickets.attachments', ['category' => 'lab'])
+
             <!-- comments -->
             @include('app.patient.tickets.comments', ['category' => 'lab'])