Note section heading and grouping

public/css/style.css

@@ -41,6 +41,9 @@
 .text-warning-mellow {
     color: #d8a714!important;
 }
+.text-link {
+    color: rgb(13, 89, 175) !important;
+}
 .stag-primary-bg {
   background-color: var(--primary-color) !important;
   color: #fff;
@@ -1730,4 +1733,19 @@ form.non-interactive .form-content * {
     .stag-content .print-only {
         display: none !important;
     }
+}
+.child-sections>.note-section:not(.edit) {
+    position: relative;
+}
+.child-sections>.note-section:not(.edit):before {
+    content: '';
+    width: 9px;
+    border-top: 1px solid #ccc;
+    left: 0;
+    top: calc(1rem + 8px);
+    height: 1px;
+    position: absolute;
+}
+.child-sections>.note-section.edit {
+    margin-left: 1rem;
 }

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

@@ -81,9 +81,12 @@
                     .off('click.edit-trigger')
                     .on('click.edit-trigger', function() {
                         let editParent = $(this).closest('.note-section');
-                        editParent.toggleClass('edit');
                         if(editParent.is('.edit')) {
-                            editParent.siblings('.edit').removeClass('edit');
+                            editParent.removeClass('edit');
+                        }
+                        else {
+                            $('.note-section.edit').removeClass('edit');
+                            editParent.addClass('edit');
                             if(editParent.find('[autofocus]').length) {
                                 editParent.find('[autofocus]').first().focus();
                             }

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

@@ -1,5 +1,27 @@
 <?php $canvasData = json_decode($patient->canvas_data, true); ?>
+<?php $previousHeading = null; ?>
 @foreach($note->sections as $section)
+<?php
+/** @var \App\Models\Section $section */
+if($section->heading !== $previousHeading) {
+    if(!empty($previousHeading)) {
+        echo '</div></div>'; // <!-- end the previous parent section -->
+    }
+    if(!empty($section->heading)) {
+        echo '<div class="note-section-heading px-3 pt-3">' .
+            '<div class="text-link font-weight-bold pb-2">' .
+            $section->heading .
+            '</div>' .
+            '<div class="child-sections border-left">'; // <!-- open new parent section -->
+    }
+    $previousHeading = $section->heading;
+}
+?>
 @include('app.patient.note.section')
 @endforeach
+<?php
+if(!empty($previousHeading)) {
+    echo '</div></div>'; // <!-- close any open parent section -->
+}
+?>
 @include('app.patient.note.section_script')