Visit UI - left nav tree

app/Models/Note.php

@@ -105,4 +105,8 @@ class Note extends Model
         return $this->hasOne(NotePickupForProcessing::class, 'id', 'current_note_pickup_for_processing_id');
     }
 
+    public function visitTemplate()
+    {
+        return $this->hasOne(VisitTemplate::class, 'id', 'visit_template_id');
+    }
 }

public/css/style.css

@@ -1941,3 +1941,61 @@ body.in-iframe .main-row > .sidebar {
 [visit-moe][bottom] form {
     bottom: 100%;
 }
+.note-container {
+    display: flex;
+    align-items: start;
+}
+.note-container .note-lhs-tree {
+    min-width: 220px;
+    max-width: 220px;
+    align-self: stretch;
+    border-right: 1px solid #ddd;
+    padding-top: 0.85rem;
+    height: 300px;
+    overflow: overlay;
+    max-height: calc(100vh - 55px);
+    background-color: #fff;
+}
+.note-container .note-lhs-tree.fixed {
+    position: fixed;
+    top: 55px;
+    max-height: calc(100vh - 55px) !important;
+    height: calc(100vh - 55px) !important;
+}
+.note-container .note-lhs-tree.fixed ~ .note-rhs-content {
+    margin-left: 220px;
+}
+.note-container .note-lhs-tree .note-tree-node.note-tree-heading>a {
+
+}
+.note-container .note-lhs-tree .note-tree-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 .note-lhs-tree .note-tree-node>a:hover {
+    background-color: aliceblue;
+    color: #0d59af !important;
+}
+.note-container .note-lhs-tree .note-tree-node.active>a {
+    background-color: aliceblue;
+    font-weight: bold !important;
+    color: #0d59af !important;
+}
+.note-container .note-lhs-tree .note-tree-children>.note-tree-node>a {
+    padding-left: 2rem;
+}
+.note-container .note-lhs-tree .note-tree-children .note-tree-children>.note-tree-node>a {
+    padding-left: 4rem;
+}
+.note-container .note-rhs-content {
+    flex-grow: 1;
+}
+.spot-highlight {
+    background: aliceblue !important;
+}

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

@@ -36,7 +36,7 @@
     @endif
     --}}
 
-    <div id="note-single-header" class="pt-2 pb-3 d-flex align-items-start screen-only">
+    <div id="note-single-header" class="pb-3 d-flex align-items-start screen-only">
         <h6 class="my-0 text-secondary d-flex align-items-center w-100">
             <a href="/patients/view/{{ $patient->uid }}/notes" class="small text-decoration-none mr-3">
                 <i class="fa fa-chevron-left"></i>
@@ -50,10 +50,10 @@
                     <?php
                     $isBad = false;
                     $isGood = false;
