Remote load pros in appt-calendar

app/Http/Controllers/HomeController.php

@@ -422,7 +422,7 @@ class HomeController extends Controller
         return view('app/pharmacy-suggest', compact('pharmacies'));
     }
 
-    public function proSuggest(Request $request) {
+    public function proSuggest(Request $request, $format = 'html') {
         $term = $request->input('term') ? trim($request->input('term')) : '';
         if (empty($term)) return '';
         $term = strtolower($term);
@@ -441,7 +441,23 @@ class HomeController extends Controller
             $pros->whereIn('id', $accessibleProIds);
         }
         $suggestedPros = $pros->orderBy('name_last')->orderBy('name_first')->get();
-        return view('app/pro-suggest', compact('suggestedPros'));
+        $response = '';
+        if($format === 'html') {
+            $response = view('app/pro-suggest', compact('suggestedPros'));
+        }
+        else if($format === 'json') {
+            $output = [];
+            foreach ($suggestedPros as $sPro) {
+                $output[] = [
+                    "id" => $sPro->id,
+                    "uid" => $sPro->uid,
+                    "text" => $sPro->displayName(),
+                    "initials" => $sPro->initials(),
+                ];
+            }
+            $response = json_encode($output);
+        }
+        return $response;
     }
 
     public function proDisplayName(Request $request, Pro $pro) {

public/js/pro-suggest.js

@@ -91,7 +91,7 @@
     function init() {
 
         // make select[provider-search] hidden & insert a textbox with pro-suggest
-        $('select[provider-search]').each(function() {
+        $('select[provider-search]:not([pro-suggest-initialized])').each(function() {
             let elem = $(this);
             let input = $('<input type="text" placeholder="Pro">').addClass('pro-suggest-input form-control form-control-sm').insertAfter(elem);
             $('<div class="position-relative"><div class="suggestions-outer pro-suggestions position-absolute d-none"></div></div>').insertAfter(input);
@@ -116,6 +116,8 @@
                     return handleKeypress($(this), e);
                 });
 
+            $(elem).attr('pro-suggest-initialized', 1);
+
         });
 
         $(document).on('click', '.suggest-item.pro-suggest[data-target-uid]', function () {

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

@@ -106,28 +106,6 @@
                 <select id="eventPros" name="proUid" xprovider-search
                         class="form-control form-control-sm flex-grow-1" multiple
                         v-model="proIds">
-                    <?php
-                    $proIndex = 0;
-                    $proMeta = [];
-                    ?>
-                    @foreach($pros as $iPro)
-                        <option value="{{$iPro->id}}"
-                                data-bc="{{$palette[$proIndex]["bc"]}}"
-                                data-fc="{{$palette[$proIndex]["fc"]}}"
-                                data-initials="{{$iPro->initials()}}">
-                            {{$iPro->displayName()}}
-                        </option>
-                        <?php
-                        $proMeta[$iPro->uid] = [
-                            "bc" => $palette[$proIndex]["bc"],
-                            "fc" => $palette[$proIndex]["fc"],
-                            "ac" => $palette[$proIndex]["ac"],
-                            "initials" => $iPro->initials()
-                        ];
-                        $proIndex++;
-                        if($proIndex >= count($palette)) $proIndex = 0;
-                        ?>
-                    @endforeach
                 </select>
             </form>
             <hr class="my-2">
@@ -367,6 +345,9 @@
     <script>
         (function() {
 
+            var palette = {!! json_encode($palette) !!};
+            var lastUsedColor = -1;
+
             <?php
             $patient->nameStr = $patient->displayName();
             $clientObject = json_encode($patient);
@@ -379,7 +360,7 @@
                         client: {!! json_encode($patient) !!},
                         eventTypes: '{{ $currentAppointment ? 'BOTH_ALL' : 'BOTH' }}',
                         calendar: null,
-                        proMeta: {!! json_encode($proMeta) !!},
+                        proMeta: {},
                         proIds: ['{{ $currentAppointment ? $currentAppointment->pro_id : $pro->id }}'],
                         timezone: '{{ $currentAppointment ? $currentAppointment->timezone : 'EASTERN' }}',
                         today: new Date('{{ date('Y-m-d 00:00:00') }}'),
@@ -444,32 +425,62 @@
                                 .select2({
                                     closeOnSelect: false,
 
+                                    ajax: {
+                                        url: "/pro-suggest/json",
+                                        type: "get",
+                                        dataType: 'json',
+                                        delay: 250,
+                                        data: function (params) {
+                                            return {
+                                                term: params.term // search term
+                                            };
+                                        },
+                                        processResults: function (response) {
+                                            return {
+                                                results: response
+                                            };
+                                        },
+                                        cache: true
+                                    },
+
                                     // dropdown options
                                     templateResult: function(_state) {
-                                        let element = _state.element;
-                                        if(!element || !element.value) {
+                                        if(!_state.id) {
                                             return $('<span class="mcp-theme-1"><span>' + _state.text + '</span></span>');
                                         }
-                                        element = $(element);
+
+                                        if(!self.proMeta[_state.uid]) {
+                                            lastUsedColor++;
+                                            if(lastUsedColor > 23) lastUsedColor = 0;
+                                            _state.ag = palette[lastUsedColor].ac;
+                                            _state.bg = palette[lastUsedColor].bc;
+                                            _state.fg = palette[lastUsedColor].fc;
+                                            self.proMeta[_state.uid] = {
+                                                ac: _state.ag,
+                                                bc: _state.bg,
+                                                fc: _state.fg,
+                                                initials: _state.initials
+                                            };
+                                        }
+
                                         return $('<span class="mcp-theme-1 pro-option" ' +
-                                            'data-initials="' + element.attr('data-initials') + '" ' +
-                                            'data-bc="' + element.attr('data-bc') + '" ' +
-                                            'data-fc="' + element.attr('data-fc') + '"><span>' +
+                                            'data-initials="' + _state.initials + '" ' +
+                                            'data-bc="' + _state.bg + '" ' +
+                                            'data-fc="' + _state.fg + '"><span>' +
                                             '<span class="pro-option-initials" ' +
-                                            'style="background: ' + element.attr('data-bc') + '; color: ' + element.attr('data-fc') + '">' +
-                                            element.attr('data-initials') + '</span>' +
+                                            'style="background: ' + _state.bg + '; color: ' + _state.fg + '">' +
+                                            _state.initials + '</span>' +
                                             _state.text +
                                             '</span></span>');
                                     },
 
                                     // selected items
                                     templateSelection: function(_state) {
-                                        let element = _state.element;
-                                        if(!element || !element.value) {
+                                        if(!_state.id) {
                                             return $('<span class="mcp-theme-1"><span>' + _state.text + '</span></span>');
                                         }
-                                        element = $(element);
-                                        return $('<span class="pro-selection" style="background: ' + element.attr('data-bc') + '; color: ' + element.attr('data-fc') + '">' +
+                                        return $('<span class="pro-selection" ' +
+                                            'style="background: ' + _state.bg + '; color: ' + _state.fg + '">' +
                                             _state.text + '</span>');
                                     }
                                 })
@@ -481,6 +492,26 @@
                             $('#addApptPro')
                                 .select2({
                                     width: '100%',
+                                    ajax: {
+                                        url: "/pro-suggest/json",
+                                        type: "get",
+                                        dataType: 'json',
+                                        delay: 250,
+                                        data: function (params) {
+                                            return {
+                                                term: params.term // search term
+                                            };
+                                        },
+                                        processResults: function (response) {
+                                            for (let i = 0; i < response.length; i++) {
+                                                response[i].id = response[i].uid;
+                                            }
+                                            return {
+                                                results: response
+                                            };
+                                        },
+                                        cache: true
+                                    },
                                     templateResult: function(_state) {
                                         return $('<span class="mcp-theme-1"><span>' + _state.text + '</span></span>');
                                     },
@@ -492,6 +523,26 @@
                             $('#editApptPro')
                                 .select2({
                                     width: '100%',
+                                    ajax: {
+                                        url: "/pro-suggest/json",
+                                        type: "get",
+                                        dataType: 'json',
+                                        delay: 250,
+                                        data: function (params) {
+                                            return {
+                                                term: params.term // search term
+                                            };
+                                        },
+                                        processResults: function (response) {
+                                            for (let i = 0; i < response.length; i++) {
+                                                response[i].id = response[i].uid;
+                                            }
+                                            return {
+                                                results: response
+                                            };
+                                        },
+                                        cache: true
+                                    },
                                     templateResult: function(_state) {
                                         return $('<span class="mcp-theme-1"><span>' + _state.text + '</span></span>');
                                     },

routes/web.php

@@ -167,7 +167,7 @@ Route::middleware('pro.auth')->group(function () {
     Route::get('/pharmacy-suggest', 'HomeController@pharmacySuggest');
 
     // Pro suggest
-    Route::get('/pro-suggest', 'HomeController@proSuggest');
+    Route::get('/pro-suggest/{format?}', 'HomeController@proSuggest');
     Route::get('/pro-display-name/{pro}', 'HomeController@proDisplayName');
 
     // embeddable sections