Edit appt. implementation v1

app/Http/Controllers/AppointmentController.php

@@ -33,6 +33,9 @@ class AppointmentController extends Controller
         foreach ($appointments as $appointment) {
             $events[] = [
                 "title" => '(' . $appointment->pro->initials() . ') ' . $appointment->client->displayName(),
+                "_title" => $appointment->title,
+                "description" => $appointment->description,
+                "clientName" => $appointment->client->displayName(),
                 "appointmentUid" => $appointment->uid,
                 "clientUid" => $appointment->client->uid,
                 "proUid" => $appointment->pro->uid,

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

@@ -195,9 +195,108 @@
                 </div>
             </form>
         </div>
-        <div class="stag-popup mcp-theme-1" stag-popup-key="client-edit-appointment">
-            <form method="POST" action="/api/appointment/update">
-            Edit
+        <div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="client-edit-appointment">
+            <form method="POST" action="/api/appointment/update" id="editApptForm">
+                <h3 class="stag-popup-title">
+                    <span>Edit Appointment</span>
+                    <a href="#" class="ml-auto text-secondary"
+                       onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
+                </h3>
+                <input type="hidden" name="uid" :value="editAppointment.uid">
+                <div class="row mb-2">
+                    <div class="col-3 text-secondary">
+                        Patient
+                    </div>
+                    <div class="col-9 font-weight-bold">
+                        <input type="text"
+                               class="form-control form-control-sm"
+                               :value="editAppointment.clientName" readonly>
+                    </div>
+                </div>
+                <div class="row mb-2">
+                    <div class="col-3 text-secondary">
+                        Pro
+                    </div>
+                    <div class="col-9 font-weight-bold">
+                        <select id="editApptPro" name="proUid" required
+                                v-model="editAppointment.proUid"
+                                class="form-control form-control-sm">
+                            @foreach($pros as $iPro)
+                                <option value="{{$iPro->uid}}">
+                                    {{$iPro->displayName()}}
+                                </option>
+                            @endforeach
+                        </select>
+                    </div>
+                </div>
+                <div class="row mb-2">
+                    <div class="col-3 text-secondary">
+                        Date
+                    </div>
+                    <div class="col-9 font-weight-bold">
+                        <input type="date" name="date" required
+                               class="form-control form-control-sm"
+                               v-model="editAppointment.date">
+                    </div>
+                </div>
+                <div class="row mb-2">
+                    <div class="col-3 text-secondary">
+                        Start Time
+                    </div>
+                    <div class="col-9 font-weight-bold">
+                        <input type="time" name="startTime" required
+                               class="form-control form-control-sm"
+                               v-model="editAppointment.startTime">
+                    </div>
+                </div>
+                <div class="row mb-2">
+                    <div class="col-3 text-secondary">
+                        End Time
+                    </div>
+                    <div class="col-9 font-weight-bold">
+                        <input type="time" name="endTime"
+                               class="form-control form-control-sm"
+                               v-model="editAppointment.endTime">
+                    </div>
+                </div>
+                <input type="hidden" name="timeZone" :value="timezone">
+                <div class="row mb-2">
+                    <div class="col-3 text-secondary">
+                        Timezone
+                    </div>
+                    <div class="col-9 font-weight-bold">
+                        <input type="text"
+                               class="form-control form-control-sm"
+                               :value="timezone" readonly>
+                    </div>
+                </div>
+                <div class="row mb-2">
+                    <div class="col-3 text-secondary">
+                        Title
+                    </div>
+                    <div class="col-9 font-weight-bold">
+                        <input type="text" name="title"
+                               class="form-control form-control-sm"
+                               v-model="editAppointment.title">
+                    </div>
+                </div>
+                <div class="row mb-2">
+                    <div class="col-3 text-secondary">
+                        Description
+                    </div>
+                    <div class="col-9 font-weight-bold">
+                        <textarea name="description"
+                                  class="form-control form-control-sm"
+                                  v-model="editAppointment.description"></textarea>
+                    </div>
+                </div>
+                <div class="d-flex align-items-center justify-content-center">
+                    <button class="btn btn-sm btn-primary mr-2"
+                            :disabled="inProgress"
+                            v-on:click.prevent="updateAppointment()">Submit</button>
+                    <button class="btn btn-sm btn-default border"
+                            onclick="return closeStagPopup()">Cancel</button>
+                </div>
             </form>
         </div>
     </div>
@@ -236,6 +335,19 @@
                             title: '',
                             description: '',
                         },
+
+                        // edit appt.
+                        editAppointment: {
+                            proUid: '',
+                            clientName: '',
+                            date: '',
+                            startTime: '',
+                            endTime: '',
+                            timeZone: '',
+                            title: '',
+                            description: '',
+                        },
+
                         inProgress: false
                     },
                     methods: {
@@ -254,6 +366,7 @@
                                 })
                                 .on('change', function() {
                                     self.timezone = $(this).val();
+                                    localStorage.stagCalendarTZ = self.timezone;
                                     self.refreshEvents();
                                 });
                             $('#eventPros')
