Note - SOAP labels + segment indentation

public/css/style.css

@@ -2107,6 +2107,40 @@ body.in-iframe .main-row > .sidebar {
 .note-container .note-rhs-content {
     flex-grow: 1;
 }
+
+.note-container .segments-list .note-content-node>a {
+    display: block;
+    padding: 0.15rem 0;
+    padding-left: 0.75rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-decoration: none;
+    color: #333;
+}
+.note-container .segments-list>.note-content-node>a:not([data-non-segment-target]) {
+    font-weight: bold;
+    color: #333;
+}
+.note-container .segments-list .note-content-node>a:hover {
+    background-color: aliceblue;
+    color: #0d59af !important;
+}
+.note-container .segments-list .note-content-node:hover>a,
+.note-container .segments-list .note-content-node.hovered>a {
+    background-color: aliceblue;
+}
+.note-container .segments-list .note-content-node.active>a {
+    font-weight: bold !important;
+    color: #0d59af !important;
+}
+.note-container .segments-list .note-content-children>.note-content-node>a {
+    padding-left: 2rem;
+}
+.note-container .segments-list .note-content-children .note-content-children>.note-tree-node>a {
+    padding-left: 4rem;
+}
+
 .note-container .note-rhs-sidebar {
     min-width: 180px;
     max-width: 180px;

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

@@ -628,7 +628,7 @@
                   @if($isVisitTemplateBased && $doesVisitTemplateUiConfigExist)
 
                   @else
-                  <div class="p-2 border-bottom screen-only" data-non-segment-section="Prescriptions">
+                  <div class="p-2 border-bottom screen-only mt-3" data-non-segment-section="Prescriptions">
                     @include('app.patient.prescriptions.list', compact('patient', 'note'))
                   </div>
                   @endif

resources/views/app/patient/note/note-segment-list.blade.php

@@ -1,8 +1,45 @@
 <div class="segments-list" id="note-segments-list">
+
+    <?php
+    $previousHeading = null;
+    $previousSubHeading = null;
+    ?>
     @foreach($note->segments as $segment)
+        <?php
+//        if ($segment->subheading !== $previousSubHeading) {
+//            if (!empty($previousSubHeading)) {
+//                echo '</div></div>'; // <!-- end the previous parent section -->
+//            }
+//            if (!empty($segment->subheading)) {
+//                echo '<div class="note-content-node note-content-heading">' .
+//                    '<a class="c-pointer">' . $segment->subheading . '</a>' .
+//                    '<div class="note-content-children">'; // <!-- open new node -->
+//            }
+//            $previousSubHeading = $segment->subheading;
+//        }
+        if ($segment->heading !== $previousHeading) {
+            if (!empty($previousHeading)) {
+                echo '</div></div>'; // <!-- end the previous parent section -->
+            }
+            if (!empty($segment->heading)) {
+                echo '<div class="note-content-node note-content-heading">' .
+                    '<div class="py-2 px-3 border-top border-bottom font-size-14 font-weight-bold text-secondary bg-light mt-4">' . $segment->heading . '</div>' .
+                    '<div class="note-content-children ml-4 border-left">'; // <!-- open new node -->
+            }
+            $previousHeading = $segment->heading;
+        }
+        ?>
         <div class="{{$segment->segmentTemplate->internal_name === 'medrisk_vigilence' ? 'd-none' : ''}}">
             @include('app.patient.note.segment')
         </div>
     @endforeach
+    <?php
+//    if (!empty($previousSubHeading)) {
+//        echo '</div></div>'; // <!-- close any open parent section -->
+//    }
+    if (!empty($previousHeading)) {
+        echo '</div></div>'; // <!-- close any open parent section -->
+    }
+    ?>
 </div>
 @include('app.patient.note.segment_script')