Patient DB appts UI update

resources/views/app/mcp/dashboard/appointments-list.blade.php

@@ -3,7 +3,7 @@
         @foreach($appointments as $appointment)
             <tr class="{{$appointment->bgColor}}">
                 <td>
-                    <a href="/patients/view/{{$appointment->clientUid}}" class="font-weight-bold d-block mt-1">
+                    <a href="/patients/view/{{$appointment->clientUid}}" class="font-weight-bold d-block">
                         {{$appointment->clientName }}
                     </a>
                     <div class="mt-1">

resources/views/app/patient/partials/appointments.blade.php

@@ -4,81 +4,105 @@
         <span class="mx-2 text-secondary">|</span>
         <a href="/patients/view/{{$patient->uid}}/calendar">Calendar</a>
     </div>
-    <table class="table table-sm border-0 m-0">
-        <tbody>
-        @foreach($patient->appointmentsFromLastWeek as $appointment)
-            <tr>
-                <td class="text-black p-0 border-0 pb-1">
-                    <div class="pb-0 d-flex align-items-center flex-wrap">
-                        <a class="on-hover-opaque mr-1"
-                           href="/patients/view/{{$patient->uid}}/calendar/{{$appointment->uid}}"
-                           title="Update">
-                            <i class="font-size-11 fa fa-edit text-primary"></i>
+    @if(!$patient->appointmentsFromLastWeek || count($patient->appointmentsFromLastWeek) === 0)
+        <div>
+            <td class="text-secondary p-0 border-0">
+                No recent appointments
+            </td>
+        </div>
+    @else
+        <table class="mb-0 table table-sm table-bordered appointments">
+            @foreach($patient->appointmentsFromLastWeek as $appointment)
+                <?php
+                $bgColor = 'bg-white';
+                if($appointment->status === 'COMPLETED') {
+                    $bgColor = 'event-bg-green';
+                }
+                else if($appointment->status === 'CANCELLED') {
+                    $bgColor = 'event-bg-gray';
+                }
+                ?>
+                <tr class="{{$bgColor}}">
+                    <td class="align-middle">
+                        <a href="/patients/view/{{$appointment->client->uid}}" class="font-weight-bold d-block">
+                            {{$appointment->client->displayName() }}
                         </a>
-                        <span class="mr-1 text-nowrap">{{ friendly_date_time($appointment->raw_date, false) }}</span>
-                        @if($appointment->raw_start_time)
-                            <span class="mr-1 text-nowrap">{{ friendly_time($appointment->raw_start_time, false) }}</span>
-                        @endif
-                        @if($appointment->timezone)
-                            <span class="text-secondary text-sm mr-1 text-nowrap">({{ str_replace("_", " ", $appointment->timezone) }})</span>
-                        @endif
-                        <span class="mr-1">/</span>
-                        <span class="font-weight-bold mr-1 text-nowrap">{{$appointment->pro->displayName()}}</span>
-                        <div moe>
-                            <a href="#" start show class="text-sm">({{ $appointment->status }})</a>
-                            <form url="/api/appointment/updateStatus">
-                                <input type="hidden" name="uid" value="{{ $appointment->uid }}">
-                                <div class="mb-2">
-                                    <select class="form-control form-control-sm bg-light" name="status" required>
-                                        <option value="">-- select --</option>
-                                        <option {{ $appointment->status === 'PENDING' ? 'selected' : '' }} value="PENDING">PENDING</option>
-                                        <option {{ $appointment->status === 'CONFIRMED' ? 'selected' : '' }} value="CONFIRMED">CONFIRMED</option>
-                                        <option {{ $appointment->status === 'CANCELLED' ? 'selected' : '' }} value="CANCELLED">CANCELLED</option>
-                                        <option {{ $appointment->status === 'COMPLETED' ? 'selected' : '' }} value="COMPLETED">COMPLETED</option>
-                                    </select>
-                                </div>
-                                <div>
-                                    <button submit class="btn btn-sm btn-primary mr-1">Update</button>
-                                    <button cancel class="btn btn-sm btn-default border">Cancel</button>
-                                </div>
-                            </form>
+                        <div class="mt-1">
+                            {{ friendly_time($appointment->raw_start_time) }} - {{ friendly_time($appointment->raw_end_time) }}
+                            <span class="text-secondary">{{ friendly_timezone($appointment->timezone) }}</span>
                         </div>
