Main dashboard optimization

app/Http/Controllers/HomeController.php

@@ -395,6 +395,10 @@ class HomeController extends Controller
             $appointment->clientUid = $appointment->client->uid;
             $appointment->proUid = $appointment->pro->uid;
             $appointment->proName = $appointment->pro->displayName();
+
+            unset($appointment->client);
+            unset($appointment->pro);
+            unset($appointment->detail_json);
         }
 
         return json_encode($appointments);

resources/views/app/dashboard.blade.php

@@ -118,7 +118,7 @@
                     <li class="nav-item">
                         <a native data-tab="appointments" class="nav-link"
                            :class="tab == 'appointments' ? 'active' : ''" href="#"
-                           v-on:click.prevent="tab='appointments'">
+                           v-on:click.prevent="tab='appointments'; initLoadAppointments();">
                             Appointments
                         </a>
                     </li>
@@ -173,8 +173,7 @@
                             <div class="ml-auto d-inline-flex align-items-center">
                                 <label class="text-secondary mr-2 my-0 text-nowrap">Filter by status:</label>
                                 <select v-model="filterStatus"
-                                        class="form-control form-control-sm"
-                                        v-on:change="updateNumEventsForDate()">
+                                        class="form-control form-control-sm">
                                     <option value="">All</option>
                                     <option value="CREATED">Created</option>
                                     <option value="CONFIRMED">Confirmed</option>
@@ -272,7 +271,8 @@
                     currentMonth: null,
                     currentYear: null,
                     measurementFilterStatus: 'ALL',
-                    measurements: {!! $pro->pro_type === 'ADMIN' ? '[]' : json_encode($pro->getMeasurements()) !!}
+                    measurements: {!! $pro->pro_type === 'ADMIN' ? '[]' : json_encode($pro->getMeasurements()) !!},
+                    appointmentsLoaded: false,
                 },
                 methods: {
                     formatDate: function (date) {
@@ -293,9 +293,12 @@
 
                         let self = this;
                         self.selectedDate = _newDate;
+                        showMask();
                         this.loadEvents(function() {
                             self.highlightDatesWithEvents();
-                            self.updateNumEventsForDate();
+                            // self.updateNumEventsForDate();
+                            self.appointmentsLoaded = true;
+                            hideMask();
                         });
                     },
                     selectToday: function () {
@@ -317,6 +320,7 @@
                             if(this.events[i].dateYMD === this.selectedDate &&
                                 (this.filterStatus === '' || this.filterStatus === this.events[i].status)) {
                                 this.numEventsForDate++;
+                                break;
                             }
                         }
                         Vue.nextTick(() => {
@@ -452,6 +456,12 @@
                                 .attr('with-shortcuts', 1);
 
                         })
+                    },
+                    initLoadAppointments: function() {
+                        if(this.appointmentsLoaded) return false;
+                        this.selectToday();
+                        this.updateNumEventsForDate();
+                        $('.datepicker-days .day.active').trigger('click');
                     }
                 },
                 mounted: function () {
@@ -463,11 +473,15 @@
                     this.calendarElem.on('changeDate', function () {
                         self.onDateChange(self.calendarElem.datepicker('getFormattedDate'));
                     });
-                    this.selectToday();
-                    this.updateNumEventsForDate();
 
-                    // this.loadEvents();
-                    $('.datepicker-days .day.active').trigger('click');
+                    // DEFER this till appts tab is clicked
+
+                    // this.selectToday();
+                    // this.updateNumEventsForDate();
+
+                    // $('.datepicker-days .day.active').trigger('click');
+
+
 
                     // this.initCMRTE();
                     $('#pro-dashboard-container').find('[moe][initialized]').removeAttr('initialized');