Note sections - templates support [WIP]

app/Helpers/helpers.php

@@ -87,3 +87,33 @@ if(!function_exists('sanitize_field_name')) {
         return preg_replace("/[^0-9a-z]/i", "_", $result);
     }
 }
+
+if(!function_exists('renderNoteTemplates')) {
+
+    function _renderNoteTemplate($template, $topLevel) {
+        echo
+            '<div class="note-template-item" template="' . @$template->template . '">' .
+            '<div class="note-template-text"><span class="label">' . $template->text . '</span></div>';
+        if(isset($template->children) && count($template->children)) {
+            echo '<i class="fa fa-chevron-right has-children"></i>';
+            echo '<div class="note-template-children">';
+            foreach ($template->children as $t) {
+                _renderNoteTemplate($t, false);
+            }
+            echo '</div>';
+        }
+        echo '</div>';
+    }
+
+    function renderNoteTemplates($path) {
+        $templates = json_decode(file_get_contents($path));
+//        echo '<pre class="border my-3">';
+//        print_r($templates);
+//        echo '</pre>';
+        echo '<div class="note-template-container">';
+        foreach ($templates as $template) {
+            _renderNoteTemplate($template, true);
+        }
+        echo '</div>';
+    }
+}

public/css/style.css

@@ -431,3 +431,65 @@ input.search_field, textarea.search_field {
 .large {
     font-size: 16px !important;
 }
+
+
+/* note templates */
+.note-template-container {
+    position: absolute;
+    z-index: 999;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    display: none;
+}
+.note-template-container .note-template-item {
+    position: relative;
+    height: 25px;
+}
+.note-template-container .note-template-item .label {
+    padding: 3px 6px;
+    padding-right: 25px;
+    white-space: nowrap;
+    display: block;
+    border-bottom: 1px solid #eee;
+    min-width: 120px;
+    cursor: pointer;
+}
+.note-template-container .note-template-item .label:hover {
+    background: aliceblue;
+}
+.note-template-container .note-template-item:last-child label {
+    border: 0;
+}
+.note-template-container .note-template-item .note-template-children {
+    position: absolute;
+    left: 100%;
+    top: 0;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    display: none;
+}
+.note-template-container .note-template-item:hover>.note-template-children {
+    display: block;
+}
+.note-template-container .note-template-item .has-children {
+    position: absolute;
+    right: 6px;
+    top: 0;
+    height: 25px;
+    line-height: 25px;
+    color: #bbb;
+}
+.note-template-container .note-template-item:hover>.has-children {
+    color: #444;
+}
+.note-templates-underlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: rgba(0,0,0,0.13);
+    display: none;
+}

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

@@ -246,10 +246,20 @@
                         </div>--}}
                         @foreach($note->sections as $section)
                         <div class="p-3 border-bottom note-section">
-                            <a class="font-weight-bold mb-2 d-flex align-items-center c-pointer edit-trigger">
-                                {{$section->sectionTemplate->title}}
-                                <span class="d-none if-not-edit"><i class="fa fa-edit ml-2"></i></span>
-                            </a>
+                            <div class="d-flex align-items-start">
+                                <a class="font-weight-bold mb-2 d-flex align-items-center c-pointer edit-trigger">
+                                    {{$section->sectionTemplate->title}}
+                                    <span class="d-none if-not-edit"><i class="fa fa-edit ml-2"></i></span>
+                                </a>
+                                <?php
+                                if(file_exists(storage_path('sections/'.$section->sectionTemplate->internal_name.'/templates.json'))) {
+                                    echo '<span class="position-relative d-none if-edit ml-3">' .
+                                        '<a href="#" class="note-templates-trigger">Templates</a>';
+                                    renderNoteTemplates(storage_path('sections/'.$section->sectionTemplate->internal_name.'/templates.json'));
+                                    echo '</span>';
+                                }
+                            ?>
+                            </div>
                             <div class="d-none if-not-edit  inset-comment">{!! !empty($section->summary_html) ? $section->summary_html : '-' !!}</div>
                             <div class="d-none if-edit">@include('sections/'.$section->sectionTemplate->internal_name.'/form')</div>
                         </div>
@@ -374,6 +384,7 @@
             </div>
         </div>
     </div>
+    <div class="note-templates-underlay"></div>
     <script>
         (function() {
             function init() {
@@ -434,18 +445,34 @@
                 $('.edit-trigger')
                     .off('click.edit-trigger')
                     .on('click.edit-trigger', function() {
-                        $(this).parent().toggleClass('edit');
-                        if($(this).parent().is('.edit')) {
-                            $(this).parent().siblings('.edit').removeClass('edit');
-                            if($(this).parent().find('[contenteditable]').length) {
-                                $(this).parent().find('[contenteditable]').first().focus();
+                        let editParent = $(this).closest('.note-section');
+                        editParent.toggleClass('edit');
+                        if(editParent.is('.edit')) {
+                            editParent.siblings('.edit').removeClass('edit');
+                            if(editParent.find('[contenteditable]').length) {
+                                editParent.find('[contenteditable]').first().focus();
                             }
                             else {
-                                $(this).parent().find('textarea:visible').first().focus();
+                                editParent.find('textarea:visible').first().focus();
                             }
                         }
                         return false;
-                    })
+                    });
+
+                $('.note-templates-trigger')
+                    .off('click.note-templates-trigger')
+                    .on('click.note-templates-trigger', function() {
+                        $('.note-templates-underlay').show();
+                        $(this).closest('.note-section').find('.note-template-container').show();
+                        return false;
+                    });
+
+                $('.note-templates-underlay')
+                    .off('click.note-templates-underlay')
+                    .on('click.note-templates-underlay', function() {
+                         $(this).hide();
+                         $('.note-template-container').hide();
+                    });
             }
             addMCInitializer('note-single', init);
         })();

storage/sections/subjective/templates.json

@@ -0,0 +1,59 @@
+[
+	{
+		"text": "Reason for depression",
+		"template": "Reason for depression - {value}",
+		"children": [
+			{
+				"text": "Weight loss"
+			},
+			{
+				"text": "Mood swings"
+			},
+			{
+				"text": "Anger issues"
+			},
+			{
+				"text": "Headache",
+				"type": "plus-minus"
+			},
+			{
+				"text": "Other (specify)",
+				"type": "text"
+			}
+		]
+	},
+
+	{
+		"text": "Reason for whatever else",
+		"template": "Reason for whatever else - {value}",
+		"children": [
+			{
+				"text": "Sleeplessness"
+			},
+			{
+				"text": "Fatigues"
+			},
+			{
+				"text": "Other types",
+				"template": "Other issues - {value}",
+				"children": [
+					{
+						"text": "Mood swings"
+					},
+					{
+						"text": "Anger issues"
+					},
+					{
+						"text": "Somethig else",
+						"type": "plus-minus"
+					},
+					{
+						"text": "Other (specify)",
+						"type": "text"
+					}
+				]
+			}
+		]
+	}
+
+]