Tickets v1 (wip) - Autosave in edit mode

public/css/style.css

@@ -1043,6 +1043,9 @@ body .node input[type="number"] {
     font-weight: bold;
     padding-left: 0;
 }
+.stag-slide input.form-control {
+    box-shadow: none !important;
+}
 .stag-slide input.form-control:not(:focus):hover {
     text-decoration: underline;
 }

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

@@ -93,20 +93,20 @@
                                  :style="'background-color: ' + allProsFlat['pro_' + item.assigned_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + item.assigned_pro_id].colors.fc + ';'">
                                 @{{allProsFlat['pro_' + item.assigned_pro_id].displayedInitials}}
                             </div>
-                            <div class="flex-grow-1 d-inline-flex ml-2 flex-wrap">
+                            <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">@{{item.data.medication}}</span>
                                 <span class="d-inline-flex align-items-center" v-if="item.data.strength">
                                     <span class="mx-2 text-secondary">•</span>
                                     <span>@{{item.data.strength}}</span>
                                 </span>
-                                <span class="d-inline-flex align-items-center" v-if="item.data.route">
+<!--                                <span class="d-inline-flex align-items-center" v-if="item.data.route">
                                     <span class="mx-2 text-secondary">•</span>
                                     <span>@{{item.data.route}}</span>
                                 </span>
                                 <span class="d-inline-flex align-items-center" v-if="item.data.frequency">
                                     <span class="mx-2 text-secondary">•</span>
                                     <span>@{{item.data.frequency}}</span>
-                                </span>
+                                </span>-->
                                 <!--
                                 <span class="d-inline-flex align-items-center" v-if="item.data.dispense">
                                     <span class="mx-2 text-secondary">•</span>
@@ -122,7 +122,11 @@
                                     <span><span>Purpose:</span> @{{item.data.purpose}}</span>
                                 </span>
                                 -->
-                                <span class="text-nowrap ml-auto text-secondary" v-html="pharmacy(item.data)"></span>
+                                <span class="text-nowrap ml-4 text-secondary" v-html="pharmacy(item.data)"></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>
                         </div>
                         <!--
@@ -153,27 +157,52 @@
                     </h3>
 
                     <!-- common - only applicable for edit -->
-                    <div v-if="erxPopupMode === 'edit'" class="p-3 border-bottom">
+                    <div 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">Assigned Pro</label>
-                            </div>
-                            <div class="col-9">
-                                <div class="d-flex align-items-center">
-                                    <div class="pro-initials text-uppercase"
-                                         :title="allProsFlat['pro_' + erxPopupItem.assigned_pro_id].displayedName"
-                                         :style="'background-color: ' + allProsFlat['pro_' + erxPopupItem.assigned_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + erxPopupItem.assigned_pro_id].colors.fc + ';'">
-                                        @{{allProsFlat['pro_' + erxPopupItem.assigned_pro_id].displayedInitials}}
+                        <div v-if="erxPopupMode === 'edit'">
+                            <div class="row mb-2">
+                                <div class="col-3 d-inline-flex align-items-center">
+                                    <label class="text-secondary m-0">Assigned Pro</label>
+                                </div>
+                                <div class="col-9">
+                                    <div class="d-flex align-items-center">
+                                        <div class="pro-initials text-uppercase"
+                                             :title="allProsFlat['pro_' + erxPopupItem.assigned_pro_id].displayedName"
+                                             :style="'background-color: ' + allProsFlat['pro_' + erxPopupItem.assigned_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + erxPopupItem.assigned_pro_id].colors.fc + ';'">
+                                            @{{allProsFlat['pro_' + erxPopupItem.assigned_pro_id].displayedInitials}}
+                                        </div>
+                                        <div class="flex-grow-1 ml-2">
+                                            <select provider-search
+                                                    data-field="assigned_pro_uid"
+                                                    v-model="erxPopupItem.assigned_pro_uid"
+                                                    :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="flex-grow-1 ml-2">
-                                        <select provider-search
-                                                data-field="assigned_pro_uid"
-                                                v-model="erxPopupItem.assigned_pro_uid"
-                                                :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="row mb-2">
+                                <div class="col-3 d-inline-flex align-items-center">
+                                    <label class="text-secondary m-0">Ordering Pro</label>
+                                </div>
+                                <div class="col-9">
+                                    <div class="d-flex align-items-center">
+                                        <div class="pro-initials text-uppercase"
+                                             :title="allProsFlat['pro_' + erxPopupItem.ordering_pro_id].displayedName"
+                                             :style="'background-color: ' + allProsFlat['pro_' + erxPopupItem.ordering_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + erxPopupItem.ordering_pro_id].colors.fc + ';'">
+                                            @{{allProsFlat['pro_' + erxPopupItem.ordering_pro_id].displayedInitials}}
+                                        </div>
+                                        <div class="flex-grow-1 ml-2">
+                                            <select provider-search
+                                                    data-field="ordering_pro_uid"
+                                                    v-model="erxPopupItem.ordering_pro_uid"
+                                                    :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>
                             </div>
