Patient > calendar - dynamic color assignment to pros [pending: training appts.]

app/Http/Controllers/AppointmentController.php

@@ -44,8 +44,8 @@ class AppointmentController extends Controller
                 ->where(function ($query) use ($proIds, $clientId) {
                     $query
                         ->whereIn('pro_id', $proIds)
-                        ->orWhere('client_id', '=', $clientId)
-                        ->orWhereRaw('client_id IN (SELECT shadow_client_id FROM pro WHERE id IN (?))', [implode(',', $proIds)]);
+                        ->orWhere('client_id', '=', $clientId);
+                        // ->orWhereRaw('client_id IN (SELECT shadow_client_id FROM pro WHERE id IN (?))', [implode(',', $proIds)]);
                 });
         }
 

app/Http/Controllers/HomeController.php

@@ -679,6 +679,7 @@ WHERE measurement.label NOT IN ('SBP', 'DBP')
         if($request->input('json')) {
             $jsonPros = $suggestedPros->map(function($_pro) {
                 return [
+                    "uid" => $_pro->uid,
                     "id" => $_pro->id,
                     "text" => $_pro->displayName(),
                     "initials" => $_pro->initials(),

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

@@ -103,31 +103,9 @@
         <div class="d-block appt-form">
             <form class="appt-form-col w-100 d-flex align-items-center mb-2">
                 <label class="mr-2 my-0 text-secondary text-nowrap">Show all appointments for</label>
-                <select id="eventPros" name="proUid" xprovider-search
+                <select id="eventPros" name="proUid"
                         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">
@@ -391,7 +369,6 @@
                         client: {!! json_encode($patient) !!},
                         eventTypes: '{{ $currentAppointment ? 'BOTH_ALL' : 'BOTH' }}',
                         calendar: null,
-                        proMeta: {!! json_encode($proMeta) !!},
                         proIds: ['{{ $currentAppointment ? $currentAppointment->pro_id : $pro->id }}'],
                         timezone: '{{ $currentAppointment ? $currentAppointment->timezone : 'EASTERN' }}',
                         today: new Date('{{ date('Y-m-d 00:00:00') }}'),
@@ -433,6 +410,11 @@
                         editHonored: false,
 
                         clickThruMode: false,
+
+                        // dynamic palette (pros are no longer available on page load)
+                        nextPaletteIndex: 0,
+                        palette: {!! json_encode($palette) !!},
+                        proMeta: {},
                     },
                     methods: {
                         // init
@@ -440,6 +422,12 @@
                             this.initSelect2();
                             this.initCalendar();
                         },
+                        ensureProMeta: function(_uid) {
+                            if(!this.proMeta['' + _uid]) {
+                                this.proMeta['' + _uid] = this.palette[this.nextPaletteIndex++];
+                                if(this.nextPaletteIndex === this.palette.length) this.nextPaletteIndex = 0;
+                            }
+                        },
                         initSelect2: function () {
                             let self = this;
                             $('#eventTz')
@@ -473,17 +461,15 @@
                                     // dropdown options
                                     templateResult: function(_state) {
                                         let element = _state.element;
+                                        self.ensureProMeta(_state.uid);
                                         if(!element || !element.value) {
                                             return $('<span class="mcp-theme-1"><span>' + _state.text + '</span></span>');
                                         }
                                         element = $(element);
                                         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>' +
                                             '<span class="pro-option-initials" ' +
-                                            'style="background: ' + element.attr('data-bc') + '; color: ' + element.attr('data-fc') + '">' +
-                                            element.attr('data-initials') + '</span>' +
+                                            'style="background: ' + self.proMeta[_state.uid].bc + '; color: ' + self.proMeta[_state.uid].fc + '">' +
+                                            self.initials + '</span>' +
                                             _state.text +
                                             '</span></span>');
                                     },
@@ -491,16 +477,19 @@
                                     // selected items
                                     templateSelection: function(_state) {
                                         let element = _state.element;
+                                        self.ensureProMeta(_state.uid);
                                         if(!element || !element.value) {
                                             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: ' + self.proMeta[_state.uid].bc + '; color: ' + self.proMeta[_state.uid].fc + '">' +
                                             _state.text + '</span>');
                                     }
                                 })
                                 .on('change', function() {
                                     self.proIds = $(this).val();
+                                    debugger
                                     localStorage.stagCalendarProIds = JSON.stringify(self.proIds);
                                     self.refreshEvents();
                                 });
@@ -555,6 +544,7 @@
                                         if(_data && Array.isArray(_data)) {
                                             let events = _data, displayEvents = [];
                                             for(let e in events) {
+                                                self.ensureProMeta(events[e].proUid);
                                                 if(!self.proMeta[events[e].proUid]) {
                                                     self.proMeta[events[e].proUid] = {
                                                         ac: '#000',