-		    if($note->detail_json) {
+		            if($note->detail_json) {
                         $parsed = json_decode($note->detail_json);
                         $isBad = $parsed && @$parsed->isBad;
-			$isGood = $parsed && @$parsed->isGood;
+			            $isGood = $parsed && @$parsed->isGood;
                     }
                     ?>
                     @if(!$isBad)
@@ -83,7 +83,7 @@
                     @endif
 		     @if(!$isGood)
                         <div moe relative>
-                            <a href="#" start show  class="print-note ml-2 btn btn-sm btn-success text-white font-weight-bold invisible"><i class="fa fa-exclamation-triangle"></i> Mark as Good Note</a>
+                            <a href="#" start show  class="print-note ml-2 btn btn-sm btn-success text-white font-weight-bold invisible"><i class="fa fa-check"></i> Mark as Good Note</a>
                             <form url="/api/note/markNoteAsGood" class="mcp-theme-1">
                                 <input type="hidden" name="uid" value="{{$note->uid}}">
                                 <p class="min-width-200px">Mark this note as <b>good</b>?</p>
@@ -130,8 +130,8 @@
         </h6>
     </div>
 
-    <div class="card mb-0 {{ $note->is_cancelled ? 'cancelled-item' : '' }}">
-        <span class="card-header d-flex align-items-start px-3 py-2 border-bottom">
+    <span class="card mb-0 {{ $note->is_cancelled ? 'cancelled-item' : '' }}">
+        <div class="card-header d-flex align-items-start px-3 py-2 border-bottom" id="note-card-header">
             <div class="pr-2">
                 {{$note->title}}
                 @if(!$note->is_signed_by_hcp || $pro->pro_type === 'ADMIN')
@@ -207,9 +207,6 @@
                                 <select provider-search data-pro-uid="{{ @$note->hcpPro->uid }}"
                                         name="hcpProUid" class="form-control form-control-sm">
                                     <option value="">-- Select HCP Pro --</option>
-                                    @foreach ($pros as $iPro)
-                                        <option value="{{$iPro->uid}}" {{ $note->hcpPro && $iPro->id === $note->hcpPro->id ? 'selected' : '' }}>{{$iPro->name_display}}</option>
-                                    @endforeach
                                 </select>
                             </div>
                             <div class="mb-0">
@@ -436,6 +433,51 @@
             </div>
         </div>
         <div class="card-body p-0">
+            <div class="note-container">
+                <div class="note-lhs-tree" id="note-lhs-tree">
+                    <?php
+                    $previousHeading = null;
+                    $previousSubHeading = null;
+                    ?>
+                    @foreach($note->segments as $segment)
+                        <?php
+                        if ($segment->heading !== $previousHeading) {
+                            if (!empty($previousHeading)) {
+                                echo '</div></div>'; // <!-- end the previous parent section -->
+                            }
+                            if (!empty($segment->heading)) {
+                                echo '<div class="note-tree-node note-tree-heading">' .
+                                    '<a class="">' . $segment->heading . '</a>' .
+                                    '<div class="note-tree-children">'; // <!-- open new node -->
+                            }
+                            $previousHeading = $segment->heading;
+                        }
+                        if ($segment->subheading !== $previousSubHeading) {
+                            if (!empty($previousSubHeading)) {
+                                echo '</div></div>'; // <!-- end the previous parent section -->
+                            }
+                            if (!empty($segment->subheading)) {
+                                echo '<div class="note-tree-node note-tree-heading">' .
+                                    '<a class="">' . $segment->subheading . '</a>' .
+                                    '<div class="note-tree-children">'; // <!-- open new node -->
+                            }
+                            $previousSubHeading = $segment->subheading;
+                        }
+                        echo '<div class="note-tree-node">' .
+                            '<a native target="_top" data-segment-uid="' . $segment->uid . '" href="#" >' . $segment->display_title . '</a>' .
+                            '</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>
+                <div class="note-rhs-content">
             <div>
                 <div class="">
                     <div>
@@ -2168,108 +2210,53 @@
                 </div>
 
 
+            </div>
+                </div>
             </div>
         </div>
     </div>
     <div class="note-templates-underlay"></div>
     @include('app.patient.note.dashboard_script')
     @include('app.patient.canvas-sections.canvas-editor-modal', ['key' => 'rx', 'class' => 'wide', 'noEditLink' => true])
-@endsection
-@section('left-nav-content')
-    @if(!$note->is_signed_by_hcp)
-    <div class="left-nav-content" id="note-sections-app">
-        <div class="note-widget-title px-2 py-1">Note Sections</div>
-        <input type="search" class="d-block w-100 border-0 outline-0 px-2 py-1"
-               v-model="q" placeholder="Filter">
-        <div class="border-top py-1">
-            <div v-for="section in sections"
-                 v-show="section.title.toLowerCase().indexOf(q.toLowerCase()) !== -1">
-                <div class="d-flex pr-1 align-items-center note-widget-item c-pointer"
-                     :title="section.title + ' - Click to remove'"
-                     v-if="section.used"
-                     v-on:click.once="remove(section.section_uid)">
-                    <span class="mx-2">
-                        <a class="font-12 text-secondary" href="#">
-                            <i class="fa fa-minus-circle"></i>
-                        </a>
-                    </span>
-                    <span class="font-smaller text-ellipsis">
-                        @{{section.title}}
-                    </span>
-                </div>
-                <div class="d-flex pr-1 align-items-center note-widget-item c-pointer"
-                     :title="section.title + ' - Click to add'"
-                     v-if="!section.used"
-                     v-on:click.once="add(section.uid, section.internal_name)">
-                    <span class="mx-2">
-                        <a class="font-12" href="#">
-                            <i class="fa fa-plus-circle"></i>
-                        </a>
-                    </span>
-                    <span class="font-smaller text-ellipsis">
-                        @{{section.title}}
-                    </span>
-                </div>
-            </div>
-        </div>
-    </div>
-    <script>
+        <script>
         (function() {
-            function initSectionsWidget() {
-                var allSections = <?= json_encode($allSections) ?>;
-                new Vue({
-                    el: '#note-sections-app',
-                    delimiters: ['@{{', '}}'],
-                    data: {
-                        q: '',
-                        sections: allSections
-                    },
-                    methods: {
-                        add: function(_uid, _section) {
-                                $.post('/api/section/create', {
-                                    noteUid: '{{$note->uid}}',
-                                    sectionTemplateUid: _uid,
-                                }, function(_data) {
-                                    if(_data) {
-                                        if(_data.success) {
-                                            fastReload();
-                                        }
-                                        else {
-                                            toastr.error(_data.message);
-                                        }
-                                    }
-                                    else {
-                                        toastr.error('Unable to add section!');
-                                    }
-                                }, 'json');
-                        },
-                        remove: function(_uid) {
-                            $.post('/api/section/deactivate', {
-                                uid: _uid,
-                                memo: 'Deactivated from note',
-                            }, function(_data) {
-                                if(_data) {
-                                    if(_data.success) {
-                                        fastReload();
-                                    }
-                                    else {
-                                        toastr.error(_data.message);
-                                    }
-                                }
-                                else {
-                                    toastr.error('Unable to remove section!');
-                                }
-                            }, 'json');
+            function init() {
+                fixTreeTopAndHeight();
+                $(window).on('resize', fixTreeTopAndHeight);
+                $(window).on('scroll', fixTreeTopAndHeight);
+                $('.note-tree-node>a[data-segment-uid]')
+                    .off('click.scroll-to-section')
+                    .on('click.scroll-to-section', function() {
+                        let section = $('div.note-section[data-segment-uid="' + $(this).attr('data-segment-uid') + '"]').first();
+                        if(section.length) {
+                            section[0].scrollIntoView({
+                                behavior: "smooth",
+                                block: "center",
+                                inline: "center"
+                            });
+                            section.addClass('spot-highlight');
+                            setTimeout(() => {
+                                section.removeClass('spot-highlight');
+                            }, 1500);
+                            $('.note-tree-node.active').removeClass('active');
+                            $(this).closest('.note-tree-node').addClass('active');
                         }
-                    }
-                });
-
-                $('div[embed]').each(function() {
-                    $(this).load($(this).attr('embed'));
-                });
+                        return false;
+                    });
+            }
+            function fixTreeTopAndHeight() {
+                let tree = $('#note-lhs-tree'), noteCardHeader = $('#note-card-header'),
+                    resultTop = (noteCardHeader.offset().top + noteCardHeader.outerHeight(true)) - $(window).scrollTop();
+                if(resultTop <= 55) {
+                    tree.addClass('fixed');
+                }
+                else {
+                    tree.removeClass('fixed');
+                    tree.css('height', 'calc(100vh - ' + resultTop + 'px)');
+                    tree.css('max-height', 'calc(100vh - ' + resultTop + 'px)');
+                }
             }
-            addMCInitializer('note-sections-widget', initSectionsWidget, '#note-sections-app');
+            addMCInitializer('note-tree', init, '#note-lhs-tree');
         })();
     </script>
-    @endif
 @endsection