Note - rhs sidebar - impl (wip)

public/css/style.css

@@ -313,6 +313,9 @@ body>nav.navbar {
 .mcp-theme-1 .width-90px {
     width: 90px !important;
 }
+.mcp-theme-1 .min-width-110px {
+    min-width: 110px !important;
+}
 .mcp-theme-1 .min-width-140px {
     min-width: 140px !important;
 }
@@ -2061,6 +2064,7 @@ body.in-iframe .main-row > .sidebar {
 }
 .note-container .note-lhs-tree.fixed ~ .note-rhs-content {
     margin-left: 220px;
+    margin-right: 180px;
 }
 .note-container .note-lhs-tree .note-tree-node.note-tree-heading>a {
 
@@ -2101,8 +2105,8 @@ body.in-iframe .main-row > .sidebar {
     flex-grow: 1;
 }
 .note-container .note-rhs-sidebar {
-    min-width: 220px;
-    max-width: 220px;
+    min-width: 180px;
+    max-width: 180px;
     align-self: stretch;
     border-right: 1px solid #ddd;
     padding-top: 0.85rem;
@@ -2123,7 +2127,7 @@ body.in-iframe .main-row > .sidebar {
     z-index: 1;
 }
 .note-container .note-rhs-sidebar.fixed ~ .note-rhs-content {
-    margin-right: 220px;
+    margin-right: 180px;
 }
 .spot-highlight {
     background: aliceblue !important;

resources/views/app/patient/note/rhs-sidebar.blade.php

@@ -5,7 +5,17 @@ $problems = \App\Models\Point::getPointsOfCategory($patient, "PROBLEM");
 $goals = \App\Models\Point::getPointsOfCategory($patient, "GOAL");
 ?>
 <div id="active-allergies" class="px-2 pb-2 border-bottom mb-2">
-    <div class="font-weight-bold mb-2">Allergies</div>
+    <div class="font-weight-bold mb-2">Allergies
+        <a native target="_blank"
+             class="c-pointer pl-1 text-primary"
+             open-in-stag-popup
+             mc-initer="allergies-center-{{$note->id}}"
+             title="Allergies Center"
+             popup-style="wide overflow-visible"
+             href="/allergies-center/{{$patient->uid}}/{{$note->uid}}">
+            <i class="fa fa-bolt mr-1"></i>
+        </a>
+    </div>
     @if($allergies && count($allergies))
         @foreach($allergies as $allergy)
             <?php $rel = $allergy->relevanceToNote($note); ?>
@@ -19,7 +29,17 @@ $goals = \App\Models\Point::getPointsOfCategory($patient, "GOAL");
     @endif
 </div>
 <div id="active-medications" class="px-2 pb-2 border-bottom mb-2">
-    <div class="font-weight-bold mb-2">Medications</div>
+    <div class="font-weight-bold mb-2">Medications
+        <a native target="_blank"
+           class="c-pointer pl-1 text-primary"
+           open-in-stag-popup
+           mc-initer="medications-center-{{$note->id}}"
+           title="Medications Center"
+           popup-style="wide overflow-visible"
+           href="/medications-center/{{$patient->uid}}/{{$note->uid}}">
+            <i class="fa fa-bolt mr-1"></i>
+        </a>
+    </div>
     @if($medications && count($medications))
         @foreach($medications as $medication)
             <?php $rel = $medication->relevanceToNote($note); ?>
@@ -33,7 +53,17 @@ $goals = \App\Models\Point::getPointsOfCategory($patient, "GOAL");
     @endif
 </div>
 <div id="active-problems" class="px-2 pb-2 border-bottom mb-2">
-    <div class="font-weight-bold mb-2">Problems</div>
+    <div class="font-weight-bold mb-2">Problems
+        <a native target="_blank"
+           class="c-pointer pl-1 text-primary"
+           open-in-stag-popup
+           mc-initer="problems-center-{{$note->id}}"
+           title="Problems Center"
+           popup-style="wide overflow-visible"
+           href="/problems-center/{{$patient->uid}}/{{$note->uid}}">
+            <i class="fa fa-bolt mr-1"></i>
+        </a>
+    </div>
     @if($problems && count($problems))
         @foreach($problems as $problem)
             <?php $rel = $problem->relevanceToNote($note); ?>
@@ -47,7 +77,17 @@ $goals = \App\Models\Point::getPointsOfCategory($patient, "GOAL");
     @endif
 </div>
 <div id="active-goals" class="px-2 pb-2 border-bottom mb-2">
-    <div class="font-weight-bold mb-2">Goals</div>
+    <div class="font-weight-bold mb-2">Goals
+        <a native target="_blank"
+           class="c-pointer pl-1 text-primary"
+           open-in-stag-popup
+           mc-initer="goals-center-{{$note->id}}"
+           title="Goals Center"
+           popup-style="wide overflow-visible"
+           href="/goals-center/{{$patient->uid}}/{{$note->uid}}">
+            <i class="fa fa-bolt mr-1"></i>
+        </a>
+    </div>
     @if($goals && count($goals))
         @foreach($goals as $goal)
             <?php $rel = $goal->relevanceToNote($note); ?>

resources/views/app/patient/prescriptions/list.blade.php

@@ -48,7 +48,7 @@
                         @{{prescription.created_at_friendly_short}}
                     </a>
                     @if(@$note)
-                        <div v-if="prescription.note_id === {{$note->id}}" class="text-info mt-1">* Create on this note</div>
+                        <div v-if="prescription.note_id === {{$note->id}}" class="text-info mt-1 text-nowrap">* Created on this note</div>
                     @endif
                     <div v-if="prescription.pro_declared_status === 'CANCELLED'" class="text-secondary font-weight-bold mt-1 text-sm d-flex align-items-baseline">
                         <i class="fa fa-ban mr-1 text-sm"></i>
@@ -128,7 +128,7 @@
             </tr>
             </tbody>
         </table>
-        <div v-if="currentPrescription" class="min-width-700px ml-2 border align-self-stretch p-3">
+        <div v-if="currentPrescription" class="ml-2 border align-self-stretch p-3 flex-grow-1">
             <div class="d-flex align-items-center">
                 <h3 class="font-size-16 m-0">
                     <span class="mr-1 font-size-16">@{{ currentPrescription.erx_category }} / @{{ currentPrescription.created_at_friendly_short }}</span>
@@ -139,22 +139,22 @@
             </div>
             <hr class="my-3">
             <div class="pb-2 d-flex align-items-start">
-                <span class="min-width-140px text-secondary text-sm">Created</span>
+                <span class="min-width-110px text-secondary text-sm">Created</span>
                 <div>
-                    <span>@{{currentPrescription.created_at_friendly}}</span>
+                    <span class="text-nowrap">@{{currentPrescription.created_at_friendly}}</span>
                     @if(@$note)
-                        <div v-if="currentPrescription.note_id === {{$note->id}}" class="text-info mt-1 font-weight-bold">* Create on this note</div>
+                        <div v-if="currentPrescription.note_id === {{$note->id}}" class="text-info mt-1 font-weight-bold text-nowrap">* Created on this note</div>
                     @endif
                 </div>
             </div>
             @if(!request()->input('erx_category'))
             <div class="pb-2 d-flex align-items-center">
-                <span class="min-width-140px text-secondary text-sm">Type</span>
+                <span class="min-width-110px text-secondary text-sm">Type</span>
                 <span>@{{currentPrescription.erx_category}}</span>
             </div>
             @endif
             <div class="pb-2 d-flex align-items-baseline" v-if="currentPrescription.erx_category !== 'DRUG'">
-                <span class="min-width-140px text-secondary text-sm">Clinical</span>
+                <span class="min-width-110px text-secondary text-sm">Clinical</span>
                 <div class="d-inline-flex align-items-baseline flex-grow-1">
                     <a v-if="!currentPrescription.has_hcp_pro_signed" class="mr-2" href="#" v-on:click.prevent="editClinicalDetails(currentPrescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
                     <span v-else class="mr-2" title="Cannot edit. Prescription already signed."><i class="fa fa-edit on-hover-opaque text-secondary"></i></span>
@@ -197,7 +197,7 @@
                 </div>
             </div>
             <div class="pb-2 d-flex align-items-baseline" v-if="currentPrescription.erx_category === 'DRUG'">
-                <span class="min-width-140px text-secondary text-sm">Medications</span>
+                <span class="min-width-110px text-secondary text-sm">Medications</span>
                 <div class="flex-grow-1">
 
                     <div v-if="currentPrescription.clinical_detail_json">
@@ -221,10 +221,9 @@
                     </div>
 
                     @if(@$note)
-                    <div class="d-flex align-items-baseline" v-if="!currentPrescription.has_hcp_pro_signed">
-                        <a href="#" v-on:click.prevent="setAddMode('existing')">+ Existing Medication</a>
-                        <span class="mx-2">|</span>
-                        <a href="#" v-on:click.prevent="setAddMode('new')">+ New Medication</a>
+                    <div class="" v-if="!currentPrescription.has_hcp_pro_signed">
+                        <a href="#" class="d-block mb-1" v-on:click.prevent="setAddMode('existing')">+ Existing</a>
+                        <a href="#" class="d-block mb-1" v-on:click.prevent="setAddMode('new')">+ New</a>
                     </div>
                     @endif
                 </div>
@@ -239,12 +238,12 @@
                 <table class="m-0 table table-sm border bg-white table-hover">
                     <tr>
                         <th>Medication</th>
-                        <th>Dispense</th>
+                        <th>Disp.</th>
                         <th>Refills</th>
                         <th>&nbsp;</th>
                     </tr>
                     <tr v-for="drug in existingDrugs" v-if="notAlreadyAdded(drug.data.name)">
-                        <td class="min-width-200px">@{{ drug.data.name }}</td>
+                        <td class="">@{{ drug.data.name }}</td>
                         <td class="width-70px py-0 pr-0"><input type="text" class="form-control form-control-sm min-width-unset rounded-0 border-top-0 border-bottom-0 border-right-0 shadow-none" v-model="drug.data.dispense"></td>
                         <td class="width-70px py-0 pl-0"><input type="text" class="form-control form-control-sm min-width-unset rounded-0 border-top-0 border-bottom-0 shadow-none" v-model="drug.data.refills"></td>
                         <td class="text-right">
@@ -278,17 +277,17 @@
                     <div class="row mb-2">
                         <div class="col-12">
                             <label class="text-sm text-secondary mb-0">Name</label>
-                            <input type="text" data-name="name" class="form-control form-control-sm" stag-suggest="" stag-suggest-bottom-left="" stag-suggest-ep="/fdb-med-suggest-v2/json" required="" stag-suggest-initialized="1"><div class="stag-suggestions-container position-relative"><div class="suggestions-outer stag-suggestions position-absolute d-none"></div></div>
+                            <input type="text" data-name="name" class="form-control form-control-sm min-width-unset" stag-suggest="" stag-suggest-bottom-left="" stag-suggest-ep="/fdb-med-suggest-v2/json" required="" stag-suggest-initialized="1"><div class="stag-suggestions-container position-relative"><div class="suggestions-outer stag-suggestions position-absolute d-none"></div></div>
                         </div>
                     </div>
                     <div class="row mb-2">
                         <div class="col-4 pr-0">
                             <label class="text-sm text-secondary mb-0">Dispense</label>
-                            <input type="text" class="form-control form-control-sm" name="dispense" autocomplete="off">
+                            <input type="text" class="form-control form-control-sm min-width-unset" name="dispense" autocomplete="off">
                         </div>
                         <div class="col-4 pr-0">
                             <label class="text-sm text-secondary mb-0">Refills</label>
-                            <input type="text" class="form-control form-control-sm" name="refills" autocomplete="off">
+                            <input type="text" class="form-control form-control-sm min-width-unset" name="refills" autocomplete="off">
                         </div>
                     </div>
 
@@ -301,10 +300,10 @@
 
             <hr class="my-3">
             <div class="pb-2 d-flex align-items-center">
-                <span v-if="currentPrescription.erx_category === 'DRUG'" class="min-width-140px text-secondary text-sm">Pharmacy</span>
-                <span v-else-if="currentPrescription.erx_category === 'LAB'" class="min-width-140px text-secondary text-sm">Lab</span>
-                <span v-else-if="currentPrescription.erx_category === 'IMAGING'" class="min-width-140px text-secondary text-sm">Lab</span>
-                <span v-else class="min-width-140px text-secondary text-sm">Logistics</span>
+                <span v-if="currentPrescription.erx_category === 'DRUG'" class="min-width-110px text-secondary text-sm">Pharmacy</span>
+                <span v-else-if="currentPrescription.erx_category === 'LAB'" class="min-width-110px text-secondary text-sm">Lab</span>
+                <span v-else-if="currentPrescription.erx_category === 'IMAGING'" class="min-width-110px text-secondary text-sm">Lab</span>
+                <span v-else class="min-width-110px text-secondary text-sm">Logistics</span>
                 <div class="d-inline-flex align-items-baseline flex-grow-1">
                     <a class="mr-2" href="#" v-on:click.prevent="editLogisticsDetails(currentPrescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
                     <div v-if="currentPrescription.logistics_detail_json" class="d-flex align-items-baseline">
@@ -318,7 +317,7 @@
                 </div>
             </div>
             <div class="pb-2 d-flex align-items-center">
-                <span class="min-width-140px text-secondary text-sm">Prescribed By</span>
+                <span class="min-width-110px text-secondary text-sm">Prescribed By</span>
                 <div class="d-inline-flex align-items-baseline flex-grow-1">
                     <a v-if="!currentPrescription.has_hcp_pro_signed" class="mr-2" href="#" v-on:click.prevent="editHcpPro(currentPrescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
                     <span v-else class="mr-2" title="Cannot edit. Prescription already signed."><i class="fa fa-edit on-hover-opaque text-secondary"></i></span>
@@ -326,7 +325,7 @@
                 </div>
             </div>
             <div class="pb-2 d-flex align-items-center">
-                <span class="min-width-140px text-secondary text-sm">Sign</span>
+                <span class="min-width-110px text-secondary text-sm">Sign</span>
                 <div v-if="currentPrescription.has_hcp_pro_signed" class="d-inline-flex align-items-baseline">
                     <i class="text-secondary fa fa-check mr-1"></i>
                     <span class="text-secondary">Signed</span>
@@ -339,7 +338,7 @@
                 </div>
             </div>
             <div class="pb-2 d-flex align-items-center">
-                <span class="min-width-140px text-secondary text-sm">Prescription Status</span>
+                <span class="min-width-110px text-secondary text-sm">Prescription Status</span>
                 <div class="d-inline-flex align-items-baseline">
                     <a class="mr-2" href="#" v-on:click.prevent="editProStatus(currentPrescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
                     <div v-if="currentPrescription.pro_declared_status" class="d-flex align-items-baseline">
@@ -349,7 +348,7 @@
                 </div>
             </div>
             <div class="pb-2 d-flex align-items-center">
-                <span class="min-width-140px text-secondary text-sm">Client Status</span>
+                <span class="min-width-110px text-secondary text-sm">Client Status</span>
                 <div class="d-inline-flex align-items-baseline">
                     <a class="mr-2" href="#" v-on:click.prevent="editClientStatus(currentPrescription)"><i class="fa fa-edit on-hover-opaque"></i></a>
                     <div v-if="currentPrescription.client_declared_status" class="d-flex align-items-baseline">
@@ -358,16 +357,15 @@
                     <div v-else>-</div>
                 </div>
             </div>
-            <div class="pb-2 d-flex align-items-center">
-                <span class="min-width-140px text-secondary text-sm">PDF</span>
-                <div class="d-inline-flex align-items-baseline">
-                    <a class="pdf-viewer-trigger" native target="_blank"
+            <div class="pb-2 d-flex align-items-start">
+                <span class="min-width-110px text-secondary text-sm">PDF</span>
+                <div class="">
+                    <a class="pdf-viewer-trigger d-block mb-1" native target="_blank"
                        :href="'/prescription-download-as-pdf/' + currentPrescription.uid">View</a>
-                    <span class="mx-2 text-secondary">|</span>
-                    <a native target="_blank"
+                    <a native target="_blank" class="d-block mb-1"
                        :href="'/prescription-download-as-pdf/' + currentPrescription.uid">Download</a>
-                    <span class="mx-2 text-secondary">|</span>
-                    <a href="#" v-on:click.prevent="transmit(currentPrescription)">Transmit</a>
+                    <a href="#" class="d-block mb-1"
+                       v-on:click.prevent="transmit(currentPrescription)">Transmit</a>
                 </div>
             </div>
             <div v-if="!currentPrescription.has_hcp_pro_signed">