Apointments UI [WIP #2]

app/Http/Controllers/HomeController.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\Lib\Backend;
+use App\Models\Appointment;
 use App\Models\ClientSMS;
 use DateTime;
 
@@ -226,21 +227,22 @@ class HomeController extends Controller
         $totalExpectedAmount =  $expectedForHcp + $expectedForCm + $expectedForRme + $expectedForRmm + $expectedForNa;
         $reimbursement['nextPaymentAmount'] = '$' . $totalExpectedAmount;
 
-        $clientsWithAppointments = Client::where("mcp_pro_id", $performerProID)
-            ->whereNotNull('next_mcp_appointment')
-            ->orderBy('next_mcp_appointment', 'desc')
+        $appointments = Appointment::where("pro_id", $performerProID)
+            ->orderBy('start_time', 'asc')
             ->get();
 
-
-        $appointments = [];
-        foreach ($clientsWithAppointments as $client) {
-            $appointment = [
-                'client_uid' => $client->uid,
-                'title' => $client->name_first . ' ' . $client->name_last,
-                'start' => $client->next_mcp_appointment,
-                'milliseconds' => strtotime($client->next_mcp_appointment) . '000'
-            ];
-            $appointments[] = $appointment;
+        foreach ($appointments as $appointment) {
+            $date = explode(" ", $appointment->start_time)[0];
+            $appointment->milliseconds = strtotime($date) . '000';
+            $appointment->dateYMD = date('Y-m-d', strtotime($appointment->start_time));
+            $appointment->clientName = $appointment->client->displayName();
+            $appointment->clientInitials = substr($appointment->client->name_first, 0, 1).substr($appointment->client->name_last, 0, 1);
+            $appointment->friendlyStartTime = friendly_time($appointment->start_time);
+            $appointment->friendlyEndTime = friendly_time($appointment->end_time);
+            $appointment->clientSummary = friendly_date_time($appointment->client->dob, false) . ' (' .
+                $appointment->client->age_in_years . ' y.o' .
+                ($appointment->client->sex ? ' ' . $appointment->client->sex : '') .
+                ')';
         }
 
         $milliseconds = strtotime(date('Y-m-d')) . '000';

app/Models/Appointment.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Relations\HasOne;
+
+# use Illuminate\Database\Eloquent\Model;
+
+class Appointment extends Model
+{
+    protected $table = 'appointment';
+
+    public function client() {
+        return $this->hasOne(Client::class, 'id', 'client_id');
+    }
+
+    public function pro() {
+        return $this->hasOne(Pro::class, 'id', 'pro_id');
+    }
+}

app/Models/Client.php

@@ -67,4 +67,15 @@ class Client extends Model
             ->orderBy('created_at', 'desc');
     }
 
+    public function nextMcpAppointment() {
+        if($this->mcp) {
+            return Appointment::where('client_id', $this->id)
+                ->where('pro_id', $this->mcp->id)
+                ->where('start_time', '>=', date('Y-m-d'))
+                ->orderBy('start_time', 'asc')
+                ->first();
+        }
+        return false;
+    }
+
 }

public/css/style.css

