Calendar based new-appt. [WIP 5]

public/css/style.css

@@ -768,6 +768,14 @@ body .node input[type="number"] {
     outline: 2px solid #007bff;
     background: #e5f2fd;
 }
+.appt-form .stag-current-appt {
+    background: #89159cc7;
+    color: #fff;
+    border-color: #89159cc7;
+}
+.appt-form .stag-current-appt .fc-daygrid-event-dot {
+    border-color: #fff;
+}
 
 /* call panel */
 #proCallComponent {

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

@@ -10,8 +10,12 @@
     </div>
     <hr class="mt-2 mb-3">
     <div class="d-flex align-items-start appt-form">
-        <form action="/api/appointment/create" method="post" class="appt-form-col pr-2">
-            <input name="clientUid" type="hidden" value="{{ $patient->uid }}">
+        <form action="/api/appointment/{{ $appointment && $appointment->uid ? 'update' : 'create' }}" method="post" class="appt-form-col pr-2">
+            @if(!$appointment)
+                <input name="clientUid" type="hidden" value="{{ $patient->uid }}">
+            @else
+                <input name="uid" type="hidden" value="{{ $appointment->uid }}">
+            @endif
             <div class="mb-3">
                 <label class="text-secondary mb-1">Patient</label>
                 <div class="font-weight-bold">{{ $patient->displayName() }}</div>
@@ -47,19 +51,27 @@
             </div>
             <div class="mb-3">
                 <label class="text-secondary mb-1">Date *</label>
-                <input name="date" class="form-control form-control-sm" type="date" value="{{ date('Y-m-d') }}" required>
+                <input name="date" class="form-control form-control-sm" type="date"
+                       value="{{ $appointment && $appointment->raw_date ? $appointment->raw_date : date('Y-m-d') }}"
+                       required>
             </div>
             <div class="mb-3">
                 <label class="text-secondary mb-1">Start Time *</label>
-                <input name="startTime" class="form-control form-control-sm" type="time" required>
+                <input name="startTime" class="form-control form-control-sm" type="time"
+                       value="{{ $appointment && $appointment->raw_start_time ? $appointment->raw_start_time : '' }}"
+                       required>
             </div>
             <div class="mb-3">
                 <label class="text-secondary mb-1">End Time *</label>
-                <input name="endTime" class="form-control form-control-sm" type="time" required>
+                <input name="endTime" class="form-control form-control-sm" type="time"
+                       value="{{ $appointment && $appointment->raw_end_time ? $appointment->raw_end_time : '' }}"
+                       required>
             </div>
             <div class="mb-3">
                 <label class="text-secondary mb-1">Title</label>
-                <input name="title" class="form-control form-control-sm" type="text" placeholder="(optional)">
+                <input name="title" class="form-control form-control-sm" type="text"
+                       value="{{ $appointment && $appointment->title ? $appointment->title : '' }}"
+                       placeholder="(optional)">
             </div>
             <div class="mb-3">
                 <button class="btn btn-sm btn-primary d-block w-100 font-weight-bold">Set Appointment</button>
@@ -84,7 +96,7 @@
                     initialDate: '{{ date('Y-m-d') }}',
                     editable: false,
                     navLinks: true,
-                    dayMaxEvents: true,
+                    dayMaxEvents: false,
                     events: function(info, successCallback, failureCallback) {
                         let proUid = $('.appt-form [name="proUid"]').val();
                         if(!proUid) {
@@ -119,7 +131,11 @@
                         $('.appt-form [name="date"]').val(info.dateStr.substr(0, 10));
                     },
                     eventClassNames: function(arg) {
-                        console.log(arg.event.extendedProps.appointmentUid);
+                        @if($appointment)
+                            if(arg.event.extendedProps.appointmentUid === '{{ $appointment->uid }}') {
+                                return ['stag-current-appt'];
+                            }
+                        @endif
                     }
                 });
                 calendarObject.render();
@@ -143,9 +159,15 @@
                         form[0].reportValidity();
                         return false;
                     }
+                    $('.appt-form [name="startTime"]').val($('.appt-form [name="startTime"]').val().substr(0, 5));
+                    $('.appt-form [name="endTime"]').val($('.appt-form [name="endTime"]').val().substr(0, 5));
                     $.post(form.attr('action'), form.serialize(), function(_data) {
                         if(_data && _data.success) {
-                            toastr.success('Appointment booked successfully');
+                            @if($appointment)
+                                toastr.success('Appointment updated successfully');
+                            @else
+                                toastr.success('Appointment booked successfully');
+                            @endif
                             calendarObject.refetchEvents();
                         }
                         else {

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

@@ -21,6 +21,12 @@
                             </a>
                             @include('app/patient/partials/_appointment-form', ['appointment' => $appointment])
                         </div>
+                        <a class="on-hover-opaque font-weight-bold"
+                           href="/patients/view/{{$patient->uid}}/manage-appointment/{{$appointment->uid}}"
+                           title="Update **">
+                            <i class="font-size-11 fa fa-edit text-primary"></i> **
+                        </a>
+
                         {{ $appointment->raw_date }}
                         @if($appointment->raw_start_time)
                             &nbsp;{{ friendly_time($appointment->raw_start_time, false) }}