Update status as well in edit appt. modal

app/Http/Controllers/AppointmentController.php

@@ -44,7 +44,8 @@ class AppointmentController extends Controller
         foreach ($appointments as $appointment) {
             $events[] = [
                 "type" => "appointment",
-                "title" => ($appointment->client->id != $clientId ? '* ' : '') . $appointment->pro->displayName() . " (booked)",
+                "title" => ($appointment->client->id != $clientId ? '* ' : '') . $appointment->pro->displayName() .
+                    " (" . strtolower($appointment->status) . ")",
                 "_title" => $appointment->title,
                 "description" => $appointment->description,
                 "clientName" => $appointment->client->displayName(),
@@ -56,6 +57,7 @@ class AppointmentController extends Controller
                 "end" => $this->convertToTimezone($appointment->end_time, $timeZone),
                 "clientOnly" => !in_array($appointment->pro->id, $proIds),
                 "otherClient" => ($appointment->client->id != $clientId),
+                "status" => $appointment->status,
                 "editable" => true
             ];
         }

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

@@ -303,6 +303,22 @@
                                :value="timezone" readonly>
                     </div>
                 </div>
+                <div class="row mb-2">
+                    <div class="col-3 text-secondary">
+                        Status
+                    </div>
+                    <div class="col-9 font-weight-bold">
+                        <select id="editApptStatus" name="status" required
+                                v-model="editAppointment.status"
+                                class="form-control form-control-sm font-weight-bold px-1">
+                            <option value="CREATED">CREATED</option>
+                            <option value="CONFIRMED">CONFIRMED</option>
+                            <option value="CANCELLED">CANCELLED</option>
+                            <option value="COMPLETED">COMPLETED</option>
+                            <option value="ABANDONED">ABANDONED</option>
+                        </select>
+                    </div>
+                </div>
                 <div class="row mb-2">
                     <div class="col-3 text-secondary">
                         Title
@@ -379,6 +395,7 @@
                             timeZone: '',
                             title: '',
                             description: '',
+                            status: '',
                         },
 
                         // availability
@@ -687,6 +704,7 @@
                             this.editAppointment.timeZone = this.timezone;
                             this.editAppointment.title = this.selectedEvent.extendedProps._title;
                             this.editAppointment.description = this.selectedEvent.extendedProps.description;
+                            this.editAppointment.status = this.selectedEvent.extendedProps.status;
                             Vue.nextTick(function() {
                                 $('#editApptPro').trigger('change');
                                 showStagPopup('client-edit-appointment');
@@ -698,6 +716,17 @@
                                 form[0].reportValidity();
                                 return false;
                             }
+
+                            // confirming if changing to cancelled, completed or abandoned
+                            if(this.selectedEvent.extendedProps.status !== this.editAppointment.status &&
+                                ['CANCELLED', 'COMPLETED', 'ABANDONED'].indexOf(this.editAppointment.status) !== -1) {
+                                if(!window.confirm('CANCELLED, COMPLETED and ABANDONED appointments will ' +
+                                    'not be displayed in the calendar by default.\n\n' +
+                                    'Are you sure you want to update the status of this appointment to ' + this.editAppointment.status + '?')) {
+                                    return false;
+                                }
+                            }
+
                             this.inProgress = true;
                             let self = this;
                             showMask();