Main dashboard appt calendar optimization

app/Http/Controllers/HomeController.php

@@ -451,6 +451,31 @@ WHERE measurement.label NOT IN ('SBP', 'DBP')
         return view('app.dashboard.measurements', compact('numMeasurements', 'measurements', 'page'));
     }
 
+    public function dashboardAppointmentDates(Request $request, $from, $to) {
+        $performer = $this->performer();
+        $performerProID = $performer->pro->id;
+        $isAdmin = ($performer->pro->pro_type === 'ADMIN');
+
+        $results = DB::table('appointment')->select('raw_date')->distinct()->where("start_time", '>=', $from)->where("start_time", '<=', $to.' 23:59:00+00');
+
+        if(!$isAdmin) {
+            $results = $results->where("pro_id", $performerProID);
+        }
+
+        $results = $results->get();
+
+        $dates = [];
+        foreach ($results as $result) {
+            $dates[] = strtotime($result->raw_date) . '000';
+        }
+
+//        foreach ($results as $result) {
+//            $results->dateYMD = date('Y-m-d', strtotime($result->raw_date));
+//        }
+
+        return json_encode($dates);
+    }
+
     public function dashboardAppointments(Request $request, $from, $to) {
 
         $performer = $this->performer();

public/css/style.css

@@ -556,9 +556,11 @@ input.search_field, textarea.search_field {
 }
 .pro-dashboard-inline-calendar table.table-condensed th {
     padding: 0.5rem 0;
+    border-radius: 0;
 }
 .pro-dashboard-inline-calendar table.table-condensed td {
     padding: 0.25rem 0;
+    border-radius: 0;
 }
 .pro-dashboard-inline-calendar table.table-condensed td[has-events] {
     background: #c5e4ff;

resources/views/app/dashboard.blade.php

@@ -280,6 +280,7 @@
                 delimiters: ['@{{', '}}'],
                 data: {
                     tab: '{{ request()->input('tab') ? request()->input('tab') : 'measurements' }}',
+                    datesWithEvents: [],
                     selectedDate: '{{ date('Y-m-d') }}',
                     selectedStatus: 'CREATED',
                     events: [],
@@ -307,47 +308,30 @@
                         return [year, month, day].join('-');
                     },
                     onDateChange: function (_newDate) {
-                        // this.loadEvents();
-
                         let self = this;
                         self.selectedDate = _newDate;
                         showMask();
-                        this.loadEvents(function() {
-                            self.highlightDatesWithEvents();
-                            // self.updateNumEventsForDate();
-                            self.appointmentsLoaded = true;
+                        this.loadEvents(self.selectedDate, function() {
                             hideMask();
                             Vue.nextTick(() => {
+                                this.highlightDatesWithEvents(this.datesWithEvents);
                                 initFastLoad($('.appointments-tab'));
                             });
                         });
                     },
                     selectToday: function () {
                         $('.pro-dashboard-inline-calendar table td[data-date]').removeClass('active');
-                        $('.pro-dashboard-inline-calendar table td[data-date="{{ $milliseconds }}"]')
+                        $('.pro-dashboard-inline-calendar table td[data-date="{{ strtotime(date('Y-m-d')) . '000' }}"]')
                             .addClass('active');
                         // this.onDateChange('{{ date('Y-m-d') }}');
                     },
-                    highlightDatesWithEvents: function () {
+                    highlightDatesWithEvents: function (_dates) {
                         $('.pro-dashboard-inline-calendar table td[data-date]').removeAttr('has-events');
-                        for (let i = 0; i < this.events.length; i++) {
-                            $('.pro-dashboard-inline-calendar table td[data-date="' + this.events[i].milliseconds + '"]')
+                        for (let i = 0; i < _dates.length; i++) {
+                            $('.pro-dashboard-inline-calendar table td[data-date="' + _dates[i] + '"]')
                                 .attr('has-events', 1);
                         }
                     },
-                    updateNumEventsForDate: function() {
-                        this.numEventsForDate = 0;
-                        for (let i = 0; i < this.events.length; i++) {
-                            if(this.events[i].dateYMD === this.selectedDate &&
-                                (this.filterStatus === '' || this.filterStatus === this.events[i].status)) {
-                                this.numEventsForDate++;
-                                break;
-                            }
-                        }
-                        Vue.nextTick(() => {
-                            initFastLoad($('#pro-dashboard-container'));
-                        });
-                    },
                     updateStatus: function(_event) {
                         $.post('/api/appointment/updateStatus', {
                             uid: _event.uid,
@@ -400,24 +384,29 @@
                         hideMoeFormMask();
                         form.hide();
                     },
-                    loadEvents: function(_callback) {
-                        let today = this.calendarElem.datepicker('getDate'),
+                    loadEventDates: function(_callback) {
+                        let today = new Date('{{date('Y-m-d')}}'),
                             firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1),
-                            lastOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0),
-                            self = this;
-                        if(this.currentMonth === today.getMonth() && this.currentYear === today.getFullYear()) {
+                            lastOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+                        $.get('/pro-dashboard-event-dates/' +
+                            this.formatDate(firstOfMonth) + '/' +
+                            this.formatDate(lastOfMonth), (_data) => {
+                            this.datesWithEvents = _data;
+                            this.highlightDatesWithEvents(this.datesWithEvents);
+                            this.selectToday();
+                            this.onDateChange('{{ date('Y-m-d') }}');
+                            this.appointmentsLoaded = true;
+                        }, 'json');
+                    },
+                    loadEvents: function(_date, _callback) {
+                        let self = this;
+                        $.get('/pro-dashboard-events/' +
+                            this.formatDate(_date) + '/' +
+                            this.formatDate(_date), function(_data) {
+                            self.events = _data;
+                            self.numEventsForDate = (_data && _data.length) ? 1 : 0;
                             _callback.call(self);
-                        }
-                        else {
-                            $.get('/pro-dashboard-events/' +
-                                this.formatDate(firstOfMonth) + '/' +
-                                this.formatDate(lastOfMonth), function(_data) {
-                                self.events = _data;
-                                self.currentMonth = firstOfMonth.getMonth();
-                                self.currentYear = firstOfMonth.getFullYear();
-                                _callback.call(self);
-                            }, 'json');
-                        }
+                        }, 'json');
                     },
                     updateMeasurements: function() {
                         $.get('/pro-dashboard-measurements/' + this.measurementFilterStatus, (_data) => {
@@ -480,9 +469,7 @@
                     },
                     initLoadAppointments: function() {
                         if(this.appointmentsLoaded) return false;
-                        this.selectToday();
-                        this.updateNumEventsForDate();
-                        $('.datepicker-days .day.active').trigger('click');
+                        this.loadEventDates();
                     },
                     loadMeasurements: function() {
                         $('#measurements-tab').load('/pro-dashboard-measurements-tab', () => {
@@ -501,16 +488,6 @@
                         self.onDateChange(self.calendarElem.datepicker('getFormattedDate'));
                     });
 
-                    // 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');
                     initMoes();
 

routes/web.php

@@ -225,6 +225,7 @@ Route::middleware('pro.auth')->group(function () {
     Route::get('mb-claims/view/{mbClaim}', 'PatientController@mbClaim')->name('mb-claim');
 
     // pro dashboard events (ajax)
+    Route::get('pro-dashboard-event-dates/{from}/{to}', 'HomeController@dashboardAppointmentDates')->name('pro-dashboard-event-dates');
     Route::get('pro-dashboard-events/{from}/{to}', 'HomeController@dashboardAppointments')->name('pro-dashboard-events');
 
     // pro dashboard measurements