Update single-note functionality

public/css/style.css

@@ -188,4 +188,15 @@ body>nav.navbar {
 .cancelled-item {
     opacity: 0.5;
 }
-
+.note-content:not([auto-edit]) {
+    padding: 1rem;
+    padding-bottom: 0;
+    cursor: pointer;
+}
+.mcp-theme-1 .ql-container, .mcp-theme-1 .ql-toolbar {
+    border-left: 0;
+    border-right: 0;
+}
+.mcp-theme-1 .ql-editor[contenteditable] {
+    min-height: 120px;
+}

public/js/mc.js

@@ -94,9 +94,10 @@ $(document).ready(function () {
     if (body.is('.stag_rhs_collapsed')) {
         icon.removeClass().addClass('fa fa-arrow-left');
     }
-    initPrimaryForm();
     initCreateNote();
+    initQuillEdit();
     initFastLoad();
+    initPrimaryForm();
     if(typeof initializeCalendar !== 'undefined') {
         initializeCalendar();
     }
@@ -204,9 +205,10 @@ function onFastLoaded(_data, _href, _history) {
         content += '<script src="/js/yemi.js?_=4"></script>';
         targetParent.html(content);
         window.setTimeout(function() {
-            initPrimaryForm();
             initCreateNote();
+            initQuillEdit();
             initFastLoad(targetParent);
+            initPrimaryForm();
         }, 50);
         if(typeof initializeCalendar !== 'undefined') {
             initializeCalendar();
@@ -244,8 +246,15 @@ function fastLoad(_href, _history = true, _useCache = true) {
 }
 
 function initPrimaryForm() {
-    if($('.primary-form:visible').length) {
-        $('.primary-form:visible').first().find('input, textarea, select').first().focus().select();
+    var primaryForm = $('.primary-form:visible');
+    if (primaryForm.length) {
+        var rte = primaryForm.first().find('[contenteditable="true"]').first();
+        if(rte.length) {
+            rte.focus().select();
+        }
+        else {
+            primaryForm.first().find('input, textarea, select').first().focus().select();
+        }
     }
 }
 
@@ -278,3 +287,43 @@ function initCreateNote() {
             }, 'json');
         });
 }
+
+function initQuillEdit(_selector = '.note-content[auto-edit]') {
+
+    $(document)
+        .off('click.enable-edit', '.note-content:not([auto-edit])')
+        .on('click.enable-edit', '.note-content:not([auto-edit])', function() {
+            $(this).attr('auto-edit', 1);
+            initQuillEdit();
+            initPrimaryForm();
+        });
+
+    if(!$(_selector).length) return;
+    var noteUid = $(_selector).attr('data-note-uid');
+    var qe = new Quill(_selector, {
+        theme: 'snow'
+    });
+    var toolbar = $(qe.container).prev('.ql-toolbar');
+    var saveButton = $('<button class="btn btn-sm btn-primary w-auto px-3 py-0 text-sm text-white save-note-content" disabled>Save</button>');
+    toolbar.append(saveButton);
+    saveButton.on('click', function() {
+        $.post('/api/note/putFreeTextHtml', {
+            uid: noteUid,
+            freeTextHtml: qe.root.innerHTML,
+        }, function(_data) {
+            if (!_data.success) {
+                toastr.error(_data.message);
+            }
+            else {
+                // toastr.success('Note saved');
+                // saveButton.prop('disabled', true);
+                fastLoad(window.location.pathname, false, false);
+            }
+        }, 'json');
+    });
+    qe.on('text-change', function() {
+        saveButton.prop('disabled', false);
+    });
+}
+
+

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

@@ -31,7 +31,7 @@
     </div>
 
     <div class="card mb-0 {{ $note->is_cancelled ? 'cancelled-item' : '' }}">
-        <div class="card-header d-flex align-items-start px-3">
+        <div class="card-header d-flex align-items-start px-3 border-bottom-0">
             <div class="pr-2">
                 {{$note->title}}
                 <div moe>
@@ -237,13 +237,17 @@
                 </div>
             </div>
         </div>
-        <div class="card-body p-3">
+        <div class="card-body p-0">
             <div>
 
-                <div class="mb-2">
+                <div class="mb-3">
                     <div>
-                        {!! $note->free_text_html !!}
-                        <div moe class="d-inline">
+                        <div class="primary-form">
+                            <div class="note-content"
+                                 data-note-uid="{{ $note->uid  }}"
+                                 {{ empty($note->free_text_html) ? 'auto-edit' : '' }}>{!! empty($note->free_text_html) ? 'Note Content' : $note->free_text_html !!}</div>
+                        </div>
+                        {{--<div moe class="d-inline">
                             <a show start><i class="fa fa-edit"></i></a>
                             <form url="/api/note/putFreeTextHtml">
                                 <input type="hidden" name="uid" value="{{$note->uid}}">
@@ -257,23 +261,24 @@
                                     <button class="btn btn-default border btn-sm" cancel>Cancel</button>
                                 </div>
                             </form>
-                        </div>
+                        </div>--}}
                     </div>
                 </div>
 
                 @if($note->bills->count())
-                    <div class="mt-2">
-                        <table class="table table-sm tabe-striped mb-0">
+                    <div class="mt-2 px-3">
+                        <p class="font-weight-bold mb-2 text-secondary">Bills</p>
+                        <table class="table table-sm tabe-striped mb-3 border-left border-right border-bottom">
                             <thead class="bg-light">
                             <tr>
-                                <th class="border-bottom-0 w-25">Code</th>
+                                <th class="border-bottom-0 w-25 pl-3">Code</th>
                                 <th class="border-bottom-0"></th>
                             </tr>
                             </thead>
                             <tbody>
                             @foreach ($note->bills as $bill)
                                 <tr>
-                                    <td class="{{ $bill->is_cancelled ? 'text-secondary' : '' }}">{{$bill->code}}</td>
+                                    <td class="pl-3 {{ $bill->is_cancelled ? 'text-secondary' : '' }}">{{$bill->code}}</td>
                                     <td>
                                         <div class="d-flex align-items-center">
                                             @if(!$bill->is_cancelled)
@@ -323,6 +328,43 @@
                             </tbody>
                         </table>
                     </div>
+                @else
+                    <div class="my-3 px-3 d-flex">
+                        <p class="font-weight-bold mb-0 text-secondary">No bills in this note</p>
+                        <span class="mx-2 text-secondary">|</span>
+                        <span moe class="">
+                            <a class="" href="" show start>Create Bill</a>
+                            <form url="/api/bill/createForNote">
+                                <input type="hidden" name="noteUid" value="{{$note->uid}}">
+                                <div class="mb-2">
+                                    <label for="" class="text-secondary text-sm">Effective Date</label>
+                                    <input type="date" name="effectiveDate" class="form-control form-control-sm" required>
+                                </div>
+                                <div class="mb-2">
+                                    <input type="text" name="code" placeholder="Code" class="form-control form-control-sm" required>
+                                </div>
+                                <div class="mb-2">
+                                    <input type="text" name="reason1" placeholder="Reason 1" class="form-control form-control-sm">
+                                </div>
+                                <div class="mb-2">
+                                    <input type="text" name="reason2" placeholder="Reason 2" class="form-control form-control-sm">
+                                </div>
+                                <div class="mb-2">
+                                    <input type="text" name="serviceLocation" placeholder="Service Location" class="form-control form-control-sm">
+                                </div>
+                                <div class="mb-2">
+                                    <input type="text" name="modifier" placeholder="Modifier" class="form-control form-control-sm">
+                                </div>
+                                <div class="mb-2">
+                                    <input type="number" name="numberOfUnits" placeholder="Number of Units" class="form-control form-control-sm">
+                                </div>
+                                <div class="">
+                                    <button class="btn btn-primary btn-sm" submit>Submit</button>
+                                    <button class="btn btn-default border btn-sm" cancel>Cancel</button>
+                                </div>
+                            </form>
+                        </span>
+                    </div>
                 @endif
             </div>
         </div>

resources/views/layouts/template.blade.php

@@ -10,6 +10,10 @@
     <!-- Fonts -->
     <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
 
+    {{-- Quill RTE --}}
+    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
+    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
+
     <!-- <link href="{{ asset('bootstrap-4.5.0/css/bootstrap.css') }}" rel="stylesheet"> -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
     <link href="{{ asset('/css/app.css') }}" rel="stylesheet">