Merge branch 'dev' of rav.triplestart.com:jmudaka/stagfe2 into dev

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, true, _silent);
+            }
             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

@@ -1,12 +1,12 @@
 <script>
     (function() {
 
-        window.updateAllSegmentsInResponse = function(_response, _updateListeners = true) {
+        window.updateAllSegmentsInResponse = function(_response, _updateListeners = true, _updateOnlySummary = false) {
             if(!hasResponseError(_response)) {
 
                 // refresh primary segment (where uid is _response.data.uid)
                 if(_response.data && _response.data.uid) {
-                    updateSegmentByUid(_response.data.uid, _response.data.summaryHtml, _response.data.editHtml);
+                    updateSegmentByUid(_response.data.uid, _response.data.summaryHtml, _response.data.editHtml, _updateOnlySummary);
                 }
 
                 // refresh listening segments
@@ -19,7 +19,7 @@
                                 $.post('/api/visit/updateSegmentHtml', {
                                     segmentUid: _response.data.listenerSegmentUids[i]
                                 }, _data => {
-                                    updateAllSegmentsInResponse(_data, false);
+                                    updateAllSegmentsInResponse(_data, false, _updateOnlySummary);
 
                                     // ugly hack!
                                     if(listenerSegmentTemplateName === 'medrisk_vigilence') {
@@ -37,11 +37,11 @@
             }
         }
 
-        window.updateSegmentByUid = function(_uid, _summaryHtml, _editHtml) {
+        window.updateSegmentByUid = function(_uid, _summaryHtml, _editHtml, _updateOnlySummary) {
             let segment = $('.note-section[data-segment-uid="' + _uid + '"]');
             if(segment && segment.length) {
                 segment.find('.summary-container').html(_summaryHtml);
-                segment.find('.edit-container').html(_editHtml);
+                if(!_updateOnlySummary) segment.find('.edit-container').html(_editHtml);
 
                 // special case for lifestyle
                 let popupContainer = $('[stag-popup-key="segment-popup-' + segment.attr('data-segment-template-name') + '"] .ls-segment-edit-html');
@@ -49,15 +49,17 @@
                     popupContainer.html(_editHtml);
                 }
 
-                initRTEs(segment);
-                initSegmentMoes(segment);
-                initMoes();
-                initStagSuggest();
-                if(window.segmentInitializers) {
-                    let internalName = segment.attr('data-segment-template-name');
-                    if(window.segmentInitializers.hasOwnProperty(internalName) &&
-                        typeof window.segmentInitializers[internalName] === 'function') {
-                        window.segmentInitializers[internalName].call(window);
+                if(!_updateOnlySummary) {
+                    initRTEs(segment);
+                    initSegmentMoes(segment);
+                    initMoes();
+                    initStagSuggest();
+                    if(window.segmentInitializers) {
+                        let internalName = segment.attr('data-segment-template-name');
+                        if(window.segmentInitializers.hasOwnProperty(internalName) &&
+                            typeof window.segmentInitializers[internalName] === 'function') {
+                            window.segmentInitializers[internalName].call(window);
+                        }
                     }
                 }
             }
@@ -122,13 +124,36 @@
 
                 quill.root.innerHTML = existingContent;
 
-                let onTextChange = function(delta, oldDelta, source) {
+                let setValue = function(delta, oldDelta, source) {
                     var content = quill.root.innerHTML;
                     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);
+                }
+
+                let onTextChange = function(delta, oldDelta, source) {
+                    setValue(delta, oldDelta, source);
+                    $(el).trigger('rich-text-input');
+                }
 
                 quill.on('text-change', onTextChange);
 
@@ -139,7 +164,7 @@
                     .attr('with-shortcuts', 1);
 
                 // set value initially
-                onTextChange();
+                setValue();
             });
         }
 
@@ -258,6 +283,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');