@@ -416,3 +416,18 @@ input.search_field, textarea.search_field {
 .pro-dashboard-inline-calendar table.table-condensed td[has-events] {
     background: #c5e4ff;
 }
+[v-cloak] {
+    opacity: 0;
+}
+.patient-avatar {
+    width: 50px;
+    height: 50px;
+    background: #ddd;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100%;
+}
+.large {
+    font-size: 16px !important;
+}

resources/views/app/dashboard.blade.php

@@ -3,7 +3,7 @@
 @section('content')
 <div class="p-3">
     <div class="m-0 mt-4">
-        <div class="row">
+        <div class="row mcp-theme-1" id="pro-dashboard-container" v-cloak>
             <div class="col-md-3 mcp-theme-1">
                 <div class="mb-4">
                     <div class="pro-dashboard-inline-calendar"></div>
@@ -73,60 +73,74 @@
                 </div>
             </div>
             <div class="col-md-9">
-                <div id='calendar'></div>
+                <div class="d-flex align-items-center mb-2">
+                    <b class="large">@{{ selectedDate }}</b>
+                    <div class="ml-auto">Tabs</div>
+                </div>
+                <div v-for="event in events" class="align-items-start p-3 border" :class="event.dateYMD === selectedDate ? 'd-flex' : 'd-none'">
+                    <div class="patient-avatar mr-3">@{{ event.clientInitials }}</div>
+                    <div>
+                        <div class="font-weight-bold pb-1">
+                            @{{ event.clientName }}
+                            <span class="small d-inline-block pl-2 text-secondary font-weight-normal">@{{ event.clientSummary }}</span>
+                        </div>
+                        <div class="pb-1">
+                            @{{ event.friendlyStartTime }} - @{{ event.friendlyEndTime }}
+                            &nbsp;/&nbsp;
+                            <span class="d-inline-block ml- 2 text-secondary font-weight-bold">@{{ event.title }}</span>
+                        </div>
+                        <div>
+                            Status: <b class="text-secondary">@{{ event.status }}</b>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 </div>
 
 <script>
-    (function() {
-        var events = [];
-        function init() {
-            events = JSON.parse('{!! json_encode($appointments) !!}')
-
-            var calendarElem = $('.pro-dashboard-inline-calendar');
-            calendarElem.datepicker();
-            calendarElem.on('changeDate', function() {
-                onDateChange(calendarElem.datepicker('getFormattedDate'));
-            });
-
-            selectToday();
-        }
-        function onDateChange(_newDate) {
-            highlightDatesWithEvents();
-            console.log('Showing events for ' + _newDate);
-        }
-        function selectToday() {
-            $('.pro-dashboard-inline-calendar table td[data-date]').removeClass('active');
-            $('.pro-dashboard-inline-calendar table td[data-date="{{ $milliseconds }}"]')
-                .addClass('active');
-            onDateChange('{{ $milliseconds }}');
-        }
-        function highlightDatesWithEvents() {
-            $('.pro-dashboard-inline-calendar table td[data-date]').removeAttr('has-events');
-            for (let i = 0; i < events.length; i++) {
-                $('.pro-dashboard-inline-calendar table td[data-date="' + events[i].milliseconds + '"]')
-                    .attr('has-events', 1);
+    addMCInitializer('pro-dashboard', function () {
+        new Vue({
+            el: '#pro-dashboard-container',
+            delimiters: ['@{{', '}}'],
+            data: {
+                selectedDate: '{{ date('Y-m-d') }}',
+                selectedStatus: 'CREATED',
+                events: {!! json_encode($appointments) !!},
+            },
+            methods: {
+                onDateChange: function (_newDate) {
+                    this.highlightDatesWithEvents();
+                    this.selectedDate = _newDate;
+                    console.log('Showing events for ' + _newDate);
+                },
+                selectToday: function () {
+                    $('.pro-dashboard-inline-calendar table td[data-date]').removeClass('active');
+                    $('.pro-dashboard-inline-calendar table td[data-date="{{ $milliseconds }}"]')
+                        .addClass('active');
+                    this.onDateChange('{{ date('Y-m-d') }}');
+                },
+                highlightDatesWithEvents: function () {
+                    $('.pro-dashboard-inline-calendar table td[data-date]').removeAttr('has-events');
+                    for (let i = 0; i < this.events.length; i++) {
+                        $('.pro-dashboard-inline-calendar table td[data-date="' + this.events[i].milliseconds + '"]')
+                            .attr('has-events', 1);
+                    }
+                }
+            },
+            mounted: function () {
+                var calendarElem = $('.pro-dashboard-inline-calendar'), self = this;
+                calendarElem.datepicker({
+                    format: 'yyyy-mm-dd'
+                });
+                calendarElem.on('changeDate', function () {
+                    self.onDateChange(calendarElem.datepicker('getFormattedDate'));
+                });
+                self.selectToday();
+                console.log(this.events)
             }
-        }
-        addMCInitializer('pro-dashboard', init);
-    })();
-    // function initializeCalendar() {
-    //     if (!$("#calendar").length)
-    //         return;
-    //     var calendarEl = document.getElementById("calendar");
-    //     var calendar = new FullCalendar.Calendar(calendarEl, {
-    //         initialView: "dayGridMonth",
-    //         headerToolbar: {
-    //             left: "dayGridMonth,timeGridWeek,timeGridDay",
-    //             center: "title",
-    //             right: "prevYear,prev,next,nextYear"
-    //         },
-    //         events: events
-    //     });
-    //     calendar.render();
-    // }
-    // initializeCalendar();
+        });
+    });
 </script>
 @endsection

resources/views/layouts/patient.blade.php

@@ -306,7 +306,17 @@
                                     {{--<div><label>Allergies:</label> Grass, Pollen, Latex</div>--}}
                                     <div>
                                         <label>Next Appt:</label>
-                                        {{$patient->next_mcp_appointment ? friendly_date_time($patient->next_mcp_appointment, $patient->is_next_appointment_time_specific) : '-'}}
+                                        <?php
+                                        $nextAppointment = $patient->nextMcpAppointment();
+                                        $startTime = false;
+                                        $endTime = false;
+                                        if($nextAppointment) {
+                                            $startTime = date('H:i', strtotime($nextAppointment->start_time));
+                                            $endTime = date('H:i', strtotime($nextAppointment->end_time));
+                                            $nextAppointment = date('Y-m-d', strtotime($nextAppointment->start_time));
+                                        }
+                                        ?>
+                                        {{$nextAppointment ? friendly_date_time($nextAppointment . ($startTime ? ' ' . $startTime : ''), true, '') : '-'}}
                                         <span moe relative class="ml-1">
                                             <a start show><i class="fa fa-edit"></i></a>
                                             <form url="/api/appointment/create" class="mcp-theme-1" right>
@@ -324,17 +334,18 @@
                                                 <div class="mb-2">
                                                     <label class="text-secondary text-sm">Date</label>
                                                     <input type="date" name="date" min="{{ date('Y-m-d') }}"
-                                                           value="{{ $patient->next_mcp_appointment ? explode(" ", $patient->next_mcp_appointment)[0] : date('Y-m-d') }}"
+                                                           value="{{ $nextAppointment ? $nextAppointment : date('Y-m-d') }}"
                                                            class="form-control form-control-sm">
                                                 </div>
                                                 <div class="mb-2">
                                                     <label class="text-secondary text-sm">Start Time</label>
                                                     <input type="time" name="startTime" class="form-control form-control-sm"
-                                                           value="{{ explode(" ", $patient->next_mcp_appointment)[1] }}">
+                                                           value="{{ $startTime ? $startTime : '' }}">
                                                 </div>
                                                 <div class="mb-2">
                                                     <label class="text-secondary text-sm">End Time</label>
-                                                    <input type="time" name="endTime" class="form-control form-control-sm" value="">
+                                                    <input type="time" name="endTime" class="form-control form-control-sm"
+                                                           value="{{ $endTime ? $endTime : '' }}">
                                                 </div>
                                                 <div>
                                                     <button submit class="btn btn-sm btn-primary mr-1">Submit</button>