Sleep study - onupdate smooth behavior

app/Http/Controllers/PatientController.php

@@ -525,6 +525,10 @@ class PatientController extends Controller
         return view('app.patient.sleep-study', compact('patient'));
     }
 
+    public function sleepStudyStep(Request $request, Client $patient) {
+        return view('app.patient.sleep-study.' . $request->input('step'), compact('patient'));
+    }
+
     public function tickets(Request $request, Client $patient, $type = '', String $currentTicket = '') {
         $pros = $this->pros;
         $allPros = Pro::all();

public/css/style.css

@@ -3801,6 +3801,3 @@ table.v-top th {
     padding: 0.5rem 1.25rem;
     width: 250px;
 }
-.ss-content>[data-key] {
-    min-height: 100%;
-}

resources/views/app/patient/sleep-study.blade.php

@@ -9,7 +9,7 @@
 
         <div class="d-flex align-items-start m-neg-4" id="sleepStudyContainer">
             <div class="ss-leftnav border-right h-100 mh-100 overflow-overlay-on-hover">
-                <a href="#" data-target-key="sleep-apnea-background" class="d-block py-1 border-bottom text-nowrap bg-aliceblue font-weight-bold">Sleep Apnea Background</a>
+                <a href="#" data-target-key="sleep-apnea-background" class="d-block py-1 border-bottom text-nowrap bg-aliceblue font-weight-bold ss-active">Sleep Apnea Background</a>
                 <a href="#" data-target-key="signs-and-symptoms" class="d-block py-1 border-bottom text-nowrap">Signs &amp; Symptoms</a>
                 <a href="#" data-target-key="patient-interest" class="d-block py-1 border-bottom text-nowrap">Patient Interest</a>
                 <a href="#" data-target-key="insurance-coverage" class="d-block py-1 border-bottom text-nowrap">Insurance Coverage</a>
@@ -35,99 +35,99 @@
                 <a href="#" data-target-key="results-comm-to-doctors" class="d-block py-1 border-bottom text-nowrap">Results Comm. To Doctors</a>
             </div>
             <div class="ss-content flex-grow-1 h-100 mh-100 overflow-overlay-on-hover">
-                <div data-key="sleep-apnea-background">
+                <div class="border-bottom pb-2" data-key="sleep-apnea-background">
                     @include('app.patient.sleep-study.sleep-apnea-background')
                 </div>
 
-                <div data-key="signs-and-symptoms">
+                <div class="border-bottom pb-2" data-key="signs-and-symptoms">
                     @include('app.patient.sleep-study.signs-and-symptoms')
                 </div>
 
-                <div data-key="patient-interest">
+                <div class="border-bottom pb-2" data-key="patient-interest">
                     @include('app.patient.sleep-study.patient-interest')
                 </div>
 
-                <div data-key="insurance-coverage">
+                <div class="border-bottom pb-2" data-key="insurance-coverage">
                     @include('app.patient.sleep-study.insurance-coverage')
                 </div>
 
-                <div data-key="sleep-study-address">
+                <div class="border-bottom pb-2" data-key="sleep-study-address">
                     @include('app.patient.sleep-study.sleep-study-address')
                 </div>
 
-                <div data-key="manager">
+                <div class="border-bottom pb-2" data-key="manager">
                     @include('app.patient.sleep-study.manager')
                 </div>
 
-                <div data-key="medical-necessity">
+                <div class="border-bottom pb-2" data-key="medical-necessity">
                     @include('app.patient.sleep-study.medical-necessity')
                 </div>
 
-                <div data-key="study-instructions">
+                <div class="border-bottom pb-2" data-key="study-instructions">
                     <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Study Instructions</h4>
                 </div>
 
-                <div data-key="study-order">
+                <div class="border-bottom pb-2" data-key="study-order">
                     <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Study Order</h4>
                 </div>
 
-                <div data-key="study-authorization">
+                <div class="border-bottom pb-2" data-key="study-authorization">
                     <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Study Authorization</h4>
                 </div>
 
-                <div data-key="device-allocation">
+                <div class="border-bottom pb-2" data-key="device-allocation">
                     <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Device Allocation</h4>
                 </div>
 
-                <div data-key="shipment-to-manager">
+                <div class="border-bottom pb-2" data-key="shipment-to-manager">
                     <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Shipment To Manager</h4>
                 </div>
 
-                <div data-key="receipt-by-manager">
+                <div class="border-bottom pb-2" data-key="receipt-by-manager">
                     <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Receipt By Manager</h4>
                 </div>
 
-                <div data-key="shipment-to-client">
+                <div class="border-bottom pb-2" data-key="shipment-to-client">
                     <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Shipment To Client</h4>
                 </div>
 
-                <div data-key="receipt-by-client">
+                <div class="border-bottom pb-2" data-key="receipt-by-client">
                     <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Receipt By Client</h4>
                 </div>
 
-                <div data-key="app-installation">
+                <div class="border-bottom pb-2" data-key="app-installation">
                     <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">App Installation</h4>
                 </div>
 
-                <div data-key="patient-ready">
+                <div class="border-bottom pb-2" data-key="patient-ready">
                     <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Patient Ready</h4>
                 </div>
 
-                <div data-key="study-data-status">
+                <div class="border-bottom pb-2" data-key="study-data-status">
                     <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Study Data Status</h4>
                 </div>
 
-                <div data-key="manager-bill">
+                <div class="border-bottom pb-2" data-key="manager-bill">
                     <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Manager Bill</h4>
                 </div>
 
-                <div data-key="sleep-specialist">
+                <div class="border-bottom pb-2" data-key="sleep-specialist">
                     <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Sleep Specialist</h4>
                 </div>
 
-                <div data-key="watchpat-results">
+                <div class="border-bottom pb-2" data-key="watchpat-results">
                     <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">WatchPat Results</h4>
                 </div>
 
-                <div data-key="sleep-specialist-bill">
+                <div class="border-bottom pb-2" data-key="sleep-specialist-bill">
                     <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Sleep Specialist Bill</h4>
                 </div>
 
-                <div data-key="results-comm-to-patient">
+                <div class="border-bottom pb-2" data-key="results-comm-to-patient">
                     <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Results Comm. To Patient</h4>
                 </div>
 
-                <div data-key="results-comm-to-doctors">
+                <div class="border-bottom pb-2" data-key="results-comm-to-doctors">
                     <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Results Comm. To Doctors</h4>
                 </div>
 
@@ -151,14 +151,28 @@
                             inline: "start",
                             block: "start"
                         });*/