@@ -181,55 +210,22 @@
 
                         <div class="row">
                             <div class="col-3 d-inline-flex align-items-center">
-                                <label class="text-secondary m-0">Ordering Pro</label>
+                                <label class="text-secondary m-0">Due Date</label>
                             </div>
                             <div class="col-9">
                                 <div class="d-flex align-items-center">
-                                    <div class="pro-initials text-uppercase"
-                                         :title="allProsFlat['pro_' + erxPopupItem.ordering_pro_id].displayedName"
-                                         :style="'background-color: ' + allProsFlat['pro_' + erxPopupItem.ordering_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + erxPopupItem.ordering_pro_id].colors.fc + ';'">
-                                        @{{allProsFlat['pro_' + erxPopupItem.ordering_pro_id].displayedInitials}}
+                                    <div class="pro-initials text-uppercase text-white bg-info"
+                                         title="Due Date">
+                                        <i class="fa fa-calendar-day"></i>
                                     </div>
                                     <div class="flex-grow-1 ml-2">
-                                        <select provider-search
-                                                data-field="ordering_pro_uid"
-                                                v-model="erxPopupItem.ordering_pro_uid"
-                                                :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>
+                                        <input type="text" data-field="due_date" placeholder="Due Date"
+                                               v-model="erxPopupItem.data.due_date" class="form-control form-control-sm date-input">
                                     </div>
                                 </div>
                             </div>
                         </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="p-3 border-bottom">
@@ -240,17 +236,23 @@
                             </div>
                         </div>
                         <div class="row mb-2">
-                            <div class="col-6">
+                            <div class="col-9">
                                 <label class="text-sm text-secondary mb-1">Medication</label>
+                                <input type="hidden" v-model="erxPopupItem.data.medication">
                                 <input required type="text" data-field="medication" placeholder="Medication"
-                                       v-model="erxPopupItem.data.medication" class="form-control form-control-sm">
+                                       :value="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="hidden" v-model="erxPopupItem.data.strength">
                                 <input type="text" data-field="strength" placeholder="Strength"
-                                       v-model="erxPopupItem.data.strength" class="form-control form-control-sm min-width-unset">
+                                       :value="erxPopupItem.data.strength"
+                                       class="form-control form-control-sm min-width-unset">
                             </div>
-                            <div class="col-3 pl-0">
+                        </div>
+                        <div class="row mb-2">
+                            <div class="col-3">
                                 <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"
@@ -260,9 +262,7 @@
                                     <div>Twice a day</div>
                                 </div>
                             </div>
-                        </div>
-                        <div class="row mb-2">
-                            <div class="col-6">
+                            <div class="col-3 pl-0">
                                 <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"
@@ -337,10 +337,10 @@
                                 <input type="text" placeholder="Address Memo" autocomplete="donotdoit" v-model="erxPopupItem.data.pharmacyAddressMemo" class="form-control form-control-sm">
                             </div>
                         </div>
