Tickets v1 (wip) - Comments feature

public/css/style.css

@@ -1065,6 +1065,38 @@ body .node input[type="number"] {
 .stag-slide .text-success {
     color: #00bf9c !important;
 }
+.stag-slide .btn-success,
+.stag-slide .btn-success:hover {
+    background: #00bf9c;
+    border-color: #00bf9c;
+}
+.stag-slide .comment-input-outer {
+    position: sticky;
+    bottom: 0;
+}
+.stag-slide .txt-comment {
+    padding-bottom: calc(23px + 1rem);
+    height: calc(23px + 1rem);
+    transition: height 0.3s ease;
+    overflow: hidden;
+}
+.stag-slide .txt-comment:focus {
+    height: 120px;
+    overflow: auto;
+}
+.stag-slide .txt-comment:focus~.btn-save-comment {
+    opacity: 1;
+}
+.stag-slide .btn-save-comment {
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    height: 28px;
+    line-height: 28px;
+    padding: 0 1rem;
+    transition: opacity 0.3s ease;
+    opacity: 0.5;
+}
 
 .no-scroll {
     overflow: hidden;

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

@@ -244,7 +244,7 @@
 
                         <div class="row mb-2">
                             <div class="col-12">
-                                <label class="text-secondary mb-0 font-weight-bold font-size-13">ERx</label>
+                                <label class="text-secondary mb-0 font-weight-normal font-size-16">ERx</label>
                             </div>
                         </div>
                         <div class="row mb-2">
@@ -315,7 +315,7 @@
                     <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>
+                                <label class="text-secondary mb-0 font-weight-normal font-size-16">Preferred Pharmacy</label>
                             </div>
                         </div>
                         <div class="row mb-2">
@@ -354,6 +354,41 @@
                             <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>
                         </div>
                     </div>
+
+                    <!-- comments -->
+                    <div v-if="erxPopupMode === 'edit' && erxPopupItem.data.comments && erxPopupItem.data.comments.length" class="px-3 pt-3 pb-0 bg-light">
+                        <div class="row mb-3">
+                            <div class="col-12">
+                                <label class="text-secondary mb-0 font-weight-normal font-size-16">Comments (@{{ erxPopupItem.data.comments.length }})</label>
+                            </div>
+                        </div>
+                        <div v-for="(message) in erxPopupItem.data.comments" class="d-flex align-items-start pb-3">
+                            <div class="pro-initials text-uppercase mr-2"
+                                 :title="allProsFlat['pro_' + message.pro_id].displayedName"
+                                 :style="'background-color: ' + allProsFlat['pro_' + message.pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + message.pro_id].colors.fc + ';'">
+                                @{{allProsFlat['pro_' + message.pro_id].displayedInitials}}
+                            </div>
+                            <div class="flex-grow-1">
+                                <div class="">
+                                    @{{ allProsFlat['pro_' + message.pro_id].displayedName }}
+                                    <span class="text-secondary ml-3">@{{ message.created_at }}</span>
+                                </div>
+                                <div>@{{ message.message }}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div v-if="erxPopupMode === 'edit'" class="comment-input-outer p-3 bg-light d-flex align-items-start border-top">
+                        <div class="pro-initials text-uppercase mr-2"
+                             :title="allProsFlat['pro_' + own_pro_id].displayedName"
+                             :style="'background-color: ' + allProsFlat['pro_' + own_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + own_pro_id].colors.fc + ';'">
+                            @{{allProsFlat['pro_' + own_pro_id].displayedInitials}}
+                        </div>
+                        <div class="flex-grow-1 position-relative">
+                            <textarea class="form-control form-control-sm txt-comment shadow-none" v-model="comment"></textarea>
+                            <a href="#" v-on:click.prevent="saveErxComment()" class="btn btn-sm btn-primary text-white btn-save-comment">Comment</a>
+                        </div>
+                    </div>
                 </form>
             </div>
             @include('app.patient.partials.ticket_update_pro_form',['ticketType'=>'erx'])
@@ -410,6 +445,9 @@
                     el: '#ticketsApp',
                     delimiters: ['@{{', '}}'],
                     data: {
+
+                        own_pro_id: {{ $pro->id }},
+
                         tickets: {!! json_encode($ticketsArray) !!},
                         ticketsByType: {!! json_encode($ticketsByType) !!},
 
@@ -439,7 +477,11 @@
                                 pharmacyAddressMemo: '',
                                 pharmacyPhone: '',
                                 pharmacyFax: '',
-                                comments: [],
+                                comments: [{
+                                    pro_id: '',
+                                    message: '',
+                                    created_at: '',
+                                }],
                             }
                         },
 
@@ -461,6 +503,7 @@
                         proTypes: ['Assigned', 'Manager', 'Initiating', 'Ordering'],
                         newProUid: '',
                         reloading: false,
+                        comment: '',
 
                         // debounced auto-saver
                         autoSave: null,
@@ -528,6 +571,10 @@
                             };
                             this.erxPopupItem.assigned_pro_uid = '';
                             this.erxPopupItem.ordering_pro_uid = '';
+                            if(!this.erxPopupItem.comments) {
+                                this.erxPopupItem.comments = [];
+                            }
+                            this.comment = '';
                             showStagPopup('erx-popup', true);
                             Vue.nextTick(() => {
                                 $('#ticketsApp [pro-suggest-initialized]').removeAttr('pro-suggest-initialized');
@@ -579,6 +626,19 @@
 
                             return false;
                         },
+                        saveErxComment: function() {
+                            if(!this.comment) return;
+                            let comment = {
+                                pro_id: this.own_pro_id,
+                                created_at: new Date().toLocaleString(),
+                                message: this.comment
+                            };
+                            if(!this.erxPopupItem.data.comments) {
+                                this.erxPopupItem.data.comments = [];
+                            }
+                            this.erxPopupItem.data.comments.push(comment);
+                            this.autoSave();
+                        },
 
                         // lab