Pro calendar - view appointment popup

app/Http/Controllers/AppointmentController.php

@@ -100,6 +100,7 @@ class AppointmentController extends Controller
                 "clientUid" => $appointment->client->uid,
                 "proId" => $appointment->pro->id,
                 "proUid" => $appointment->pro->uid,
+                "proName" => $appointment->pro->displayName(),
                 "start" => convertToTimezone($appointment->start_time, $timeZone),
                 "end" => convertToTimezone($appointment->end_time, $timeZone),
                 "clientOnly" => !in_array($appointment->pro->id, $proIds),

resources/views/app/practice-management/calendar.blade.php

@@ -247,7 +247,7 @@
         <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>
+                    <span>Appointment Details</span>
                     <a href="#" class="ml-auto text-secondary"
                        onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
                 </h3>
@@ -257,9 +257,10 @@
                         Patient
                     </div>
                     <div class="col-9 font-weight-bold">
-                        <input type="text"
-                               class="form-control form-control-sm"
-                               :value="editAppointment.clientName" readonly>
+                        @{{ editAppointment.clientName }}
+                        <a :href="'/patients/view/' + editAppointment.clientUid + '/calendar/' + editAppointment.uid" class="ml-2">
+                            <i class="fa fa-calendar"></i>
+                        </a>
                     </div>
                 </div>
                 <div class="row mb-2">
@@ -267,15 +268,7 @@
                         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>
+                        @{{ editAppointment.proName }}
                     </div>
                 </div>
                 <div class="row mb-2">
@@ -283,9 +276,7 @@
                         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">
+                        @{{ editAppointment.date }}
                     </div>
                 </div>
                 <div class="row mb-2">
@@ -293,9 +284,7 @@
                         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">
+                        @{{ editAppointment.startTime ? editAppointment.startTime : '-' }}
                     </div>
                 </div>
                 <div class="row mb-2">
@@ -303,9 +292,7 @@
                         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">
+                        @{{ editAppointment.endTime ? editAppointment.endTime : '-' }}
                     </div>
                 </div>
                 <input type="hidden" name="timeZone" :value="timezone">
@@ -314,9 +301,7 @@
                         Timezone
                     </div>
                     <div class="col-9 font-weight-bold">
-                        <input type="text"
-                               class="form-control form-control-sm"
-                               :value="timezone" readonly>
+                        @{{ timezone }}
                     </div>
                 </div>
                 <div class="row mb-2">
@@ -324,15 +309,7 @@
                         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>
+                        @{{ editAppointment.status ? editAppointment.status : '-' }}
                     </div>
                 </div>
                 <div class="row mb-2">
@@ -340,9 +317,7 @@
                         Title
                     </div>
                     <div class="col-9 font-weight-bold">
-                        <input type="text" name="title"
-                               class="form-control form-control-sm"
-                               v-model="editAppointment.title">
+                        @{{ editAppointment.title ? editAppointment.title : '-' }}
                     </div>
                 </div>
                 <div class="row mb-2">
@@ -350,17 +325,12 @@
                         Description
                     </div>
                     <div class="col-9 font-weight-bold">
-                        <textarea name="description"
-                                  class="form-control form-control-sm"
-                                  v-model="editAppointment.description"></textarea>
+                        @{{ editAppointment.description ? editAppointment.description : '-' }}
                     </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>
+                            onclick="return closeStagPopup()">Close</button>
                 </div>
             </form>
         </div>
@@ -398,7 +368,9 @@
                         // edit appt.
                         editAppointment: {
                             proUid: '',
+                            clientUid: '',
                             clientName: '',
+                            proName: '',
                             date: '',
                             startTime: '',
                             endTime: '',
@@ -733,9 +705,11 @@
                         },
                         showEditAppointmentModal: function() {
                             // setup model data
-                            /*this.inProgress = false;
+                            this.inProgress = false;
                             this.editAppointment.uid = this.selectedEvent.extendedProps.appointmentUid;
+                            this.editAppointment.clientUid = this.selectedEvent.extendedProps.clientUid;
                             this.editAppointment.clientName = this.selectedEvent.extendedProps.clientName;
+                            this.editAppointment.proName = this.selectedEvent.extendedProps.proName;
                             this.editAppointment.proUid = this.selectedEvent.extendedProps.proUid;
                             this.editAppointment.date = this.dateStr(this.selectedEvent.start);
                             this.editAppointment.startTime = this.timeStr(this.selectedEvent.start);
@@ -745,9 +719,9 @@
                             this.editAppointment.description = this.selectedEvent.extendedProps.description;
                             this.editAppointment.status = this.selectedEvent.extendedProps.status;
                             Vue.nextTick(function() {
-                                $('#editApptPro').trigger('change');
                                 showStagPopup('client-edit-appointment');
-                            });*/
+                                initFastLoad($('[stag-popup-key="client-edit-appointment"]'));
+                            });
                         },
                         updateAppointment: function() {
                             let form = $('#editApptForm');