Note sections - templates support [WIP #3]

app/Helpers/helpers.php

@@ -92,7 +92,10 @@ if(!function_exists('renderNoteTemplates')) {
 
     function _renderNoteTemplate($template, $topLevel) {
         echo
-            '<div class="note-template-item" template="' . @$template->template . '">' .
+            '<div class="note-template-item" ' .
+                'template="' . (isset($template->template) ? $template->template : $template->text) . '" ' .
+                'type="' . (isset($template->type) ? $template->type : "value") . '" ' .
+                '>' .
             '<div class="note-template-text">';
         echo '<span class="label">' .
             '<input type="checkbox" />' .
@@ -122,8 +125,12 @@ if(!function_exists('renderNoteTemplates')) {
 //        echo '</pre>';
         echo '<div class="note-template-container">';
         echo '<div class="position-relative w-100">' .
+                '<div class="note-template-output">' .
+                    '<div class="font-weight-bold text-secondary">Result:</div>' .
+                    '<div class="note-template-output-text"></div>' .
+                '</div>' .
                 '<div class="note-template-buttons d-flex align-items-center">' .
-                    '<button class="btn btn-sm btn-default bg-white border text-primary border-primary">Apply</button>' .
+                    '<button class="btn btn-sm btn-default bg-white border text-primary border-primary note-template-apply-trigger">Apply</button>' .
                     '<button class="btn btn-sm btn-default bg-light border text-secondary border-secondary note-template-close-trigger">Close</button>' .
                 '</div>' .
             '</div>';

public/css/style.css

@@ -514,7 +514,9 @@ input.search_field, textarea.search_field {
     position: absolute;
     bottom: 100%;
     right: 0;
-    padding-bottom: 3px;
+    height: 27px;
+    padding: 0 3px;
+    background: #fff;
 }
 .note-template-buttons button {
     font-size: 10px;
@@ -522,3 +524,24 @@ input.search_field, textarea.search_field {
     margin-left: 5px;
     border-radius: 2px;
 }
+.note-template-buttons button:first-child {
+    margin-left: 0;
+}
+.note-template-output {
+    position: absolute;
+    bottom: calc(100% + 26px);
+    left: 0;
+    padding: 3px 6px;
+    background: #f7f7f7;
+    min-width: 100%;
+    border-radius: 3px;
+}
+.note-template-output-text {
+
+}
+.note-template-output .note-template-output-line {
+    font-size: 11px;
+    width: max-content;
+    max-width: 500px;
+    margin: 0;
+}

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

@@ -1,6 +1,8 @@
 <?php
 /** @var App\Models\Note $note */
 /** @var App\Models\Pro $pro */
+/** @var App\Models\Section $section */
+/** @var $allSections */
 ?>
 @extends ('layouts.patient')
 
@@ -506,10 +508,70 @@
                                 .find('textarea')
                                 .first().focus();
                         }
+
+                        generateTemplateOutput();
+
+                        return false;
+                    });
+
+                $('.note-template-apply-trigger')
+                    .off('mousedown.note-templates-apply')
+                    .on('mousedown.note-templates-apply', function() {
+                        let result = $('.note-template-output-text:visible').first().html();
+                        $('.note-templates-underlay').hide();
+                        $('.note-template-container').hide();
+                        let editor  = $('.ql-editor[contenteditable]').first();
+                        result = $.trim(editor.text() !== '' ? editor.html() : '') + result;
+                        editor.html(result).focus();
                         return false;
                     });
 
+                $('.note-template-item textarea')
+                    .off('input paste')
+                    .on('input paste', function() {
+                        generateTemplateOutput();
+                    });
+
+            }
+
+            function generateOutputForNode(_node) {
+                let template = _node.attr('template'),
+                    value = template;
+                if(value.indexOf('{text}') !== -1) {
+                    value = value.replace('{text}', _node.find('>.note-template-children>textarea').first().val());
+                }
+                else if(value.indexOf('{children}') !== -1) {
+                    let values = [];
+                    _node.find('>.note-template-children>.note-template-item.selected').each(function() {
+                        values.push(generateOutputForNode($(this)));
+                    });
+                    let combined = '';
+                    for (let i = 0; i < values.length; i++) {
+                        combined += values[i];
+                        if(values.length > 1 && i <= values.length - 2) {
+                            if(i === values.length - 2) {
+                                combined += ' and ';
+                            }
+                            else {
+                                combined += ', ';
+                            }
+                        }
+                    }
+                    value = value.replace('{children}', combined);
+                }
+                return value;
+            }
+
+            function generateTemplateOutput() {
+                let container = $('.note-template-container:visible').first();
+                if(!container.length) return '';
+                let lines = [];
+                container.find('>.note-template-item.selected').each(function() {
+                    lines.push('<p class="note-template-output-line">' + generateOutputForNode($(this)) + '</p>');
+                });
+                $('.note-template-output-text:visible').first().html(lines.join(''));
             }
+
             addMCInitializer('note-single', init);
         })();
     </script>

storage/sections/subjective/templates.json

@@ -1,10 +1,11 @@
 [
 	{
 		"text": "Reason for depression",
-		"template": "Reason for depression - {value}",
+		"template": "Reasons for depression are {children}",
 		"children": [
 			{
-				"text": "Weight loss"
+				"text": "Weight loss",
+                "template": "Loss of weight!"
 			},
 			{
 				"text": "Mood swings"
@@ -18,14 +19,15 @@
 			},
 			{
 				"text": "Other (specify)",
-				"type": "text"
-			}
+                "template" : "{text}",
+                "type": "text"
+            }
 		]
 	},
 
 	{
 		"text": "Reason for whatever else",
-		"template": "Reason for whatever else - {value}",
+		"template": "Reason for whatever else - {children}",
 		"children": [
 			{
 				"text": "Sleeplessness"
@@ -35,7 +37,7 @@
 			},
 			{
 				"text": "Other types",
-				"template": "Other issues - {value}",
+				"template": "Other issues - {children}",
 				"children": [
 					{
 						"text": "Mood swings"
@@ -44,16 +46,17 @@
 						"text": "Anger issues"
 					},
 					{
-						"text": "Somethig else",
+						"text": "Something else",
 						"type": "plus-minus"
 					},
 					{
 						"text": "Other (specify)",
-						"type": "text"
+                        "template" : "{text}",
+                        "type": "text"
 					}
 				]
 			}
 		]
 	}
 
-]
+]