Patient > calendar - do not pre-load all pros + adapt add/edit modals [wip]

app/Http/Controllers/PatientController.php

@@ -359,19 +359,7 @@ class PatientController extends Controller
     }
 
     public function calendar(Request $request, Client $patient, Appointment $currentAppointment) {
-
-        $pros =  Pro::all();
-        if($this->pro && $this->pro->pro_type != 'ADMIN'){
-            $accessiblePros = ProProAccess::where('owner_pro_id', $this->pro->id);
-            $accessibleProIds = [];
-            foreach($accessiblePros as $accessiblePro){
-                $accessibleProIds[] = $accessiblePro->id;
-            }
-            $accessibleProIds[] = $this->pro->id;
-            $pros = Pro::whereIn('id', $accessibleProIds)->get();
-        }
-
-        return view('app.patient.appointment-calendar', compact('pros', 'patient', 'currentAppointment'));
+        return view('app.patient.appointment-calendar', compact('patient', 'currentAppointment'));
     }
 
     public function programs(Request $request, Client $patient, $filter = '') {

public/js/pro-suggest.js

@@ -91,7 +91,7 @@
     window.initProSuggest = function() {
 
         // make select[provider-search] hidden & insert a textbox with pro-suggest
-        $('select[provider-search]:not([pro-suggest-initialized])').each(function() {
+        $('select[provider-search]:not([pro-suggest-initialized]):not([no-auto-pro-suggest-init])').each(function() {
             let elem = $(this);
             elem.next('.pro-suggest-input').remove();
             elem.next('.pro-suggestions-container').remove();

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

@@ -158,8 +158,10 @@
                         Pro
                     </div>
                     <div class="col-9 font-weight-bold">
-                        <select id="addApptPro" name="proUid" xprovider-search required
+                        <select id="addApptPro" name="proUid" provider-search required
                                 v-model="newAppointment.proUid"
+                                :data-pro-uid="newAppointment.proUid"
+                                no-auto-pro-suggest-init
                                 class="form-control form-control-sm">
                             @foreach($pros as $iPro)
                                 <option value="{{$iPro->uid}}">
@@ -272,8 +274,10 @@
                         Pro
                     </div>
                     <div class="col-9 font-weight-bold">
-                        <select id="editApptPro" name="proUid" xprovider-search required
+                        <select id="editApptPro" name="proUid" provider-search required
                                 v-model="editAppointment.proUid"
+                                :data-pro-uid="editAppointment.proUid"
+                                no-auto-pro-suggest-init
                                 class="form-control form-control-sm">
                             @foreach($pros as $iPro)
                                 <option value="{{$iPro->uid}}">
@@ -487,28 +491,14 @@
                                     localStorage.stagCalendarProIds = JSON.stringify(self.proIds);
                                     self.refreshEvents();
                                 });
-                            $('#addApptPro')
-                                .select2({
-                                    width: '100%',
-                                    templateResult: function(_state) {
-                                        return $('<span class="mcp-theme-1"><span>' + _state.text + '</span></span>');
-                                    },
-                                    placeholder: '-- Select Pro --'
-                                })
-                                .on('change', function() {
-                                    self.newAppointment.proUid = $(this).val();
-                                });
-                            $('#editApptPro')
-                                .select2({
-                                    width: '100%',
-                                    templateResult: function(_state) {
-                                        return $('<span class="mcp-theme-1"><span>' + _state.text + '</span></span>');
-                                    },
-                                    placeholder: '-- Select Pro --'
-                                })
-                                .on('change', function() {
-                                    self.editAppointment.proUid = $(this).val();
-                                });
+
+                            // change from select2 to pro-suggest
+                            $('#addApptPro').on('change', function() {
+                                self.newAppointment.proUid = $(this).val();
+                            });
+                            $('#editApptPro').on('change', function() {
+                                self.editAppointment.proUid = $(this).val();
+                            });
                         },
                         initCalendar: function () {
                             let self = this;
@@ -748,6 +738,8 @@
                                 $('#addApptPro').find('option').prop('selected', false);
                                 $('#addApptPro').trigger('change');
                                 showStagPopup('client-add-appointment', true);
+                                $('#addApptPro').removeAttr('no-auto-pro-suggest-init').removeAttr('pro-suggest-initialized');
+                                initProSuggest();
                             });
                         },
                         addAppointment: function() {
@@ -794,6 +786,8 @@
                             Vue.nextTick(function() {
                                 $('#editApptPro').trigger('change');
                                 showStagPopup('client-edit-appointment', true);
+                                $('#editApptPro').removeAttr('no-auto-pro-suggest-init').removeAttr('pro-suggest-initialized');
+                                initProSuggest();
                             });
                         },
                         updateAppointment: function() {