+                        let step = $('div[data-key="' + $(this).attr('data-target-key') + '"]');
                         $('.ss-content').scrollTop(0);
                         $('.ss-content').scrollTop(
-                            $('div[data-key="' + $(this).attr('data-target-key') + '"]').offset().top -
+                            step.offset().top -
                             $('.ss-content').offset().top
                         );
-                        $(this).addClass('bg-aliceblue font-weight-bold').siblings().removeClass('bg-aliceblue font-weight-bold');
+                        $(this).addClass('bg-aliceblue font-weight-bold ss-active').siblings().removeClass('bg-aliceblue font-weight-bold ss-active');
+                        step.addClass('spot-highlight');
+                        setTimeout(() => {
+                            step.removeClass('spot-highlight');
+                        }, 1500);
                         return false;
                     });
+
+                $(document)
+                    .off('mouseenter.ss-content', '.ss-content>[data-key]')
+                    .on('mouseenter.ss-content', '.ss-content>[data-key]', function() {
+                        let a = $('.ss-leftnav>a[data-target-key="' + $(this).attr('data-key') + '"]');
+                        if(a.length) {
+                            a.addClass('bg-aliceblue font-weight-bold ss-active').siblings().removeClass('bg-aliceblue font-weight-bold ss-active');
+                        }
+                    });
             }
             function adjustContainerHeight() {
                 let container = $('#sleepStudyContainer'),
@@ -170,6 +184,22 @@
                 });
             }
 
+            addMCHook('refreshSleepStudyStep', function() {
+                let step = $('a.ss-active').attr('data-target-key');
+                if(step) {
+                    $.get('{{route('patients.view.sleep-study-step', $patient)}}?step=' + step, _data => {
+                        let stepElem = $('div[data-key="' + step + '"]');
+                        stepElem.html(_data);
+                        stepElem.addClass('spot-highlight');
+                        setTimeout(() => {
+                            stepElem.removeClass('spot-highlight');
+                        }, 1500);
+                        initMoes();
+                    });
+                }
+                return false;
+            });
+
             addMCInitializer('sleepStudy', init, '#sleepStudyContainer');
         }).call(window);
     </script>

resources/views/app/patient/sleep-study/insurance-coverage.blade.php

@@ -2,7 +2,7 @@
     <h4 class="font-weight-bold text-nowrap m-0">Insurance Coverage</h4>
     <div moe class="ml-3">
         <a start show href="#"><i class="fa fa-edit"></i> Edit</a>
-        <form url="/api/client/updateWatchPatInsuranceCoverage">
+        <form url="/api/client/updateWatchPatInsuranceCoverage" hook="refreshSleepStudyStep">
             <input type="hidden" name="uid" value="{{$patient->uid}}">
             <div class="font-weight-bold font-size-14 text-secondary border-bottom pb-2 mb-2 text-nowrap">Insurance Coverage</div>
             <div class="mb-2">

resources/views/app/patient/sleep-study/manager.blade.php

@@ -2,12 +2,12 @@
     <h4 class="font-weight-bold text-nowrap m-0">Watchpat Manager Assignment</h4>
     <div moe class="ml-3">
         <a start show href="#"><i class="fa fa-edit"></i> Edit</a>
-        <form url="/api/client/updateWatchPatManagerAssignment">
+        <form url="/api/client/updateWatchPatManagerAssignment" hook="refreshSleepStudyStep">
             <input type="hidden" name="uid" value="{{$patient->uid}}">
             <div class="font-weight-bold font-size-14 text-secondary border-bottom pb-2 mb-2 text-nowrap">Watchpat Manager Assignment</div>
             <div class="mb-2">
                 <div class="mb-1">Manager Pro:</div>
