Remote load pros in practice-calendar

resources/views/app/practice-management/calendar.blade.php

@@ -100,28 +100,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>
             @else
@@ -338,13 +316,16 @@
     <script>
         (function() {
 
+            var palette = {!! json_encode($palette) !!};
+            var lastUsedColor = -1;
+
             function init() {
                 window.proCalendarApp = new Vue({
                     el: '#proCalendarApp',
                     data: {
                         eventTypes: 'BOTH',
                         calendar: null,
-                        proMeta: {!! json_encode($proMeta) !!},
+                        proMeta: {},
                         proIds: ['{{ $pro->id }}'],
                         timezone: 'EASTERN',
                         today: new Date('{{ date('Y-m-d 00:00:00') }}'),
@@ -411,32 +392,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>');
                                     }
                                 })
@@ -450,6 +461,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>');
                                     }
@@ -460,6 +491,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>');
                                     }