-                        @if($appointment->status === 'PENDING')
-                            <div moe class="ml-2">
-                                <a href="#" start show class="text-sm font-weight-bold">Req. Conf.</a>
-                                <form url="/api/appointment/sendConfirmationRequestViaSms">
-                                    <input type="hidden" name="uid" value="{{ $appointment->uid }}">
-                                    <div class="mb-2">
-                                        <label for="" class="text-sm text-secondary mb-1">Cell Number</label>
-                                        <input type="text" class="form-control form-control-sm" name="toSmsNumber" value="{{$patient->cell_number}}" required>
+                        <a href="'/patients/view/{{$appointment->client->uid}}/calendar/{{$appointment->uid}}"
+                           class="d-block mt-1">
+                            <i class="fa fa-edit"></i>
+                        </a>
+                        @if($appointment->title)
+                            <span class="d-inline-block mt-1 text-secondary text-sm">
+                            {{ $appointment->title }}
+                        </span>
+                        @endif
+                    </td>
+                    <td class="align-middle">
+                        <div class="d-flex flex-column">
+                            <div class="d-flex align-items-baseline flex-nowrap">
+                                @if($appointment->status === 'PENDING')
+                                    <div class="text-warning-mellow font-weight-bold text-nowrap">
+                                        <i class="fa fa-exclamation-triangle"></i>
+                                        Pending
                                     </div>
-                                    <div>
-                                        <button submit class="btn btn-sm btn-primary mr-1">Send</button>
-                                        <button cancel class="btn btn-sm btn-default border">Cancel</button>
+                                @elseif($appointment->status === 'CONFIRMED')
+                                    <div class="text-success font-weight-bold text-nowrap">
+                                        <i class="fa fa-check"></i>
+                                        Confirmed
                                     </div>
-                                </form>
+                                @elseif($appointment->status === 'CANCELLED')
+                                    <div class="text-danger font-weight-bold text-nowrap">
+                                        <i class="fa fa-stop"></i>
+                                        Cancelled
+                                    </div>
+                                @elseif($appointment->status === 'COMPLETED')
+                                    <div class="text-success font-weight-bold text-nowrap">
+                                        <i class="far fa-calendar-check"></i>
+                                        Completed
+                                    </div>
+                                @endif
+                                <div class="ml-2" moe relative>
+                                    <a href="#" start show><i class="fa fa-edit"></i></a>
+                                    <form url="/api/appointment/updateStatus">
+                                        <input type="hidden" name="uid" value="{{$appointment->uid}}">
+                                        <p class="text-nowrap mb-2 font-weight-bold text-secondary">Change appointment
+                                            status</p>
+                                        <select name="status"
+                                                class="form-control form-control-sm input-sm bg-light mb-2">
+                                            <option value="PENDING" {{$appointment->status === 'PENDING' ? 'selected' : ''}}>
+                                                PENDING
+                                            </option>
+                                            <option value="CONFIRMED" {{$appointment->status === 'CONFIRMED' ? 'selected' : ''}}>
+                                                CONFIRMED
+                                            </option>
+                                            <option value="CANCELLED" {{$appointment->status === 'CANCELLED' ? 'selected' : ''}}>
+                                                CANCELLED
+                                            </option>
+                                            <option value="COMPLETED" {{$appointment->status === 'COMPLETED' ? 'selected' : ''}}>
+                                                COMPLETED
+                                            </option>
+                                        </select>
+                                        <div class="mb-0">
+                                            <button class="btn btn-primary btn-sm" submit>Submit</button>
+                                            <button class="btn btn-default border btn-sm" cancel>Cancel</button>
+                                        </div>
+                                    </form>
+                                </div>
                             </div>
-                        @endif
-                        <span class="text-sm ml-2">{{ $appointment->title ? $appointment->title : '' }}</span>
-                        {{--@if($appointment->title && $appointment->description)<span class="text-secondary mx-1">/</span>@endif--}}
-                        {{--<span class="text-sm">{{ $appointment->description ? $appointment->description : '' }}</span>--}}
-                    </div>
-                </td>
-            </tr>
-        @endforeach
-        @if(!$patient->appointmentsFromLastWeek || count($patient->appointmentsFromLastWeek) === 0)
-            <tr>
-                <td class="text-secondary p-0 border-0">
-                    No recent appointments
-                </td>
-            </tr>
-        @endif
-        <tr>
-            <td class="text-secondary pt-2 px-0 border-0">
-                <a href="/patients/view/{{$patient->uid}}/appointments/all/all">See all appointments</a>
-            </td>
-        </tr>
-        </tbody>
-    </table>
+                        </div>
+                    </td>
+                </tr>
+            @endforeach
+        </table>
+    @endif
+    <div class="mt-2">
+        <div class="text-secondary pt-2 px-0 border-0">
+            <a href="/patients/view/{{$patient->uid}}/appointments/all/all">See all appointments</a>
+        </div>
+    </div>
 </div>