-                <select name="watchPatManagerProUid" class="form-control form-control-sm" provider-search data-uid="{{@$patient->watchPatManagerPro->uid}}">
+                <select name="watchPatManagerProUid" class="form-control form-control-sm" provider-search data-pro-uid="{{@$patient->watchPatManagerPro->uid}}">
                     <option value="">-- select --</option>
                 </select>
             </div>
@@ -25,7 +25,7 @@
     </div>
 </div>
 
-<div class="px-3 py-1">
+<div class="px-3 pt-2 pb-1">
     Manager Pro: <b>{{$patient->watchPatManagerPro ? $patient->watchPatManagerPro->displayName() : '-'}}</b>
 </div>
 

resources/views/app/patient/sleep-study/medical-necessity.blade.php

@@ -2,7 +2,7 @@
     <h4 class="font-weight-bold text-nowrap m-0">Watchpat Medical Necessity</h4>
     <div moe class="ml-3">
         <a start show href="#"><i class="fa fa-edit"></i> Edit</a>
-        <form url="/api/client/updateWatchPatMedicalNecessity">
+        <form url="/api/client/updateWatchPatMedicalNecessity" hook="refreshSleepStudyStep">
             <input type="hidden" name="uid" value="{{$patient->uid}}">
             <div class="font-weight-bold font-size-14 text-secondary border-bottom pb-2 mb-2 text-nowrap">Watchpat Medical Necessity</div>
 

resources/views/app/patient/sleep-study/patient-interest.blade.php

@@ -2,7 +2,7 @@
     <h4 class="font-weight-bold text-nowrap m-0">Patient Interest</h4>
     <div moe class="ml-3">
         <a start show href="#"><i class="fa fa-edit"></i> Edit</a>
-        <form url="/api/client/updateWatchPatPatientInterest">
+        <form url="/api/client/updateWatchPatPatientInterest" hook="refreshSleepStudyStep">
             <input type="hidden" name="uid" value="{{$patient->uid}}">
             <div class="font-weight-bold font-size-14 text-secondary border-bottom pb-2 mb-2 text-nowrap">Patient Interest</div>
             <div class="mb-2">

resources/views/app/patient/sleep-study/signs-and-symptoms.blade.php

@@ -2,7 +2,7 @@
     <h4 class="font-weight-bold text-nowrap m-0">Watchpat Signs &amp; Symptoms</h4>
     <div moe class="ml-3">
         <a start show href="#"><i class="fa fa-edit"></i> Edit</a>
-        <form url="/api/client/updateWatchPatSignsAndSymptoms">
+        <form url="/api/client/updateWatchPatSignsAndSymptoms" hook="refreshSleepStudyStep">
             <input type="hidden" name="uid" value="{{$patient->uid}}">
             <div class="font-weight-bold font-size-14 text-secondary border-bottom pb-2 mb-2 text-nowrap">Watchpat Signs &amp; Symptoms</div>
             <div class="mb-2">

resources/views/app/patient/sleep-study/sleep-apnea-background.blade.php

@@ -2,7 +2,7 @@
     <h4 class="font-weight-bold text-nowrap m-0">Sleep Apnea Background</h4>
     <div moe center huge-1100 class="ml-3">
         <a start show href="#"><i class="fa fa-edit"></i> Edit</a>
-        <form url="/api/client/updateSleepApneaBackground">
+        <form url="/api/client/updateSleepApneaBackground" hook="refreshSleepStudyStep">
             <input type="hidden" name="uid" value="{{$patient->uid}}">
             <div class="font-weight-bold font-size-14 text-secondary border-bottom px-2 pb-2 mb-2">Sleep Apnea Background</div>
             <div class="row mx-0">

resources/views/app/patient/sleep-study/sleep-study-address.blade.php

@@ -2,7 +2,7 @@
     <h4 class="font-weight-bold text-nowrap m-0">Sleep Study Address</h4>
     <div moe class="ml-3">
         <a start show href="#"><i class="fa fa-edit"></i> Edit</a>
-        <form url="/api/client/updateHomeAddressForWatchPatStudy">
+        <form url="/api/client/updateHomeAddressForWatchPatStudy" hook="refreshSleepStudyStep">
             <input type="hidden" name="uid" value="{{$patient->uid}}">
             <div class="font-weight-bold font-size-14 text-secondary border-bottom pb-2 mb-2 text-nowrap">Sleep Study Address</div>
 

routes/web.php

@@ -593,6 +593,7 @@ Route::middleware('pro.auth')->group(function () {
 
             // sleep study
             Route::get('sleep-study/{filter?}', 'PatientController@sleepStudy')->name('sleep-study');
+            Route::get('sleep-study-step', 'PatientController@sleepStudyStep')->name('sleep-study-step');
 
             // tickets (old/deprecated)
             Route::get('tickets/{type?}/{currentTicket?}', 'PatientController@tickets')->name('patient-tickets');