Ability to optionally see appts. of all statuses

app/Http/Controllers/AppointmentController.php

@@ -30,9 +30,7 @@ class AppointmentController extends Controller
 
         // get appointments
         $appointments = Appointment
-            ::where('status', '!=', 'COMPLETED')
-            ->where('status', '!=', 'CANCELLED')
-            ->where('start_time', '>=', $start)
+            ::where('start_time', '>=', $start)
             ->where('start_time', '<=', $end)
             ->where(function ($query) use ($proIds, $clientId) {
                 $query
@@ -195,7 +193,7 @@ class AppointmentController extends Controller
 
             // make already booked slots unavailable
             $proAppointments = $appointments->filter(function ($record) use ($proId) {
-                return $record->pro_id == $proId;
+                return $record->pro_id == $proId && !in_array($record->status, ['CANCELLED', 'COMPLETED', 'ABANDONED']);
             });
             foreach ($proAppointments as $appointment) {
                 if($appointment->start_time && $appointment->end_time) {

public/css/style.css

@@ -948,7 +948,15 @@ span.select2-container.select2-container--default.select2-container--open {
 .fc .availability {
     box-shadow: 0 0 3px green !important;
 }
+.fc .inactive-appointment {
+    opacity: 0.6;
+    box-shadow: 0 0 3px grey !important;
+}
 .w-150 {
     width: 150px !important;
     min-width: 150px !important;
 }
+.w-180 {
+    width: 180px !important;
+    min-width: 180px !important;
+}

resources/views/app/patient/appointment-calendar.blade.php

@@ -65,18 +65,20 @@
             <div class="ml-auto d-inline-flex align-items-center">
                 <label class="mr-2 my-0 text-secondary">Show</label>
                 <select id="eventTypes"
-                        class="form-control form-control-sm w-150"
+                        class="form-control form-control-sm w-180"
                         v-model="eventTypes"
                         v-on:change="refreshEvents()">
-                    <option value="APPOINTMENTS">Appointments</option>
+                    <option value="APPOINTMENTS">Active Appointments</option>
+                    <option value="APPOINTMENTS_ALL">All Appointments</option>
                     <option value="PRO_AVAILABILITY">Pro Availability</option>
-                    <option value="BOTH">Both</option>
+                    <option value="BOTH">Pro Availability &amp; Active appointments</option>
+                    <option value="BOTH_ALL">Pro Availability &amp; All Appointments</option>
                 </select>
             </div>
             <div class="ml-3 d-inline-flex align-items-center">
                 <label class="mr-2 my-0 text-secondary">Timezone</label>
                 <select id="eventTz" name="timeZone"
-                        class="form-control form-control-sm w-150"
+                        class="form-control form-control-sm w-180"
                         v-model="timezone">
                     <option value="EASTERN" selected>Eastern</option>
                     <option value="CENTRAL">Central</option>
@@ -519,18 +521,27 @@
                                                 if(events.hasOwnProperty(e) && self.proMeta[events[e].proUid]) {
                                                     let ev = events[e], meta = self.proMeta[ev.proUid];
                                                     if(ev.type === 'appointment') {
-                                                        if(self.eventTypes === 'APPOINTMENTS' || self.eventTypes === 'BOTH') {
+                                                        if(self.eventTypes.indexOf('APPOINTMENTS') === 0 || self.eventTypes.indexOf('BOTH') === 0) {
                                                             ev.backgroundColor =  meta.bc;
                                                             ev.borderColor = meta.bc;
                                                             ev.textColor = meta.fc;
                                                             ev.initials = meta.initials;
                                                             ev.display = 'block';
                                                             ev.editable = true;
-                                                            displayEvents.push(ev);
+
+                                                            // active/all
+                                                            if(['CANCELLED', 'COMPLETED', 'ABANDONED'].indexOf(ev.status) !== -1) {
+                                                                if(self.eventTypes === 'APPOINTMENTS_ALL' || self.eventTypes === 'BOTH_ALL') {
+                                                                    displayEvents.push(ev);
+                                                                }
+                                                            }
+                                                            else {
+                                                                displayEvents.push(ev);
+                                                            }
                                                         }
                                                     }
                                                     else {
-                                                        if(self.eventTypes === 'PRO_AVAILABILITY' || self.eventTypes === 'BOTH') {
+                                                        if(self.eventTypes === 'PRO_AVAILABILITY' || self.eventTypes.indexOf('BOTH') === 0) {
                                                             ev.backgroundColor = meta.ac;
                                                             ev.borderColor = meta.bc;
                                                             ev.textColor = meta.bc;
@@ -563,6 +574,9 @@
                                     if (arg.event.extendedProps.type === 'availability') {
                                         classes.push('availability');
                                     }
+                                    if (['CANCELLED', 'COMPLETED', 'ABANDONED'].indexOf(arg.event.extendedProps.status) !== -1) {
+                                        classes.push('inactive-appointment');
+                                    }
                                     return classes;
                                 },
                                 loading: function(bool) {