-                        <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 v-if="erxPopupMode === 'add'" 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>
@@ -351,6 +351,16 @@
 
     <script>
         (function() {
+            const debounce = (func, delay) => {
+                let debounceTimer
+                return function() {
+                    const context = this
+                    const args = arguments
+                    clearTimeout(debounceTimer)
+                    debounceTimer
+                        = setTimeout(() => func.apply(context, args), delay)
+                }
+            }
             <?php
             $tickets = $patient->tickets;
 
@@ -437,7 +447,11 @@
                         allProsFlat: {!! json_encode($allProsFlat) !!},
                         proToUpdate: '',
                         proTypes: ['Assigned', 'Manager', 'Initiating', 'Ordering'],
-                        newProUid:''
+                        newProUid: '',
+                        reloading: false,
+
+                        // debounced auto-saver
+                        autoSave: null,
                     },
                     computed: {
                         numAll: function() {
@@ -457,15 +471,24 @@
                         },
                         erxNumClosed: function() {
                             return this.ticketsByType.erx.filter(_x => !_x.is_open).length;
+                        },
+                        erxCurrentItemData: function() {
+                            return this.erxPopupItem.data;
+                        }
+                    },
+                    watch: {
+                        erxCurrentItemData: {
+                            handler: function(val, oldVal) {
+                                if (this.erxPopupMode !== 'edit' || !this.currentItemUid || this.reloading) return;
+                                this.autoSave();
+                            },
+                            deep: true
                         }
                     },
                     methods: {
 
                         // erx
                         showErxPopup: function(_item) {
-                            if (_item) {
-                                this.currentItemUid = _item.uid;
-                            }
                             this.erxPopupMode = _item ? 'edit' : 'add';
                             this.erxPopupItem = _item ? JSON.parse(JSON.stringify(_item)) : {
                                 uid: '',
@@ -493,21 +516,26 @@
                             };
                             this.erxPopupItem.assigned_pro_uid = '';
                             this.erxPopupItem.ordering_pro_uid = '';
-                            this.erxPopupItem.data.due_date = '';
                             showStagPopup('erx-popup', true);
-                            Vue.nextTick(function() {
+                            Vue.nextTick(() => {
                                 $('#ticketsApp [pro-suggest-initialized]').removeAttr('pro-suggest-initialized');
                                 initProSuggest();
+                                if (_item) {
+                                    this.currentItemUid = _item.uid;
+                                }
                             });
                         },
-                        saveErxPopupItem: function() {
+                        saveErxPopupItem: function(_autoSave = false) {
                             let form = $('#ticketsApp form').first();
-                            if(!form[0].checkValidity()) {
-                                form[0].reportValidity();
-                                return false;
+
+                            if(!_autoSave) {
+                                if(!form[0].checkValidity()) {
+                                    form[0].reportValidity();
+                                    return false;
+                                }
                             }
 
-                            showMask();
+                            if(!_autoSave) showMask();
                             let payload = {};
                             if(this.erxPopupMode === 'add') {
                                 payload.clientUid = '{{ $patient->uid }}';
@@ -526,9 +554,14 @@
                             $.post(
                                 '/api/ticket/' + (this.erxPopupMode === 'add' ? 'create' : 'updateData'),
                                 payload,
-                                function(_data) {
+                                (_data) => {
                                     console.log(_data);
-                                    fastReload();
+                                    if(!_autoSave) {
+                                        fastReload();
+                                    }
+                                    else {
+                                        this.reloadPopupItem('erx');
+                                    }
                                 },
                                 'json');
 
@@ -543,6 +576,7 @@
 
                         // common
                         reloadPopupItem: function(_type) {
+                            this.reloading = true;
                             $.get('/get-ticket/' + this[_type + 'PopupItem'].uid, (_data) => {
                                 this[_type + 'PopupItem'] = _data;
 
@@ -553,6 +587,11 @@
                                         break;
                                     }
                                 }
+
+                                Vue.nextTick(() => {
+                                    this.reloading = false;
+                                });
+
                             }, 'json');
                         },
                         closeItem: function(_item) {
@@ -659,6 +698,22 @@
                             $(document).on('stag-popup-closed', function() {
                                 self.currentItemUid = '';
                             });
+
+                            $('input.date-input')
+                                .datepicker({
+                                    autoclose: true,
+                                    todayHighlight: true,
+                                    format: 'yyyy-mm-dd'
+                                })
+                                .off('changeDate')
+                                .on('changeDate', function() {
+                                    self.erxPopupItem.data.due_date = $(this).val();
+                                });
+
+                            $(document).off('focus', '#ticketsApp input.form-control');
+                            $(document).on('focus', '#ticketsApp input.form-control', function() {
+                                $(this).select();
+                            });
                         },
                         inWords: function (num) {
                             try {
@@ -698,6 +753,9 @@
                         initFastLoad($('#ticketsApp'));
                         this.initPharmacySearch();
                         this.initDomElementEvents();
+                        this.autoSave = debounce(() => {
+                            this.saveErxPopupItem(true);
+                        }, 1000);
                     }
                 })
             }

resources/views/layouts/template.blade.php

@@ -55,7 +55,7 @@
     <script src='/js/autocomplete-lhc.js'></script>
 
     {{-- inline bootstrap datepicker --}}
-    <link href='/bootstrap-datepicker/css/bootstrap-datepicker.min.css' rel="stylesheet">
+    <link href='/bootstrap-datepicker/css/bootstrap-datepicker.standalone.min.css' rel="stylesheet">
     <script src='/bootstrap-datepicker/js/bootstrap-datepicker.min.js'></script>
 
     {{-- pdfjs --}}