Care months - entries - use RTE with shortcuts for details

public/css/shortcut.css

@@ -6,7 +6,7 @@
     display: none;
     min-width: 160px;
     max-width: 280px;
-    z-index: 98;
+    z-index: 99999;
 }
 .stag-shortcuts>.sc {
     font-size: 13px;

public/css/style.css

@@ -1191,3 +1191,6 @@ button.note-templates-trigger-assessment {
 .claim-line:last-child td {
     padding-bottom: 1.3rem;
 }
+.in-table-markup p:last-of-type {
+    margin-bottom: 0;
+}

public/js/yemi.js

@@ -461,7 +461,10 @@ var initMoes = function() {
 jQuery(document).ready(function () {
     var $ = jQuery;
     $('body').mousedown(function(e){
-        if($(e.target).closest('[moe]').length || $(e.target).closest('#create-shortcut-form').length || $(e.target).is('#create-shortcut-form')){
+        if($(e.target).closest('[moe]').length ||
+            $(e.target).closest('#create-shortcut-form').length ||
+            $(e.target).is('#create-shortcut-form') ||
+            $(e.target).is('.stag-shortcuts .sc')){
             return;
         }
         $('[moe] [url]:not([show])').hide();

resources/views/app/patient/care-month/dashboard.blade.php

@@ -5,6 +5,24 @@
 @extends ('layouts.patient')
 
 @section('inner-content')
+
+    <?php
+    $shortCutsObject = [];
+    foreach ($pro->shortcuts as $shortcut) {
+
+        // %replaceables%
+        $shortcut->text = str_replace("%AGE%", $patient->age_in_years, $shortcut->text);
+        $shortcut->text = str_replace("%GENDER%", $patient->sex, $shortcut->text);
+        $shortcut->text = str_replace("%NAME%", $patient->displayName(), $shortcut->text);
+
+        $shortCutsObject[] = [
+            "name" => $shortcut->shortcut,
+            "value" => $shortcut->text
+        ];
+    }
+    ?>
+    <script>window.userShortcuts = <?= json_encode($shortCutsObject); ?>;</script>
+
     @if($patient->has_mcp_done_onboarding_visit !== 'YES')
         <div class="pt-2 d-flex align-items-start">
             <h6 class="my-0 text-secondary d-flex align-items-start">
@@ -66,7 +84,7 @@
         </div>
     @else
 
-    <div class="">
+    <div id="care-month-container">
         <div class="pt-2 d-flex align-items-start">
             <h6 class="my-0 text-secondary d-flex align-items-start">
                 <a href="/patients/view/{{ $patient->uid }}/care-months" class="small text-decoration-none mr-3">
@@ -450,7 +468,7 @@
                                     <div class="mb-2">
                                         <div class="row">
                                             <div class="col-12">
-                                                <input type="text" name="contentText" class="form-control form-control-sm" rows="5" placeholder="Reviewed/managed patient measurements" value="Reviewed/managed patient measurements">
+                                                <div cm-rte data-content="Reviewed/managed patient measurements" data-name="contentText"></div>
                                             </div>
                                         </div>
                                     </div>
@@ -483,7 +501,7 @@
                             <th class="px-2 text-secondary border-bottom-0">Effective Date</th>
                             <th class="px-2 text-secondary border-bottom-0">Time</th>
                             <th class="px-2 text-secondary border-bottom-0">Created</th>
-                            {{--<th class="px-2 text-secondary border-bottom-0 w-50">Details</th>--}}
+                            <th class="px-2 text-secondary border-bottom-0 w-50">Details</th>
                             <th class="px-2 text-secondary border-bottom-0 delete-column">&nbsp;</th>
                         </tr>
                         </thead>
@@ -500,10 +518,10 @@
                                     <td class="px-2">
                                         {{friendly_date_time($entry->created_at)}}
                                     </td>
-                                    {{--<td class="px-2">
-                                        <div class="text-secondary text-s">{!! $entry->content_text !!}</div>
-                                        --}}{{--<div class="text-secondary text-sm">{{$entry->content_detail}}</div>--}}{{--
-                                    </td>--}}
+                                    <td class="px-2">
+                                        <div class="text-secondary in-table-markup">{!! $entry->content_text !!}</div>
+<!--                                        <div class="text-secondary text-sm">{{$entry->content_detail}}</div>-->
+                                    </td>
                                     <td class="px-2 text-center delete-column">
                                         @if(!$activeRMBill)
                                             <div moe relative>
@@ -1155,5 +1173,54 @@
 
     </div>
 
+    <script>
+        (function() {
+            function init() {
+                $('#care-month-container [cm-rte]').each(function() {
+
+                    $(this).wrap(
+                        $('<div class="border-left border-right rte-holder"/>')
+                            .attr('data-shortcuts', '')
+                    );
+
+                    // give a unique id to this editor instance
+                    var editorID = Math.ceil(Math.random() * 99999), fieldName = $(this).attr('data-name');
+
+                    var el = this;
+                    var existingContent = $(el).attr('data-content');
+                    var quill = new Quill(el, {
+                        theme: 'snow',
+                        modules: stagQuillConfig
+                    });
+
+                    var toolbar = $(quill.container).prev('.ql-toolbar');
+
+                    // add button for new shortcut
+                    var newSCButton = $('<button class="btn bg-white btn-sm btn-default text-primary w-auto px-2 border py-0 ' +
+                        'text-sm add-shortcut" data-editor-id="' + editorID + '">+ Shortcut</button>');
+                    toolbar.append(newSCButton);
+
+                    quill.root.innerHTML = existingContent;
+
+                    $('<input type="hidden" name="' + fieldName + '">').val(existingContent).insertAfter(el);
+
+                    quill.on('text-change', function(delta, oldDelta, source) {
+                        $(el).next('[name="' + fieldName + '"]').val(quill.root.innerHTML);
+                    });
+
+                    $(quill.container)
+                        .find('.ql-editor[contenteditable]')
+                        .attr('data-field', fieldName)
+                        .attr('data-editor-id', editorID)
+                        .attr('with-shortcuts', 1);
+
+                })
+            }
+
+            addMCInitializer('care-month-dashboard', init, '#care-month-container');
+
+        }).call(window);
+    </script>
+
     @endif
 @endsection