Autosave for segments (wip)

public/css/style.css

@@ -2218,4 +2218,10 @@ tr.relevant-to-visit td:nth-child(1) {
 }
 tr.relevant-to-visit td:nth-child(2) {
     color: #17a2b8;
+}
+.autosave-indicator {
+    display: none;
+}
+.autosave-indicator.show {
+    display: block;
 }

public/js/mc.js

@@ -411,7 +411,7 @@ function initPatientPresenceIndicator() {
 
 // not really the place for this!
 // find a better place to put this
-window.saveVisitForm = function(_trigger, _silent = false, _close = false) {
+window.saveVisitForm = function(_trigger, _silent = false, _close = false, _doneCallback = null) {
     let form = $(_trigger).closest('form');
 
     if (!_silent && !form[0].checkValidity()) {
@@ -482,10 +482,12 @@ window.saveVisitForm = function(_trigger, _silent = false, _close = false) {
 
     $.post(form.attr('url'), form.serialize(), _data => {
         if(!hasResponseError(_data)) {
+            if(typeof window.updateAllSegmentsInResponse !== 'undefined' && noteSection.length) {
+                window.updateAllSegmentsInResponse(_data);
+            }
             if(!_silent) {
                 hideMask();
-                if(typeof updateAllSegmentsInResponse !== 'undefined' && noteSection.length) {
-                    updateAllSegmentsInResponse(_data);
+                if(noteSection.length) {
                     if (closeOnSave) {
                         noteSection.removeClass('edit');
                         let segmentUid = form.find('[name="segmentUid"]').first();
@@ -504,6 +506,9 @@ window.saveVisitForm = function(_trigger, _silent = false, _close = false) {
             if(_close) {
                 closeStagPopup();
             }
+            if(!!_doneCallback) {
+                _doneCallback();
+            }
         }
     }, 'json');
     return false;

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

@@ -2344,6 +2344,13 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="ml-auto mr-5 nbt-container border-info d-inline-flex align-self-stretch align-items-center">
+                            <span class="autosave-indicator saving text-sm text-secondary">Saving changes &hellip;</span>
+                            <span class="autosave-indicator saved text-sm text-secondary">
+                                <i class="fa fa-check"></i>
+                                Saved
+                            </span>
+                        </div>
                     </div>
                     @endif
 

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

@@ -127,8 +127,26 @@
                     let dataObject = {};
                     dataObject[fieldName] = content;
                     var dataValue = JSON.stringify(dataObject);
-                    $(el).closest('.note-section').find('input[name=data]').val(dataValue);
-                };
+                    let pElem = $(el).closest('[visit-moe]');
+                    if(!pElem.length) {
+                        pElem = $(el).closest('form');
+                    }
+                    let v = pElem.find('input[name=data]').val();
+                    if(!!v) {
+                        try {
+                            v = JSON.parse(v);
+                            v[fieldName] = content;
+                            v = JSON.stringify(v);
+                        }
+                        catch (e) {
+                            v = JSON.stringify(dataObject);
+                        }
+                    }
+                    else {
+                        v = JSON.stringify(dataObject);
+                    }
+                    pElem.find('input[name=data]').val(v);
+                }
 
                 quill.on('text-change', onTextChange);
 
@@ -258,6 +276,58 @@
                 }
                 return false;
             });
+
+            const debounce = (func, wait) => {
+                let timeout;
+                return function executedFunction(...args) {
+                    const later = () => {
+                        clearTimeout(timeout);
+                        func(...args);
+                    };
+                    clearTimeout(timeout);
+                    timeout = setTimeout(later, wait);
+                };
+            };
+
+            let debouncedSaver = debounce(function(_trigger) {
+                $('.autosave-indicator').removeClass('show');
+                $('.autosave-indicator.saving').addClass('show');
+                saveVisitForm(_trigger, true, false, () => {
+                    $('.autosave-indicator').removeClass('show');
+                    $('.autosave-indicator.saved').addClass('show');
+                    window.setTimeout(() => {
+                        $('.autosave-indicator').removeClass('show');
+                    }, 1000);
+                });
+            }, 500);
+
+            // auto save for segments with edit-mode
+            $(document).off('input.auto-save-input', '.visit-segment.edit[data-segment-template-name] [visit-moe] form input[type="text"]');
+            $(document).on('input.auto-save-input', '.visit-segment.edit[data-segment-template-name] [visit-moe] form input[type="text"]', function () {
+                debouncedSaver(this);
+            });
+            $(document).off('change.auto-save-select-change', '.visit-segment.edit[data-segment-template-name] [visit-moe] form select');
+            $(document).on('change.auto-save-select-change', '.visit-segment.edit[data-segment-template-name] [visit-moe] form select', function () {
+                debouncedSaver(this);
+            });
+            $(document).off('change.auto-save-checkbox-change', '.visit-segment.edit[data-segment-template-name] [visit-moe] form input[type="checkbox"]');
+            $(document).on('change.auto-save-checkbox-change', '.visit-segment.edit[data-segment-template-name] [visit-moe] form input[type="checkbox"]', function () {
+                debouncedSaver(this);
+            });
+            $(document).off('change.auto-save-radio-change', '.visit-segment.edit[data-segment-template-name] [visit-moe] form input[type="radio"]');
+            $(document).on('change.auto-save-radio-change', '.visit-segment.edit[data-segment-template-name] [visit-moe] form input[type="radio"]', function () {
+                debouncedSaver(this);
+            });
+            $(document).off('input.auto-save-textarea-input', '.visit-segment.edit[data-segment-template-name] [visit-moe] form textarea');
+            $(document).on('input.auto-save-textarea-input', '.visit-segment.edit[data-segment-template-name] [visit-moe] form textarea', function () {
+                debouncedSaver(this);
+            });
+
+            // NOTE: this doesn't work yet
+            $(document).off('rich-text-input.auto-save-rich-text-input', '.visit-segment.edit[data-segment-template-name] [visit-moe] form [note-rte]');
+            $(document).on('rich-text-input.auto-save-rich-text-input', '.visit-segment.edit[data-segment-template-name] [visit-moe] form [note-rte]', function () {
+                debouncedSaver(this);
+            });
         }
 
         addMCInitializer('note-segments-list', init, '#note-segments-list');