@@ -291,6 +404,7 @@
                                 })
                                 .on('change', function() {
                                     self.proIds = $(this).val();
+                                    localStorage.stagCalendarProIds = JSON.stringify(self.proIds);
                                     self.refreshEvents();
                                 });
                             $('#addApptPro')
@@ -303,6 +417,16 @@
                                 .on('change', function() {
                                     self.newAppointment.proUid = $(this).val();
                                 });
+                            $('#editApptPro')
+                                .select2({
+                                    width: '100%',
+                                    templateResult: function(_state) {
+                                        return $('<span class="mcp-theme-1"><span>' + _state.text + '</span></span>');
+                                    }
+                                })
+                                .on('change', function() {
+                                    self.editAppointment.proUid = $(this).val();
+                                });
                         },
                         initCalendar: function () {
                             let self = this;
@@ -416,6 +540,7 @@
                         },
                         showAddAppointmentModal: function() {
                             // setup model data
+                            this.inProgress = false;
                             let startTime = this.timeStr(this.selectedSlot.start);
                             let endTime = this.timeStr(this.selectedSlot.end);
                             this.newAppointment.clientUid = this.client.uid;
@@ -461,11 +586,63 @@
                             }, 'json');
                         },
                         showEditAppointmentModal: function() {
-                            showStagPopup('client-edit-appointment');
-                        }
+                            // setup model data
+                            this.inProgress = false;
+                            this.editAppointment.uid = this.selectedEvent.extendedProps.appointmentUid;
+                            this.editAppointment.clientName = this.selectedEvent.extendedProps.clientName;
+                            this.editAppointment.proUid = this.selectedEvent.extendedProps.proUid;
+                            this.editAppointment.date = this.dateStr(this.selectedEvent.start);
+                            this.editAppointment.startTime = this.timeStr(this.selectedEvent.start);
+                            this.editAppointment.endTime = this.selectedEvent.end ? this.timeStr(this.selectedEvent.end) : '';
+                            this.editAppointment.timeZone = this.timezone;
+                            this.editAppointment.title = this.selectedEvent.extendedProps._title;
+                            this.editAppointment.description = this.selectedEvent.extendedProps.description;
+                            Vue.nextTick(function() {
+                                $('#editApptPro').trigger('change');
+                                showStagPopup('client-edit-appointment');
+                            });
+                        },
+                        updateAppointment: function() {
+                            let form = $('#editApptForm');
+                            if(!form[0].checkValidity()) {
+                                form[0].reportValidity();
+                                return false;
+                            }
+                            this.inProgress = true;
+                            let self = this;
+                            showMask();
+                            $.post(form.attr('action'), form.serialize(), function(_data) {
+                                if(_data) {
+                                    if(_data.success) {
+                                        self.refreshEvents();
+                                        closeStagPopup();
+                                    }
+                                    else {
+                                        toastr.error(_data.message);
+                                    }
+                                }
+                                else {
+                                    toastr.error('Unable to update appointment!');
+                                }
+                                self.inProgress = false;
+                                hideMask();
+                            }, 'json');
+                        },
                     },
                     mounted: function() {
                         this.init();
+                        if(localStorage.stagCalendarTZ) {
+                            this.timezone = localStorage.stagCalendarTZ;
+                            Vue.nextTick(function() {
+                                $('#eventTz').trigger('change');
+                            });
+                        }
+                        if(localStorage.stagCalendarProIds) {
+                            this.proIds = JSON.parse(localStorage.stagCalendarProIds);
+                            Vue.nextTick(function() {
+                                $('#eventPros').trigger('change');
+                            });
+                        }
                     }
                 });
             }