Popup support for patient calendar

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

@@ -1,4 +1,4 @@
-@extends ('layouts.patient')
+@extends(request()->input('popupmode') ? 'layouts.popup' : 'layouts.patient')
 
 @section('inner-content')
 
@@ -62,6 +62,7 @@
     ?>
 
     {{-- appts list --}}
+    @if(!request()->input('popupmode'))
     <div class="">
         <div class="d-flex align-items-end pb-3">
             <h4 class="font-weight-bold m-0 font-size-16">{{ $patient->displayName() }}'s Appointments</h4>
@@ -113,8 +114,11 @@
             @endif
         </table>
     </div>
+    @endif
 
-    <div id="calendarApp">
+    <div id="calendarApp-{{$patient->id}}">
+
+        @if(!request()->input('popupmode'))
         <div class="d-flex align-items-center mb-2">
             <h4 class="font-weight-bold m-0 font-size-16">
                 {{ $patient->displayName() }}'s Calendar
@@ -151,7 +155,9 @@
                 </select>
             </div>
         </div>
+        @endif
         <div class="d-block appt-form">
+            @if(!request()->input('popupmode'))
             <form class="appt-form-col w-100 d-flex align-items-center mb-2">
                 <label class="mr-2 my-0 text-secondary text-nowrap">Show all appointments for</label>
                 <select id="eventPros" name="proUid"
@@ -160,6 +166,7 @@
                 </select>
             </form>
             <hr class="my-2">
+            @endif
             <div class="appt-calendar-col" :class="clickThruMode ? 'click-through' : ''">
                 <div class="stag-fc-container"></div>
             </div>
@@ -666,7 +673,7 @@
 
             function init() {
                 window.calendarApp = new Vue({
-                    el: '#calendarApp',
+                    el: '#calendarApp-{{$patient->id}}',
                     data: {
                         client: {!! json_encode($patient) !!},
                         eventTypes: '{{ $currentAppointment ? 'BOTH_ALL' : 'BOTH' }}',
@@ -1388,7 +1395,7 @@
                 });
             }
 
-            addMCInitializer('patient-calendar', init, '#calendarApp');
+            addMCInitializer('patient-calendar-{{$patient->id}}', init, '#calendarApp-{{$patient->id}}');
         })();
     </script>
 @endsection

resources/views/app/patient/note/dashboard.blade.php

@@ -341,6 +341,19 @@
                     Print
                 </a>
             </div>
+            @if($pro->pro_type === 'ADMIN' || $pro->is_enrolled_as_mcp)
+            <div class="px-2 border-left screen-only">
+                <a native target="_blank"
+                   open-in-stag-popup
+                   mc-initer="patient-calendar-{{$patient->id}}"
+                   title="Calendar: {{$patient->displayName()}}"
+                   popup-style="medium-large"
+                   href="{{route('patients.view.calendar', ['patient' => $patient])}}">
+                    <i class="fa fa-clock"></i>
+                    Book Appointment
+                </a>
+            </div>
+            @endif
 
             <div class="ml-auto d-flex align-items-start">
                 <div class="">