Note sections - templates support [WIP #2]

app/Helpers/helpers.php

@@ -93,7 +93,11 @@ 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>';
+            '<div class="note-template-text">';
+        echo '<span class="label">' .
+            '<input type="checkbox" />' .
+            '<span>' . $template->text . '</span>' .
+            '</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">';
@@ -102,6 +106,12 @@ if(!function_exists('renderNoteTemplates')) {
             }
             echo '</div>';
         }
+        else if(isset($template->type) && $template->type === 'text') {
+            echo '<i class="fa fa-chevron-right has-children"></i>';
+            echo '<div class="note-template-children">';
+            echo '<textarea class="form-control form-control-sm"></textarea>';
+            echo '</div>';
+        }
         echo '</div>';
     }
 
@@ -111,6 +121,12 @@ if(!function_exists('renderNoteTemplates')) {
 //        print_r($templates);
 //        echo '</pre>';
         echo '<div class="note-template-container">';
+        echo '<div class="position-relative w-100">' .
+                '<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-light border text-secondary border-secondary note-template-close-trigger">Close</button>' .
+                '</div>' .
+            '</div>';
         foreach ($templates as $template) {
             _renderNoteTemplate($template, true);
         }

public/css/style.css

@@ -436,11 +436,12 @@ input.search_field, textarea.search_field {
 /* note templates */
 .note-template-container {
     position: absolute;
-    z-index: 999;
+    z-index: 10002;
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 3px;
     display: none;
+    min-width: 200px;
 }
 .note-template-container .note-template-item {
     position: relative;
@@ -450,14 +451,22 @@ input.search_field, textarea.search_field {
     padding: 3px 6px;
     padding-right: 25px;
     white-space: nowrap;
-    display: block;
+    display: flex;
+    align-items: center;
     border-bottom: 1px solid #eee;
     min-width: 120px;
     cursor: pointer;
 }
-.note-template-container .note-template-item .label:hover {
+.note-template-container .note-template-item .label:hover,
+.note-template-container .note-template-item.selected>.note-template-text>.label {
     background: aliceblue;
 }
+.note-template-container .note-template-item .label>input[type="checkbox"] {
+    pointer-events: none;
+    margin: 0;
+    margin-right: 4px;
+    height: 11px;
+}
 .note-template-container .note-template-item:last-child label {
     border: 0;
 }
@@ -470,9 +479,9 @@ input.search_field, textarea.search_field {
     border-radius: 3px;
     display: none;
 }
-.note-template-container .note-template-item:hover>.note-template-children {
+/*.note-template-container .note-template-item.selected:hover>.note-template-children {
     display: block;
-}
+}*/
 .note-template-container .note-template-item .has-children {
     position: absolute;
     right: 6px;
@@ -492,4 +501,24 @@ input.search_field, textarea.search_field {
     width: 100%;
     background: rgba(0,0,0,0.13);
     display: none;
+    z-index: 10001;
+}
+.note-template-container textarea {
+    height: 100px;
+    border-radius: 0;
+    border-color: #ccc;
+    padding: 5px 10px;
+    display: block;
+}
+.note-template-buttons {
+    position: absolute;
+    bottom: 100%;
+    right: 0;
+    padding-bottom: 3px;
+}
+.note-template-buttons button {
+    font-size: 10px;
+    padding: 2px 5px;
+    margin-left: 5px;
+    border-radius: 2px;
 }

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

@@ -467,12 +467,48 @@
                         return false;
                     });
 
-                $('.note-templates-underlay')
+                $('.note-templates-underlay, .note-template-close-trigger')
                     .off('click.note-templates-underlay')
                     .on('click.note-templates-underlay', function() {
-                         $(this).hide();
+                        $('.note-templates-underlay').hide();
                          $('.note-template-container').hide();
                     });
+
+                $('.note-template-item .label')
+                    .off('click.note-template-label')
+                    .on('click.note-template-label', function() {
+                        let item = $(this).closest('.note-template-item');
+                        let isChecked = $(this).find('>input[type="checkbox"]').prop('checked');
+                        let hasChildren = !!item.find('>.note-template-children').length,
+                            childrenShown = item.find('>.note-template-children:visible').length;
+
+                        if(isChecked && hasChildren && !childrenShown) { // just show
+                            $('.note-template-children').hide();
+                            $(this).parents('.note-template-children').show();
+                            item.find('>.note-template-children').show()
+                                .find('textarea').first().focus();
+                            return false;
+                        }
+
+                        $(this).find('>input[type="checkbox"]').prop('checked', !isChecked);
+                        isChecked = !isChecked;
+                        if(isChecked) {
+                            item.addClass('selected');
+                        }
+                        else {
+                            item.removeClass('selected');
+                        }
+                        $('.note-template-children').hide();
+                        $(this).parents('.note-template-children').show();
+                        if(isChecked) {
+                            item.find('>.note-template-children')
+                                .show()
+                                .find('textarea')
+                                .first().focus();
+                        }
+                        return false;
+                    });
+
             }
             addMCInitializer('note-single', init);
         })();